用vue和Springboot实现一个短信验证码发送验证功能

实现效果

基本想法就是1、后端发送邮箱验证码。2、用户输入验证码，后端在进行验证码校验。
其他该有的邮件校验参数等方法就自行考虑清楚，本文主要记录两个主要功能如何实现。

后端使用的工具类

1、邮件发送MailUtil

package com.lcc.myblog.utils;

import jakarta.annotation.Resource;
import jakarta.mail.MessagingException;
import jakarta.mail.internet.MimeMessage;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.mail.javamail.JavaMailSenderImpl;
import org.springframework.mail.javamail.MimeMessageHelper;
import org.springframework.stereotype.Component;

import java.time.Duration;

@Component
public class MailUtil {
    @Resource
    private JavaMailSenderImpl mailSender;
    @Autowired
    private RedisTemplate<String,String> redisTemplate;
    public boolean mail(String email) throws MessagingException {
        MimeMessage mimeMessage = mailSender.createMimeMessage();
        //生成随机验证码
        String code = CodeGeneratorUtil.generateCode(6);
        System.out.println("用户："+email+" 生成的验证码是："+code);
        MimeMessageHelper helper = new MimeMessageHelper(mimeMessage, true);
        //设置一个html邮件信息
        helper.setText("<p style='color: blue'>短信验证码功能测试！，你的验证码为：" + code + "(有效期为一分钟)</p>", true);
        //设置邮件主题名
        helper.setSubject("LCC----发来了验证码");
        //发给谁-》邮箱地址
        helper.setTo(email);
        //谁发的-》发送人邮箱
        helper.setFrom("你自己的qq邮箱");
        redisTemplate.opsForValue().set(email, code, Duration.ofMinutes(1));
        mailSender.send(mimeMessage);
        return true;
    }
}

2、CodeGeneratorUtil验证码生成工具类

package com.lcc.myblog.utils;

import java.util.UUID;

public class CodeGeneratorUtil {
    /**
     * 生成指定长度的验证码
     *
     * @param length 长度
     * @return
     */
    public static String generateCode(int length) {
        return UUID.randomUUID().toString().substring(0, length);
    }

     /**
     * 雪花算法生成用户注册
     */
    public static long snowflake() {
        SnowUtil idutil = new SnowUtil();
        return idutil.nextId();
    }
}

后端需要的pom文件依赖和所需application.yml配置文件

    <!-- 邮箱验证码       -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-mail</artifactId>
        </dependency>

  mail:
    # 发送者邮箱
    username: ""
    #申请到的授权码
    password: ""
    # 配置 SMTP 服务器地址
    host: smtp.qq.com
    # 端口号465或587
    port: 465
    protocol: smtps
    # 默认的邮件编码为UTF-8
    default-encoding: UTF-8
    # 配置SSL 加密工厂
    properties:
      mail:
        smtp:
          socketFactoryClass: javax.net.ssl.SSLSocketFactory
          #表示开启 DEBUG 模式，这样，邮件发送过程的日志会在控制台打印出来，方便排查错误
          debug: true
          ssl: true

这里需要申请授权码，要去邮箱里去设置，流程如下：

controller层

创建一个EmailController，里面设置两个方法，一个是发送邮件，一个是验证。
注意这里需要redis缓存验证码过期时间，因为验证码属于一个经常变化的信息。

package com.lcc.myblog.controller;

import com.lcc.myblog.pojo.Result;
import com.lcc.myblog.utils.MailUtil;
import com.lcc.myblog.utils.ThreadLocalUtil;
import jakarta.mail.MessagingException;
import jakarta.validation.constraints.Email;
import jakarta.validation.constraints.Pattern;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.data.redis.core.ValueOperations;
import org.springframework.util.StringUtils;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.Map;

@RestController
@Validated
public class EmailController {
    @Autowired
    private MailUtil mailUtil;
    @Autowired
    private StringRedisTemplate stringRedisTemplate;
    //   发送验证码
    @PostMapping("/emailCode")
    public Result emailCode(@Email String email) throws MessagingException {
        ValueOperations<String, String> stringStringValueOperations = stringRedisTemplate.opsForValue();
        String code = stringStringValueOperations.get(email);
        //若redis存在
        if (!StringUtils.isEmpty(code)){
            return Result.error(email+": +" + code + "已存在，还未过期");
        }
        if (mailUtil.mail(email)){
            return Result.success();
        }
        return Result.error("邮箱发送失败");
    }
    //验证验证码
    @PostMapping("/code")
    public Result<String> SureCode(@Pattern(regexp ="^.\\S{5,6}" )String code,@Email String email ){
        //打印
        System.out.println("新邮箱: "+email+" ,用户填写的验证码是: "+code);
        //从redis里拿出code
        ValueOperations<String, String> stringStringValueOperations = stringRedisTemplate.opsForValue();
        String OriCode = stringStringValueOperations.get(email);
        System.out.println("新邮箱: "+email+" ,后端生成的验证码是: "+OriCode);
        if (StringUtils.isEmpty(OriCode)){
            return Result.error( "验证码已失效，请重新发送!");
        }
        if (code.equals(OriCode)){
            System.out.println("比较正确");
            System.out.println(Result.success(email));
            return Result.success(email);
        }
        return Result.error("验证码不正确！");
    }
}

前端VUE部分

1、页面表单

                <el-form :model="userInfo" :rules="rules" label-width="100px" size="large">
                    <el-form-item label="登录名称">
                        <el-input v-model="userInfo.username" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="性别生日">
                        <el-col :span="8">
                            <el-select v-model="userInfo.sex" placeholder="请选择你的性别">
                                <el-option label="男" value="男" />
                                <el-option label="女" value="女" />
                            </el-select>
                        </el-col>
                        <el-col style="margin-left: 20px;" :span="12">
                            <el-date-picker label="生日" v-model="userInfo.birthday" type="date" placeholder="生日"
                                style="width: 100%" />
                        </el-col>
                    </el-form-item>
                    <el-form-item label="用户昵称" prop="nickname">
                        <el-span span="8">
                            <el-input  v-model="userInfo.nickname"></el-input>
                        </el-span>
                    </el-form-item>
                    <el-form-item label="用户邮箱" prop="email">
                        <el-col span="12">
                            <el-input :disabled="flag" v-model="userInfo.email"></el-input>
                        </el-col>
                        <el-col style="margin-left: 25px;" span="12">
                            <el-link v-if="flag" type="primary" size="large" @click="clickemaliupdate">点击修改</el-link>
                            <el-link v-else type="danger" size="large" @click="cancleEmail">取消修改</el-link>
                        </el-col>
                    </el-form-item>
                    <el-form-item v-show="!flag" label="邮箱验证码" prop="code">
                        <el-input style="width: 150px; margin-right: 20px;" placeholder="邮箱验证码" v-model="userInfo.code"></el-input>
                        <el-button type="primary" v-if="flag2" @click="clickEmail">发送验证码</el-button>
                        <el-button type="success" v-else @click="clickSureCode" >确认验证码</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="updateUserInfo">保存修改</el-button>
                    </el-form-item>
                </el-form>

2、页面js

import { userMailService } from '@/api/user.js'
// 2 发送邮箱验证码
const SendMail = async()=>{
    if(originEmail.value === userInfo.value.email){
        ElMessage.error("邮箱未更改，无需发送");
        flag2.value=true
    }else{
        let resultMail =await userMailService(userInfo.value)
        console.log("这个东西是"+resultMail.code)
        if(resultMail.code===0){
            ElMessage.success("发送成功")
            flag2.value=false
        }
        if(resultMail.code===1){
            ElMessage.error(resultMail.value.message)
        }
        
    }
}

// 1 点击发送邮件
const clickEmail = ()=>{
    SendMail()    
}
// 点击修改邮箱
const clickemaliupdate = ()=>{
    flag.value = false
    flag2.value=true
}
// 取消修改邮件
const cancleEmail=()=>{
    flag.value = true
    flag2.value=false
    // 还原邮箱值
    userInfo.value.email = originEmail.value
}

import { UserSureCodeService } from '@/api/user.js'
// 确认验证码
const clickSureCode=async()=>{
    let reslut = await UserSureCodeService(userInfo.value)
    console.log("异步后"+reslut.data)
    if(reslut.code === 0){
        ElMessage.success("邮箱验证成功")
        originEmail.value=reslut.data
        // 更改修改状态
        cancleEmail()
    }else{
        ElMessage.error(reslut.value.message)
    }

}

3、页面路径访问

// 发送邮件，生成验证码
export const userMailService = (userInfo)=>{
    let params = new URLSearchParams();
    params.append('email',userInfo.email)
    return request.post('/emailCode',params) 
}

//验证验证码code
export const UserSureCodeService=(userInfo)=>{
    let params = new URLSearchParams();
    params.append('code',userInfo.code)
    params.append('email',userInfo.email)
    return request.post("/code",params)
}