9.4 KiB
9.4 KiB
前端:Vue 后端:Node.js + Express 数据库:MySQL 邮件服务:Mailu
我帮你重新整理并生成完整且清晰的架构图、流程图、技术栈表 + 项目结构:
🧩 一、架构图(新版:Vue + Express)
┌────────────────────────────┐
│ 用户 │
│ ┌──────────────────────┐ │
│ │ mail.shenjianl.cn 前端网站 │ ←─────┐
│ │ (Vue) │ │
│ └──────────────────────┘ │
└────────────┬─────────────┘
│ HTTP (REST API)
▼
┌────────────────────────────┐
│ Node.js 后端 (Express) │
│ - 生成随机邮箱地址 │
│ - 查询收件箱 │
│ - 邮件接收解析写数据库 │
└────────────┬─────────────┘
│ MySQL
▼
┌────────────────────────────┐
│ MySQL │
│ - emails 表 │
│ - email_attachments 表 │
└────────────┬─────────────┘
│
▼
┌────────────────────────────┐
│ 邮件服务器(Mailu) │
│ - SMTP 接收外部邮件 │
│ - Catch-all 所有收件人 │
│ - 调用 Node.js 脚本入库 │
└────────────┬─────────────┘
│
▼
┌────────────────────────────┐
│ DNS │
│ - MX: mail.shenjianl.cn │
│ - A: mail.shenjianl.cn → IP │
└────────────────────────────┘
📝 二、流程图:接收 & 查看流程
【外部发件人】
│
▼
发邮件到 abc123@shenjianl.cn
│
▼
DNS MX 查找 mail.shenjianl.cn
│
▼
Mailu 收到邮件 (SMTP)
│
▼
调用 Node.js 脚本 (saveEmail.js)
│
▼
simpleParser 解析邮件内容
│
▼
写入 MySQL:
recipient, sender, subject, body, received_at
│
▼
用户访问网页:
mail.shenjianl.cn
│
▼
Vue 前端请求后端 API:
GET /api/messages?recipient=abc123@shenjianl.cn
│
▼
后端查询 MySQL 返回邮件列表
│
▼
前端展示收件箱
⚙ 三、技术栈清单(新版)
| 层级 | 功能 | 技术选型 |
|---|---|---|
| 域名 & DNS | MX/A 解析 | 阿里云 DNS / Cloudflare |
| 邮件服务器 | 接收所有外部邮件 | Mailu(基于 Postfix/Dovecot) |
| 邮件解析 | 提取收件人/正文/主题/附件 | Node.js (mailparser) |
| 后端 API | 生成邮箱 / 查询收件箱 | Node.js + Express |
| 数据库 | 存储邮件信息 | MySQL |
| 前端 | 用户界面 / 展示收件箱 | Vue.js |
| 部署 & 管理 | 容器化 / 部署 | Docker + docker-compose |
| 安全 | HTTPS / 防滥用 | Let's Encrypt + Nginx 反代 + IP限流/黑名单 |
🛠 四、项目结构建议(新版)
📦 project-root
├── frontend/ # Vue 前端
│ └── (组件/页面/接口)
├── backend/ # Node.js 后端
│ ├── app.js # Express 主程序
│ ├── saveEmail.js # 接收邮件脚本:解析并写入数据库
│ └── db.js # 数据库连接
├── docker-compose.yml # Mailu + Node.js + MySQL
├── mailu.env # Mailu 配置
├── README.md
✅ 总结:
- 前端:Vue 只负责界面和展示
- 后端:Express 提供 API + 接收邮件写 MySQL
- 邮件服务器:Mailu catch-all 接收所有地址
- DNS:配置 MX / A 指向服务器
好的!
下面我给你直接写好适配新版架构的:
✅ docker-compose.yml(包含:Vue 前端 + Node.js Express 后端 + MySQL + Mailu 邮件服务器)
✅ MySQL 建表 SQL
✅ 1️⃣ docker-compose.yml
⚠️ 注:
- Vue 前端用
npm run serve或npm run build后放 Nginx 也行,这里为了简单直接跑开发服务 - Mailu 是官方 Docker 邮件套件,需要
mailu.env配置 - 建议生产用 HTTPS + Nginx,下面只是开发演示架构
version: '3.8'
services:
mysql:
image: mysql:8
container_name: mail_mysql
restart: always
environment:
MYSQL_ROOT_PASSWORD: myrootpassword
MYSQL_DATABASE: maildb
MYSQL_USER: mailuser
MYSQL_PASSWORD: mailpassword
ports:
- "3306:3306"
volumes:
- mysql_data:/var/lib/mysql
backend:
build: ./backend
container_name: mail_backend
restart: always
environment:
DB_HOST: mysql
DB_USER: mailuser
DB_PASSWORD: mailpassword
DB_NAME: maildb
ports:
- "3000:3000"
depends_on:
- mysql
frontend:
build: ./frontend
container_name: mail_frontend
restart: always
ports:
- "8080:8080"
depends_on:
- backend
mailu:
image: mailu/mailu:master
container_name: mail_server
restart: always
env_file: mailu.env
ports:
- "25:25" # SMTP
- "465:465" # SMTPS
- "143:143" # IMAP
- "993:993" # IMAPS
- "8081:80" # Mailu admin web UI(可选)
volumes:
- mailu_data:/data
depends_on:
- mysql
volumes:
mysql_data:
mailu_data:
📦 2️⃣ 建表 SQL
CREATE TABLE emails (
id BIGINT AUTO_INCREMENT PRIMARY KEY,
recipient VARCHAR(255) NOT NULL,
sender VARCHAR(255) NOT NULL,
subject VARCHAR(512),
body TEXT,
received_at DATETIME DEFAULT CURRENT_TIMESTAMP,
raw MEDIUMBLOB
);
CREATE TABLE email_attachments (
id BIGINT AUTO_INCREMENT PRIMARY KEY,
email_id BIGINT NOT NULL,
filename VARCHAR(255),
content_type VARCHAR(128),
content LONGBLOB,
FOREIGN KEY (email_id) REFERENCES emails(id) ON DELETE CASCADE
);
📦 3️⃣ mailu.env(示例配置)
DOMAIN=shenjianl.cn
HOSTNAMES=mail.shenjianl.cn
SECRET_KEY=change-this-to-a-very-random-secret
ADMIN=admin
ADMIN_PASSWORD=adminpassword
DB_FLAVOR=mysql
DB_HOST=mysql
DB_USER=mailuser
DB_PASSWORD=mailpassword
DB_NAME=maildb
✅ 4️⃣ 项目结构(推荐)
📦 project-root
├── frontend/ # Vue 前端
│ └── (页面/组件)
├── backend/ # Node.js Express 后端
│ ├── app.js # 提供 API
│ ├── saveEmail.js # 接收邮件脚本
│ └── db.js # 数据库连接
├── docker-compose.yml
├── mailu.env
└── README.md
✨ 这样就完成了:
- Vue 前端对接后端 API
- 后端(Express)接收请求、存储/查询邮件
- Mailu 负责接收 SMTP 邮件并调用脚本写数据库
- MySQL 存储邮件数据
以下是针对你域名 shenjianl.cn 的简单版 SPF、DKIM、DMARC DNS TXT 记录示范,你可以直接复制,去你买域名的DNS管理后台添加。
1. SPF 记录
- 类型:TXT
- 主机名:
@(代表根域名 shenjianl.cn) - 值(内容):
v=spf1 mx ip4:你的服务器公网IP -all
把
你的服务器公网IP换成你实际服务器的外网IP地址。
2. DKIM 记录(示例)
假设你的邮件服务器给你生成了一个 selector,叫做 default,那么:
- 类型:TXT
- 主机名:
default._domainkey - 值(内容):
v=DKIM1; k=rsa; p=这里填你的公钥内容
注意:
p=后面是一个很长的字符串,由邮件服务器生成的公钥。 你可以让 Mailu 生成 DKIM 密钥,然后复制粘贴到这里。
3. DMARC 记录
- 类型:TXT
- 主机名:
_dmarc - 值(内容):
v=DMARC1; p=quarantine; rua=mailto:admin@shenjianl.cn; pct=100
解释:
p=quarantine:不合规邮件放到垃圾箱rua=mailto:admin@shenjianl.cn:每隔一段时间会收到报告(你可以换成自己的邮箱)pct=100:所有邮件都应用该规则
总结
| 类型 | 主机名 | 内容示例 |
|---|---|---|
| TXT | @ | v=spf1 mx ip4:你的服务器公网IP -all |
| TXT | default._domainkey | v=DKIM1; k=rsa; p=你的公钥 |
| TXT | _dmarc | v=DMARC1; p=quarantine; rua=mailto:admin@shenjianl.cn; pct=100 |
如果你还没有 DKIM 公钥或者不确定怎么生成,可以告诉我,我帮你写生成步骤。