江天
江天主页
主 题

博客系统自文档 · 第 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 等实用页

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

blog-server（NestJS）承载全部业务：文章、用户、RBAC、RPG、支付、邮件、文件、站内通知、全站 WebSocket（/realtime）等。Web 与 uni-app 共用同一套 /api/v1。

设计与实现：四端架构

flowchart TB subgraph users [用户] Reader[读者浏览器] Mobile[读者小程序/H5] 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"] UniApp["blog-home-uniapp :9000\nH5 / 微信小程序"] Admin["blog-admin :9856\nVue 3 SPA"] Server["blog-server :5000\nNestJS API"] 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"| Server UniApp -->|"/api/v1"| Server Admin --> Server Server --> MySQL Server --> Redis Home -->|"/realtime"| Server UniApp -->|"/realtime"| Server

技术栈一览

层级 项目 技术
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
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 端 Web 前台 + Nitro RSS/sitemap
├── blog-home-uniapp/  # C 端移动端 / 微信小程序
└── blog-admin/        # B 端管理后台

本地开发默认端口：5000（API）、5050（Home Web）、9000（uni-app H5）、9856（Admin）。

两个容易混淆的概念

  • category（分类）：内容 taxonomy，一篇文章一个分类，用于 /category/[id] 列表。
  • dept（机构/专栏）：RBAC 数据权限维度，作者创建文章时继承 user.deptId，与分类无关。

本系列怎么读？

每篇结构固定：

  1. 写在前面 — 非开发者也能懂的目标
  2. 功能与体验 — 怎么用、长什么样
  3. 设计与实现 — 架构图、代码路径、踩坑
  4. 系列导航 — 上一篇 / 目录 / 下一篇

标签约定：自文档 + 模块名 + 概览 或 深挖。

连载目录（16 篇主线 + 3 篇附录）

序号 主题 你将学到
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 工具箱与其它页面 纯前端工具页梳理
A·16 互动与社区 留言板、收藏、友链、RPG 联动
B·17 SEO 与搜索 sitemap、JSON-LD、站内搜索
C·18 支付与运营 RPG 充值、邮件、数据大屏、定时任务

使用手册附录（另系列）

系列 篇数 说明
管理端使用手册 7 篇 B 端全部菜单截图操作指南
Home 端使用手册 7 篇 C 端 Web 全部页面截图操作指南

系列导航

延伸阅读

相关推荐

博客系统自文档 · 支付、邮件与运营支撑

RPG 钻石充值、支付宝订单、邮件验证码、admin 数据大屏与定时任务等运营向能力。

博客系统自文档 · SEO、搜索与发现增强

全文搜索、RSS、sitemap 构建、JSON-LD 与 canonical 的完整发现链路。

博客系统自文档 · 互动与社区（评论/留言/收藏）

评论回复、留言板、点赞收藏与 RPG 经验联动，补全社区互动闭环。

博客系统自文档 · 工具箱与其它页面

pages/tool 纯前端工具、features 展示页、explore 快速入口与 about/projects 等特殊页面梳理。

博客系统自文档 · 性能优化实录

2026-06 四批次：Nginx 静态直出、字体子集、API 去重与 SSR 瘦身验收。

博客系统自文档 · 部署与增量发布

首次部署目录、PM2、SQL patches 与 Redis 缓存刷新 playbook。

分享

全部评论(3)

江天
江天
微信小程序 目录不行
江天
江天
哈哈哈哈～
江天
江天 @ 江天
这样弹框吗？