vue 项目实现发 邮件 的功能

大家好，欢迎来到IT知识分享网。

本文以QQ为例子， 其他邮箱参考：node_modules/nodemailer/well-known/services.json
新版本vue-cli 生成已经木有server的文件，需要我们手动来创建一个server.js 在更目录下（和index.html同级）

• server.js （下面的相关参数已经隐藏起来，请用自己的邮箱测试，谢谢）

var path = require('path')
var express = require('express')
var webpack = require('webpack')
var nodemailer = require("nodemailer");

// 加载body-parser 处理post提交过来的数据
var bodyParser = require('body-parser');
var app = express()
var apiRoutes = express.Router()

app.use('/', express.static('./dist'))

// bodyParser 设置,自动会在req上面添加
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
apiRoutes.post('/email', function(req, res) {
    console.info('req', req.body.name, req.body.email)
    var text = `这个人姓名叫${req.body.name }邮箱是${req.body.email}，欢迎骚扰`

    if (req.body.name && req.body.email) {
        res.json({
            iRet: 1,
            info: 'ok',
        });

        // Use Smtp Protocol to send Email
        var transporter = nodemailer.createTransport({
            //https://github.com/andris9/nodemailer-wellknown#supported-services 支持列表
            service: 'qq',
            port: 587, // SMTP 端口
            secure: false,
            // secureConnection: true, // 使用 SSL
            auth: {
                user:你的邮箱,
                //这里密码不是qq密码，是你设置的smtp密码
                pass: XXXXXXXX
            }
        });

        // setup e-mail data with unicode symbols
        var mailOptions = {
            to: req.body.email,
            from: 你的邮箱, // 这里的from和 上面的user 账号一样的
            subject: '我在学习发邮件', // 标题
            //text和html两者只支持一种
            text: text, // 标题
            // html: '<b>Hello world ?</b>' // html 内容
        };

        transporter.sendMail(mailOptions, function(error, info) {
            if (error) {
                return console.log(error);
            }
            console.log('邮件发送: ' + info.response);
            transporter.close();
        });

    } else {
        res.json({
            iRet: -1,
            info: 'error',
        });
        return;
    }
});
app.use('/api', apiRoutes)


app.listen(8081, function() {
    console.info('复制打开浏览器', 'localhost:8081')
})

上面获取相关参数pass的方法参考：https://blog.csdn.net/Zhooson/article/details/79889081

• 留意一下： 启动的server.js的端口是8081，vue-cli启动的端口是 8080 。

修改代理，打开config/index.js 添加以下代码

    proxyTable: {
        '/api': {
            target: 'http://localhost:8081', // 接口的域名
            // secure: false,  // 如果是https接口，需要配置这个参数
            changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
            // pathRewrite: {
            //     '^/api': ''
            // }
        }
    }

• 发邮件的email.vue文件是：

<template>
  <div class="hello">
    <div class="input-div">
      <label for="name">姓名</label>
      <input type="text" name="name" v-model.trim="name">
    </div>
    <div class="input-div">
      <label for="email">邮箱</label>
      <input type="text" name="email" v-model.trim="email">
    </div>
    <button @click="submit">提交</button>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'HelloWorld',
  data() {
    return {
      name: '',
      email: ',
    };
  },
  methods: {
    submit() {
      if (!this.name) {
        alert('请填写姓名');
        return;
      } else if (!this.email) {
        alert('请填写手机号');
        return;
      } else {
        let formData = {
          name: this.name,
          email: this.email,
        };
        axios({
          method: 'post',
          url: '/api/email',
          data: formData,
        });
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

• 部署
  
• dist的文件 是npm run build 出来的文件
• vue-nodemailer-4000.js 的内容就是 server.js 的内容
• 线上需要的手动安装的vue-nodemailer-4000.js 里面所需npm包
• pm2 start vue-nodemailer-4000.js （我线上起的4000端口）
• 访问你的地址