JAVA SpringBoot+vue实现网络邮箱注册(多层效验)

效验)"/>

JAVA SpringBoot+vue实现网络邮箱注册(多层效验)

已经说过了获取验证码部分,就不写验证码部分了,获取验证码有不理解可以参考前两期文章

1、vue项目部分

1.1、显示部分

 <el-input class="inputVa" v-model="registerForm.email" placeholder="请输入注册邮箱"></el-input><el-input class="inputVa" style="width:160px" v-model="registerForm.yzm" placeholder="请输入验证码"></el-input><el-button @click="send" type="success"style="width:140px">获取验证码</el-button><br>
<el-button type="primary" @click="save" style="width:140px;margin-left:170px;margin-top:20px">注 册</el-button>

1.2、注册方法

    save () { // 注册if (this.registerForm.email !== '' && this.registerForm.yzm !== '') {this.$axios.post('跨域请求地址', this.registerForm).then(res => {if (res.data.flag) {this.myMessage('success', '注册成功！')//重置注册表单this.successAndLogin = this.restRegisterForm} else {//否则弹出后台判断值this.myMessage('error', res.data.obj)}})} else {if (this.registerForm.loginName === '') {this.myMessage('info', '请输入账号！')} else {if (this.registerForm.password === '') {this.myMessage('info', '请输入密码！')} else {if (this.registerForm.email === '') {this.myMessage('info', '请输入邮箱！')} else {if (this.registerForm.yzm === '') {this.myMessage('info', '请输入验证码！')}}}}}},myMessage (type, message) { // 弹窗提示this.$message({message: message,type: type})}

1.3、data

      //注册时携带的参数registerForm: {email: '',yzm: ''},//用于获取验证码倒计时按钮show: true,//用于注册成功清空表单restRegisterForm: {}

2、SpringBoot部分

2.1、Controller

    @PostMapping("register")public CommonResult register(@RequestBody UserEntity userEntity){CommonResult register = userService.register(userEntity);return register;}

2.3、ServiceImpl

/*** 注册并判断验证码* @param userEntity* @return*/@Overridepublic CommonResult register(UserEntity userEntity) {//通过输入邮箱查询是否有发送记录 如果没有EmailEntity eMail = emailService.getEMail(userEntity.getEmail());// 获取到用户输入验证码 判断是否与数据库发送记录一致String yzm = userEntity.getYzm();// 如果未查询到发送记录 返回暂未发送if (eMail != null){if (Integer.parseInt(userEntity.getYzm())==(eMail.getYzm())){Date date = new Date();SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyyMMddHHMM");String time = simpleDateFormat.format(date);//判断验证码拉取时时间与现在时间相比是否偏差15分钟 if ((Double.parseDouble(eMail.getCreateTime())+15)>Double.parseDouble(time)){//验证成功 将数据添加到数据库return CommonResult.ok();//删除掉数据库中验证码发送记录 避免二次使用emailMapper.removeByEmail(userEntity.getEmail());                                }else{return CommonResult.fail(50001,"验证码过期!");}}else{return CommonResult.fail(9999,"验证码错误!");}}else{return CommonResult.fail(9999,"请先获取验证码");}}

可以在前端同时携带账号和密码

便于验证码验证成功后添加注册到数据库表数据中

本章只将数据加入了本地数据库 没有用到Redis

有需要也可使用Redis存储