--- highlight: a11y-dark --- ## 1.效果演示 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8720f03c832e47bfbc81d056a2c01f88~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-l5ZCm5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1768367504&x-signature=fzqVzMvcdhRuOcfLkoibdQtttKE%3D) ## 2.思维导图 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1d6f2a8e47d24deca9c10beff81ba2b0~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-l5ZCm5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1768367504&x-signature=UFQeK2I18xVnh%2FrfofNTMem3FEs%3D) ## 3.前言本篇文章主要讲解 Springboot 整合 Vue3 实现校验 qq 邮箱验证码之后重置用户密码的功能。 **开发功能之前我们先梳理一下主要逻辑：** 1.我们要想让系统给其他用户发送邮件，那么系统肯定要先绑定一个已注册的用户 A 的邮箱。开通服务的 A 的邮箱号码作为**发件人**。 2.在前端页面用户输入邮箱号码，点击**获取验证码**按钮调用后台接口，后台随机生成几个数字的验证码，并将该用户的邮箱号码和验证码存入 Redis。 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/67666cc026684d7d991a86a8e07c3a83~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-l5ZCm5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1768367504&x-signature=i9i2kxmXo4sknXkd1A0Baab1K6g%3D) 3.用户输入收到的验证码。点击下一步调用后台校验验证码功能。后台将用户输入的验证码和 Redis 里面的数据进行比对，校验无误返回 true。验证失败返回错误的提示信息。 4.用户验证码校验无误之后，就进入到修改密码的页面，接着完成修改密码的功能。 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/94eaadfebc4f47438ad9b9fd9b70cdbb~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-l5ZCm5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1768367504&x-signature=b%2FGHhw%2BpwTWafaeb%2B1n42e8UG0w%3D) ## 4.开通 qq 邮箱服务我们要让 A 用户给其他用户发送邮件，那么用户 A 必须开通相关的服务。 1.进入 qq 邮箱，点击右上角的**账号与安全** ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7666b96f32264148bece01ec31c06427~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-l5ZCm5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1768367504&x-signature=vNB2JCcfqkygWz%2BARQhixRJdq0Y%3D) 2.开启邮箱服务，保存生成的邮箱授权码 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/67f5b2cbe71444deb28c8bbf9edfea4d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-l5ZCm5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1768367504&x-signature=Ms%2BHdlKNbpQ0iYfm5WCYIdC2ttI%3D) ## 5.前端 ### 5.1 创建并配置 vue 项目这里我们使用的前端脚手架是 vite，vue 版本是 vue3，前端组件库是 Element plus。 #### 5.1.1 创建 vue3 项目 ```css npm create vite@latest vue3-zhifou -- --template vue ``` #### 5.1.2 安装配置 Element Plus ```css npm install element-plus --save ``` 在 main.js 里面配置 Element plus ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/29e9e5cfcca34b73859b423e9052a720~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-l5ZCm5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1768367504&x-signature=Pd69Y2xAv2RvbRTwMgXeMo%2BafTo%3D) #### 5.1.3 安装配置 axios ```css npm i axios -- save ``` 在 src/util 下面新建 axios.js 文件 import axios from "axios"; import router from "../router/index" import { ElMessage } from 'element-plus' // 1. 创建axios实例 const instance = axios.create({ // 接口 baseURL: "/api", // 超时时间 timeout: 60000, }); // 2.请求拦截 instance.interceptors.request.use( config => { // let token = sessionStorage.getItem('token'); // if (token) { // config.headers['token'] = token // } return config; }, error => { // 请求发生错误，抛出异常 Promise.reject(error); } ); // 3.响应拦截 instance.interceptors.response.use( res => { // 关闭进度条 return res; }, error => { // 关闭进度条 if (error && error.response) { const status = error.response.status switch (status) { case 400: ElMessage.error("请求错误"); break; case 401: ElMessage.error("未授权，请重新登录"); break; case 404: ElMessage.error("请求错误，未找到相应的资源"); break; case 500: ElMessage.error("服务器错误"); break; default: ElMessage.error("请求失败"); } } else { if (JSON.stringify(error).includes("timeout")) { error.code = "TIMEOUT"; error.message = "服务器响应超时，请刷新页面"; } } return Promise.reject(error); } ); // 4.导出 axios 实例 export default instance; #### 5.1.4 封装常用的 http 请求在 /src/util 下面新建 http.js 文件 ```css import instance from "./axios"; const post = (url, data) => { return new Promise((resolve, reject) => { instance .post(url, data) .then((res) => { resolve(res); }) .catch((err) => { reject(err); }); }); }; const get = (url, data) => { return new Promise((resolve, reject) => { instance .get(url, { params: data }) .then((res) => { resolve(res); }) .catch((err) => { reject(err); }); }); }; const put = (url, data) => { return new Promise((resolve, reject) => { instance .put(url, data) .then((res) => { resolve(res); }) .catch((err) => { reject(err); }); }); }; const del = (url, data) => { return new Promise((resolve, reject) => { instance .delete(url, { params: data }) .then((res) => { resolve(res); }) .catch((err) => { reject(err); }); }); }; export default { post, get, put, del, }; ``` #### 5.1.5 配置后端服务 IP 与端口 ```css import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path'; export default defineConfig({ plugins: [vue()], // 设置别名 resolve: { alias: [ { // 设置别名， '@' 指向 'src' 目录 find: "@", replacement: path.resolve(__dirname, './src') }, ] }, server: { open: true, port: 3000, proxy: { "/api": { target: "http://127.0.0.1:8081/springboot-vue3-email", // changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ""), }, }, }, }) ``` #### 5.1.6 配置访问后台的接口文件在 /src/api 文件夹下新建接口文件：user.js ```js import http from "../utils/http"; // 发送邮箱验证码 const sendEmailVerifyCode = (data) => { return http.get("/index/sendEmailVerifyCode", data); }; // 校验邮箱验证码 const checkEmailVerifyCode = (data) => { return http.post("/index/checkEmailVerifyCode", data); }; // 通过邮箱重置用户密码 const resetPasswordByEmail = (data) => { return http.post("/sysUser/resetPasswordByEmail", data); }; export default { sendEmailVerifyCode, resetPasswordByEmail, checkEmailVerifyCode } ``` ### 5.2 创建发送邮箱验证码的组件在 /src/components 文件夹下新建 resetPassword.vue 文件。这里不再贴出完整代码，只讲核心代码，后面会有完整代码。其实整个页面稍微有点复杂的就是发送验证码的功能 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/0f4554a054e846b9a25c2ff123aed7df~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-l5ZCm5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1768367504&x-signature=OysvGNtlCku%2BsCJLPi2aMd%2BBofE%3D) ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/accb53cd71a14245ad8817f108177333~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-l5ZCm5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1768367504&x-signature=5cBZrwZFqNohyas88xSAC2Z2dKs%3D) 当用户点击**获取验证码**按钮，获取验证码这几个文字变成“x秒后重新发送”，并且禁止点击。所以要定义一个数字变量用来显示倒计时，还要定义一个变量和 disabled 进行绑定。 ```css const isSend = ref(false); const countDown = ref(0); ``` 用户点击**获取验证码**按钮之后调用方法： ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/9c4ade2aee21434f87aa8fcc80c1d579~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-l5ZCm5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1768367504&x-signature=DC5YAN7OIJ2krPNM015jMYTpUJw%3D) 当后台发送验证码成功之后，disabled 绑定的变量值就为 true，countDown 初始值为 60。然后通过 setInterval 定时器每隔一秒将 countDown 的值减去 1。当 countDown 的值小于等于 0 时，disabled 绑定的变量值就为 false，countDown 的值变为 0，并清除定时器。接着点击**下一步**按钮，校验验证码是否正确： ```css // 校验邮箱验证码 const checkEmailCode = () => { emailFormRef.value.validate(async (valid) => { if (valid) { const res = await userApi.checkEmailVerifyCode(form); if (res.data.code === 200) { // 校验通过 if (res.data.data) { isCheckEmail.value = true; } } else { ElMessage.error(res.data.message); } } else { return false; } }); }; ``` 当校验通过之后就显示重置用户密码的表单信息，否则提示校验失败的提示信息。这里用户发送邮箱验证码和重置密码的表单项都在同一个 el-form 里面，只不过是通过一个变量的值进行控制显示。 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a77e61089bd049d38a8f952fe3e8d3e1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-l5ZCm5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1768367504&x-signature=tUFxNep2wRACREUrf1rPyqnDFcY%3D) **默认 isCheckEmail 的值是 false，当验证码校验通过之后就修改为 true。** ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/989f944aed4c43419acae8b98b514bf4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-l5ZCm5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1768367504&x-signature=HyK58ulc3gzKp%2FF4xqq5%2BkbpEQg%3D) ## 6.后端 ### 6.1 创建 Springboot 项目 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4e89b3366f3c449c9be30835da2f2302~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55-l5ZCm5oqA5pyv:q75.awebp?rk3s=f64ab15b&x-expires=1768367504&x-signature=fapVO%2B08zjJW%2BFv2ML3mblOG534%3D) ### 6.1 pom 文件引入相关依赖 ```xml org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-data-redis com.baomidou mybatis-plus-boot-starter 3.4.0 org.projectlombok lombok 1.18.10 mysql mysql-connector-java 8.0.30 com.alibaba druid 1.2.4 cn.hutool hutool-all 5.7.15 org.springframework.boot spring-boot-starter-mail ``` ### 6.2 yml 配置 email 相关属性 ```yml server: port: 8081 servlet: context-path: /springboot-vue3-email spring: # 数据库相关 datasource: url: jdbc:mysql://127.0.0.1:3306/zc_online_order?allowPublicKeyRetrieval=true&useSSL=false username: root password: zhiFou2024@! driver-class-name: com.mysql.cj.jdbc.Driver type: com.alibaba.druid.pool.DruidDataSource # redis相关 redis: host: 127.0.0.1 port: 6379 password: zhiFou2024@! database: 0 # 邮箱相关 mail: host: smtp.qq.com #邮箱服务器地址 username: 2xxxxxx@qq.com #邮箱账号 password: xxxxxxxx #邮箱授权码 default-encoding: utf-8 #默认编码 ``` ### 6.3 创建 Email 工具类 ```java /** * @author 知否技术 * @description 邮箱工具类 * @date 2024-09-25 10:31 */ @Component @Slf4j public class EmailUtil { @Autowired private JavaMailSender javaMailSender; @Autowired private RedisTemplate redisTemplate; /** * 发件人邮箱 */ @Value("${spring.mail.username}") private String username ; /** * 发送邮箱验证码 * @param email * @return */ public boolean sendEmailCode(String email){ // 创建邮件消息 SimpleMailMessage message = new SimpleMailMessage(); String emailCode = RandomUtil.randomNumbers(6); // 邮箱验证码存入redis String redisKey = String.format("redis:resetPassword:sendMessage:%s", email); redisTemplate.opsForValue().set(redisKey, emailCode, 20, TimeUnit.MINUTES); // 设置邮件主题 message.setSubject("【知否技术】你此次重置密码的验证码是:" + emailCode); // 设置邮件发送者，昵称+<邮箱地址> message.setFrom("发件人" + '<' + username + '>'); // 设置邮件接收者，可以有多个接收者，多个接受者参数需要数组形式 message.setTo(email); // 设置邮件发送日期 message.setSentDate(new Date()); // 设置邮件的正文 message.setText("你此次重置密码的邮箱验证码是" + emailCode + "，请在20分钟内输入验证码进行下一步操作。如非本人操作，请忽略本次邮件！"); try { // 发送邮件 javaMailSender.send(message); return Boolean.TRUE; } catch (Exception e) { log.error("邮箱验证码异常结果: " + e.getMessage()); return Boolean.FALSE; } } /** * 校验邮箱验证码 * @param checkEmailParam * @return */ public boolean checkEmailVerifyCode(CheckEmailParam checkEmailParam) { String redisKey = String.format("redis:resetPassword:sendMessage:%s", checkEmailParam.getEmail()); // 从Redis获取邮箱验证码 String redisEmailCode = (String)redisTemplate.opsForValue().get(redisKey); if(StrUtil.isBlank(redisEmailCode)){ throw new RuntimeException("验证码已过期，请重新发送！"); } if(!checkEmailParam.getVerifyCode().equals(redisEmailCode)){ throw new RuntimeException("验证码不正确，请重新填写！"); } return true; } } ``` ### 6.4 封装 Redis 配置类新建 RedisConfig 类 ```java @Slf4j @Configuration public class RedisConfig { @Resource private RedisConnectionFactory factory; @Bean public RedisTemplate redisTemplate() { RedisTemplate redisTemplate = new RedisTemplate<>(); redisTemplate.setConnectionFactory(factory); GenericJackson2JsonRedisSerializer genericJackson2JsonRedisSerializer = new GenericJackson2JsonRedisSerializer(); StringRedisSerializer stringRedisSerializer = new StringRedisSerializer(); redisTemplate.setKeySerializer(stringRedisSerializer); redisTemplate.setValueSerializer(genericJackson2JsonRedisSerializer); redisTemplate.setHashKeySerializer(stringRedisSerializer); redisTemplate.setHashValueSerializer(genericJackson2JsonRedisSerializer); redisTemplate.afterPropertiesSet(); return redisTemplate; } } ``` ### 6.5 配置全局异常处理器新建 GlobalExceptionHandler 类 ```java @Slf4j @RestControllerAdvice public class GlobalExceptionHandler { /** * 捕获全局异常 * * @param e * @return */ @ExceptionHandler(RuntimeException.class) public Result handler(RuntimeException e) { log.error("全局异常：{}", e.getMessage()); return Result.fail(e.getMessage()); } } ``` ### 6.6 创建 controller ```java @RestController @RequestMapping("/index") public class IndexController { @Autowired private EmailUtil emailUtil; /** * 发送邮箱验证码 * @param email * @return */ @GetMapping("/sendEmailVerifyCode") public Result sendEmailVerifyCode(@RequestParam String email) { boolean flag = emailUtil.sendEmailCode(email); if (flag) { return Result.success(Boolean.TRUE); } else { return Result.fail(); } } /** * 校验邮箱验证码 * @param checkEmailParam * @return */ @PostMapping("/checkEmailVerifyCode") public Result checkEmailVerifyCode(@RequestBody CheckEmailParam checkEmailParam){ boolean flag = emailUtil.checkEmailVerifyCode(checkEmailParam); if (flag) { return Result.success(Boolean.TRUE); } else { return Result.fail(); } } } ``` ## 7.完整代码 ```css 链接：https://pan.baidu.com/s/1bYaQwdnsw8O8hmXTGI8iVQ?pwd=1234 提取码：1234 ```