【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…

Dxf库中的DL_Codes类

在 DXF 文件格式中,DL_Codes 通常是一个用于表示不同类型数据的枚举类或常量集合。这些代码用于标识 DXF 文件中各种数据元素的类型,例如实体类型、属性类型、颜色值等。通过使用 DL_Codes,您可以更轻松地解析和处理 DXF 文件中的数据。 以下…

leetcode119 杨辉三角②

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

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

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

ffmpeg截取视频

用格式工厂截取视频不知道为啥还是原长度,不过只能播放截取的部分,其他部分不能播放,但是总时长不对就不想用了。 参考 https://blog.csdn.net/m0_60259116/article/details/127017324https://cloud.tencent.com/developer/article/2410818ht…

tensorrt动态batch推理注意事项

一、背景:使用pytorch进行训练得到pt模型, 然后使用torch.onnx把pt模型转化为onnx模型。然后再使用tensorrt自带的trtexec.exe文件把onnx模型转化为engine文件。 (1)在使用C进行推理的时候发现一个batch的数据,值推理…

筛斗数据:数据提取技术,让数据说话的力量

在当今这个信息爆炸的时代,数据已经渗透到我们生活的方方面面。从商业决策到科学研究,从社会治理到个人生活,数据都扮演着至关重要的角色。而要让这些数据真正发挥其价值,就需要依赖数据提取技术,让数据“开口说话”&a…

环路滤波器

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

深入理解Java多线程中的 wait() 和 notify():为何要与 synchronized 手牵手

在Java中,wait、notify方法通常与synchronized关键字一起使用,这样做有几个重要的原因,主要涉及线程的协调和正确的并发控制。以下是一些关键点: 监视器锁(Monitor Lock): 每个对象在Java中都可…

二叉树 遍历迭代法

二叉树 遍历迭代法 Leetcode 94 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr), rig…

一个产品需求工程师繁忙的一天

早晨:开启新的一天 7:00 AM - 起床 早晨七点准时起床。洗漱、早餐后,查看手机上的邮件和消息,提前了解今天的工作安排和优先事项。 8:00 AM - 前往公司 坐地铁前往公司。在地铁上,习惯性地阅读一些行业资讯和市场报告&#xff0…

使用SpringBoot整合Servlet

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

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

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

代码随想录算法训练营:19/60

非科班学习算法day19 | LeetCode530:二叉搜索树的最小绝对差 ,Leetcode501:二叉搜索树的众数 ,Leetcode236:二叉树的最近公共祖先 目录 介绍 一、LeetCode题目 1.LeetCode530:二叉搜索树的最小绝对差 题目解析 2.Leetcode501: 二叉搜索树的众数 …

软设之加工逻辑之结构化语言

结构化语言是一种介于自然语言和形式化语言之间的半形式语言,是自然语言的一个受限子集 外层:用来描述控制结构,采用顺序,选择和重复3种基本结构 1.顺序结构:一组祈使语句,选择语句,重复语句的…

个人对JVM的一点理解

JVM(Java 虚拟机)是 Java 程序能够跨平台运行的关键。它负责将 Java 字节码转换为机器码并执行。 JVM 主要由类加载器、运行时数据区、执行引擎和本地方法接口等部分组成。运行时数据区包括方法区、堆、虚拟机栈、本地方法栈和程序计数器等。 GC&#xf…

远期利率(Forward Rate)是什么?以及远期利率在期货合约中的应用

远期利率是什么? 中文版 远期利率(Forward Rate)是指从未来某一时间段开始适用的利率。它是金融市场上的一种合约利率,表示在某个特定日期开始的一段时间内的预期利率。这种利率可以通过现有的即期利率(Spot Rate&am…

6.26考试前总结

一、选择 1、运算符重载:(1)不可重载:. .* :: ?: sizeof (2)只成员函数:、[]、()、-> ps:和[]需要加&,返回类,[]返回中括号内…

SpringBoot根据不同IP限制接口的QPS

根据对方IP地址来限制接口的QPS(每秒查询率),你可以结合Spring Boot应用、Guava的RateLimiter或者自定义的并发控制逻辑来实现。以下是一个基于Guava RateLimiter和Spring Boot的示例,展示如何根据IP地址来限制接口的QPS&#xff…

镜头下的光学

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