feat:增加个人博客系统文档

This commit is contained in:
2026-06-08 16:08:00 +08:00
parent 9c11e484f3
commit 21414245d9
20 changed files with 371 additions and 14 deletions

View File

@@ -0,0 +1,88 @@
---
title: 个人博客系统
date: 2026-06-08
---
# 一、项目背景
  为满足个人技术积累与内容分享需求,独立开发了一套多端博客系统,支持博客管理、发布与多端阅读。
  系统包含博客网站、博客管理后台与移动端 App覆盖 Web 端与移动端用户场景,实现了从内容创作、存储、检索到多端展示的完整闭环。
# 二、系统架构
# 三、核心模块
## 3.1 博客网站
1. 首页博客列表展示(分页、置顶)
2. 博客分类与标签筛选
3. 博客归档(按时间维度)
4. 博客全文搜索Elasticsearch
5. Markdown 文章渲染与代码高亮
6. 博客阅读时长和阅读人数统计
7. 评论发布与互动(匿名)
<VPSwiper
:slides="[
'../images/blog_home.png',
'../images/blog_category.png',
'../images/blog_archive.png',
'../images/blog_search.png',
'../images/blog_content.png',
'../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="[
'../images/blog_login.png',
'../images/blog_stats.png',
'../images/blog_article.png',
'../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。

View File

@@ -7,7 +7,6 @@ date: 2026-06-04
&emsp;&emsp;针对家庭信息分散、难以统一管理的问题,设计并实现了一套移动端家庭管理平台,将账单、旅行、健康、纪念日等数据进行集中管理,并通过私有化部署与数据加密保障安全,实现家庭生活的数字化沉淀。
# 二、系统架构
![架构图](../images/family_manage_arch.png)
# 三、核心模块
- **账单记录**

Binary file not shown.

After

Width:  |  Height:  |  Size: 134 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 188 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 119 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 182 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 202 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 129 KiB