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

逃离我推掉我的手 2023-10-03 19:53 11阅读 0赞

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

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
         */
        @Override
        public 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存储