Vue + Nodejs 发送邮件

---

theme: smartblue

一、参考

Nodemailer :: Nodemailer

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端口为邮件接收端口，可自行替换

```

Send Email

``` 当用户点击按钮后，开始发送邮件

3.2 nodejs 设置

3.2.1 项目初始化

控制台输入 npm init, 并输入相关信息

3.2.2 安装依赖

npm i body-parser emailjs express nodemailer nodemon

3.2.3 修改package.json

加上一行："type": "module"

3.2.4 创建index.js

在创建的Node项目文件夹中，创建index.js文件，

本案例中，指定发送人 2235809286 给 2292600704 发送邮件

内容如下：

``` 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,并进入项目页面

4.2 启动 nodejs 服务

控制台输入node index.js

4.3 效果演示