【ajax实战02】数据管理网站—验证码登录

一:数据提交(提交手机验证码)

核心思路整理

利用form-serialize插件,收集对象形式的表单数据后,一并提交给服务器。后得到返回值,进一步操作

基地址:

axios.defaults.baseURL = 'http://geek.itheima.net'

设置基地址作用:为多个页面的axios请求设置统一的基础服务器地址,用来获取或提交数据。
如果多个页面要同时修改服务器的地址,可以通过修改基地址的方式进行快速统一修改。因为数据的获取以及请求,是根据具体的需求,利用baseURL+url的字符串拼接方式访问的。

二:警告框的显示和隐藏(alert)

在这里插入图片描述
显示登录成功或者显示登录失败的alert提示框

核心思路:

  1. 该功能会多次在不同页面和场景下使用,因此首要的是选择封装函数的思想
  2. 函数首先实现的是弹出框的显示以及显示后的隐藏
  3. 三元表达式+setTimeout实现
  4. 在js中只需要利用函数调用方式,传递布尔值以及提示消息
function myAlert(isSuccess, msg) {const alert = document.querySelector('.alert')alert.classList.add(isSuccess ? 'alert-success' : 'alert-danger')alert.innerHTML = msgalert.classList.add('show')setTimeout(() => {alert.classList.remove(isSuccess ? 'alert-success' : 'alert-danger')alert.innerHTML = ''alert.classList.remove('show')}, 1500);
}

为什么可以只在js调用函数

我们对于警示框的显示或隐藏是基于服务器对于我们的返回值是正确或错误,因此利用axios函数中then、catch已经达到判断是正确或错误(then是标记成功后可以执行、catch是标记失败后执行的)。因此,我们可以利用函数传递true或false

三:完整验证码登录流程(真实流程)

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/35683.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

制作一个智能体:抖音热点话题文案制作助手

文章目录 第一步,添加助手第二步,选择语聚GPT第三步,填写相关信息第四步,工具中选择抖音(普通号)第五步,选择“查询热门视频数据”第六步,测试总结 这篇文章,我们手把手的演示开发一个智能体&am…

leetcode119 杨辉三角②

给定一个非负索引 rowIndex,返回「杨辉三角」的第 rowIndex 行。 在「杨辉三角」中,每个数是它左上方和右上方的数的和。 示例 1: 输入: rowIndex 3 输出: [1,3,3,1]示例 2: 输入: rowIndex 0 输出: [1]示例 3: 输入: rowIndex 1 输出: [1,1] pub…

宠物空气净化器热卖爆款,希喂、小米、352猫用空气净化器真实PK

相信大漫天多数养猫家庭都会有一个烦恼:猫咪们的猫实在是太多了,无法忍受家里面漫天飞舞的浮毛和难闻的猫猫便臭。作为养猫多年的过来人我尝试过很多种方法清理这些猫浮毛和异味,但都以失败告终。 直到后面看到一个宠物博主推荐的宠物空气净…

环路滤波器

块效应产生的原因 块效应指视频边界不连续的变化,我们在观看视频的时候,在运动剧烈的场景常能观察到图像出现小方块,小方块在边界处呈现不连续的效果(如下图),这种现象被称为块效应(blocking artifact)。 造成这种现象的主要原因有两点: DCT量化误差导致运动补偿导致…

使用SpringBoot整合Servlet

一、SpringBoot和Servlet的整合 1、用注解WebServlet配置Servlet映射 创建一个SpringBoot的web工程,在工程用创建一个Servlet 2、在SpringBoot的启动类上加注解ServletComponentScan 二、额外的方式 1、不使用WebServlet配置Servlet映射 创建一个SpringBoot工…

RabbitMQ延时队列(实现定时任务)

消息的TTL(Time To Live)就是消息的存活时间。 RabbitMQ可以对队列和消息分别设置TTL。 对队列设置存活时间,就是队列没有消费者连着的保留时间。 对每一个单独的消息单独的设置存活时间。超过了这个时间,我们认为这个消息就死了,称之为死…

镜头下的光学

说实话,当我看到几何光学的内容全是初中的解析几何的时候,我就觉得讲的方式太原始了,而且太过复杂也看不懂。所以我尝试做了数学建模,发现建模之后模型可以解释一些物理现象,也不会有矛盾的地方,那就算过得…

【Python系列】探索 Python 环境管理工具:conda 与 pip 的比较

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

简过网:专科生可以考的编制岗位有哪些?这5个铁饭碗要抓住了!

专科生可以考的编制岗位有哪些?以下这几种可以考的,尤其是应届毕业生,一定要抓住机会哦! ​ 一、三支一扶:专科生可报考,期满可转编。 三支一扶:支农、支医生、支教、扶贫 工作时间一般为2年&…

秋招Java后端开发冲刺——非关系型数据库篇(Redis)

一、非关系型数据库 1. 主要针对的是键值、文档以及图形类型数据存储。 2. 特点: 特点说明灵活的数据模型支持多种数据模型(文档、键值、列族、图),无需预定义固定的表结构,能够处理各种类型的数据。高扩展性设计为水…

高校心理咨询管理系统

摘 要 随着高校学生心理问题的增多,心理咨询服务在高校中的重要性日益凸显。然而,传统的心理咨询管理方式存在着诸多问题,如信息不透明、咨询师资源不足等。为了解决这些问题,本文设计并实现了一种基于Java Web的高校心理咨询管理…

浸式冷却设计参数

每天一篇行业发展资讯,让大家更及时了解外面的世界。 更多资讯,请关注B站/公众号【莱歌数字】,有视频教程~~ 两相被动浸入冷却是指使用改变相的沸腾液体来去除一个或多个表面的热量的冷却系统。 然后蒸汽被移动到冷凝器,然后被…

LaTeX中添加矩阵分块虚线并设置虚线疏密

对于大型矩阵,有时需要添加分块虚线。 方法为使用arydshln宏包,然后在array环境中设置虚线。需要注意的是,使用矩阵环境需要搭配amsmath宏包使用,且需放在amsmath宏包之后。即导言区设置为 \usepackage{amsmath} \usepackage{ary…

日语培训日语等级考试柯桥小语种学习语言学校

什么是外来语 外来语是指在日本的国语中使用的来源于外国语言的词汇。但狭义上的外来语则是指来源于欧美国家语言的词汇,其中大部分是来源于英美语系的词汇。日语中的汉语词汇很多,大多是自古以来从中国引进的,从外来语的定义看,汉…

NLP逻辑层次模型|跳出局限,站在更高维度认识自己

什么是NLP逻辑层次模型 N-Neuro:指神经系统,包括生理基础(大脑)和思维运作过程 L-Linguistic:指语言,感觉信号输出——构成意思的过程 P-Programming:指程序,大脑产生某结论后要具体…

【干货】Vue3 组件通信方式详解

前言 毫无疑问,组件通信是Vue中非常重要的技术之一,它的出现能够使我们非常方便的在不同组件之间进行数据的传递,以达到数据交互的效果。所以,学习组件通信技术是非常有必要的,本文将总结Vue中关于组件通信的八种方式…

ArcGIS定义1.5度带坐标系与投影转换

​ 点击下方全系列课程学习 点击学习—>ArcGIS全系列实战视频教程——9个单一课程组合系列直播回放 点击学习——>遥感影像综合处理4大遥感软件ArcGISENVIErdaseCognition 对于ArcGIS如何定义高斯克吕格3度带、6度带,我相信大部分人都是比较清楚的&#xff0…

OAuth 2.0资源授权机制与安全风险分析

文章目录 前言OAuth2.01.1 OAuth应用1.2 OAuth基础1.3 授权码模式1.4 其它类模式1.5 openid连接 安全风险2.1 隐式授权劫持2.2 CSRF攻击风险2.3 Url重定向漏洞2.4 scope校验缺陷 总结 前言 OAuth 全称为Open Authorization(开放授权),OAuth …

使用API有效率地管理Dynadot域名,为文件夹中的域名进行域名停放

关于Dynadot Dynadot是通过ICANN认证的域名注册商,自2002年成立以来,服务于全球108个国家和地区的客户,为数以万计的客户提供简洁,优惠,安全的域名注册以及管理服务。 Dynadot平台操作教程索引(包括域名邮…

“RLC串联正弦稳态电路的仿真研究”课程设计,高分资源,匠心制作,下载可用。强烈推荐!!!

1.设计目的 用 Multisim 电路仿真软件,对一个 RLC 串联电路进行正弦稳态电路分析。 2任务分析 2.1任务要求1 在 Multisim 中搭建一个 RLC 串联电路,其中 R、 L、 C、正弦激励源的振幅Vp和频率 f 等所有参数均可自己任意设置(不建议都采用…