SpringBoot项目 | 瑞吉外卖 | 短信发送验证码功能改为免费的邮箱发送验证码功能 | 代码实现

0.前情提要

之前的po已经说了单独的邮箱验证码发送功能怎么实现：
https://blog.csdn.net/qq_61551948/article/details/142641495

这篇说下如何把该功能整合到瑞吉项目里面，也就是把原先项目里的短信发送验证码的功能改掉，改为邮箱发送验证码的功能。

当然首先得跟着教程从头到尾做到这块功能时才行，并且已经将数据模型User导入了进来，添加了UserController、UserService和UserServiceImpl，添加了Filter中一部分代码。

基于以上，实现本文的操作。 （当然不做这个项目参考一下也odkkkk）

1.后端代码实现

【和教程中所有代码都放在controller层不一样（看着很臃肿），我是具体实现细节就放在impl实现类里了】

1.1发送邮箱验证码的整体功能

controller层

/*** 发送邮箱验证码模拟短信验证码* @param user* @return*/
@PostMapping("sendEmail")
public R<String> sendEmail(@RequestBody User user) {return userService.sendEmail(user);
}

service层

R<String> sendEmail(User user);

serviceImpl层

@Resource
private JavaMailSender javaMailSender;
//读取yml文件中username的值并赋值给from
@Value("${spring.mail.username}")
private String from;
// 用于存储验证码，键为邮箱，值为验证码 【也可以用session保存试试】
private Map<String, String> verificationCodeMap = new HashMap<>();@Override
public R<String> sendEmail(User user) {if(user.getPhone() != null){// 构建一个邮件对象SimpleMailMessage message = new SimpleMailMessage();// 设置邮件发送者message.setFrom(from);// 设置邮件接收者message.setTo(user.getPhone());// 设置邮件的主题message.setSubject("登录验证码");// 设置邮件的正文Random random = new Random();StringBuilder code = new StringBuilder();for (int i = 0; i < 6; i++) {int r = random.nextInt(10);code.append(r);}String text = "您的验证码为：" + code;// 存储验证码log.info("验证码：{}",text);verificationCodeMap.put(user.getPhone(), code.toString());// 设置邮件的正文message.setText(text);// 发送邮件try {javaMailSender.send(message);return R.success("发送成功！");} catch (MailException e) {e.printStackTrace();}return R.error("发送失败");}return R.error("邮箱为空！");
}

1.2接收并校验验证码整体功能

controller层

/*** 登录功能* @param user* @return*/
@PostMapping("login")
public R<String> verifyCode(@RequestBody Map user, HttpSession session) {return userService.login(user,session);
}

service层

R<String> login(Map user, HttpSession session);

serviceImpl层

//判断验证码是否正确+判断是否注册过，没注册需要在登录时自动注册
@Override
public R<String> login(Map user, HttpSession session) { //Map存的值是Object类型，需要toString一下// 获取已存储的验证码String storedCode = verificationCodeMap.get(user.get("phone").toString());// 检查验证码是否存在&&检查用户输入的验证码是否正确if (storedCode != null && storedCode.equals(user.get("code").toString())) {//验证成功//判断该用户是否存在，如果不存在的话，顺便注册LambdaQueryWrapper<User> queryWrapper = new LambdaQueryWrapper<>();queryWrapper.eq(User::getPhone,user.get("phone").toString());User user1 = this.getOne(queryWrapper);if(user1 == null){ //用户不存在，需要注册user1 = new User();user1.setPhone(user.get("phone").toString());user1.setStatus(1);this.save(user1);}session.setAttribute("user",user1.getId()); //在session中存入user的id（让过滤器放行）// 清除验证码以防止重复使用verificationCodeMap.remove(user.get("phone"));return R.success("验证成功");} else {return R.error("验证失败，验证码不正确");}
}

2.部分前端代码修改

打开下图所示的login.html文件

60行左右，原先用来判断手机号的正则表达式改为判断qq邮箱的正则表达式

const regex = /^[1-9][0-9]{4,10}@qq\.com$/;

再打开下图所示的文件

修改原文件的发送邮箱验证码的接口url以及登录的接口url，改为自己刚才实现的方法的接口url。

3.结果展示

发送验证码

收到验证码

输入错误验证码

输入正确验证码之后进入页面

撒花！！！！