在现代Web应用中，密码重置功能是用户账户安全体系中不可或缺的一部分。本文将详细介绍如何使用Vue.js前端框架和SpringBoot后端框架实现一个基于邮箱验证的密码重置功能。

功能概述

本密码重置功能包含以下核心流程：

用户输入注册邮箱
系统发送验证码到该邮箱
用户输入收到的验证码和新密码
系统验证信息并重置密码

前端实现

页面布局

使用Vue.js和Element UI组件库构建密码重置页面：

<template><div class="Password-container"><div class="allClass"><div class="titleClass"><b>重置邮箱账号登录密码</b></div><el-form :rules="ruleList" :model="user" ref="userForm"><!-- 邮箱输入 --><el-form-item prop="name"><el-input placeholder="请输入您的邮箱" v-model="user.name" prefix-icon="el-icon-message" autocomplete="new-password"></el-input></el-form-item><!-- 验证码输入 --><el-form-item prop="code"><el-input placeholder="邮箱收到的验证码" v-model="user.code" style="width: 188px;" prefix-icon="el-icon-lock"></el-input><el-button type="primary" @click="getEmailCode">获取验证码</el-button></el-form-item><!-- 新密码输入 --><el-form-item prop="password"><el-input placeholder="请设置重置密码" v-model="user.password"show-password prefix-icon="el-icon-lock"></el-input></el-form-item><!-- 操作按钮 --><div class="buttonClass"><el-button type="primary" @click="registerClick">重置密码</el-button><el-button type="warning" @click="$router.push('/login')">返回登录</el-button></div></el-form></div></div>
</template>

表单验证

使用Element UI的表单验证功能确保输入合法性：

data() {return {user: {},ruleList: {name: [{required: true, message: '请输入您的邮箱账号', trigger: 'blur'},{min: 3, max: 20, message: '长度在3-9个字符', trigger: 'blur'}],password: [{required: true, message: '请设置重置密码', trigger: 'blur'},{min: 3, max: 20, message: '长度在3-20个字符', trigger: 'blur'}],code: [{required: true, message: '请输入收到的验证码', trigger: 'blur'},{min: 3, max: 20, message: '长度在3-20个字符', trigger: 'blur'}]}}
}

核心方法

获取邮箱验证码：

getEmailCode() {// 验证邮箱格式if (!this.user.name) {this.$message.warning("请输入邮箱账号")return}if (!/^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/.test(this.user.name)) {this.$message.warning("请输入正确的邮箱账号")return}// 发送请求获取验证码this.$http.post("/big/email_code", this.user).then(res => {if (res.data.code === "200") {this.$message.success("邮箱验证码发送成功，请到对应邮箱查看")} else {this.$message.error(res.data.message)}})
}

重置密码：

registerClick() {this.$refs["userForm"].validate(valid => {if (valid) { // 表单校验合法this.$http.post("/big/reset_password", this.user).then(res => {if (res.data.code === "200") {this.$router.push("/login")this.$message.success("重置密码成功，请登录！")} else {this.$message.error(res.data.message)}});}})
}

后端实现

密码重置接口

@PostMapping("/reset_password")
public Res reset_password(@RequestBody User user) {// 查询用户是否存在User existUser;try {QueryWrapper<User> userQueryWrapper = new QueryWrapper<>();userQueryWrapper.eq("name", user.getName());existUser = userMapper.selectOne(userQueryWrapper);} catch (Exception e) {e.printStackTrace();return Res.error(Constants.CODE_500, "系统错误");}if (existUser == null) {return Res.error(Constants.CODE_600, "重置用户名有误，请核实邮箱账号");}// 验证码校验QueryWrapper<Email> emailQueryWrapper = new QueryWrapper<>();emailQueryWrapper.eq("email", user.getName());Email existEmail = emailMapper.selectOne(emailQueryWrapper);if (existEmail != null && !existEmail.getCode().equals(user.getCode())) {if (existEmail.getCode().isEmpty()) {return Res.error(Constants.CODE_600, "验证码已经失效，请重新获取验证码");} else {return Res.error(Constants.CODE_600, "验证码验证失败，请检查验证码是否填写正确");}}// 验证通过后使验证码失效if (existEmail != null && (existEmail.getCode() != null)) {existEmail.setCode("");emailMapper.updateById(existEmail);}// 更新密码(SHA256加密)existUser.setPassword(MyUtils.getSHA256StrJava(user.getPassword()));userMapper.updateById(existUser);return Res.success(null);
}