主 题
博客系统自文档 · 第 0/16 篇
目录 · 上一篇：无 · 下一篇：三端架构与请求链路
写在前面
这是「用博客讲博客」系列的开篇。
如果你只是路过：你会知道这个站点不只是一套文章列表，而是 前台 + 后台 + API + 游戏化 + 实时通知 组合而成的完整产品。
如果你想看实现：文末有技术栈、仓库结构与 15 篇连载目录，后续每一篇都会按「先体验、后原理」展开。
功能与体验：这个系统能做什么？
从使用者视角，博客系统大致分四块：
1. 读者（C 端前台）
| 能力 | 入口 | 说明 |
|---|---|---|
| 读文章 | /detail/[id] |
Markdown 渲染、目录、相关推荐、分享、JSON-LD |
| 发现内容 | /、/search、/archives、/tag/[id]、/category/[id] |
搜索、归档、标签/分类筛选 |
| 订阅 | /feed.xml |
RSS，最近 50 篇 |
| 互动 | 详情页评论、点赞 | 评论后作者收到站内通知 |
| 游戏化 | /rpg、/features/rpg-guide |
签到、任务、抽奖、打赏、公会等 |
| 工具箱 | /tool/* |
加解密、WebRTC、PDF 等实用页 |
2. 作者
| 能力 | 入口 | 说明 |
|---|---|---|
| C 端写文 | /user/article/edit |
Markdown 编辑、草稿 autosave、定时发布 |
| 数据看板 | /user/profile?tab=dashboard |
创作统计 |
| 评论收件箱 | /user/profile?tab=inbox |
读者评论汇总 |
| 实时通知 | 导航栏铃铛 | 登录后 WebSocket 推送未读数 |
3. 管理员（B 端后台）
admin.jiang-xia.top：内容 CRUD、用户/角色/权限、敏感词、定时任务、RPG 运营配置、数据大屏等。
4. 统一 API
blog-server（NestJS）承载全部业务：文章、用户、RBAC、RPG、支付、邮件、文件、站内通知、全站 WebSocket（/realtime）等。
设计与实现：三端架构
flowchart TB
subgraph users [用户]
Reader[读者浏览器]
Author[作者]
AdminUser[管理员]
end
subgraph nginx [Nginx]
MainSite[jiang-xia.top]
AdminSite[admin.jiang-xia.top]
end
subgraph apps [应用层]
Home["blog-home-nuxt :5050\nNuxt 3 SSR"]
Admin["blog-admin\nVue 3 SPA"]
Server["blog-server :5000\nNestJS API"]
end
subgraph data [数据层]
MySQL[(MySQL 8)]
Redis[(Redis 7)]
end
Reader --> MainSite --> Home
Author --> MainSite --> Home
AdminUser --> AdminSite --> Admin
Home -->|"/x-blog/api/v1"| Server
Admin --> Server
Server --> MySQL
Server --> Redis
Home -->|"/realtime"| Server
技术栈一览
| 层级 | 项目 | 技术 |
|---|---|---|
| C 端 | blog-home-nuxt | Nuxt 3、Vue 3、TailwindCSS、Pinia、Socket.IO Client |
| B 端 | blog-admin | Vue 3、Vite、Arco Design、Pinia |
| API | blog-server | NestJS 11、TypeORM、MySQL、Redis、Swagger |
| 部署 | 生产环境 | Nginx、PM2、Let's Encrypt；可选 Docker |
仓库结构（Monorepo）
myGithub/
├── blog-server/ # 后端 API + deploy/sql + nginx 配置
├── blog-home-nuxt/ # C 端前台 + Nitro RSS
└── blog-admin/ # B 端管理后台本地开发默认端口：5000（API）、5050（Home）、9856（Admin）。
两个容易混淆的概念
- category（分类）：内容 taxonomy，一篇文章一个分类，用于
/category/[id]列表。 - dept（机构/专栏）：RBAC 数据权限维度，作者创建文章时继承
user.deptId，与分类无关。
本系列怎么读？
每篇结构固定：
- 写在前面 — 非开发者也能懂的目标
- 功能与体验 — 怎么用、长什么样
- 设计与实现 — 架构图、代码路径、踩坑
- 系列导航 — 上一篇 / 目录 / 下一篇
标签约定：自文档 + 模块名 + 概览 或 深挖。
连载目录（15 篇）
| 序号 | 主题 | 你将学到 |
|---|---|---|
| 00 | 导读（本篇） | 全景地图 |
| 01 | 三端架构与请求链路 | Nginx 如何分流静态/SSR/API |
| 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 | 工具箱与其它页面 | 纯前端工具页梳理 |
系列导航
- 目录：博客系统分类
- 下一篇：01 三端架构与请求链路（待发布，链接将在 prod id 确定后更新）
延伸阅读
- 后端模块地图：blog-server/README.md
- Home 2026 功能：home-features-2026-06.md
- 实时通信：core/realtime/README.md
- RPG 玩法：RPG-GAMEPLAY.md
全部评论(0)