关于个人博客

这是我第一次写博客网站，也是基于平时会写博客记录学习，就是想着用自己所学的知识来搭建一个个人博客系统，同时对所学的知识进行一个巩固复习。

在项目中使用到的技术

• 前端：Vue3 + TypeScript + Vite + Vue-Router + Pinia + Element-plus
• 后端：Express + Mongo

目前实现的功能

• [√]博客列表的展示
• [√]博客发表日期，浏览次数等信息
• [√]博客的分类标签
• [√]博客内容详情的展示
• [√]个人项目列表的展示
• [√]个人项目的详情链接
• [√]用户信息的展示
• [√]用户头像的更换
• [√]用户信息的更新
• [√]增加新的博客
• [√]增加新的项目
• [√]博客的搜索功能
• [√]切换主题的功能

计划实现的功能

• [ ]友链模块
• [ ]资源分享模块
• [ ]根据分类标签进行搜索
• [ ]博客内容的修改
• [ ]博客列表的分页

效果展示

home首页

顶部为一个navbar面板，首页上面为一个轮播图，下面是博客列表与个人信息的展示，这里的博客列表是根据博客的浏览次数来进行排序展示的，点击后可以进入到博客详情页，个人信息只是展示，点击后会跳转到个人页，可以进行信息的修改。

博客列表页

博客列表页相对简单，就是博客列表的展示，分页功能目前还没写。

项目列表页

由于图片路径的问题导致图片无法正常显示。

个人中心页

左边为一个功能卡，能够添加博客与项目，对个人信息的修改，右边为一个eCharts可视化的数据展示。

增加博客页

增加博客页为一个markdown的编辑区域，在添加时需要输入博客的标题、选择分类、添加摘要与上传封面（若未上传封面，后端会随机补上一张），并且会对所填的内容进行一个表单的校验。通过校验规则后才能发布成功。

增加项目页

同样会进行表单的校验。

修改信息页

在这里可以更换头像与一些描述信息等。

博客详情页

上面为博客标题，博客封面与信息的展示；下面为博客的主要内容。

博客搜索页

能够根据输入的关键字动态展示内容，选择内容后会跳转到对应的详情页。

主题切换功能

本项目通过css变量定制了light与dark两套主题进行切换。

项目地址

前端项目

• GitHub: github.com/maojiu-bb/b…
• Gitee: gitee.com/maojiubb/bl…

后端服务

• GitHub: github.com/maojiu-bb/b…
• Gitee: gitee.com/maojiubb/bl…

最后

项目中还是有些地方需要继续改进，还有些功能尚未实现。后端的服务与数据库写的也是相对简单，后面再慢慢改进。