1.效劳演示小程序开发资讯
2.想维导图
3.序论
本篇著述主要西宾 Springboot 整合 Vue3 扫尾校验 qq 邮箱考证码之后重置用户密码的功能。
拓荒功能之前咱们先梳理一下主要逻辑：
1.咱们要想让系统给其他用户发送邮件，那么系统细目要先绑定一个已注册的用户 A 的邮箱。用户 A 必须绽放 qq 邮箱的关系工作。绽放工作的 A 的邮箱号码动作发件东说念主。
2.在前端页面用户输入邮箱号码，点击得到考证码按钮调用后台接口，后台当场生成几个数字的考证码，并将该用户的邮箱号码和考证码存入 Redis。
3.用户输入收到的考证码。点击下一行径用后台校验考证码功能。后台将用户输入的考证码和 Redis 内部的数据进行比对，校验无误复返 true。考证失败复返乌有的辅导信息。
4.用户考证码校验无误之后，就参加到修改密码的页面，接着完成修改密码的功能。
4.绽放 qq 邮箱工作
咱们要让 A 用户给其他用户发送邮件，那么用户 A 必须绽放关系的工作。
2.开启邮箱工作，保存生成的邮箱授权码
5.前端
5.1 创建并建设 vue 花样
这里咱们使用的前端脚手架是 vite，vue 版块是 vue3，前端组件库是 Element plus。
5.1.1 创建 vue3 花样
npm create vite@latest vue3-zhifou -- --template vue
5.1.2 安设建设 Element Plus
npm install element-plus --save
在 main.js 内部建设 Element plus
5.1.3 安设建设 axios
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 文献
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,};
[扫码下载app，中过数字彩1千万以上的专家都在这儿！]
5.1.5 建设后端工作 IP 与端口
appimport { 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 文献夹下新建接口文献：index.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 文献。这里不再贴出完整代码，只讲中枢代码，后头会有完整代码。
其实总计页面略微有点复杂的等于发送考证码的功能
当用户点击得到考证码按钮，小程序开发公司得到考证码这几个翰墨酿成“x秒后重新发送”，何况不容点击。
是以要界说一个数字变量用来清晰倒计时，还要界说一个变量和 disabled 进行绑定。
const isSend = ref(false);const countDown = ref(0);
用户点击得到考证码按钮之后调用设施：
当后台发送考证码到手之后，disabled 绑定的变量值就为 true，countDown 运转值为 60。
然后通过 setInterval 定时器每隔一秒将 countDown 的值减去 1。当 countDown 的值小于等于 0 时，disabled 绑定的变量值就为 false，countDown 的值变为 0，并拔除定时器。
接着点击下一步按钮，校验考证码是否正确：
// 校验邮箱考证码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 内部，只不外是通过一个变量的值进行终结清晰。
默许 isCheckEmail 的值是 false，当考证码校验通过之后就修改为 true。
6.后端6.1 创建 Springboot 花样
6.1 pom 文献引入关系依赖
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 关系属性
server: port: 8081 servlet: context-path: /springboot-vue3-emailspring: # 数据库关系 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 器用类
/** * @author 知否本领 * @description 邮箱器用类 * @date 2024-09-25 10:31 */@Component@Slf4jpublic 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("发件东说念主" + ''); // 建造邮件招揽者，不错有多个招揽者，多个接管者参数需要数组时势 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 类
@Slf4j@Configurationpublic 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 类
@Slf4j@RestControllerAdvicepublic 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
@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; } }}小程序开发资讯