eggjs 使用nodemailer发送邮件

本文介绍如何在EggJS后端开发中利用Nodemailer插件实现邮件发送功能,包括安装配置、邮箱授权及代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近在用eggjs做后台开发,正好遇到需要发送邮件的功能,再此记录一下

1. 下载 nodemailer

npm install nodemailer --save

2. 邮箱授权

当然,要发送邮件,我们需要有自己的邮箱,并且要去获取到授权码
这里以QQ邮箱为例:

进入邮箱 》 设置 》 账户 》POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务
开启POP3/SMYP服务,获取授权码
在这里插入图片描述

3. 使用nodemailer

获得授权码后,我们就可以测试一下了

// 这里举简单例子,也可以封装成service来调用
// 引入nodemailer
const nodemailer = require('nodemailer');

// 封装发送者信息
const transporter = nodemailer.createTransport({
  service: 'qq', // 调用qq服务器
  secureConnection: true, // 启动SSL
  port: 465, // 端口就是465
  auth: {
    user: 'xxxxx@qq.com', // 账号
    pass: 'xxxxxxxxxx', // 授权码,

  },
});

// 邮件参数及内容
const mailOptions = {
  from: 'xxxxx@qq.com', // 发送者,与上面的user一致
  to: 'xxxx@xxx.com', // 接收者,可以同时发送多个,以逗号隔开
  subject: '测试的邮件', // 标题
  // text: '测试内容', // 文本
  html: '<h2>测试一下:</h2><a class="elem-a" href="https://baidu.com"><span class="content-elem-span">测试链接</span></a>',
};

// 调用函数,发送邮件
await transporter.sendMail(mailOptions, function(err, info) {
  if (err) {
    console.log(err);
    return;
  }
  console.log(info);

});

简单封装

上面是直接使用nodemailer,在实际开发中,我们可以对其进行简单封装,以便调用
在app/service/tool.js文件

// app/service/tool.js

'use strict';

const Service = require('egg').Service;

const nodemailer = require('nodemailer');
const user_email = 'example@qq.com';
const auth_code = 'xxxxxx';

const transporter = nodemailer.createTransport({
  service: 'qq',
  secureConnection: true,
  port: 465,
  auth: {
    user: user_email, // 账号
    pass: auth_code, // 授权码

  },
});

class ToolService extends Service {

  async sendMail(email, subject, text, html) {

    const mailOptions = {
      from: user_email, // 发送者,与上面的user一致
      to: email,   // 接收者,可以同时发送多个,以逗号隔开
      subject,   // 标题
      text,   // 文本
      html,
    };

    try {
      await transporter.sendMail(mailOptions);
      return true;
    } catch (err) {
      return false;
    }
  }

}

module.exports = ToolService;

在测试controller中调用, app/controller/test.js

// app/controller/test.js
'use strict';

const Controller = require('egg').Controller;

class TestController extends Controller {
  async testSendMail() {
  	const ctx = this.ctx;
  	
  	const email = 'xxxxxx@163.com';  // 接收者的邮箱
    const subject = '测试邮件';
    const text = '这是一封测试邮件';
    const html = '<h2>测试一下::</h2><a class="elem-a" href="https://baidu.com"><span class="content-elem-span">测试链接</span></a>';
    
    const has_send = await this.service.tool.sendMail(email, subject, html);
    
    if (has_send) {
		ctx.body={
			message: '发送成功',
		};
		return;
	}
	ctx.body={
		message: '发送失败',
	};
    
  }

}

module.exports = TestController;

这就是简单的发送邮件,这个插件还可以上传附件,详情可参考nodemailer文档:https://nodemailer.com/about/

<think>我们正在处理一个Vue.js应用,并希望在其中使用nodemailer发送邮件。但是需要注意,nodemailer是一个Node.js模块,而Vue.js是一个前端框架,通常运行在浏览器环境中。在浏览器中直接使用Node.js模块(如nodemailer)是不可行的,因为浏览器环境没有Node.js的模块系统(如`require`)和特定的API(如文件系统、网络等)。 因此,我们需要将发送邮件的功能放在一个后端服务中,然后通过Vue应用(前端)调用这个后端服务。通常的做法是创建一个简单的Node.js服务器(可以使用Express、Koa等框架),在这个服务器中设置nodemailer,然后提供一个API(如REST API)供前端调用。 步骤: 1. 创建一个Node.js后端服务(可以是一个单独的服务器项目,或者与Vue项目同在一个项目中但作为独立服务运行)。 2. 在Node.js服务中安装并配置nodemailer,编写发送邮件的接口。 3. 在Vue应用中,通过HTTP请求(例如使用axios)调用这个接口。 但是,用户提供的引用内容中有一个sendMail.js文件,我们可以基于这个文件来构建后端服务。 具体实现步骤: 一、后端服务(Node.js) 1. 初始化Node.js项目,安装必要的依赖:express, nodemailer, cors(用于处理跨域)等。 2. 创建服务文件(如server.js),编写代码: - 引入express和nodemailer - 使用express创建一个服务器 - 配置中间件(如解析JSON、cors等) - 将用户提供的sendMail.js中的功能集成进来,并提供一个API路由 3. 运行Node.js服务器。 二、前端(Vue.js) 1. 在Vue组件中,编写一个方法来触发发送邮件的请求(使用axios或其他HTTP库)。 2. 将需要发送邮件内容(如主题、正文、收件人等)作为请求数据发送到后端API。 注意:由于安全原因,不要在客户端暴露邮箱的授权码。因此,必须通过后端服务发送邮件。 下面分别给出后端和前端的关键代码示例。 后端代码示例(基于用户提供的sendMail.js): 假设我们创建一个文件`server.js`: ```javascript const express = require('express'); const cors = require('cors'); const bodyParser = require('body-parser'); const nodemailer = require('nodemailer'); const app = express(); app.use(cors()); app.use(bodyParser.json()); // 创建transporter(与用户提供的sendMail.js中一致) let transporter = nodemailer.createTransport({ service: 'qq', port: 465, secureConnection: true, auth: { user: '[email protected]', // 替换为你的QQ邮箱 pass: '你的授权码' // 替换为你的SMTP授权码 } }); // 定义发送邮件的API app.post('/send-email', (req, res) => { const { to, subject, html } = req.body; // 从请求体中获取收件人、主题和内容 let mailOptions = { from: '"83687401" <[email protected]>', // 发送地址,这里可以修改成你的邮箱和名称 to: to, // 收件人,从请求中获取 subject: subject, // 主题 html: html // 内容主体 }; transporter.sendMail(mailOptions, (error, info) => { if (error) { console.log(error); return res.status(500).send({ success: false, error }); } console.log('Message sent: %s', info.messageId); res.send({ success: true, messageId: info.messageId }); }); }); const PORT = process.env.PORT || 3001; app.listen(PORT, () => { console.log(`Server is running on port ${PORT}`); }); ``` 注意:需要将`[email protected]`替换为你的QQ邮箱,`你的授权码`替换为你在QQ邮箱中设置的SMTP授权码(不是邮箱密码)。 三、前端Vue组件示例 在Vue组件中,我们可以这样调用: ```vue <template> <div> <button @click="sendEmail">发送邮件</button> </div> </template> <script> import axios from 'axios'; export default { methods: { sendEmail() { const mailData = { to: '[email protected]', // 收件人邮箱 subject: '测试邮件', html: '<h1>你好,这是一封测试邮件</h1><p>来自Vue应用的邮件发送测试</p>' }; // 假设后端服务运行在 http://localhost:3001 axios.post('http://localhost:3001/send-email', mailData) .then(response => { console.log('邮件发送成功:', response.data); }) .catch(error => { console.error('邮件发送失败:', error); }); } } } </script> ``` 注意:在Vue项目中需要安装axios:`npm install axios`。 四、运行 1. 启动Node.js后端服务:`node server.js` 2. 运行Vue应用(通常使用`npm run serve`) 3. 在浏览器中访问Vue应用,点击按钮发送邮件。 安全提示:在实际部署中,应该对API进行安全加固,比如使用JWT验证、限制调用频率等,避免被滥用。 另外,如果Vue应用和后端服务部署在同一个域名下,可以使用相对路径来避免跨域问题。如果分开部署,则需要配置代理(在开发环境下Vue CLI支持代理配置)或者在后端设置CORS。 以上就是在Vue.js应用中间接使用nodemailer发送邮件的实现方法。 相关问题: 1. 如何获取QQ邮箱的SMTP授权码? 2. 如何部署这个Node.js后端服务? 3. 如何防止发送邮件的API被滥用? 4. 除了QQ邮箱,nodemailer还支持哪些邮箱服务?</think>### Vue.js 应用中集成 Nodemailer 的实现方法 在 Vue.js 应用中直接使用 Nodemailer 不可行,因为 Nodemailer 是 Node.js 后端模块,无法在浏览器环境运行。以下是完整的实现方案: #### 1. 创建后端服务(Node.js) 在项目根目录创建 `server` 文件夹,添加 `mailService.js`: ```javascript // server/mailService.js const nodemailer = require('nodemailer'); // 创建邮件传输器 const transporter = nodemailer.createTransport({ service: 'qq', port: 465, secureConnection: true, auth: { user: '[email protected]', // 替换为你的QQ邮箱 pass: 'your_smtp_auth_code' // 替换为SMTP授权码(非邮箱密码) } }); // 邮件发送函数 module.exports = async (req, res) => { try { const { to, subject, html } = req.body; const info = await transporter.sendMail({ from: '"Vue应用" <[email protected]>', to, subject: subject || '默认主题', html: html || '<p>默认HTML内容</p>' }); res.status(200).json({ success: true, messageId: info.messageId }); } catch (error) { console.error('邮件发送失败:', error); res.status(500).json({ success: false, error: error.message }); } }; ``` #### 2. 创建 Express 服务器 在 `server` 文件夹中添加 `index.js`: ```javascript // server/index.js const express = require('express'); const cors = require('cors'); const bodyParser = require('body-parser'); const mailService = require('./mailService'); const app = express(); app.use(cors()); app.use(bodyParser.json()); // 邮件发送接口 app.post('/api/send-email', mailService); const PORT = 3001; app.listen(PORT, () => { console.log(`邮件服务运行在 http://localhost:${PORT}`); }); ``` #### 3. Vue 前端调用 在 Vue 组件中发送请求: ```vue <template> <div> <button @click="sendEmail">发送测试邮件</button> </div> </template> <script> import axios from 'axios'; export default { methods: { async sendEmail() { try { const response = await axios.post('http://localhost:3001/api/send-email', { to: '[email protected]', // 收件邮箱 subject: 'Vue应用邮件测试', html: '<h1>邮件内容</h1><p>这是从Vue应用发送邮件</p>' }); if (response.data.success) { alert('邮件发送成功!'); } } catch (error) { console.error('邮件发送失败:', error); alert('发送失败: ' + error.response?.data?.error || error.message); } } } } </script> ``` #### 4. 环境配置 1. **获取QQ邮箱授权码**: - 登录QQ邮箱 → 设置 → 账户 → 开启 `POP3/SMTP服务` - 生成16位SMTP授权码(替换代码中的 `your_smtp_auth_code`) 2. **安装依赖**: ```bash # 后端依赖 cd server npm install express nodemailer cors body-parser # 前端依赖 (在Vue项目目录) npm install axios ``` 3. **启动服务**: ```bash # 启动Node邮件服务 node server/index.js # 启动Vue应用 npm run serve ``` #### 关键注意事项 1. **安全防护**: - 添加请求验证(如JWT令牌) - 使用环境变量存储敏感信息(`.env` 文件) - 启用HTTPS加密传输 2. **跨域处理**: - 开发环境:配置 `vue.config.js` 代理 ```js // vue.config.js module.exports = { devServer: { proxy: 'http://localhost:3001' } } ``` - 生产环境:部署到同域名下或配置CORS白名单 3. **邮件模板**: ```javascript // 使用模板引擎示例 (如ejs) const ejs = require('ejs'); const html = await ejs.renderFile('templates/email.ejs', { username: '张三' }); ``` #### 部署方案 | 环境 | 方案 | 优势 | |------------|---------------------------|-----------------------| | 本地测试 | 同时运行Vue和Node服务 | 快速调试 | | 生产环境 | 部署Node服务到云平台 | 自动伸缩/高可用 | | 无服务器 | 使用Vercel/Netlify函数 | 免运维/按需付费 | > **重要提示**:永远不要在前端暴露SMTP凭据!所有邮件发送操作必须通过后端服务完成[^1][^2]。 --- ### 相关问题 1. **如何避免邮件被识别为垃圾邮件?** 2. **如何实现邮件发送进度提示?** 3. **除了QQ邮箱,Nodemailer支持哪些邮件服务商?** 4. **如何在Vue中实现邮件附件上传功能?** 5. **如何监控邮件发送的成功率?** [^1]: 引用自 `/usr/projects/vue-webhook/sendMail.js` 的 Nodemailer 配置 [^2]: 参考 Nodemailer 官方文档的客户端使用限制 [^3]: 关于无头 CMS 与 Vue 的集成参考
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值