SpringBoot邮箱验证码

1. 前端

     <el-form-item prop="code">
        <el-input
          v-model="registerForm.code"
          auto-complete="off"
          placeholder="验证码"
          style="width: 55%"
        >
          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
        </el-input>
        <div class="register-code">
          <el-button @click="sendEmailCode" :disabled="codeBtn.isCodeBtnUse" :type="codeBtn.codeType" plain>{{ codeBtn.codeBtnText }}</el-button>
        </div>
      </el-form-item>

export default {
  name: "Register",
  data() {
    return {
      codeBtn:{
        codeBtnText: "发送验证码",
        codeType: 'primary',
        isCodeBtnUse: false,
      },
    };
  },
  methods: {
     sendEmailCode() {
      const username = this.registerForm.username
      var codeTime = 15;
      this.codeBtn.codeType = ''
      this.codeBtn.isCodeBtnUse = true
      var timer = setInterval(() => {
        if (codeTime == -1) {
          this.codeBtn.codeType = 'primary'
          this.codeBtn.isCodeBtnUse = false
          this.codeBtn.codeBtnText = "发送验证码"
          clearInterval(timer)
        } else{
          this.codeBtn.codeBtnText = codeTime + 's后重新发送'
          codeTime--
        }
      }, 1000)
      sendEmailCode(username).then(res => {
        console.log(res)
        if (res.code == 0) {
          this.$message({
            message: res.msg,
            type: 'success'
          })
        }
      }).catch(err => {
        console.log(err)
      })

    }
  },

2. pom依赖

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

        <!-- HuTool工具-->
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.7.17</version>
        </dependency>

3. yml配置

spring:
  mail:
    host: smtp.qq.com
    port: 587
    username: xxxxxxxxx@qq.com
    password: xxxxxxxxx   #password为邮箱授权码
    protocol: smtp #发送邮件协议
    default-encoding: utf-8
    from: xxxxxxxxx@qq.com

4. Controller

    @PostMapping("/sendEmailCode")
    public AjaxResult sendEmailCode(@RequestBody String username)
    {
        String verifCode = RandomUtil.randomNumbers(6);
        String message = "【U独】本次注册验证码：" + verifCode;
        mailService.sendMail(username, "【U独】注册验证码", message);
        return new AjaxResult(0, "验证码发送成功");
    }

5. Service

Service接口

public interface MailService {
    public void sendMail(String sendTo, String title, String content);
}

ServiceImpl实现类

public class MailServiceImpl implements MailService{

    @Resource
    private JavaMailSender mailSender;

    @Value("${spring.mail.username}")
    private String fromEmail;

    public void sendMail(String sendTo, String title, String content) {
        SimpleMailMessage message = new SimpleMailMessage();
        message.setFrom(fromEmail);  // 发件人
        message.setTo(sendTo);       // 收件人
        message.setSubject(title);   // 邮件标题
        message.setText(content);    // 邮件内容
        mailSender.send(message);
    }
}