notes_estom/blog/博客/03 博客系统详细设计.md

后端功能设计

1 数据处理功能

将数据从github的仓库中同步到本地，经过一系列数据处理操作，将数据转化为结构化的本地数据，方便进行展示。

1.1 数据同步

创建一个GitRepositoryManage类，用来实现git相关的一系列操作。

• 打开Git仓库。Clone一个仓库到本地。如果仓库存在则Open一个仓库。
• 获取文件时间。通过Git提交的历史记录，得到每一个文件变更的历史数据。
• 更新仓库内容。通过GitPull命令刷新仓库的内容。
• 创建一个SyncDataService，添加一个定时任务，每隔1小时check一遍数据一致性。
• 使用mysql创建数据表。
• 使用mybatis-plus操作数据表实现增删查改。用到DAO层即可。
  • 重构了文章的设计文档。tag/category本来就是附属内容，为了简化数据结构，只在内存中生成一份数据，而不是落库。

1.2 构建文章

遍历文章获取一下内容

• 构建文章分类：如果一个目录下有.md文件，则该目录的相对路径可以作为分类。
• 构建文章标题：使用无后缀名的文件名称作为标题
• 构建文章内容：保存原始数据，原始数据意味着丢失更少的信息。
• 填充文件路径：获取文章地址相对根目录的相对路径。
• 生成文件标签：使用标签生成算法提取文章中的五个关键字。并增加标签计数。
• 生成文章简介：使用简介生成算法提取文章中100字简介。
• 获取文章时间：使用Git工具获取文章同步的时间
• 生成文章哈希：使用sh256生成文章哈希值，校验文章是否发生变化。
• 将文章数据落库。文章和分类、标签之间是软索引。通过路径和标签名称进行管理。

2 文章管理功能

通过各种方式索引文章。

2.1 文章索引功能

• 分页查询文章列表

  • 按目录搜索。需要传递目录的全路径，在文章中直接检索该目录下的文章。
  • 按标签搜索。支持传递标签多个标签，在文章中列表中直接匹配标签列。支持多个标签交叉匹配
  • 按年月归档。支持根据不同的创建年月索引归档的文章。建立文章的时光轴，并且能够通过下拉不断更新时光轴周围的文章。

• 文章刷新功能：当笔记提交到git仓库后，自动触发部署流水线回调系统接口，触发数据同步和数据处理。

  • 支持幂等处理（同一时间只允许调用一次）
  • 支持缓存清空操作。及时更新缓存。

2.2 标签搜索功能

• 查询目录标签云，并支持缓存。
• 查询文章标签云。并支持缓存。
• 查询年月日归档信息。并支持缓存。

3 评论管理功能

4 用户管理功能

5 后台管理功能

6 自动部署功能

gitee数据同步到github

github流水线触发同步

1. 流水线能够自动执行docsfiy生成脚本
2. 流水线调用远程的api触发博客部署操作。

前端功能设计

1 搜索模板

关键词

• 静态模板
• UI组件库
• vue blog template

资源

大量静态的博客模板。

• django-blog-tutorial-templates-master 没有框架

一个非常精美的vue博客模板

• poetize-vue2 https://gitee.com/littledokey/poetize-vue2 vue2框架。寻国记的代码和前端、前端非常非常非常精美、功能十分多。有大量相关友链https://poetize.cn/

来自github的vue博客模板

• merakiui/blog-template https://github.com/merakiui/blog-template vue3框架。前端很捡漏，需要自己优化。
• arpitprod/Vuetify-Blog-Template https://github.com/arpitprod/Vuetify-Blog-Template vue3 + vuetify框架
• blog-vue-typescript https://github.com/biaochenxuying/blog-vue-typescript Vue3 + element-plus框架

2 方案

当前主要采取两个路线。一个是vue路线，一个是themelyfe路线。

vue路线

在poetize的代码基础上进行改进。可以省去大量的前端美化工作。工作主要集中在一下几点。

• 阅读源代码，减少对外部资源的依赖。
  • 前端代码阅读 1小时
  • 后端代码阅读 1小时
  • 聊天室代码阅读 1小时
• 手动添加数据 1小时
• markdown渲染 1小时
• 自动导入笔记 1小时