89 lines
3.6 KiB
Markdown
89 lines
3.6 KiB
Markdown
---
|
||
title: 个人博客系统
|
||
date: 2026-06-08
|
||
---
|
||
|
||
# 一、项目背景
|
||
  为满足个人技术积累与内容分享需求，独立开发了一套多端博客系统，支持博客管理、发布与多端阅读。
|
||
  系统包含博客网站、博客管理后台与移动端 App，覆盖 Web 端与移动端用户场景，实现了从内容创作、存储、检索到多端展示的完整闭环。
|
||
|
||
# 二、系统架构
|
||
|
||
# 三、核心模块
|
||
## 3.1 博客网站
|
||
1. 首页博客列表展示（分页、置顶）
|
||
2. 博客分类与标签筛选
|
||
3. 博客归档（按时间维度）
|
||
4. 博客全文搜索（Elasticsearch）
|
||
5. Markdown 文章渲染与代码高亮
|
||
6. 博客阅读时长和阅读人数统计
|
||
7. 评论发布与互动（匿名）
|
||
|
||
<VPSwiper
|
||
:slides="[
|
||
'/blog-press/images/blog/home.png',
|
||
'/blog-press/images/blog/category.png',
|
||
'/blog-press/images/blog/archive.png',
|
||
'/blog-press/images/blog/search.png',
|
||
'/blog-press/images/blog/content.png',
|
||
'/blog-press/images/blog/commit.png'
|
||
]"
|
||
button-text="点击全屏"
|
||
:navigation="false"
|
||
effect="coverflow"
|
||
/>
|
||
|
||
## 3.2 博客管理后台
|
||
1. 博客新增、编辑、删除（权限控制）
|
||
2. Markdown 编辑器（md-editor-v3）
|
||
3. 博客图片上传（RustFS）
|
||
4. 分类 / 标签管理
|
||
5. 博客状态管理（草稿 / 发布）
|
||
6. 博客访问数据查看
|
||
7. 统计数据仪表盘（ECharts）
|
||
|
||
<VPSwiper
|
||
:slides="[
|
||
'/blog-press/images/blog/login.png',
|
||
'/blog-press/images/blog/stats.png',
|
||
'/blog-press/images/blog/article.png',
|
||
'/blog-press/images/blog/edit.png'
|
||
]"
|
||
button-text="点击全屏"
|
||
:navigation="false"
|
||
effect="coverflow"
|
||
/>
|
||
|
||
## 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。
|