如何在 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>
我尝试添加一个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}`)
})
您似乎正在尝试集成 Vue 3、Quasar 和 Nodemailer 以在提交表单时发送电子邮件。您的代码处于正确的轨道上,但需要进行一些更正。
导入语句:使用ES6导入语法导入模块。
Async/Await:由于 Nodemailer 函数是异步的,因此请正确使用
async
和 await
关键字。
运输车配置: 将运输车配置放置在
try
块内。
发送电子邮件:发送电子邮件的代码也应位于
try
块内。
消息处理:发送电子邮件时正确处理错误和成功案例。
确保将“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>