搭建一个可以发送邮箱验证码的接口，内含前端处理 接口返回、请求处理

环境搭建

在node安装好的情况下（一般vue环境有的node也有 没有可以使用win+r回车输入node -v 有版本号则已经安装好
找一个空文件夹作为此项目文件夹 点击上面的地址栏输入cmd回车
输入npm init -y
再输入npm install nodemailer安装发送邮件的插件

环境配置

使用vscode打开这个程序
在vscode中的终端输入npm install
命令完成后项目会多个json文件，里面是插件还有一些基础环境的版本配置
在文件夹根目录新建servers.js

const express = require('express');
const nodemailer = require('nodemailer');

const app = express();
const port = 3000;
const content = 123456;




// 创建发送邮件的接口
app.get('/send-email', (req, res) => {
   


 
  console.log(req)
  console.log(bodyParser)
  console.log(123123);
  // 创建邮件传输对象
  let transporter = nodemailer.createTransport({
   
    service: '163', // 运营商选择   qq   网易
    port: 465,
    secure: true, // true for 465, false for other ports
    auth: {
   
      user: "[email protected]", // 发送方的邮箱
      pass: 'ABCDSD' //   pop3 授权码 **百度如何获取吧**
    }
  });

  // 生成六位随机数作为验证码
  const code = Math.floor(100000 + Math.random() * 900000);
  let mailOptions = {
   
    from: '"发送人" <[email protected]>', // 发送方邮箱
    to: "[email protected]", // list of receivers
    subject: '欢迎注册√', // Subject line
    text: `${
   content}`, // plain text body
    html: `
    欢迎注册xxx系统,验证码为:<h1 style="background-color:white;">${
   code}<h1>,有效期为五分钟.` // html body   
  }


  // 发送邮件
  transporter.sendMail(mailOptions, (error, info) => {
   
    if (error) {
   
      console.log(error);
      res.status(500).send({
   
        success: false,
        data: {
   

        }
      });
    } else {
   
      console.log(mailOptions)
      console.log('Email sent: ' + info.response);
      res.send({
   //返回值
        success: true,
        data: {
   
          code: 123123
        }
      });
    }
  });
});

// 启动服务器
app.listen(port, () => {
   
  console.log(`Server running on port ${
   port}`);
});

是的，我把后面的代码也贴上了 其实具体只需要添加启动服务器 端口设置，使用一个测试接口即可 设置完之后先配置自己的邮箱

配置邮箱

打开自己的网易邮箱或者是qq邮箱
点击设置

打开这个

在里面打开这两个设置

通过验证之后保存好自己的pop3授权码，只显示一次 ，找不到了自行百度解决

配置好之后将授权码、自己的邮箱 、要发送的邮箱都进行配置

配置好之后启动

启动

终端中输入
node server.js
可以看到终端显示
{//返回值
success: true,
data: {
code: code
}
});
这样的，这就是返回值。
这里面的code就是生成的六位数随机码，通过接口传给前端
尝试使用浏览器
里边输入http://localhost:3000/send-email回车能看到同样的有返回值
并且发现收到了验证码

前端配置

前端如果使用ajax直接键入接口api即可，即http://localhost:3000/send-email

思路

实现邮箱验证码是从你的数据库获得id对应的邮箱并填充（不建议），或者用户输入邮箱之后先进行校验 校验结束之后用户可以点击发送验证码 ，点击按钮开始60秒倒计时 倒计时结束之后才能再次点击，这是最简单的防抖动
点击之后调用接口，发送邮箱号，然后咱们刚刚写好的接口对这个邮箱号进行获取，获取之后配置好邮箱 随机生成六位验证码，其实就是生成一个100000到999999的数而已 ，配置到邮箱之后发送邮箱，接口返回一个验证码给前端 前端获取验证码之后放入pinia中，然后和用户键入的六位验证码对比，如果用户输入的不是六位验证码或者是其他数字，则提醒输入六位数字

待解决问题

1、接口返回的验证码很容易被截取，也就是数据安全收到威胁 ，现在还没有更好的办法
2、用户输入id的时候，是直接获取其邮箱i地址还是由用户直接输入存在争议，因为邮箱和账号并没有绑定，如果绑定了必然要在注册页面对邮箱进行绑定，绑定的时候又要发送验证码。算是我之前考虑不周

前端配置60秒倒数

设置验证码和邮箱校验

/** 6位数字验证码正则 */
export const REGEXP_SIX = /^\d{6}KaTeX parse error: Undefined control sequence: \w at position 40: …nst EMAIL = /^[\̲w̲-]+(\.[\w-]+)*@…/;

/** 忘记密码校验 */
const updateRules = reactive({

verifyCode: [
{
validator: (rule, value, callback) => {
if (value === “”) {
callback(new Error(“请输入验证码”));
} else if (!REGEXP_SIX.test(value)) {
callback(new Error(“请输入六位数字”));
} else {
callback();
}
},
trigger: “blur”
}
],
email: [
{
validator: (rule, value, callback) => {
if (value === “”) {
callback(new Error(“请输入邮箱”));
} else if (!EMAIL.test(value)) {
callback(new Error(“不正确的邮箱格式”));
} else {
callback();
}
},
trigger: “blur”
}
],
password: [
{
validator: (rule, value, callback) => {
if (value === “”) {
callback(new Error(“请输入密码”));
} else if (!REGEXP_PWD.test(value)) {
callback(new Error(“密码格式应为8-18位数字、字母、符号的任意两种组合”));
} else {
callback();
}
},
trigger: “blur”
}
]
});

整个ts文件代码

import {
    reactive } from "vue";
import type {
    FormRules } from "element-plus";

import {
    useUserStoreHook } from "@/store/modules/user";
/** 密码正则（密码格式应为8-18位数字、字母、符号的任意两种组合） */
export const REGEXP_PWD =
  /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([