nodejs+Vue+MySQL实现邮箱系统；具体过程+代码

实现一个完整的邮箱系统需要涉及到多个模块和技术，包括前端框架Vue，后端框架Node.js，以及数据库MySQL等。下面是一个简单的实现过程和相关代码。

1. 创建数据库

首先需要创建一个名为“email_system”的数据库，其中包含两个表：一个是用户表“users”，另一个是邮件表“emails”：

CREATE DATABASE email_system;

USE email_system;

CREATE TABLE users (
  id INT NOT NULL AUTO_INCREMENT,
  username VARCHAR(20) NOT NULL,
  password VARCHAR(50) NOT NULL,
  PRIMARY KEY (id)
);

CREATE TABLE emails (
  id INT NOT NULL AUTO_INCREMENT,
  sender VARCHAR(20) NOT NULL,
  receiver VARCHAR(20) NOT NULL,
  subject VARCHAR(100) NOT NULL,
  content TEXT NOT NULL,
  send_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (id)
);

2. 后端开发

使用Node.js和Express框架构建后端应用，实现用户注册、登录、发送邮件和查看邮件等功能。以下是后端代码（注释已说明各个功能实现）：

const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');

const app = express();
const port = 3000;

// 创建连接池
const pool = mysql.createPool({
  connectionLimit: 10,
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'email_system'
});

// 解析POST请求体
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// 注册接口
app.post('/api/register', (req, res) => {
  const { username, password } = req.body;
  const sql = 'INSERT INTO users (username, password) VALUES (?, ?)';
  const values = [username, password];
  pool.query(sql, values, (err, results) => {
    if (err) {
      res.json({ code: -1, msg: '注册失败' });
    } else {
      res.json({ code: 0, msg: '注册成功' });
    }
  });
});

// 登录接口
app.post('/api/login', (req, res) => {
  const { username, password } = req.body;
  const sql = 'SELECT * FROM users WHERE username = ? AND password = ?';
  const values = [username, password];
  pool.query(sql, values, (err, results) => {
    if (err || results.length === 0) {
      res.json({ code: -1, msg: '登录失败' });
    } else {
      res.json({ code: 0, msg: '登录成功' });
    }
  });
});

// 发送邮件接口
app.post('/api/send_email', (req, res) => {
  const { sender, receiver, subject, content } = req.body;
  const sql = 'INSERT INTO emails (sender, receiver, subject, content) VALUES (?, ?, ?, ?)';
  const values = [sender, receiver, subject, content];
  pool.query(sql, values, (err, results) => {
    if (err) {
      res.json({ code: -1, msg: '发送失败' });
    } else {
      res.json({ code: 0, msg: '发送成功' });
    }
  });
});

// 查看收件箱接口
app.get('/api/inbox', (req, res) => {
  const { receiver } = req.query;
  const sql = 'SELECT * FROM emails WHERE receiver = ? ORDER BY send_time DESC';
  const values = [receiver];
  pool.query(sql, values, (err, results) => {
    if (err) {
      res.json({ code: -1, msg: '查询失败' });
    } else {
      res.json({ code: 0, data: results });
    }
  });
});

// 启动服务器
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

3. 前端开发

使用Vue框架构建前端页面，实现用户注册、登录、发送邮件和查看邮件等功能。以下是前端代码（注释已说明各个功能实现）：

<template>
  <div>
    <!-- 注册表单 -->
    <form v-if="mode === 'register'" @submit.prevent="register">
      <input v-model="username" type="text" placeholder="用户名">
      <input v-model="password" type="password" placeholder="密码">
      <button type="submit">注册</button>
      <span>已有账号？<a href="#" @click.prevent="switchMode('login')">去登录</a></span>
    </form>
    <!-- 登录表单 -->
    <form v-if="mode === 'login'" @submit.prevent="login">
      <input v-model="username" type="text" placeholder="用户名">
      <input v-model="password" type="password" placeholder="密码">
      <button type="submit">登录</button>
      <span>还没有账号？<a href="#" @click.prevent="switchMode('register')">去注册</a></span>
    </form>
    <!-- 发送邮件表单 -->
    <form v-if="mode === 'send'" @submit.prevent="sendEmail">
      <input v-model="receiver" type="text" placeholder="收件人">
      <input v-model="subject" type="text" placeholder="主题">
      <textarea v-model="content" placeholder="内容"></textarea>
      <button type="submit">发送</button>
      <button type="button" @click="switchMode('inbox')">返回收件箱</button>
    </form>
    <!-- 收件箱 -->
    <div v-if="mode === 'inbox'">
      <ul>
        <li v-for="email in emails" :key="email.id">
          <div>{{ email.sender }}</div>
          <div>{{ email.subject }}</div>
          <div>{{ email.content }}</div>
          <div>{{ email.send_time }}</div>
        </li>
      </ul>
      <button type="button" @click="switchMode('send')">写邮件</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mode: 'login', // 当前模式：'register'、'login'、'send'、'inbox'
      username: '',
      password: '',
      receiver: '',
      subject: '',
      content: '',
      emails: []
    };
  },
  methods: {
    // 切换模式
    switchMode(mode) {
      this.mode = mode;
    },
    // 用户注册
    register() {
      fetch('/api/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          username: this.username,
          password: this.password
        })
      })
        .then(res => res.json())
        .then(res => {
          if (res.code === 0) {
            alert('注册成功');
            this.switchMode('login');
          } else {
            alert('注册失败');
          }
        })
        .catch(err => console.error(err));
    },
    // 用户登录
    login() {
      fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          username: this.username,
          password: this.password
        })
      })
        .then(res => res.json())
        .then(res => {
          if (res.code === 0) {
            alert('登录成功');
            this.switchMode('inbox');
            this.loadEmails();
          } else {
            alert('登录失败');
          }
        })
        .catch(err => console.error(err));
    },
    // 发送邮件
    sendEmail() {
      fetch('/api/send_email', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          sender: this.username,
          receiver: this.receiver,
          subject: this.subject,
          content: this.content
        })
      })
        .then(res => res.json())
        .then(res => {
          if (res.code === 0) {
            alert('发送成功');
            this.switchMode('inbox');
            this.loadEmails();
          } else {
            alert('发送失败');
          }
        })
        .catch(err => console.error(err));
    },
    // 加载收件箱
    loadEmails() {
      fetch(`/api/inbox?receiver=${this.username}`)
        .then(res => res.json())
        .then(res => {
          if (res.code === 0) {
            this.emails = res.data;
          } else {
            alert('加载失败');
          }
        })
        .catch(err => console.error(err));
    }
  }
};
</script>

4. 运行应用

在终端中进入前端代码所在目录，执行以下命令启动前端应用：

npm install # 安装依赖
npm run serve # 启动应用

在另一个终端中进入后端代码所在目录，执行以下命令启动后端应用：

npm install # 安装依赖
node app.js # 启动应用

最后在浏览器中访问前端应用的地址（默认为http://localhost:8080），即可体验完整的邮箱系统。