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