程序设计实验室
微信公众号
前言
最近想整理一下博客的文章
结果发现这个博客后台实在是简陋，整理起来非常麻烦
虽然我已经决定要对 starblog 进行重构了
但是远水救不得近火
还是得先用现有破破烂烂的管理后台来解决眼前的需求
所以我决定对管理后台修修补补继续用😂
管理后台
starblog 的管理后台目前基于 vue
最早整个框架是我从之前一个 Spring Cloud 项目里扒出来的
算是陈年旧代码了
当时做这个后台的时候，我还没摸到前端门槛，只会 vue 这种套模板写写 crud 这样子
所以做出来的东西也很粗糙，不说美观了，很多交互设计也都不太合理
这次缝缝补补也只是凑合用用，以后还是要重构的。
接下来分享一下本次做了哪些工作吧~
登录页面
原本的登录页面真的丑出水平了
最不能忍的就是这个登录页面，重写后是这样的
来看看原来的登录界面😂
新的分类页面
做了两个
卡片式分类列表
这个其实不太好，因为博客分类是有层级的
卡片式把所有分类都平铺出来
太多了，不好找
分类树
这个才是真正好用的
左侧是分类树，点击左侧的分类节点，可以查看分类详情，右侧会加载显示文章列表
文章列表可以显示两种不同风格，现在是图标风格，类似文件管理器一样的风格
还有卡片式布局
然后值得一提的是分类节点的操作
鼠标悬浮到每个节点上有一个菜单
分别是：添加子分类、文章列表、编辑分类、删除
对了，这个页面中间的分隔条是可以调整的，可以调整左右两栏的宽度
添加子分类
添加的时候会自动填入父分类，大大提升分类管理的便利性
分类文章列表
这个新的界面用来管理某个分类里的文章非常方便
因为后端设计的问题，不允许文章没有分类
所以这里主要是方便往某个分类里添加文章
依然是左右两栏布局
左栏是全部文章，支持搜索和按分类树筛选
右栏是这个分类里的文章，已有文章是无法移除的，因为不允许文章不设置分类
不过本次编辑新添加的文章，还没保存的话可以移除
我用这个功能把「Linux」分类和「开箱测评」里的文章都整理好了
对了，这个界面还支持分页加载，交互属于是上拉加载的一种，滑到底部点「加载更多」按钮可以加载下一页
旧的分类页面
看了新的功能
来看看旧的做得多烂
要说垃圾嘛，也不至于，至少分类增删改查都有了
但也说不上好用
只是停留在数据库的增删改查层面
在功能方面可以说是非常简陋了
新的照片墙页面
这个可真算得上是大提升了
支持搜索、筛选、批量操作（设置推荐、删除），也可以编辑图片信息啥的，该有的功能都有了
而且原本使用了 vue-waterfall 组件，似乎停止维护还是和这个项目的 vue 版本不兼容了，修改之后有不少 bug
于是我这次自己手写了一个基于 vue 的瀑布流组件
比 vue-waterfall 舒服多了
旧版
旧版长这样，这他喵的是管理后台啊，不是前端展示界面，只展示而其他功能都不完善是怎么回事？
小结
这次对后台做的这些修改，说实话也算不上什么“大版本更新”，更像是一次「能用就行」的修修补补。
不过折腾下来，倒也重新审视了一下当年写下的那些旧代码，多少有点「看着自己几年前的作品直呼好家伙」的感觉。
虽然这些临时补丁迟早都得被重构掉，但至少现在后台终于能顺手用了。
等到未来重构 StarBlog 的时候，这次的经验也算是提前踩过的坑吧。
有时候，不完美的解决方案，也是前往完美路上的一步。
—— 曦远 · 2025 年 10 月