Vue3 + NodeMailer + TypeScript

问题描述 投票:0回答:2

如何在 smtp 服务器上使用 Vue3 + Nodemalier 和 TypeScript 语法?

我正在寻找一些代码示例。我只想通过单击提交按钮发送电子邮件。
模板 vue 部分还可以,但脚本部分却一团糟。

我不是js开发者,我很久以前就写过这段代码了。 (最初我使用的是“https://smtpjs.com/v3/smtp.js”,但它不再工作了,所以我想切换到nodemailer,但我现在完全迷失了js语法。
如果能帮忙的话,我们将不胜感激。

  <template>
  
  <q-page padding  >
      <q-card bordered class="bg-grey-2 my-card">
        <q-card-section >
        <div class="q-pa-md" style="max-width:400px; margin:auto;">
            <div class="text-h6">Share your interactions :</div><br/>

      <q-form
        @submit="onSubmit"
        @reset="onReset"
        class="q-gutter-md"
      >
      <q-input
          filled
          v-model="name"
          label="Your name *"
          hint="Name and surname"
          lazy-rules
          :rules="[ val => val && val.length > 0 || 'Please type something.']"
       />
  
       <q-input
          filled
          type="email"
          v-model="email"
          label="Your email *"
          lazy-rules
          :rules="[
          val => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(val) || 'Please enter a valid email address.',
          ]"
      />

      <q-input
        filled
        type="text"
        v-model="ligand"
        label="Ligand - Gene Symbol *"
        lazy-rules
        :rules="[
          val => val !== null && val !== '' || 'Please type your ligand name.',
        ]"
      />

      <q-input
        filled
        type="text"
        v-model="receptor"
        label="Receptor - Gene Symbol *"
       
      />

      <q-input
      filled
      type="text"
      v-model="origin"
      label="Tissue / Cell Line"
    />

      <q-input
        filled
        type="text"
        v-model="publication"
        label="Publication PMID / DOI"
      />


  <q-input
  v-model="text"
  label="Describe your interaction"
  filled
  type="textarea"
  :rules="[
    val => val !== null && val !== '' || 'Please, give us more details.',
  ]"
/>
        <div> 
          <q-btn label="Submit" type="submit" color="primary"/>
          <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
        </div>
      </q-form>

      <div style="text-align:center;background-color:white;margin-top:15px;border-left:solid 3px #00B4FF;border-right:solid 3px #00B4FF;" v-if="messageReturned!=''" >{{messageReturned}}</div>

    </div>

    </q-card-section>
  </q-card>
</q-page>

</template>

<script setup lang="ts">
import { onMounted,ref} from 'vue'
import { useQuasar } from 'quasar'
const nodemailer = require("nodemailer");

const $q = useQuasar()
const name = ref(null)
const email = ref(null)
const ligand = ref(null)
const receptor = ref(null)
const publication = ref(null)
const origin = ref(null)
const text = ref(null)
const messageReturned = ref("")

const onSubmit =  () => { 
// async..await is not allowed in global scope, must use a wrapper

   messageReturned.value = ""

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

  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)); 
  // send mail with defined transport object
  transporter.sendMail({
    from: '"SignalRdb Team 👻" <fsdfs@gmail.com>', // sender address
    to: "jclab.fdsfds@gmail.com, fdsfds@gmail.com", // list of receivers
    subject: "Hello ✔", // Subject line
    text: "Hello world?", // plain text body
    html: "<b>Hello world?</b>", // html body
  }).then( 

   messageReturned.value = "Your mail has been sent successfully ! Thanks."
  
  // 
  );

 };



const onReset = () => { 
        name.value = null
        email.value = null
        origin.value = null
        ligand.value =  null
        receptor.value = null
        publication.value =  null
        text.value = null
        messageReturned.value = ""
      };

</script>


<style lang="sass" scoped>
.my-card
 // width: 100%
  padding-top: 10px 
 // margin: auto 
</style>
typescript vuejs3 nodemailer
2个回答
0
投票

我尝试添加一个api函数来发送电子邮件。
如果您在浏览器中输入 api,那么它可以使用 get 来工作,而不是通过 post 来工作。

我也在努力将之前定义的 vue 选项(邮件、消息等)传递给 MailController.ts 这实际上是我使用 .vue 中的表单字段自定义电子邮件内容的主要问题。

MailController.ts

    import { NextFunction, Request, Response } from "express";
    import nodemailer from 'nodemailer';
    
    export const postMail = async (req: Request, res: Response,next: NextFunction) : Promise <any> => {
      //const complexes  = await dataSource.getRepository(Complex).find()
    
      const transporter = nodemailer.createTransport({
              service: 'Gmail',
              secure: true,
              port: 587,
              auth: {
                  user: '@gmail.com',
                  pass: 'zazabrdcvhdogskg'
              }
          })
      
       const mailOptions = {
            from: 'xxx <xxx@gmail.com>',
            to: 'xxx@gmail.com',
            subject: ' xxx : new inquiry !",',
            text: "alo",
            html: "<b>Node.js</b> New world for me"+
                  "<b>Node.js</b> New world for me"
    
      }
    
        transporter.sendMail(mailOptions, function (err, res) {
            if(err){
                console.log(err);
            } else {
                console.log('Email Sent');
            }
        })
    
    
    }

MailRouter.ts

    import { Router } from 'express' import { postMail } from '../../controllers/MailController.js'
    
    const mailRouterVersion1 = Router()
    
    mailRouterVersion1.post('/mail', postMail);
    
    export default mailRouterVersion1enter code here

我的 app.ts 看起来像这样:

import "reflect-metadata";
import { getManager, getRepository } from 'typeorm';
import  express from "express";
import { Request, Response } from "express";
import { createExpressServer } from "routing-controllers";
import history from "connect-history-api-fallback"
import cors from "cors";

import releaseRouterVersion1 from "./routers/v1/ReleaseRouter.js"
import componentRouterVersion1 from "./routers/v1/ComponentRouter.js"
import interactionRouterVersion1 from "./routers/v1/InteractionRouter.js"
import complexRouterVersion1 from "./routers/v1/ComplexRouter.js"
import mailRouterVersion1 from "./routers/v1/MailRouter.js"

const app = express();
const port = 3000
const api = "/api/v1" /* Manually switch api */

app.use(express.json());

const corsOrigin ={
    origin: '*',
    methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
    credentials:true,            
    optionSuccessStatus:200
}

app.use(cors(corsOrigin));
// Manage API versioning.
app.use(api,releaseRouterVersion1);
app.use(api,componentRouterVersion1);
app.use(api,interactionRouterVersion1);
app.use(api,complexRouterVersion1);
app.use(api,mailRouterVersion1);

app.use(history());
app.listen(port, () => {
  console.log(`App listening on port ${port}`)
})

-2
投票

您似乎正在尝试集成 Vue 3、Quasar 和 Nodemailer 以在提交表单时发送电子邮件。您的代码处于正确的轨道上,但需要进行一些更正。

  1. 导入语句:使用ES6导入语法导入模块。

  2. Async/Await:由于 Nodemailer 函数是异步的,因此请正确使用

    async
    await
    关键字。

  3. 运输车配置: 将运输车配置放置在

    try
    块内。

  4. 发送电子邮件:发送电子邮件的代码也应位于

    try
    块内。

  5. 消息处理:发送电子邮件时正确处理错误和成功案例。

确保将“smtp.server”、“your_email@example.com”和“your_password”替换为实际的 SMTP 服务器详细信息和您的电子邮件凭据。

此代码应提供一种更加结构化和实用的方法,以便在 Vue 3 应用程序中使用 Nodemailer 发送电子邮件。它处理发送电子邮件时的潜在错误并向用户提供适当的反馈。

这是脚本部分的更正版本:

<!-- Your template code remains unchanged -->

<script setup lang="ts">
import { ref } from 'vue'
import { useQuasar } from 'quasar'
import nodemailer from 'nodemailer'

const $q = useQuasar()
const name = ref<string | null>(null)
// ... (other variables)

const onSubmit = async () => {
  messageReturned.value = ""

  try {
    // create reusable transporter object using the default SMTP transport
    let transporter = nodemailer.createTransport({
      host: "smtp.server",
      port: 587,
      secure: false,
      auth: {
        user: "your_email@example.com",
        pass: "your_password",
      },
    });

    // send mail with defined transport object
    await transporter.sendMail({
      from: '"SignalRdb Team 👻" <your_email@example.com>',
      to: "recipient@example.com",
      subject: "Hello ✔",
      text: "Hello world?",
      html: "<b>Hello world?</b>",
    });

    messageReturned.value = "Your mail has been sent successfully! Thanks.";
  } catch (error) {
    console.error("Error sending email:", error);
    messageReturned.value = "An error occurred while sending the email.";
  }
};

// ... (other functions and variables)

</script>

<style lang="sass" scoped>
// Your style code remains unchanged
</style>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.