3.5 KiB
3.5 KiB
title, date
| title | date |
|---|---|
| 个人博客系统 | 2026-06-08 |
一、项目背景
为满足个人技术积累与内容分享需求，独立开发了一套多端博客系统，支持博客管理、发布与多端阅读。
系统包含博客网站、博客管理后台与移动端 App，覆盖 Web 端与移动端用户场景，实现了从内容创作、存储、检索到多端展示的完整闭环。
二、系统架构
三、核心模块
3.1 博客网站
- 首页博客列表展示（分页、置顶）
- 博客分类与标签筛选
- 博客归档（按时间维度）
- 博客全文搜索（Elasticsearch）
- Markdown 文章渲染与代码高亮
- 博客阅读时长和阅读人数统计
- 评论发布与互动（匿名）
3.2 博客管理后台
- 博客新增、编辑、删除（权限控制）
- Markdown 编辑器（md-editor-v3）
- 博客图片上传（RustFS）
- 分类 / 标签管理
- 博客状态管理（草稿 / 发布）
- 博客访问数据查看
- 统计数据仪表盘（ECharts）
3.3 移动端APP
- 博客列表与详情浏览
- Markdown 内容原生渲染（markdown_widget）
- 分类、归档、搜索功能
- 移动端自适应布局
四、技术栈
| 层级 | 技术 |
|---|---|
| 前端 | 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。