当前位置：首页 > VUE

vue实现收发邮箱功能

2026-01-22 09:18:29VUE

使用Vue实现收发邮件功能

准备工作 确保已安装Vue CLI并创建项目，需要后端服务支持（如Node.js+Express或PHP）

前端实现

安装必要依赖

npm install axios vuex

创建邮件表单组件

<template>
  <div>
    <input v-model="email.to" placeholder="收件人">
    <input v-model="email.subject" placeholder="主题">
    <textarea v-model="email.body"></textarea>
    <button @click="sendEmail">发送</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: {
        to: '',
        subject: '',
        body: ''
      }
    }
  },
  methods: {
    async sendEmail() {
      try {
        await this.$store.dispatch('sendEmail', this.email)
        alert('发送成功')
      } catch (error) {
        alert('发送失败')
      }
    }
  }
}
</script>

Vuex状态管理

创建store模块

// store/modules/email.js
import axios from 'axios'

const state = {
  inbox: []
}

const actions = {
  async sendEmail({ commit }, emailData) {
    const response = await axios.post('/api/emails', emailData)
    commit('ADD_TO_SENT', response.data)
  },
  async fetchInbox({ commit }) {
    const response = await axios.get('/api/emails/inbox')
    commit('SET_INBOX', response.data)
  }
}

const mutations = {
  SET_INBOX(state, emails) {
    state.inbox = emails
  },
  ADD_TO_SENT(state, email) {
    // 添加到已发送
  }
}

export default {
  namespaced: true,
  state,
  actions,
  mutations
}

后端API实现（Node.js示例）

安装后端依赖

npm install express nodemailer body-parser cors

创建服务器

const express = require('express')
const nodemailer = require('nodemailer')
const bodyParser = require('body-parser')
const cors = require('cors')

const app = express()
app.use(bodyParser.json())
app.use(cors())

// 邮件配置
const transporter = nodemailer.createTransport({
  service: 'Gmail',
  auth: {
    user: 'your@gmail.com',
    pass: 'yourpassword'
  }
})

// 发送邮件接口
app.post('/api/emails', (req, res) => {
  const { to, subject, body } = req.body

  const mailOptions = {
    from: 'your@gmail.com',
    to,
    subject,
    text: body
  }

  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      return res.status(500).send(error.toString())
    }
    res.status(200).send('Email sent: ' + info.response)
  })
})

// 获取收件箱接口
app.get('/api/emails/inbox', (req, res) => {
  // 实际项目中这里应该查询数据库
  res.json([/* 邮件列表 */])
})

app.listen(3000, () => {
  console.log('Server running on port 3000')
})

收件箱组件实现

<template>
  <div>
    <div v-for="email in inbox" :key="email.id">
      <h4>{{ email.subject }}</h4>
      <p>{{ email.from }}</p>
      <p>{{ email.preview }}</p>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState('email', ['inbox'])
  },
  created() {
    this.$store.dispatch('email/fetchInbox')
  }
}
</script>

安全注意事项