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

网友投稿 853 2022-11-19

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

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

目录1. 效果展示2. 增强版验证码及邮件推送管理(见以后的博客)3. 大致思路4. 前期准备5. 前端代码6. 后端

1. 效果展示

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

3. 大致思路

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

填写自己的邮箱号

点击“发送验证码”按钮

邮箱中收到验证码

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

注册成功!

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

系统随机生成六位数

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

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

如果校验成功,将数据进行录入,回显用户注册成功!

4. 前期准备

qq邮箱中开启POP3/SMTP服务

这里可以参考

https://jb51-/qq/321090.html

5. 前端代码

新用户注册

USER REGISTER

发送邮件验证

&lUWHPjpt;el-radio v-model="form.radio" label="1">男

type="text"

placeholder="验证码将会发送到您的邮箱"

v-model="form.text"

oninput="value=value.replace(/\D/g,'')"

maxlength="6"

show-word-limit

>

type="text"

placeholder="验证码将会发送到您的邮箱"

v-model="form.text"

oninput="value=value.replace(/\D/g,'')"

maxlength="6"

show-word-limit

>

立即注册

已有账号?

立刻登陆

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;

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

}

}

④ 核心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);

}

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:[LeetCode] Binary Tree Paths 二叉树路径
下一篇:Python解释中心极限定理
相关文章

 发表评论

暂时没有评论,来抢沙发吧~