(已解决)vueQQ邮箱注册发送验证码前端设计,如何发送验证码设计倒计时

news/2024/2/28 11:59:17

我们之前已经通过前端测试成功完成qq邮箱动态验证码发送(未使用redis,我准备自己了解完后,后期有时间补上)

衔接文章:


1:

spingboot 后端发送QQ邮箱验证码

2:


这段代码建设图形化界面

 <div class="container"><button@click="toggleCaptchaButton":class="{ 'disabled': isSending || isCounting }":style="{ display: displayStyle }"class="itemcode-seconde"><spanv-if="isSending"class="f-size">发送中..</span><spanv-else-if="isCounting"class="f-size">{{ countdown }}s</span><spanv-elseclass="f-size">发送</span></button></div>

(效果如图)


js代码:
 

import router from "../../router";
import axios from "axios";
export default {data() {return {// 邮箱email: [],//输入的验证码Captcha: [],// 用户登录user: {userName: "",userPwd: "",},//接收到的验证码EmailCode: {EmailCode: "",},// token验证数据token: "", // 将token存储为一个字符串或数字// 动态隐藏登录框isHidden: false,amHidden: false,//验证码变换isSending: false, // 是否正在发送验证码isCounting: false, // 是否正在倒计时countdown: 0, // 倒计时时间(秒),初始化为0,只在倒计时开始时设置为60countdownInterval: null, // 用于存储定时器的ID};},computed: {// 动态隐藏登录框赋值displayStyle() {return this.isHidden ? "none" : "block";},displaystyles() {return this.amHidden ? "block" : "none";},},created() {// 设置默认值,当组件初始化时,isHidden为false,displayStyle为'block'this.isHidden = true;this.amHidden = true;},methods: {handleSubmit(event) {event.preventDefault(); // 阻止表单提交的默认行为this.toggleCaptchaButton(); // 调用发送验证码的方法},// 动态隐藏登录框toggleDisplay() {this.isHidden = !this.isHidden;this.amHidden = !this.amHidden;},// 发送注册请求enrollData() {if ((this.Captcha = this.EmailCode.EmailCode)) {axios.post("http://localhost:8080/enroll", JSON.stringify(this.email), {headers: {"Content-Type": "application/json",},}).then((response) => {this.Captcha = response.data.data;this.$message({message: "验证成功!",type: "success",});});} else {this.$message({message: "验证失败,",type: "error",});}},// 验证码变换+发送验证码请求toggleCaptchaButton() {// 发送验证码请求// 检查是否正在发送请求或倒计时中if (this.isSending || this.isCounting) {console.log("验证码请求或倒计时中,请稍后再试");return; // 提前返回,避免重复执行}axios.post("http://localhost:8080/mail", JSON.stringify(this.email), {headers: {"Content-Type": "application/json",},}).then((response) => {//   成功const EmailCode = response.data.data;this.EmailCode.EmailCode = EmailCode;console.log("请求mail已经成功接受到验证码" + EmailCode);}).catch((error) => {// 网络请求错误或后端返回非2xx的响应console.error(error);});// 验证码变换if (!this.isSending && !this.isCounting) {this.isSending = true; // 开始发送验证码,设置为不可点击状态// 模拟发送验证码的过程setTimeout(() => {this.isSending = false; // 发送完成this.startCountdown(); // 调用倒计时}, 2500);}},startCountdown() {this.isCounting = true; // 开始倒计时this.countdown = 60; // 设置倒计时时间为60秒this.countdownInterval = setInterval(() => {this.countdown--; // 倒计时减1秒if (this.countdown <= 0) {this.stopCountdown(); // 倒计时结束,调用停止倒计时的方法}}, 1000); // 每秒更新一次倒计时时间},stopCountdown() {clearInterval(this.countdownInterval); // 清除定时器this.isCounting = false; // 倒计时结束this.countdown = 0; // 重置倒计时时间为0},//登录请求(点击)submitData() {axios.post("http://localhost:8080/login", JSON.stringify(this.user), {headers: {"Content-Type": "application/json",Authorization: "Bearer " + this.token,},}).then((response) => {const token = response.data.data;// 将token存储到组件的data属性中this.token = token;if (response.data &&response.data.code === 0 &&response.data.msg === "错误!") {this.$message({message: "登录失败," + response.data.msg,type: "error",});} else {this.$message({message: "登录成功!",type: "success",});router.push({path: "/index",query: { token: { token } },});}}).catch((error) => {console.error(error);});},},beforeDestroy() {if (this.countdownInterval) {clearInterval(this.countdownInterval); // 组件销毁前清除定时器}},
};
</script>


http://www.ppmy.cn/news/1347435.html

相关文章

FPS游戏框架漫谈第二十二天

今天我们要谈的话题是热更新辅助翻译工具 那么什么是热更新辅助翻译工具呢 我们聊的其实是一种语言翻译工具&#xff0c;就我们游戏而已采用的是c#语言开发&#xff0c;热更采用的是lua语言&#xff0c; 那么我们平时热更是不是需要写lua代码呢&#xff1f;&#xff1f;&#x…

TCP/IP协议以及UDP(超详细,看这一篇就够了)

&#x1f493; 博客主页&#xff1a;从零开始的-CodeNinja之路 ⏩ 收录专栏&#xff1a;TCP/IP协议以及UDP(超详细,看这一篇就够了) &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 TCP/IP协议以及UDP(超详细,看这一篇就够了 前提概括接收端和发送端客户…

C++ 调用lua 脚本

需求&#xff1a; 使用Qt/C 调用 lua 脚本 扩展原有功能。 步骤&#xff1a; 1&#xff0c;工程中引入 头文件&#xff0c;库文件。lua二进制下载地址&#xff08;Lua Binaries&#xff09; 2&#xff0c; 调用脚本内函数。 这里调用lua 脚本中的process函数&#xff0c;并…

二维火API连接,实现无代码开发广告推广与用户运营集成

【一键API连接&#xff0c;实现系统无缝对接】 在电子商务运营中&#xff0c;企业往往需要强大的系统来管理日常运营。二维火&#xff0c;作为深耕餐饮服务领域的云计算软件系统&#xff0c;其应用程序接口&#xff08;API&#xff09;和连接能力对于想要优化电商和客服系统运…

SQL笔记-2024/01/31

cross join 两个表的笛卡尔积 例如&#xff1a; select s.name student_name,s.age student_age,s.class_id class_id,c.name class_name from student s cross join class c; 子查询 select s.name name,s.score score,s.class_id class_id from student s where s.class_id …

LabVIEW热电偶自动校准系统

设计并实现一套基于LabVIEW平台的工业热电偶自动校准系统&#xff0c;通过自动化技术提高校准效率和精度&#xff0c;降低人力成本&#xff0c;确保温度测量的准确性和可靠性。 工业生产过程中&#xff0c;温度的准确测量对产品质量控制至关重要。传统的热电偶校准方式依赖人工…

使用Collections.singletonList()遇到的问题

示例代码 RequestMapping("/list")public Result list() {startPage();List<Byte> statusList Collections.singletonList(DynamicContentConstants.BE_APPROVED);//List<Byte> statusList new ArrayList<>();//statusList.add(DynamicContentCo…

初始web服务器(并基于idea来实现无需下载的tomcat)

前言 前面学习了对应的http协议&#xff0c;我们知道了他是在网络层进行数据传输的协议&#xff0c;负责相应数据以及接收数据的规则&#xff0c;但是在人员开发后端的时候不仅仅需要你写io流进行数据传输&#xff0c;还需要你进行对应的tcp协议来进行数据打包发送http协议-CSD…

【Java】苍穹外卖 Day01

苍穹外卖-day01 课程内容 软件开发整体介绍苍穹外卖项目介绍开发环境搭建导入接口文档Swagger 项目整体效果展示&#xff1a; 管理端-外卖商家使用用户端-点餐用户使用当我们完成该项目的学习&#xff0c;可以培养以下能力&#xff1a; 1. 软件开发整体介绍 作为一名软件开…

使用Linux docker方式快速安装Plik并结合内网穿透实现公网访问

文章目录 1. Docker部署Plik2. 本地访问Plik3. Linux安装Cpolar4. 配置Plik公网地址5. 远程访问Plik6. 固定Plik公网地址7. 固定地址访问Plik 本文介绍如何使用Linux docker方式快速安装Plik并且结合Cpolar内网穿透工具实现远程访问&#xff0c;实现随时随地在任意设备上传或者…

Redis 使用 RDB 持久化方式的过程

定时触发&#xff1a; RDB 持久化是通过设置一个定时触发的机制来进行的。管理员可以配置 Redis 在经过一定时间间隔或执行了一定数量的写操作后触发 RDB 持久化。这个配置通常在 Redis 的配置文件中进行&#xff0c;可以通过 save 或 save 900 1 这样的配置项来设定。 save 90…

Redis的数据类型Hash使用场景实战

Redis的数据类型Hash使用场景 常见面试题&#xff1a;redis在你们项目中是怎么用的&#xff0c;除了String数据类型还使用什么数据类型&#xff1f; 怎么保证缓存和数据一致性等问题… Hash模型使用场景 知识回顾&#xff1a; redisTemplate.opsForHash() 方法是 Redis 的 …

作业2.8

1、选择题 1.1、以下选项中,不能作为合法常量的是 ____B______ A&#xff09;1.234e04 B&#xff09;1.234e0.4 C&#xff09;1.234e4 D&#xff09;1.234e0 1.2、以下定义变量并初始化错误的是_____D________。 A) char c1 ‘H’ &#xff1b; B) char c…

【漏洞复现】多语言药房管理系统MPMS文件上传漏洞

Nx01 产品简介 多语言药房管理系统 (MPMS) 是用 PHP 和 MySQL 开发的, 该软件的主要目的是在药房和客户之间提供一套接口&#xff0c;客户是该软件的主要用户。该软件有助于为药房业务创建一个综合数据库&#xff0c;并根据到期、产品等各种参数提供各种报告。 Nx02 漏洞描述 …

One time pad 图像加密MATLAB程序

使用一次加密的形式对图像进行加密。 采用异或的方式实现。 加密、解密结果如下: 程序代码如下: % 读取原始图像并显示 originalImage = imread(lena256.bmp); % 更换为你的图像文件名 subplot(1,3,1),imshow(originalImage); title(Original Image);% 生成与图像相同大…

【力扣每日一题】力扣1696跳跃游戏VI

题目来源 力扣1696跳跃游戏VI 题目概述 给你一个下标从 0 开始的整数数组 nums 和一个整数 k 。 一开始你在下标 0 处。每一步&#xff0c;你最多可以往前跳 k 步&#xff0c;但你不能跳出数组的边界。也就是说&#xff0c;你可以从下标 i 跳到** [i 1&#xff0c; min(n …

斯巴鲁Subaru EDI需求分析

斯巴鲁Subaru是日本运输集团斯巴鲁公司&#xff08;前身为富士重工&#xff09;的汽车制造部门&#xff0c;以性能而闻名&#xff0c;曾赢得 3 次世界拉力锦标赛和 10 次澳大利亚拉力锦标赛。 斯巴鲁Subaru EDI 需求分析 企业与斯巴鲁Subaru建立EDI连接&#xff0c;首先需要确…

HomeAssistant系统添加HACS插件商店与远程控制家中智能家居

文章目录 基本条件一、下载HACS源码二、添加HACS集成三、绑定米家设备 ​ 上文介绍了如何实现群晖Docker部署HomeAssistant&#xff0c;通过内网穿透在户外控制家庭中枢。本文将介绍如何安装HACS插件商店&#xff0c;将米家&#xff0c;果家设备接入 Home Assistant。 基本条件…

Rust入门1——HelloWorld

文章目录 一、HelloWorld二、控制台输入 以最简单的两个Rust程序例子入门Rust。首先需要下载安装Rust&#xff0c;之后在VSCode或Clion中运行Rust需要下载Rust插件 一、HelloWorld fn main(){println!("Hello World!"); }二、控制台输入 use std::io::stdin; fn …

OpenCV识别视频中物体运动并截取保存

功能很简单&#xff1a;输入原始视频&#xff0c;输出视频中有画面变化的部分 适合理解基本框架&#xff0c;可以在这个基础上增加各种酷炫时髦的功能 [doge] ※注释非常保姆级※ import cv2 import numpy as np import os from datetime import datetime# 检测两帧之间变化…
最新文章