当前位置：首页 > VUE

vue实现发送邮箱

2026-01-18 03:23:20VUE

Vue 中实现发送邮箱功能

在 Vue 中实现发送邮箱功能通常需要后端服务的支持，因为前端无法直接调用邮件服务。以下是实现步骤：

前端部分（Vue）

安装 axios 用于发送 HTTP 请求：

vue实现发送邮箱

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 示例）

安装必要的依赖：

vue实现发送邮箱

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