已经说过了获取验证码部分,就不写验证码部分了,获取验证码有不理解可以参考前两期文章
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存储