---
title: 个人博客系统
date: 2026-06-08
---
# 一、项目背景
为满足个人技术积累与内容分享需求，独立开发了一套多端博客系统，支持博客管理、发布与多端阅读。
系统包含博客网站、博客管理后台与移动端 App，覆盖 Web 端与移动端用户场景，实现了从内容创作、存储、检索到多端展示的完整闭环。
# 二、系统架构
# 三、核心模块
## 3.1 博客网站
1. 首页博客列表展示（分页、置顶）
2. 博客分类与标签筛选
3. 博客归档（按时间维度）
4. 博客全文搜索（Elasticsearch）
5. Markdown 文章渲染与代码高亮
6. 博客阅读时长和阅读人数统计
7. 评论发布与互动（匿名）
## 3.2 博客管理后台
1. 博客新增、编辑、删除（权限控制）
2. Markdown 编辑器（md-editor-v3）
3. 博客图片上传（RustFS）
4. 分类 / 标签管理
5. 博客状态管理（草稿 / 发布）
6. 博客访问数据查看
7. 统计数据仪表盘（ECharts）
## 3.3 移动端APP
1. 博客列表与详情浏览
2. Markdown 内容原生渲染（markdown_widget）
3. 分类、归档、搜索功能
4. 移动端自适应布局
# 四、技术栈
| 层级 | 技术 |
|---|---|
| **前端** | Vue 3、Element Plus、Vue Router、Pinia、md-editor-v3、Axios |
| **后端** | FastAPI、Pydantic、SQLAlchemy、Uvicorn |
| **移动端** | Flutter、markdown_widget、provider、dio |
| **中间件** | Elasticsearch（全文检索、分词索引） |
| **存储** | MySQL 8.0（业务数据）、RustFS（图片存储） |
| **运维** | Docker、Nginx、Fluent Bit (日志采集)、OpenObserver (日志可视化) |
# 五、核心设计
- 基于 FastAPI 构建高性能后端 API，采用分层结构设计，保证业务逻辑清晰、接口响应高效。
- 博客内容统一采用 Markdown 格式，Web 端与移动端分别基于 md-editor-v3与 markdown_widget实现一致的内容渲染效果。
- 使用 Elasticsearch 构建博客全文检索引擎，支持标题、内容、标签多维搜索，显著提升内容查找效率。
- 图片资源统一上传至 RustFS 对象存储，通过 URL 访问，降低应用服务器存储压力，提升静态资源加载速度。
- 管理后台与博客前端共享同一后端服务，通过接口级权限控制，实现“管理操作需鉴权、公开访问无需登录”的安全设计。
- Web 端采用 Vue 3 + Pinia 实现状态管理与组件化开发；移动端基于 Flutter 实现跨平台一致体验。
# 六、难点 / 亮点
## 6.1 博客搜索性能优化
- **问题**：随着博客数量增长，MySQL LIKE 查询性能下降明显。
- **方案**：引入 Elasticsearch，构建博客索引，支持中文分词与多字段检索。
## 6.2 图片存储与访问优化
- **问题**：本地存储图片不利于扩展，且增加服务器带宽压力。
- **方案**：集成 RustFS 对象存储，所有博客图片统一上传并返回访问 URL。