Loading...
墨滴

狼丶宇先森

2021/03/19  阅读:7  主题:蔷薇紫

nestjs发送邮件验证码和附件使用ejs模板

一、写在前面

当你看到这篇文章的时候,站长想猜你肯定已经找了好几个网页的资料了,还是没看到你合适的吧?此篇文章肯定是史上最详细的教程之一,这边文章内容主要是基于nestjs来开发邮件服务器,实现发送邮件验证码、发送文件附件等功能。好了,话不多说,进入主题……

二、方案分析

  1. 第一步肯定是要选择使用的邮件服务商了,这里呢,我们选择腾讯企业邮箱作为邮件服务器的服务商。注册地址: https://exmail.qq.com/login ,具体的注册方法就不再介绍了,按官网的步骤一步一步走就可以了。
  2. 注册好账号之后登录管理后台,注册一个成员或者直接用管理员的账号,站长用的是成员账号,操作如下,打开邮箱设置页面: 邮箱后台
  3. 选择“账户”设置 邮箱设置
  4. 往下滑,找到图中的部分,默认是关闭的,所以要“开启安全登录” 在这里插入图片描述
  5. 选择“收发信设置”,把图中红色的部分都勾上。 收发信设置
  6. 选择“邮箱绑定”选项,找到客户端专用密码,点击生成新密码。这里需要注意的是:客户端密码生成之后需要自行保存好,弹窗关闭之后没保存的话就只有重新生成了!!! 客户端专用密码
  7. 当你前面6步都完成了,也顺利的拿到客户端专用面面的时候,你已经成功一大半了!开发正式开始,也可以先回顾一下普通node服务开发是怎么操作的。

一般情况下我们开发node服务端的时候,使用的都是nodemailer 这个包来创建发送邮件的方法的。(方案分析的代码是一般node服务开发的时候用到的,nestjs的在后面,不想看此段的可以直接略过)如下:

首先安装一下邮件模块nodemailer这个模块包。

npm i nodemailer --save
# or
yarn add nodemailer
# or
cnpm i nodemailer --save

安装模板引擎ejs

npm i ejs --save
# or
yarn add ejs
# or
cnpm i ejs --save

1、创建一个 Email.js 模块作为公共模块:

const nodemailer = require('nodemailer');
const config = require(':config/server.base.config'); //配置文件
class EMail {
    constructor(options) {
        this.options = {
            host'smtp.qq.com',
            port465,
            fromUser'"发送人" <user@qq.com>',
            subjectnull,
            secureConnectiontrue,
            // 我们需要登录到网页邮箱中,然后配置SMTP和POP3服务器的密码
            auth: {
                user'user@qq.com',//这里是发送人的邮箱,就是你刚刚注册的那个邮箱地址
                pass'loginkey' //邮箱生成的登录key(刚刚生成的客户端专用密码)
            }
        };
        this.mailer = nodemailer.createTransport(this.options);
    }

    /**
     * 发送邮件
     * @param {*} toName 接收者的名字
     * @param {*} toEmail 接收邮件的地址
     */

    sendEmail({ toEmail, subject, message }) {
        const mailOptions = {
            // 发送邮件的地址
            fromthis.options.fromUser, // login user must equal to this user
            // 接收邮件的地址
            to: toEmail,
            // 邮件主题
            subject: subject || '你有一条新消息',
            // 以HTML的格式显示,这样可以显示图片、链接、字体颜色等信息
            html: message
        };
        return this.mailer.sendMail(mailOptions);
    }
};
module.exports = new EMail(config.email);

2、使用的时候引入Email.js类

const emailTool = require('./Email');

//直接在service里调用此方法即可发送邮件了。
emailTool.sendEmail({ toEmail"目标邮箱地址""邮件的主题""邮件的内容可以是text或者html" });

到这里呢,老版本的一个简单的node邮件服务开发就完成了。 只需要运行就可以发送邮件了。

三、废话少说,直接开撸

上面是老版本的node发送邮件的方法,nestjs发送邮件的功能开发,正式开始!

  1. 第一步还是需要安装一下我们用到的依赖包 “@nestjs-modules/mailer”和“nodemailer”这个模块包的使用文档,可能会因为网络问题,这个网站不一定能打得开。文档地址: https://nest-modules.github.io/mailer/docs/mailer
yarn add @nestjs-modules/mailer nodemailer
#or
npm install --save @nestjs-modules/mailer nodemailer
  1. 站长的项目结构大概如下,下面演示的代码可能会有部分简化(演示是新建的模块,此目录仅供参考!工程项目
  2. 使用nest 命令生成相关的模块
# 生成email模块
nest g mo email
# 生成 email service
nest g s email
# 生成 email collector
nest g co emai

生成模块 刚刚生成的email服务,如下: 在这里插入图片描述 再新建一个template文件夹,里面放ejs模板 template ejs 模板locals是一个ejs的内部变量,不知道的可以去ejs官网看看,内容如下:

<div class="biu-nav-email"
     style="max-width: 600px;min-width: 300px;margin: 40px auto;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);font-size: 16px;padding: 20px;background-image: linear-gradient(to right, #9646de 0%, #cb03e4 100%);border-radius: 5px;color: #fff;">

    <h3 style="margin-bottom: 40px;">
        Hi! 亲爱的用户:
    </h3>
    <p style="padding-left: 20px;">
        您正在进行邮箱验证,本次请求的验证码为:
    </p>
    <p style="color: #dde2e2;padding-left: 14px;">
        <strong style="color: #3acbff;font-size: 24px;">
            <%= locals.code %>
        </strong>
        <span>(为了保障您帐号的安全性,请在30分钟内完成验证,祝您生活愉快!)</span>
    </p>
    <p style="padding-left: 20px;">
        <span>快速访问:</span>
        <a href="https://www.biunav.com" style="color:#fff" target="_blank"
           rel="noopener noreferrer">
https://www.biunav.com</a>
    </p>
    <p style="margin-top: 40px;text-align: right;">
        <%= locals.sign %>
    </p>
    <p style="text-align: right;">
        <%= locals.date %>
    </p>
</div>
  1. 开始配置 email.module.ts 模块,如下:
import { MailerModule } from '@nestjs-modules/mailer';
import { EjsAdapter } from '@nestjs-modules/mailer/dist/adapters/ejs.adapter';
import path from 'path';
import { Module } from '@nestjs/common';
import { EmailService } from './email.service';
import { EmailController } from './email.controller';

@Module({
    imports: [
        MailerModule.forRoot({
            transport: {
                host: 'smtp.exmail.qq.com'//邮箱服务器地址
                port: 465//服务器端口 默认 465
                auth: {
                    user: 'xxxx@xxxx.com',//你的邮箱地址
                    pass: '你的客户端专用密码'
                }
            },
            preview: true,//是否开启预览,开启了这个属性,在调试模式下会自动打开一个网页,预览邮件
            defaults: {
                from'测试邮件 <user@email.com>' //发送人 你的邮箱地址
            },
            template: {
                dir: path.join(process.cwd(), './src/email/template'),//这里就是你的ejs模板文件夹路径
                adapter: new EjsAdapter(),
                options: {
                    strict: true //严格模式
                }
            }
        })
    ],
    providers: [EmailService],
    controllers: [EmailController],
    exports: [EmailService]
})
export class EmailModule {}
  1. 开始编写 email.service.ts 模块,如下:
import { ISendMailOptions, MailerService } from '@nestjs-modules/mailer';
import { Injectable } from '@nestjs/common';
// import path from 'path';

@Injectable()
export class EmailService {
    constructor(private readonly mailerService: MailerService) {}

    /**
     * 发送邮件验证码
     * @param data 邮件主体信息
     */

    async sendEmailCode(data) {
        try {
            const code = Math.random()
                .toString()
                .slice(-6);
            const date = '2021年03月18日 22:27:49';
            const sendMailOptions: ISendMailOptions = {
                to: data.email,
                subject: data.subject || '用户邮箱验证',
                template: 'validate.code.ejs'//这里写你的模板名称,如果你的模板名称的单名如 validate.ejs ,直接写validate即可 系统会自动追加模板的后缀名,如果是多个,那就最好写全。
                //内容部分都是自定义的
                context: {
                    code, //验证码
                    date, //日期
                    sign: data.sign || '系统邮件,回复无效。' //发送的签名,当然也可以不要
                }
                // attachments: [
                //     {
                //         filename: 'validate.code.ejs', //文件名
                //         path: path.join(process.cwd(), './src/email/template/validate.code.ejs') //服务端的文件地址
                //     }
                // ]
            };
            this.mailerService
                .sendMail(sendMailOptions)
                .then(() => {
                    console.log(`发送邮件给:${data.email},成功!主题:${data.subject || '默认'}`);
                })
                .catch(error => {
                    console.log(`发送邮件给:${data.email}出错!主题:${data.subject || '默认'}`, error);
                });
            return { code: 200, message: '发送成功' };
        } catch (error) {
            console.error('发送邮件出错:', error);
            return { error };
        }
    }
}
  1. 开始编写 email.controller.ts 模块,如下:
import { NoAuth } from '@decorators/no.auth.decorator';
import { Body, Controller, Post } from '@nestjs/common';
import { EmailService } from './email.service';

@Controller('email')
export class EmailController {
    constructor(private emailService: EmailService) {}

    @NoAuth()
    @Post('/sendCode')
    async sendEmailCode(@Body() data) {
        return this.emailService.sendEmailCode(data);
    }
}
  1. 邮件基本功能的开发到此为止了,接下来要开始测试模块功能了,进入第四个模块……

四、功能截图

  1. 开始测试模块功能,我们使用postman来调用刚刚写的接口,如下: 在这里插入图片描述

  2. 开启了preview:true,发送成功之后,会自动打开一个标签页,如下: 在这里插入图片描述

  3. 看看我们刚刚发送出去的邮件,如下: 微信里的邮箱 qq邮箱的邮件列表 在这里插入图片描述 打开邮件预览如下: 在这里插入图片描述

  4. 我们刚刚已经能成功的发送出去邮件了,到这里呢也快告一段落了,但是呢还有一个发送邮件附件的功能,这个功能其实很简单,简单的思路就是先把文件传到服务端,然后发送的时候把地址填上去就可以了。

五、写在后面

上面就是nest邮件服务器项目的全部内容了,加油,快动手试试吧。

代码部分是由真实项目简化而来的,但是核心部分并没有变,有问题请留言或者@博主,谢谢支持o( ̄︶ ̄)o~

感谢您的阅读,如果此文章或项目对您有帮助,请给个一键三连吧,GitHub有开源项目,需要的小伙伴可以顺手star一下!

GitHub: https://github.com/langyuxiansheng

更多信息请关注公众号: “笔优站长”

笔优站长
笔优站长
扫码关注“笔优站长”,支持站长

狼丶宇先森

2021/03/19  阅读:7  主题:蔷薇紫

作者介绍

狼丶宇先森