nodemailer微服务发送qq邮件

nodemailer微服务发送qq邮件

最近做公司网站时遇到一个问题,联系我们,电话?qq?还是邮件吧?那么问题来了,怎么发邮件呢?
找了一下,发现大体就2种方式,一是使用微软提供邮箱,但需要特定条件,还需用户提供邮箱地址,同时还要用户填写接收邮箱,于是产品部说了,你这个用户体验。。。

没办法,于是我找到了nodemailer,利用后台服务发送qq邮件。
demo必备:node环境、两个qq邮箱(一个发,一个接)
注:接的邮箱需要去qq开启smtp权限
在这里插入图片描述
在这里插入图片描述
开启会短信获取smtp码(2毛钱)

一、搭建node微服务
在这里插入图片描述
进入微服务目录,在终端npm i nodemailer
在这里插入图片描述
接着创建微服务启动js(serve.js),目录如下
在这里插入图片描述
serve.js

'use strict';

const express = require('express');
const http = require('http');
const path = require('path');
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer');
let emailSend =require('./email/emailSend.js')

var app = express();
app.use(express.static(path.join(__dirname, 'public')));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: true
}));

var server = app.listen(3000, function () {
  console.log('服务启动')
})

// 设置跨域
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 , yourHeaderFeild');
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By", ' 3.2.1')
  res.header("Content-Type", "application/json;charset=utf-8");
  next();
});

// 发送邮件
app.post('/sendemail', function (req, res) {
  emailSend.sendemail(req,res)

})

email目录下的emailSend.js服务

'use strict';
const express = require('express');
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer');
var app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: true
}));


var emailSend={
  sendemail: function (req, res) {
    let visitorName = req.body.visitorName;
    let companyName = req.body.companyName;
    let telephone = req.body.telephone;
    let mailbox = req.body.mailbox;
    let requirement = req.body.requirement;
    res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
    let transporter = nodemailer.createTransport({
      service: 'qq', // 使用内置传输发送邮件 查看支持列表:https://nodemailer.com/smtp/well-known/
      port: 465, // SMTP 端口
      secureConnection: true, // 使用 SSL
      auth: {
        user: '3471****@qq.com',
        // 这里密码不是qq密码,是你设置的smtp授权码
        pass: 'fxv****uowdaeg',
      }
    });

    let mailOptions = {
      from: '3471*****@qq.com', // 发送邮箱必须与上面开通ssl的邮箱一致
      to: '157*****6@qq.com', // 接收邮箱
      subject: '邮件测试', // 标题
      //text: 'Hello world?', // text html二者选一
      html: "<div>姓名:" + visitorName + "</div>" +
        "<div>公司名称:" + companyName + "</div>" +
        "<div>联系电话:" + telephone + "</div>" +
        "<div>电子邮箱:" + mailbox + "</div>" +
        "<div>要求建议:</div>" +
        "<div>" + requirement + "</div>"
    };

    
    transporter.sendMail(mailOptions, function(error, info){
      if (error) {
        console.log('发送失败!邮箱是否正确');
        res.send({state:210,result:'服务正忙!请等稍后再试!'})
      }else{
        console.log(info);
        res.send({state:200,result:'提交成功!请等候我司联系!'})
      }
    });
  }
}
module.exports=emailSend

如此简单的node服务就搭好了
只需在终端node serve.js启动服务就可以了
在这里插入图片描述

二、前端调用email接口
这里我做了一个小封装useEmail.js

var ntc_sendEmail=function(obj){
    var html='<div class="modal fade" id="emailModal" tabindex="-1" role="dialog" aria-hidden="true">'+
    '<div class="modal-dialog email-modal">'+
        '<div class="modal-content">'+
            '<div class="form-box">'+
                '<div class="form-title" style="font-size:24px;padding-right:55px;letter-spacing: 2px;">马上联系</div>'+
                '<div required class="input-item">'+
                    '<input type="text" id="visitorName" placeholder="请输入姓名">'+
                    '<div class="input-item-icon-box">'+
                        '<img src="/img/emailModal/name.png" alt="">'+
                        '<span>您的姓名:</span>'+
                    '</div>'+
                    '<div class="wrong-tip"></div>'+
                '</div>'+
                '<div class="input-item">'+
                    '<input type="text" id="companyName" placeholder="请输入公司名称">'+
                    '<div class="input-item-icon-box">'+
                        '<img src="/img/emailModal/gongsi.png" alt="">'+
                        '<span>公司名称:</span>'+
                    '</div>'+
                '</div>'+
                '<div required class="input-item">'+
                    '<input type="text" id="telephone" placeholder="请输入联系电话">'+
                    '<div class="input-item-icon-box">'+
                        '<img src="/img/emailModal/tellphone.png" alt="">'+
                        '<span>联系电话:</span>'+
                    '</div>'+
                    '<div class="wrong-tip"></div>'+
                '</div>'+
                '<div class="input-item">'+
                    '<input type="text" id="mailbox" placeholder="请输入电子邮箱">'+
                    '<div class="input-item-icon-box">'+
                        '<img src="/img/emailModal/youxiang.png" alt="">'+
                        '<span>电子邮箱:</span>'+
                    '</div>'+
                    '<div class="wrong-tip"></div>'+
                '</div>'+
                '<div class="input-item textarea-box">'+
                    '<textarea name="" id="requirement" placeholder="请输入要求或建议" cols="30" rows="15"></textarea>'+
                    '<div class="input-item-icon-box">'+
                        '<img src="/img/emailModal/yaoqiu.png" alt="">'+
                        '<span>具体要求:</span>'+
                    '</div>'+
                '</div>'+
                '<div style="text-align: center;padding-right:55px;">'+
                    '<a class="apply-button" type="button">提交</a>'+
                '</div>'+
            '</div>'+
        '</div>'+
    '</div>'+
'</div>'

    $('body').append(html);
    $('#requirement').focus(function(){
        $('#requirement').parent().addClass('text-focus')
    });
    $('#requirement').blur(function(){
        $('#requirement').parent().removeClass('text-focus')
    })
    $('.apply-button').on('click',function(){
        var visitorName = $('#visitorName').val();
        var companyName = $('#companyName').val();
        var telephone = $('#telephone').val();
        var mailbox = $('#mailbox').val();
        var requirement = $('#requirement').val();
        // 联系人姓名验证
        if(visitorName==''){
            $('#visitorName').siblings('.wrong-tip').html('联系人不能为空!')
            return false;
        }
        // 电话验证
        if(telephone==''){
            $('#telephone').siblings('.wrong-tip').html('联系电话不能为空!')
            return false;
        }
        else if (!(/^1[3456789]\d{9}$/.test(telephone))) {
            $('#telephone').siblings('.wrong-tip').html('输入正确电话号码!')
            return false;
        }
        // 邮箱验证
        // if(telephone !==''){
        //     if (!(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(mailbox))) {
        //         $('#mailbox').siblings('.wrong-tip').html('输入正确格式的邮箱或不填!')
        //         return false;
        //     }
        // }
        
        $.ajax(
            {
                url: 'http://localhost:3000/sendemail',
                type: 'post',
                dataType: 'json',
                data: {
                    visitorName: visitorName,
                    companyName: companyName,
                    telephone: telephone,
                    mailbox: mailbox,
                    requirement: requirement
                },
                success: function (data) {
                   alert(data.result)
                },
                error: function (error) {
                    alert(error.result) 
                }
            }
        )
        
        $("#emailModal").modal('hide')
        // 初始化输入框
        visitorName='';
        companyName='';
        telephone='';
        mailbox='';
        requirement='';
    })
    
}

接下来只需在页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="contactUs">
        联系我们
    </button>
    
</body>
<script src="./jquery-1.12.0.min.js"></script>
<script src="./useEmail.js"></script>
<script>
    $('#contactUs').on('click',function(){
        ntc_sendEmail()
    })
</script>
</html>

在这里插入图片描述
在服务中看到中一串代表发送成功了,马上去qq邮箱验证一下吧!!!
在这里插入图片描述**
样式从简,小伙伴们自行书写吧!(产品:界面一定要好看哦(=_=)!)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值