前端：**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，下面只是开发演示架构 ```yaml 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** ```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**（示例配置） ```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 公钥或者不确定怎么生成，可以告诉我，我帮你写生成步骤。