簡體   English   中英

使用 Axios 將 Vue.js 表單數據傳遞給 Nodemailer 腳本

[英]Passing Vue.js form data to Nodemailer script with Axios

我的一個 Vue 組件中有一些表單數據,我想將其傳遞給我的 Nodemailer 腳本,以便數據可以作為 email 發送。我正在嘗試使用 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);

在我的表單組件中提交 function -

<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
          })
    }

要使用express.js創建REST-API ,首先要初始化一個 node.js 項目 ( npm init [-y] )。 然后安裝express.jsnpm install express )。

完成設置后,您可以創建一個index.js文件,即服務器。 在其中,您必須調整express Hello World example的內容,使其接受的路由不是GET /而是POST /send-translation-suggest-email 然后確保您的服務器偵聽端口 3000 (如您在客戶端代碼中指定的那樣)。

POST /send-translation-suggest-email的偵聽器中,您可以從其他文件調用main方法(確保使用node.jsrequire -syntax正確導入文件)。

然后,您可以根據需要從前端調用后端服務器。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM