主 题
博客系统自文档 · 第 0/16 篇
目录 · 上一篇：无 · 下一篇：多端架构与请求链路
写在前面
这是「用博客讲博客」系列的开篇。
如果你只是路过：你会知道这个站点不只是一套文章列表，而是 Web 前台 + 移动端/小程序 + 管理后台 + 统一 API + 游戏化 + 实时通知 组合而成的完整产品。
如果你想看实现：文末有技术栈、仓库结构与 19 篇连载目录（16 篇主线 + 3 篇附录），后续每一篇都会按「先体验、后原理」展开。
功能与体验：这个系统能做什么？
从使用者视角，博客系统大致分五块：
1. 读者（C 端 · Web）
| 能力 | 入口 | 说明 |
|---|---|---|
| 读文章 | /detail/[id] |
Markdown 渲染、相关推荐、分享、JSON-LD |
| 发现内容 | /、/search、/archives、/tag/[id]、/category/[id]、/explore |
搜索、归档、标签/分类筛选、快速入口 |
| 订阅 | /feed.xml |
RSS，最近 50 篇 |
| 互动 | 详情页评论、点赞 | 评论后作者收到站内通知 |
| 游戏化 | /rpg、/features/rpg-guide |
签到、任务、抽奖、打赏、公会、排行榜 |
| 工具箱 | /tool/* |
加解密、WebRTC、PDF、AI、H5 协议签署等 |
| 全站助手 | 右下角 FAB | RAG 知识库问答（与 /tool/ai 独立） |
| 赞赏 | /about |
支付宝「请喝咖啡」，不发钻，公开流水 |
2. 读者（C 端 · 移动端 / 小程序）
blog-home-uniapp 对齐 Web 页面域，TabBar 为 首页 · 发现 · 冒险 · 我的：
| 能力 | 入口 | 说明 |
|---|---|---|
| 读文章 | /pages/detail/detail |
评论、点赞、相关推荐 |
| 发现 | /pages/explore/explore |
快速入口聚合 |
| RPG | /pages-rpg/index/index |
五 Tab：状态/背包/宠物/公会/排行 |
| 工具 | /pages-tool/index/index |
子集工具；Web 能力经 H5 桥接 |
3. 作者
| 能力 | Web 入口 | 说明 |
|---|---|---|
| C 端写文 | /user/article/edit |
Markdown 编辑、草稿 autosave、定时发布 |
| 数据看板 | /user/profile?tab=dashboard |
创作统计 |
| 评论收件箱 | /user/profile?tab=inbox |
读者评论汇总 |
| 实时通知 | 导航栏铃铛 | 登录后 WebSocket 推送未读数 |
| 移动端写文 | /pages-blog/user/article/edit |
uni-app 分包，H5 用 md-editor-v3 |
4. 管理员（B 端后台）
admin.jiang-xia.top：内容 CRUD、用户/角色/权限、敏感词、定时任务、RPG 运营配置、支付订单、数据大屏等。
5. 统一 API（双后端）
业务能力（文章、用户、RBAC、RPG、支付、邮件、文件、站内通知、/realtime、RAG 等）由两套可对等后端提供，路径均为 /api/v1：
| 后端 | 端口 | 典型用途 |
|---|---|---|
blog-server（NestJS） |
5000 | 主站 Web / Admin 生产默认；Swagger 齐全 |
blog-server-go（Hertz 单体） |
8000 | uni-app 默认联调；线上可走 go.jiang-xia.top |
设计与实现：多端架构
flowchart TB
subgraph users [用户]
Reader[读者浏览器]
Mobile[读者小程序/H5]
Author[作者]
AdminUser[管理员]
end
subgraph nginx [Nginx]
MainSite[jiang-xia.top]
AdminSite[admin.jiang-xia.top]
GoSite[go.jiang-xia.top]
end
subgraph apps [应用层]
Home["blog-home-nuxt :5050\nNuxt 3 SSR"]
UniApp["blog-home-uniapp :8008\nH5 / 微信小程序"]
Admin["blog-admin :9856\nVue 3 SPA"]
Nest["blog-server :5000\nNestJS API"]
GoAPI["blog-server-go :8000\nHertz 单体"]
end
subgraph data [数据层]
MySQL[(MySQL 8)]
Redis[(Redis 7)]
end
Reader --> MainSite --> Home
Mobile --> UniApp
Author --> MainSite --> Home
Author --> UniApp
AdminUser --> AdminSite --> Admin
Home -->|"/x-blog/api/v1"| Nest
Admin --> Nest
UniApp -->|"默认 /api/v1"| GoAPI
UniApp -.->|"辅调"| Nest
GoSite --> GoAPI
GoSite --> UniApp
Nest --> MySQL
Nest --> Redis
GoAPI --> MySQL
GoAPI --> Redis
Home -->|"/realtime"| Nest
UniApp -->|"/realtime"| GoAPI
技术栈一览
| 层级 | 项目 | 技术 |
|---|---|---|
| C 端 Web | blog-home-nuxt | Nuxt 3、Vue 3、TailwindCSS/DaisyUI、Pinia、Socket.IO Client |
| C 端移动 | blog-home-uniapp | uni-app 3、Vue 3、UnoCSS、wot-ui、Pinia；cyber / cyber-light 双主题 |
| B 端 | blog-admin | Vue 3、Vite、Arco Design、Pinia |
| API（主） | blog-server | NestJS 11、TypeORM、MySQL、Redis、Swagger |
| API（对等） | blog-server-go | Hertz、Ent、Wire；与 Nest 接口对齐 |
| 部署 | 生产环境 | Nginx、PM2、Let's Encrypt；可选 Docker |
仓库结构（Monorepo）
myGithub/
├── blog-server/ # Nest API + deploy/sql + nginx 配置
├── blog-server-go/ # Go Hertz 单体（uni-app 默认联调）
├── blog-home-nuxt/ # C 端 Web 前台 + Nitro RSS/sitemap
├── blog-home-uniapp/ # C 端移动端 / 微信小程序
└── blog-admin/ # B 端管理后台本地开发默认端口：5000（Nest）、8000（Go）、5050（Home Web）、8008（uni-app H5）、9856（Admin）。
两个容易混淆的概念
- category（分类）：内容 taxonomy，一篇文章一个分类，用于
/category/[id]列表。 - dept（机构/专栏）：RBAC 数据权限维度，作者创建文章时继承
user.deptId，与分类无关。
本系列怎么读？
每篇结构固定：
- 写在前面 — 非开发者也能懂的目标
- 功能与体验 — 怎么用、长什么样
- 设计与实现 — 架构图、代码路径、踩坑
- 系列导航 — 上一篇 / 目录 / 下一篇
标签约定：自文档 + 模块名 + 概览 或 深挖。
连载目录（16 篇主线 + 3 篇附录）
| 序号 | 主题 | 你将学到 |
|---|---|---|
| 00 | 导读（本篇） | 全景地图 |
| 01 | 多端架构与请求链路 | Nginx 分流；Nest / Go 双后端 |
| 02 | 文章、分类、标签与发现 | 文章模型、RSS、定时发布 |
| 03 | 评论、点赞与站内通知 | /realtime 实时铃铛 |
| 04 | 作者工作流（C 端写文） | 草稿、定时发布、看板 |
| 05 | 管理后台能力地图 | Arco 路由、RBAC 菜单、数据大屏 |
| 06 | 认证与登录 | JWT、GitHub OAuth、微信小程序登录 |
| 07 | API 级 RBAC | PermissionGuard + Redis 缓存 |
| 08 | 数据权限与机构专栏 | dept vs category |
| 09 | RPG 玩法全览 | 签到/任务/抽奖/充值/排行榜 |
| 10 | RPG 技术实现 | RealtimeGateway、事件表 |
| 11 | 事件驱动与模块解耦 | Redis Stream vs WebSocket |
| 12 | 安全与限流 | 加密网关、验证码、Nginx limit_req |
| 13 | 部署与增量发布 | SQL patches 流程 |
| 14 | 性能优化实录 | 静态直出、字体子集、SSR 瘦身 |
| 15 | 工具箱与其它页面 | 工具页、RAG FAB、关于页赞赏 |
| A·16 | 互动与社区 | 留言板、收藏、友链、RPG 联动 |
| B·17 | SEO 与搜索 | sitemap、JSON-LD、站内搜索 |
| C·18 | 支付与运营 | RPG 充值、关于页赞赏、邮件、对账 |
使用手册附录（另系列）
| 系列 | 篇数 | 说明 |
|---|---|---|
| 管理端使用手册 | 7 篇 | B 端全部菜单截图操作指南 |
| Home 端使用手册 | 7 篇 | C 端 Web 全部页面截图操作指南 |
系列导航
- 目录：博客系统分类
- 本篇：导读
- 下一篇：01 多端架构与请求链路
延伸阅读
- 后端模块地图：blog-server/README.md（含加密网关协议）
- Go 对等后端：blog-server-go
- Home 2026 功能：home-features-2026-06.md
- 移动端前台：blog-home-uniapp/README.md
- 实时通信：core/realtime/README.md
- RPG 玩法：RPG-GAMEPLAY.md
出自项目
问题、方案与在线 Demo 见项目页对应区块
全部评论(5)