专业的英文网站建设,上海电子商务网站,google chrome官网下载,山东网络推广公司随着互联网的发展#xff0c;网站用户的管理、触达、消息通知成为一个网站设计是否合理的重要标志。目前主流互联网公司都支持手机验证码注册、登录。但是手机短信作为服务端网站是需要付出运营商通信成本的#xff0c;而邮箱的注册、登录、重置密码#xff0c;无疑成为了这…随着互联网的发展网站用户的管理、触达、消息通知成为一个网站设计是否合理的重要标志。目前主流互联网公司都支持手机验证码注册、登录。但是手机短信作为服务端网站是需要付出运营商通信成本的而邮箱的注册、登录、重置密码无疑成为了这一问题的最佳解决方案那么如何通过VUESPRINGBOOT实现邮箱网站用户的注册、登录、重置密码呢下面直接说明效果和代码实现。体验网址点击可以访问whitehttps://wdfgdzx.top/login 一、VUE注册界面核心逻辑在邮箱正则验证邮箱验证码发送与存储。
templatediv classRegister-containerdiv classallClassdiv classtitleClassb没有账号请邮箱注册/b/divel-form :rulesruleList :modeluser refuserForm!--用来校验表单--el-form-item propname!--必须el-form-item propxxx才能生效--el-input placeholder请输入您的邮箱 sizemedium classinputOneClass prefix-iconel-icon-messagev-modeluser.name autocompletenew-password/el-input/el-form-itemel-form-item propcode!--邮箱获取的验证码放置非法注册--el-input placeholder邮箱收到的验证码 sizemedium classinputOneClass prefix-iconel-icon-lockv-modeluser.code stylewidth: 188px;/el-inputel-button typeprimary sizemedium classml-10 clickgetEmailCode获取验证码/el-button/el-form-itemel-form-item proppasswordel-input placeholder请设置密码 sizemedium classinputOneClass prefix-iconel-icon-lockv-modeluser.passwordshow-password autocompletenew-password/el-input/el-form-itemdiv classbuttonClassel-button typeprimary sizemedium autocompleteoff clickregisterClick注册用户/el-buttonel-button typewarning sizemedium autocompleteoff click$router.push(/login)返回登录/el-button/div/el-form/div/div
/templatescript
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)}});}})}}
}
/scriptstyle 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, 参数错误);}QueryWrapperEmail 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(wdfgdzx126.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;// 比对验证码QueryWrapperEmail 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 {QueryWrapperUser 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即可}
