nodejs+Vue+MySQL实现邮箱系统，系统功能有登录、注册并可以查看自己发送的邮件；具体过程+代码

实现一个完整的邮箱系统需要涉及到很多功能模块，包括用户管理、邮件发送、邮件接收、邮件列表展示等等。下面是一个简单的实现方案，使用Node.js和Vue.js搭建前后端框架，MySQL作为数据库存储数据。

## 前端部分

### 1. 登录/注册页面

登录/注册页面是整个邮箱系统的入口，用户在此处输入账号和密码进行登录或注册。

在Vue.js中可以使用`vue-router`来实现页面的路由切换，使用`axios`库发送HTTP请求进行登录/注册操作。

<template>
  <div>
    <h2>{{ title }}</h2>
    <form>
      <div>
        <label>邮箱</label>
        <input type="text" v-model="email">
      </div>
      <div>
        <label>密码</label>
        <input type="password" v-model="password">
      </div>
      <div>
        <button v-if="type === 'login'" @click.prevent="login">登录</button>
        <button v-if="type === 'register'" @click.prevent="register">注册</button>
      </div>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Login',
  data() {
    return {
      title: '登录',
      type: 'login',
      email: '',
      password: ''
    }
  },
  methods: {
    login() {
      axios.post('/api/login', {
        email: this.email,
        password: this.password
      })
      .then(res => {
        if (res.data.code === 0) {
          // 登录成功，跳转到邮件列表页面
          this.$router.push('/mail/list');
        } else {
          alert(res.data.msg);
        }
      })
      .catch(err => {
        console.log(err);
      });
    },
    register() {
      axios.post('/api/register', {
        email: this.email,
        password: this.password
      })
      .then(res => {
        if (res.data.code === 0) {
          alert('注册成功，请登录！');
          this.type = 'login';
          this.title = '登录';
        } else {
          alert(res.data.msg);
        }
      })
      .catch(err => {
        console.log(err);
      });
    }
  }
}
</script>

### 2. 邮件列表页面

在登录成功后，用户跳转到邮件列表页面，可以查看自己发送的邮件。

邮件列表页面应该展示当前用户发送的所有邮件，可以使用`axios`发送HTTP请求获取邮件列表数据，并使用`v-for`指令渲染到页面上。

<template>
  <div>
    <h2>邮件列表</h2>
    <table>
      <thead>
        <tr>
          <th>收件人</th>
          <th>主题</th>
          <th>时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="mail in mails" :key="mail.id">
          <td>{{ mail.receiver }}</td>
          <td>{{ mail.subject }}</td>
          <td>{{ mail.timestamp }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'MailList',
  data() {
    return {
      mails: []
    }
  },
  mounted() {
    // 获取当前用户发送的所有邮件
    axios.get('/api/mails')
    .then(res => {
      if (res.data.code === 0) {
        this.mails = res.data.data;
      } else {
        alert(res.data.msg);
      }
    })
    .catch(err => {
      console.log(err);
    });
  }
}
</script>

## 后端部分

### 1. 数据库设计

在MySQL中创建一个名为`mail`的数据库，包含两张表：`users`和`mails`。

`users`表用于存储所有用户的账号和密码，包含两个字段：`email`和`password`。

`mails`表用于存储所有邮件的信息，包含五个字段：`id`、`sender`、`receiver`、`subject`和`timestamp`。

CREATE DATABASE mail;

USE mail;

CREATE TABLE users (
  email VARCHAR(50) PRIMARY KEY,
  password VARCHAR(50) NOT NULL
);

CREATE TABLE mails (
  id INT AUTO_INCREMENT PRIMARY KEY,
  sender VARCHAR(50) NOT NULL,
  receiver VARCHAR(50) NOT NULL,
  subject VARCHAR(50) NOT NULL,
  timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

### 2. 后端接口实现

后端使用Node.js和Express框架搭建，实现以下接口：

- `/api/login`：处理用户登录请求，验证账号和密码是否正确。
- `/api/register`：处理用户注册请求，将新用户信息插入到`users`表中。
- `/api/mails`：处理获取当前用户发送的所有邮件请求，查询`mails`表中与当前用户相关的所有邮件信息。

const express = require('express');
const mysql = require('mysql');
const app = express();

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '123456',
  database: 'mail'
});

app.use(express.json());

app.post('/api/login', (req, res) => {
  const { email, password } = req.body;

  connection.query(`SELECT * FROM users WHERE email='${email}' AND password='${password}'`, (err, results) => {
    if (err) {
      res.json({
        code: 1,
        msg: '登录失败'
      });
    } else if (results.length === 0) {
      res.json({
        code: 2,
        msg: '账号或密码错误'
      });
    } else {
      res.json({
        code: 0,
        msg: '登录成功'
      });
    }
  });
});

app.post('/api/register', (req, res) => {
  const { email, password } = req.body;

  connection.query(`INSERT INTO users (email, password) VALUES ('${email}', '${password}')`, (err, results) => {
    if (err) {
      res.json({
        code: 1,
        msg: '注册失败'
      });
    } else {
      res.json({
        code: 0,
        msg: '注册成功'
      });
    }
  });
});

app.get('/api/mails', (req, res) => {
  const user = req.query.user;

  connection.query(`SELECT * FROM mails WHERE sender='${user}'`, (err, results) => {
    if (err) {
      res.json({
        code: 1,
        msg: '获取邮件列表失败'
      });
    } else {
      res.json({
        code: 0,
        data: results
      });
    }
  });
});

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

## 总结

通过以上步骤，我们完成了一个简单的邮箱系统的搭建。当然，这只是一个简单的示例，实际的邮箱系统在功能上需要更加完善和复杂。希望本篇文章能对您有所帮助。