一个技术员为自己打造的个人工作站 —— 集后台管理、内容发布、权限控制于一体，单文件数据库，零外部依赖，开箱即用。
前言
如果你是一个独立开发者或小团队，需要一个既能管理内容、又能对外展示的系统，市面上的方案往往"两头不靠"：要么是功能臃肿的企业级 CMS，要么是只管前台不管后台的静态博客框架。
简记网（Jianji） 是我在实际使用中逐步迭代的一套全栈 Web 系统，它同时解决了两个问题：
- 后台：一个带 RBAC 权限的轻量管理后台，多用户协作、文章/方案/留言/待办全面管理
- 前台：一个面向访客的公开博客站点，瀑布流布局、Markdown 渲染、评论互动
整个项目跑在 Python Flask 上，前端用 Layui 构建后台界面，数据库只需一个 SQLite 文件。没有 Redis，没有消息队列，不需要 Docker Compose，pip install 之后 python run.py 就能跑起来。
下面从架构设计、技术实现、功能特色三个层面做一个完整的技术介绍。
一、架构总览
1.1 双 Blueprint 分离架构
系统采用 Flask Application Factory（工厂模式） 设计，入口文件 run.py 创建 Flask 应用并注册两个独立的 Blueprint：
run.py → create_app()
├── admin_bp (app.py) 后台管理系统
└── blog_bp (blog_app.py) 博客前台站点
这种设计有几个实际好处：
- 路由隔离：后台路径（
/login、/admin、/home、/articles等）与前台路径（/、/article/<id>.html、/notes等）完全独立，互不干扰 - 模板分离：后台模板放在
templates/page/，前台模板放在templates/blog/，各有独立的静态资源目录 - 独立演进：后台和前台可以分别迭代，互不影响。比如给后台加一个新的管理模块，不会碰前台一行代码
1.2 数据库层：SQLite + 参数化查询
数据存储使用 SQLite3 单文件数据库 data/jianji.db，通过 sqlite3.Row 支持列名访问。整个数据库层包含 14 张表、90+ 个函数，覆盖了全部业务逻辑。
数据库层采用以下安全实践：
- 全参数化查询：所有 SQL 均使用
?占位符，杜绝 SQL 注入 - 自动建表：首次运行时通过
CREATE TABLE IF NOT EXISTS自动创建表结构并插入默认数据 - 单文件部署：备份只需复制一个
.db文件，迁移零配置
1.3 生产部署
项目已预配置 Gunicorn + gevent 异步部署方案：
# gunicorn_config.py
bind = '0.0.0.0:8000'
workers = 4
worker_class = 'gevent'
timeout = 60
本地开发直接 python run.py，部署时 gunicorn -c gunicorn_config.py run:create_app() 即可。
二、RBAC 权限系统
这是整个后台管理系统的核心。采用经典的 基于角色的访问控制（RBAC） 模型，实现了三层权限隔离和四级操作粒度。
2.1 权限模型
用户(User) ←——多对多——→ 角色(Role) ←——多对多——→ 菜单(Menu)
│
[can_view, can_create, can_edit, can_delete]
- 用户-角色：多对多关系，一个用户可同时拥有多个角色（如既是"编辑"又是"会员"）
- 角色-菜单：每个角色对每个菜单拥有独立的四种操作权限
- 权限聚合：多角色用户的权限取并集——任一角色有权限即视为有权限
- 超级管理员：硬编码全开，跳过所有权限检查
2.2 菜单编码体系
菜单采用层级化数字编码，天然表达父子关系：
101 首页
102 文章管理
├─ 10201 文章列表
└─ 10202 评论管理
103 方案管理
106 系统管理
├─ 10601 用户管理
├─ 10602 权限管理
├─ 10603 系统设置
│ ├─ 1060301 网站设置
│ ├─ 1060302 文章类别
│ └─ 1060303 友情链接
└─ 10604 菜单管理
这种编码方式的好处是：新增菜单时自动生成 mid，权限判断时只需比对数字，无需递归查树。
2.3 动态菜单过滤
登录后，系统会根据用户权限动态裁剪菜单树：只展示用户有 can_view 权限的菜单项，且递归保留可见父节点。用户看不到的菜单，URL 也无法直接访问。
2.4 默认角色体系
系统内置四个默认角色：
| 角色 | 定位 |
|---|---|
| 超级管理员 | 全部权限，硬编码跳过检查 |
| 普通管理员 | 除权限管理外的功能全开 |
| 数据编辑 | 文章和方案的管理权限 |
| 会员 | 仅首页查看权限 |
实际使用中可以根据需要自由增删角色、调整权限矩阵。
三、内容管理功能
3.1 文章系统：Markdown 全管线
文章的编写、存储、渲染构成了一条完整的 Markdown 管线：
EasyMDE 编辑器编写 → 原始 Markdown 存入 SQLite
→ Python-Markdown（extra 扩展）渲染为 HTML
→ highlight.js 代码高亮（30+ 主题）
→ 响应式样式呈现
具体支持：
- 富文本 Markdown 编辑：EasyMDE 编辑器提供工具栏快捷操作（标题、加粗、链接、代码块等）
- 粘贴图片自动上传：在编辑器中粘贴截图，自动上传至服务器并插入 Markdown 图片语法
- 文章分类：支持自定义分类管理，可拖拽排序
- 缩略图与附件：每篇文章可上传独立缩略图和附件文件
- 置顶与隐藏：支持行内快速切换文章的置顶和显示状态
- 访问密码保护：敏感文章可设置密码，前台访问时需验证后才能查看正文
- 相邻文章导航：自动获取同分类下的上一篇/下一篇文章
- 批量操作：支持批量删除文章
3.2 方案管理
方案是一个独立于文章的内容模块，结构与文章类似但用途不同——适合存放技术方案、项目文档、案例分析等。支持分类、缩略图、附件、置顶、搜索等完整的 CRUD 操作。
3.3 留言与评论系统
系统采用统一数据表设计：留言和文章评论共用 message 表，通过 article_id 字段区分——article_id 为空则是独立留言，否则是对应文章的评论。
前台评论区的特色功能：
- 嵌套回复：支持多级回复，通过
parent_id构建评论树 - 字节跳动表情包：集成 80+ 个中文风格表情（捂脸、大笑、呲牙等），通过 Jinja2 自定义过滤器
emoji_replace将[表情名]自动替换为表情图片 - 评论图片上传：用户可以在评论中附带图片
- 后台审核：所有评论默认待审核状态，管理员在后台统一审核
四、工作台与效率工具
后台首页（工作台）的设计理念是"登录后一眼看到全局"。
4.1 数据概览
五维统计卡片实时展示：文章总数、留言总数、用户数、备忘录数、待办事项数。底部还有待审核留言面板，一键全审功能可以批量将所有待审留言标记为已审核。
4.2 待办事项
内置完整的待办事项模块，支持：
- 新增、编辑、删除待办
- 完成与撤销完成
- 设置提醒日期和时间
- 统计面板（总数/已完成/未完成/今日到期）
4.3 个人外链导航
每个用户可以维护自己的快捷链接集合，内置 21 条默认外链覆盖 GitHub、Gitee、AI 工具、搜索引擎、设计工具、算法平台等。支持：
- 自定义图标（Font Awesome）、颜色标签
- 两种打开方式：新窗口跳转或弹窗打开（可自定义弹窗尺寸）
- 拖拽排序
这本质上是一个个人导航站功能，把日常高频访问的工具集中在一处。
4.4 主题个性化
每个用户可以保存独立的主题配置（JSON 格式），支持切换配色方案、菜单风格、动画效果、圆角等视觉参数。主题偏好持久化存储在数据库中，登录后自动加载。
五、博客前台
前台是一个面向访客的公开站点，与后台共用数据库，但拥有完全独立的 UI 设计和交互体验。
5.1 首页
首页集成了高德地图天气 API，展示实时天气信息。背景大图 + 文章入口卡片，简洁大方。
5.2 文章列表：瀑布流布局
使用 Macy.js 实现 Pinterest 风格的瀑布流卡片布局，响应式适配不同屏幕尺寸。支持分类筛选和 AJAX 加载更多。
5.3 文章详情页
Markdown 渲染 + highlight.js 代码高亮（30+ 主题可选）。支持：
- 密码保护文章
- 上一篇/下一篇文章导航
- 嵌套评论区（带表情和图片）
- 图片灯箱预览（Viewer.js）
5.4 心情随笔
使用 Swiper.js 实现卡片式轮播展示。每张卡片可以自定义背景色、标题、内容、作者、头像和星级评分。发表前需输入安全码，防止恶意提交。
5.5 验证码系统
使用 Pillow（PIL） 在服务端动态生成验证码图片，80x36 像素白色背景 + 蓝色干扰线文字，验证码文本存入 Flask Session，支持大小写不敏感校验。
5.6 嵌入三方工具和音乐平台
嵌入三方工具AI及工具和音乐平台，方便快速使用。
六、技术栈总结
| 层级 | 技术选型 | 说明 |
|---|---|---|
| 后端框架 | Flask 3.1 | Python 轻量 Web 框架，Blueprint 架构 |
| WSGI 服务器 | Gunicorn + gevent | 异步协程，4 worker 生产部署 |
| 数据库 | SQLite3 | 单文件数据库，零配置，参数化查询 |
| 后台 UI | Layui 2.6.8 | iframe 多标签页 + 树形菜单 + 表格组件 |
| 前台 UI | Layui+原生 HTML/CSS/JS | 响应式设计 + jQuery |
| 富文本编辑 | EasyMDE+wangEditor v5 | Markdown 编辑器，支持工具栏和图片粘贴上传 |
| Markdown 渲染 | Python-Markdown 3.7 | extra 扩展，支持表格、代码块等 |
| 代码高亮 | highlight.js | 30+ 主题，支持主流编程语言 |
| 瀑布流 | Macy.js | 前台文章列表 Pinterest 风格布局 |
| 轮播 | Swiper.js | 心情随笔卡片轮播 |
| 图片灯箱 | Viewer.js | 文章图片点击放大预览 |
| 图标库 | Font Awesome+Layui icon | 全站图标统一 |
| 图片处理 | Pillow 11.0 | 验证码生成、头像上传处理 |
| 二维码 | QRious | 前端二维码生成 |
| 前端工具 | jQuery | DOM 操作与 AJAX 请求 |
七、项目结构
flask_work/
├── run.py # 应用入口（工厂模式）
├── app.py # 后台管理 Blueprint（60+ 路由）
├── blog_app.py # 博客前台 Blueprint
├── db.py # 数据库层（90+ 函数，14 张表）
├── gunicorn_config.py # Gunicorn 生产部署配置
├── requirements.txt # Python 依赖
├── data/
│ └── jianji.db # SQLite 数据库文件
├── static/
│ ├── layui/ # Layui UI 框架
│ ├── js/ # 后台 JS（main.js, config.js）
│ ├── css/ # 后台样式（login.css, main.css, theme.css）
│ ├── ui/ # 前台资源（main.js, mkdown.css, swiper/）
│ ├── dist/ # 第三方组件（EasyMDE, highlight.js, Macy, Swiper...）
│ └── upload/ # 上传文件（img/, file/）
└── templates/
├── page/ # 后台模板（17 个 HTML）
└── blog/ # 前台模板（11 个 HTML）
八、适用场景
这套系统适合以下场景：
- 个人开发者：需要一个内容管理后台 + 博客前站的轻量方案
- 小团队内部工具：多用户、多角色、权限隔离的管理系统
- 技术博客：Markdown 写作 + 代码高亮 + 评论互动
- 学习参考：完整的 Flask 全栈项目，涵盖 RBAC、Blueprint、工厂模式、Jinja2 模板等核心概念
- 快速部署：单文件数据库 + 零外部依赖，一台最低配服务器就能跑
写在最后
简记网没有追求微服务、没有上 Kubernetes、没有用最新的前端框架。它选择了一条务实的路：用最合适的技术解决实际问题。
Flask 的轻量让开发效率很高，SQLite 的单文件让部署和迁移极其简单，Layui 的后台模板让界面开发不用从零开始。RBAC 权限系统虽然不是最复杂的实现，但对一个小型管理系统来说完全够用——甚至可以说恰到好处。
如果你也在找这样一个"不太大、不太小、刚好够用"的全栈系统，希望这篇文章能给你一些参考。
项目基于 Flask 3.1 + Layui v2.9.18 + SQLite3，Python 3.10+，开源协议待定。
评论
评论列表