在Heroku上部署了Angular和Node后,可以通过以下步骤来通过表单输入发送电子邮件:
const express = require('express');
const nodemailer = require('nodemailer');
const router = express.Router();
// 创建一个Nodemailer传输对象
const transporter = nodemailer.createTransport({
service: 'your-email-service-provider',
auth: {
user: 'your-email',
pass: 'your-email-password'
}
});
// 处理表单提交的请求
router.post('/send-email', (req, res) => {
const { name, email, message } = req.body;
// 配置电子邮件的内容
const mailOptions = {
from: 'your-email',
to: 'recipient-email',
subject: 'New Email from Contact Form',
text: `Name: ${name}\nEmail: ${email}\nMessage: ${message}`
};
// 使用Nodemailer发送电子邮件
transporter.sendMail(mailOptions, (error, info) => {
if (error) {
console.log(error);
res.status(500).send('Error sending email');
} else {
console.log('Email sent: ' + info.response);
res.status(200).send('Email sent successfully');
}
});
});
module.exports = router;
<form (ngSubmit)="sendEmail()">
<label for="name">Name:</label>
<input type="text" id="name" [(ngModel)]="name" required>
<label for="email">Email:</label>
<input type="email" id="email" [(ngModel)]="email" required>
<label for="message">Message:</label>
<textarea id="message" [(ngModel)]="message" required></textarea>
<button type="submit">Send Email</button>
</form>
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-email-form',
templateUrl: './email-form.component.html',
styleUrls: ['./email-form.component.css']
})
export class EmailFormComponent {
name: string;
email: string;
message: string;
constructor(private http: HttpClient) {}
sendEmail() {
const formData = {
name: this.name,
email: this.email,
message: this.message
};
this.http.post('/api/send-email', formData)
.subscribe(
() => {
console.log('Email sent successfully');
// 在这里可以添加一些成功发送电子邮件后的处理逻辑
},
(error) => {
console.log('Error sending email: ' + error);
// 在这里可以添加一些发送电子邮件失败后的处理逻辑
}
);
}
}
请注意,上述代码中的your-email-service-provider
、your-email
和recipient-email
需要替换为你自己的电子邮件服务提供商、发件人邮箱和收件人邮箱。
这样,当用户在Angular前端应用中填写表单并提交时,表单数据将通过HTTP请求发送到Node后端应用的/send-email
路由。Node后端应用将使用Nodemailer库发送电子邮件,并返回相应的状态码给Angular前端应用。
这是一个基本的示例,你可以根据自己的需求进行修改和扩展。关于Nodemailer库的更多信息和使用方法,你可以参考腾讯云的云开发文档。
领取专属 10元无门槛券
手把手带您无忧上云