随着互联网的发展，网站用户的管理、触达、消息通知成为一个网站设计是否合理的重要标志。目前主流互联网公司都支持手机验证码注册、登录。但是手机短信作为服务端网站是需要付出运营商通信成本的，而邮箱的注册、登录、重置密码，无疑成为了这一问题的最佳解决方案，那么如何通过VUE+SPRINGBOOT实现邮箱网站用户的注册、登录、重置密码呢？下面直接说明效果和代码实现。体验网址点击可以访问：white
https://wdfgdzx.top/login
一、VUE注册界面，核心逻辑在邮箱正则验证+邮箱验证码发送与存储。
<template><div class="Register-container"><div class="allClass"><div class="titleClass"><b>没有账号请邮箱注册</b></div><el-form :rules="ruleList" :model="user" ref="userForm"><!--用来校验表单--><el-form-item prop="name"><!--必须el-form-item prop="xxx"才能生效--><el-input placeholder="请输入您的邮箱" size="medium" class="inputOneClass" prefix-icon="el-icon-message"v-model="user.name" autocomplete="new-password"></el-input></el-form-item><el-form-item prop="code"><!--邮箱获取的验证码，放置非法注册--><el-input placeholder="邮箱收到的验证码" size="medium" class="inputOneClass" prefix-icon="el-icon-lock"v-model="user.code" style="width: 188px;"></el-input><el-button type="primary" size="medium" class="ml-10" @click="getEmailCode">获取验证码</el-button></el-form-item><el-form-item prop="password"><el-input placeholder="请设置密码" size="medium" class="inputOneClass" prefix-icon="el-icon-lock"v-model="user.password"show-password autocomplete="new-password"></el-input></el-form-item><div class="buttonClass"><el-button type="primary" size="medium" autocomplete="off" @click="registerClick">注册用户</el-button><el-button type="warning" size="medium" autocomplete="off" @click="$router.push('/login')">返回登录</el-button></div></el-form></div></div>
</template><script>
export default {name: "Register",data() {return {user: {},ruleList: { // 在return的第一级别写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'}]}}},methods: {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}// 都通过请求发送邮箱验证码---name的值其实就是用户邮箱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/register", this.user).then(res => { // 调用后端注册方法// console.log(res.data)if (res.data.code === "200") {this.$router.push("/login")this.$message.success("注册成功，请登录！")} else {this.$message.error(res.data.message)}});}})}}
}
</script><style scoped>
.Register-container {height: 100vh;background-image: linear-gradient(to bottom right, deepskyblue, darkcyan);overflow: hidden;
}.allClass {margin: 200px auto;background-color: #ffffff;width: 350px;height: 400px;padding: 20px;border-radius: 10px;
}.titleClass {margin: 20px 0;text-align: center;font-size: 24px;
}.inputOneClass {margin: 10px 0;
}.buttonClass {margin: 10px 0;text-align: right;
}
</style>
二、后端发送与存储逻辑
@PostMapping("/email_code") // 也需要配置可以直接访问public Res email_code(@RequestBody User user) {if (StringUtils.isBlank(user.getName())) {return Res.error(Constants.CODE_400, "参数错误");}QueryWrapper<Email> emailQueryWrapper = new QueryWrapper<>();emailQueryWrapper.eq("email", user.getName());Email existEmail = emailMapper.selectOne(emailQueryWrapper);Date nowTime = new Date();long diffLongTime = 0L;if (existEmail != null && existEmail.getSendTime() != null) { // 首次注册必为空diffLongTime = nowTime.getTime() - existEmail.getSendTime().getTime(); // 所以如果为空则直接放行，不为空在这里获取时间差距if (diffLongTime <= (5 * 60 * 1000)) {return Res.error(Constants.CODE_600, "您的验证码5分钟内有效，请到您的邮箱查看验证码，或者请您5分钟后再获取。");}}// 发送邮箱验证码SimpleMailMessage simpleMailMessage = new SimpleMailMessage();simpleMailMessage.setFrom("wdfgdzx@126.com"); // 这个发件人必须设置，和配置的一样Date sendDate = new Date();simpleMailMessage.setSentDate(sendDate);simpleMailMessage.setSubject("【人人都有人工智能注册验证码】");String code = RandomUtil.randomNumbers(4);simpleMailMessage.setText("您本次邮箱注册的验证码是：【" + code + "】，请妥善保管，切勿泄露。");simpleMailMessage.setTo(user.getName()); // 用户输入的邮箱Email emailEntity = new Email();emailEntity.setEmail(user.getName());emailEntity.setCode(code);emailEntity.setSendTime(sendDate);if (existEmail == null) { // 验证码存储与更新逻辑emailMapper.insert(emailEntity); // 不存在则插入} else {emailMapper.update(emailEntity, emailQueryWrapper); // 存在则升级code，根据邮箱名称升级}javaMailSender.send(simpleMailMessage);return Res.success(null); // 返回200即可}@PostMapping("/register")public Res register(@RequestBody User user) {User existUser;// 比对验证码QueryWrapper<Email> emailQueryWrapper = new QueryWrapper<>();emailQueryWrapper.eq("email", user.getName());Email existEmail = emailMapper.selectOne(emailQueryWrapper);if (existEmail != null && !existEmail.getCode().equals(user.getCode())) {// System.err.println(existEmail.getCode());// System.err.println(existEmail.getCode() == null);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);}try {QueryWrapper<User> userQueryWrapper = new QueryWrapper<>();userQueryWrapper.eq("name", user.getName());existUser = userMapper.selectOne(userQueryWrapper); // 新技术// existUser = userMapper.selectUserByName(user);} catch (Exception e) { // 如果系统中存在多条等异常情况e.printStackTrace();return Res.error(Constants.CODE_500, "系统错误");}if (existUser != null) {return Res.error(Constants.CODE_600, "用户名已经存在，请更换用户名");}user.setNick("人工智能-热爱者"); // 默认的昵称user.setRole("人工智能"); // 默认角色user.setPassword(MyUtils.getSHA256StrJava(user.getPassword())); // 密码用SHA256加密存储user.setAvatar("https://wdfgdzx.top:3333/document/cd39af3e175b4524890c267e07298f5b.png"); // 设置默认头像，这个每次需要变动的 发布V1.0后再修改userMapper.insert(user); // 不存在，开始插入到数据库return Res.success(null); // 返回200即可}
