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.结果展示

发送验证码

收到验证码

输入错误验证码

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

撒花！！！！