Vue怎么实现简易注册页面和发送验证码功能

本篇内容介绍了"Vue怎么实现简易注册页面和发送验证码功能"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

1. 效果展示

2. 增强版验证码及邮件推送管理（见以后的博客）

3. 大致思路

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

• 填写自己的邮箱号

• 点击"发送验证码"按钮

• 邮箱中收到验证码

• 填写其余注册信息并填写验证码

• 注册成功！

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

• 系统随机生成六位数

• 根据用户提供的邮箱号将验证码发送到其邮箱

• 根据用户提供的信息，进行验证码的校验

• 如果校验成功，将数据进行录入，回显用户注册成功！

4. 前期准备

qq邮箱中开启POP3/SMTP服务

5. 前端代码

6. 后端

使用的框架是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();    }}

③ Redis的set和get工具类

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;@Componentpublic 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);    }}

④ 核心service层代码

/**     * 验证邮箱是否重复     * @param email 邮箱号     */    @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);    }    /**     * 发送注册验证码     * @param toEamil 收件人邮箱     * @return     */    @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);    }        /**     * 用户注册     * @param userSignUpVO 注册所需要的用户基本信息     * @param code  注册发到邮箱的验证码     */    @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);    }

"Vue怎么实现简易注册页面和发送验证码功能"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！