Javascript 如何使用Lambda函数将NodeEmailr连接到Vue.js和Netlify应用程序

我在Netlify上有一个使用Vue.js构建的静态网站，我特别需要捕获从联系路线发送的

x-www-form-urlencoded

数据

因为它是一个spa和动态呈现的表单，所以我在index.html中都添加了它（用于预呈现并允许Netlify在加载时查看表单）

public/index.html

和

src/views/Contact.vue

联系人视图：

如果你是人类，请不要填写：


你的名字：


您的电子邮件：


您的主题：


信息：


发送

对组件中的数据属性进行建模，发布数据的方法如下：

export default {
  name: 'contact',
  data: () => ({
    form: {
      name: '',
      email: '',
      subject: '',
      message: '',
    },
  }),
  methods: {
    encode (data) {
      return Object.keys(data)
        .map(
          key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`,
        )
        .join('&');
    },
    handleSubmit () {
      const axiosConfig = {
        header: { 'Content-Type': 'application/x-www-form-urlencoded' },
      };
      axios.post(
        '/',
        this.encode({
          'form-name': 'contact',
          ...this.form,
        }),
        axiosConfig,
      )
        .then(() => console.log('success'))
        .catch(e => console.error(e));
    },
  },
};

系统的下一部分是Netlify运行的lambda函数。Netlify允许每次应用程序收到表单提交时创建一个

提交

功能。您只需在项目根目录中创建一个目录，其中包含

submission created.js

文件。需要在netlify.toml中指定此目录，以便netlify知道在哪里查找函数

另一个警告是，如果您的函数需要依赖项，则需要压缩包含节点模块的文件夹。我在package.json中使用

bestzip

依赖项自动执行此操作

package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "zip": "cd functions/submission-created && bestzip ../../functions-build/submission-created.zip *",
    "clean": "rm -rf functions-build && mkdir functions-build",
    "prebuild": "npm run clean && npm run zip"
}

如您所见，我处理此问题的方法是将函数的源代码写入

functions/submission created/submission created.js

我还有一个

functions build

目录，它是netlify.toml中指定的目录，其中将包含压缩的submission created文件夹

基本上，I

npm init-y

functions/submission创建目录和

npm install nodemailer

，当prebuild运行时，它删除当前的函数build并重新创建它，然后将函数压缩到包含其依赖项的目录中

这是

netlify.toml

[build]
  functions = "./functions-build"

最后，重要的代码是

submission created.js

文件：

exports.handler = function(event, context, callback) {
  const nodemailer = require('nodemailer');
  const querystring = require('querystring');
  const payload = querystring.parse(event.body);
  const { name, email, subject, message } = payload;

  // create reusable transporter object using the default SMTP transport
  let transporter = nodemailer.createTransport({
    host: "xxx",
    port: 587,
    secure: false, // true for 465, false for other ports
    auth: {
      user: 'xxx', // generated ethereal user
      pass: 'xxx' // generated ethereal password
    },
    tls: {
      rejectUnauthorized: false,
    },
  });

  // setup email data with unicode symbols
  let mailOptions = {
    from: `"website enquiry The answer lies in the event param in production vs in development. 


the fix:


// How to get post parameters in production
exports.handler = function(event, context, callback) {
  const payload = JSON.parse(event.body).payload;
  const { name, email, subject, message } = payload;
}


exports.handler=函数（事件、上下文、回调）{
const nodemailer=require（'nodemailer'）；
const querystring=require（'querystring'）；
const payload=querystring.parse（event.body）；
const{name，email，subject，message}=payload；
//使用默认SMTP传输创建可重用的传输对象
让transporter=nodeEmailer.createTransport({
主持人：“xxx”，
港口：587，
安全：false，//对于465为true，对于其他端口为false
认证：{
用户：“xxx”，//生成的ethereal用户
pass:'xxx'//生成的以太密码
},
tls：{
拒绝：错误，
},
});
//使用unicode符号设置电子邮件数据
让邮件选项={
来自：`“网站查询答案在于生产中的参数与开发中的参数

修复方法：