一、参考
Vue.js 使用Vue.js如何发送邮件|极客教程 (geek-docs.com)
Node.js使用Nodemailer发送邮件 - JavaScript之禅 - SegmentFault 思否
前端使用nodemailer发送邮件的过程及踩坑及问题解决_vue 无法安装nodemailer-CSDN博客
完美解决 node.js 模块化后报错 require is not defined_node require is not defined-CSDN博客
vue前端+nodejs后端通讯最简单demo_node vue前后端同个端口-CSDN博客
二、获取授权码
开启 POP3/SMTP服务(以QQ邮箱为例):
进入邮箱的设置页面,点击生成授权码
根据要求发送指定短信
验证完毕后即可获取授权码
三、相关代码
3.1 Vue 设置
安装axios: npm i axios
,案例中指定6666
端口为邮件接收端口,可自行替换
xml
<script lang="ts" setup>
import axios from 'axios'
// 邮件信息
let obj = {
from:"2235809286@qq.com",
to:"2292600704@qq.com",
subject:"Hello ✔",
text:"Hello world?",
html:"<b>Hello world?</b>"
}
// 发送邮件
const sendEmail = ()=>{
axios.post("http://127.0.0.1:6666/email",obj).then(res=>{
console.log(res)
})
}
</script>
<template>
<button @click="sendEmail">Send Email</button>
</template>
当用户点击按钮后,开始发送邮件
![](https://file.jishuzhan.net/article/1782229402306744322/5ca68b60b92b230e5db48efd2c01f967.webp)
3.2 nodejs 设置
3.2.1 项目初始化
控制台输入 npm init
, 并输入相关信息
![](https://file.jishuzhan.net/article/1782229402306744322/0715fa982d9a3af890cb0d08b4a5eeb3.webp)
3.2.2 安装依赖
npm i body-parser emailjs express nodemailer nodemon
![](https://file.jishuzhan.net/article/1782229402306744322/63ab0689f8c1cb7b4d8fd3e4a4eca69c.webp)
3.2.3 修改package.json
加上一行:"type": "module"
![](https://file.jishuzhan.net/article/1782229402306744322/7f21ef4f004027b710674c82501f52f6.webp)
3.2.4 创建index.js
在创建的Node项目文件夹中,创建index.js文件,
本案例中,指定发送人 2235809286
给 2292600704
发送邮件
内容如下:
javascript
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
var nodemailer = require('nodemailer')
var express = require('express');
var app = express();
var bodyParse = require('body-parser')
// 指定监听端口
var port = 6666
var app = express();
//增加头部信息解决跨域问题
app.all('*', function (req, res, next){
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("Access-Control-Allow-Credentials", true);
res.header("X-Powered-By", ' 3.2.1');
next();
});
//使用bodyParse解释前端提交数据
app.use(bodyParse.urlencoded({extended:true})) ;
app.use(bodyParse.json());
// 处理根目录的get请求
app.get('/',function(req,res){
}) ;
// 处理/login请求
app.post('/email',function(req,res){
console.log(req)
main(req.body).catch(console.error);
//向前台反馈信息
res.status(200).send(
"success"
) ;
});
// 监听指定端口
var server=app.listen(port);
console.log("服务器已运行");
console.log("监听网址为:http://127.0.0.1:/" + port);
const transporter = nodemailer.createTransport({
host: "smtp.qq.com",
port: 587,
secure: false, // Use `true` for port 465, `false` for all other ports
auth: {
user: "2235809286@qq.com", // 输入发送者的邮件
pass: "xxxxxxxx", // 输入生成的授权码
},
});
// async..await is not allowed in global scope, must use a wrapper
async function main(request) {
// send mail with defined transport object
const info = await transporter.sendMail({
from: request.from, // sender address
to: request.to, // list of receivers
subject: request.subject, // Subject line
text: request.text, // plain text body
html: request.html, // html body
});
console.log("Message sent: %s", info.messageId);
// Message sent: <d786aa62-4e0a-070a-47ed-0b0666549519@ethereal.email>
}
四、测试
4.1 启动 vue 服务
控制台输入 npm run dev
,并进入项目页面
![](https://file.jishuzhan.net/article/1782229402306744322/6e5929f1cc885aea856fc9c9ca0703c7.webp)
![](https://file.jishuzhan.net/article/1782229402306744322/066a0e2bdeca05f5bef5a82d5215c536.webp)
4.2 启动 nodejs 服务
控制台输入 node index.js
![](https://file.jishuzhan.net/article/1782229402306744322/e12d0c6a1a5ff4641529df9e0984c520.webp)
4.3 效果演示
![](https://file.jishuzhan.net/article/1782229402306744322/7a03578f19a597148e100ce807ae6c0a.webp)