使用 Axios 将 Vue.js 表单数据传递给 Nodemailer 脚本

Question

我的一个 Vue 组件中有一些表单数据，我想将其传递到我的 Nodemailer 脚本，以便可以将数据作为电子邮件发送。我正在尝试使用 Axios 来执行此操作。

什么也没有发生，因为我实际上并不知道自己在做什么！

当我在命令行中执行文件时，我设置的 Nodemailer 脚本会起作用。我需要的是在提交 Vue.js 组件中的表单时执行它。

这是我的 Nodemailer 脚本 -

"use strict";
const nodemailer = require("nodemailer");
require('dotenv').config();

// async..await is not allowed in global scope, must use a wrapper
async function main() {

  // create reusable transporter object using the default SMTP transport
  let transporter = nodemailer.createTransport({
    host: "smtp.gmail.com",
    port: 465,
    secure: true, // true for 465, false for other ports
    auth: {
      user: process.env.user, // generated ethereal user
      pass: process.env.password, // generated ethereal password
    },
  });

  // send mail with defined transport object
  let info = await transporter.sendMail({
    from: process.env.user, // sender address
    to: process.env.email, // list of receivers
    subject: 'Translation Suggestion', // Subject line
    text: "Hello world?", // plain text body
    html: "<p>Traditional: <br> Simplified: <br> Pinyin: <br> English: "
          
  });

  console.log("Message sent: %s", info.messageId);
  // Message sent: <b658f8ca-6296-ccf4-8306-87d57a0b4321@example.com>

  // Preview only available when sending through an Ethereal account
  console.log("Preview URL: %s", nodemailer.getTestMessageUrl(info));
  // Preview URL: https://ethereal.email/message/WaQKMgKddxQDoou...
}

main().catch(console.error);

以及在我的表单组件中提交时调用的函数 -

<button type="submit" @click="sendEmail" class="form__btn">Suggest</button>

sendEmail () {
          axios.post("localhost:3000/send-translation-suggest-email", () => {
            this.traditional,
            this.simplified,
            this.pinyin,
            this.english
          })
    }

Answer 1

要创建一个REST-API with express.js，首先要初始化一个节点。js-project (npm init [-y])。然后你安装 express.js (npm install express).

设置完成后，您可以创建一个 index.js 文件，即服务器。在其中，您将不得不调整 express Hello World example 的内容，使其接受的路由不是 GET / 而是 POST /send-translation-suggest-email。然后确保您的服务器侦听 端口 3000（如您在 client-side 代码中指定的那样）。

在 POST /send-translation-suggest-email 的侦听器中，您可以从其他文件调用 main 方法（确保正确导入文件，node.js's require-syntax）。

然后，您可以根据需要从前端调用后端服务器。

使用 Axios 将 Vue.js 表单数据传递给 Nodemailer 脚本

Passing Vue.js form data to Nodemailer script with Axios

javascript

vue.js