Vue简易注册页面+发送验证码功能的实现

• 1. 效果展示
• 2. 增强版验证码及邮件推送管理（见以后的博客）
• 3. 大致思路
• 4. 前期准备
• 5. 前端代码
• 6. 后端
• • ① 主要的依赖
  • ② 正则校验邮箱工具类
  • ③ Redis的set和get工具类
  • ④ 核心service层代码

用户角度分析一下注册时候的步骤：

1. 填写自己的邮箱号
2. 点击“发送验证码”按钮
3. 邮箱中收到验证码
4. 填写其余注册信息并填写验证码
5. 注册成功！

系统设计者角度分析一下步骤：

1. 系统随机生成六位数
2. 根据用户提供的邮箱号将验证码发送到其邮箱
3. 根据用户提供的信息，进行验证码的校验
4. 如果校验成功，将数据进行录入，回显用户注册成功！

qq邮箱中开启POP3/SMTP服务

这里可以参考

https://jingyan.baidu.com/article/425e69e61e9178be15fc168a.html

使用的框架是springboot

        
        
            org.springframework.boot
            spring-boot-starter-data-redis
            2.5.2
        
        
        
            javax.mail
            mail
            1.4.7
        

package com.example.han.util;

import java.util.regex.Matcher;
import java.util.regex.Pattern;

public class CheckMail {
    public static boolean checkMail(String mail){
        Pattern pattern=Pattern.compile("\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*");
        //w+@(w+.)+[a-z]{2,3}
        Matcher matcher=pattern.matcher(mail);
        return matcher.matches();
    }
}

package com.example.han.util;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.stereotype.Component;
import java.util.concurrent.TimeUnit;

@Component
public class RedisUtil {
    @Autowired
    private StringRedisTemplate stringRedisTemplate;

    public void setRedisKey(String key, String value, long num) {
        System.out.println("set redis start!");
        stringRedisTemplate.opsForValue().set(key,value,num,TimeUnit.SECONDS);
        System.out.println(stringRedisTemplate.opsForValue().get(key));
    }

    public String getRedisValue(String key){
        if(!stringRedisTemplate.hasKey(key)){
            return "None";
        }
        return stringRedisTemplate.opsForValue().get(key);
    }

}

    
    @Override
    public ResultReturn checkEmailRepeat(String email) throws MyException {
        if (!CheckMail.checkMail(email)) {
            throw new MyException(400, "邮件格式错误");
        }
        if (userRepository.checkEmaillRepeated(email)) {
            return ResultReturnUtil.fail(USER_EMAIL_REPEATED);
        }
        return ResultReturnUtil.success(USER_EMAIL_NOT_REPEATED, email);
    }

    
    @Override
    public ResultReturn sendSignUpCode(String toEamil) {
        //asdasd
        SimpleMailMessage simpleMailMessage = new SimpleMailMessage();
        simpleMailMessage.setTo(toEamil);
        simpleMailMessage.setFrom(fromEmail);
        simpleMailMessage.setSubject("您的注册验证码来了");
        Random r = new Random();
        int rate = r.nextInt(899999) + 100000;
        redisUtil.setRedisKey(toEamil + "YanZheng", rate + "", 60 * 5);    //先存入redis,key为发送的邮箱号
        String content =
                "你好，n" + "t您的验证码是：n" + rate;
        simpleMailMessage.setText(content);
        try {
            javaMailSender.send(simpleMailMessage);
        } catch (Exception e) {
            return ResultReturnUtil.fail("发送失败！");
        }
        return ResultReturnUtil.success("发送成功！", toEamil);
    }
    
    
    @Override
    public ResultReturn UserSignUp(UserSignUpVO userSignUpVO, int code) throws MyException {
        if (!CheckMail.checkMail(userSignUpVO.getEmail())) {    //这种是邮箱格式错误的时候
            throw new MyException(400, "邮件格式错误");
        }
        if (userRepository.checkEmaillRepeated(userSignUpVO.getEmail())) {  //邮箱重复注册的时候
            return ResultReturnUtil.fail(USER_EMAIL_REPEATED);
        }
        String redisCode = redisUtil.getRedisValue(userSignUpVO.getEmail() + "YanZheng");   //将code与redis的进行比对
        if (!redisCode.equals("" + code)) {
            return ResultReturnUtil.fail(WRONG_VERIFICATION_CODE);
        }
        UserDO user = new UserDO();
        user.setEmail(userSignUpVO.getEmail());
        user.setUsername(userSignUpVO.getUsername());
        user.setPassword(userSignUpVO.getPassword());
        user.setSex(userSignUpVO.getSex());
        user.setBirthday(userSignUpVO.getBirthday());
        if (userRepository.insertUser(user)) {
            return ResultReturnUtil.success(USER_SIGNUP_SUCCESS, user.getEmail());
        }
        return ResultReturnUtil.fail(USER_SIGNUP_FAILED);
    }