vue实现发送邮箱
Vue 中实现发送邮箱功能
在 Vue 中实现发送邮箱功能通常需要后端服务的支持，因为前端无法直接调用邮件服务。以下是实现步骤：
前端部分（Vue）
安装 axios 用于发送 HTTP 请求：
npm install axios创建发送邮件的表单组件：
<template>
<div>
<form @submit.prevent="sendEmail">
<input v-model="formData.to" placeholder="收件人邮箱" type="email" required>
<input v-model="formData.subject" placeholder="邮件主题" required>
<textarea v-model="formData.text" placeholder="邮件内容" required></textarea>
<button type="submit">发送邮件</button>
</form>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
formData: {
to: '',
subject: '',
text: ''
}
}
},
methods: {
async sendEmail() {
try {
const response = await axios.post('http://your-backend-api/send-email', this.formData);
alert('邮件发送成功');
} catch (error) {
alert('邮件发送失败');
console.error(error);
}
}
}
}
</script>后端部分（Node.js 示例）
安装必要的依赖：
npm install express nodemailer cors创建后端服务：
const express = require('express');
const nodemailer = require('nodemailer');
const cors = require('cors');
const app = express();
app.use(cors());
app.use(express.json());
const transporter = nodemailer.createTransport({
service: 'gmail', // 使用 Gmail 服务
auth: {
user: 'your-email@gmail.com', // 发件人邮箱
pass: 'your-password' // 发件人密码或应用专用密码
}
});
app.post('/send-email', async (req, res) => {
const { to, subject, text } = req.body;
const mailOptions = {
from: 'your-email@gmail.com',
to,
subject,
text
};
try {
await transporter.sendMail(mailOptions);
res.status(200).send('Email sent successfully');
} catch (error) {
console.error(error);
res.status(500).send('Error sending email');
}
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});注意事项
使用 Gmail 时需要启用"不太安全的应用"访问权限或创建应用专用密码。对于生产环境，建议使用专业的邮件服务如 SendGrid 或 Mailgun。
后端 API 地址需要替换为实际的部署地址，并确保前端可以跨域访问。
