今晚把博客后台折腾了一遍,记录一下做了啥。
后台管理界面重构
侧边栏布局
把原来顶部平铺的导航改成了左侧边栏,分内容/管理/资产/分析四大区块,一目了然。仪表盘重新做了,数据卡片 + 快捷操作 + 预警区 + 访问趋势一屏搞定。
登录页美化
加了毛玻璃效果和背景装饰,看起来不那么素了。
全站主题切换
之前只有仪表盘能切换暗色/亮色,其他管理页面都是纯黑写死的。现在所有后台页面都能切换了,用共享的 admin-theme.css + admin-theme.js 统一处理,不用每个页面重复写。
访客 IP 追踪
访问统计中间件加了真实 IP 记录,兼容 Nginx 代理(从 X-Forwarded-For / X-Real-IP 获取)。仪表盘新增"最近访问者"表格,去重显示(同一 IP 同天算一次),能看到 IP 地址、访问页面、设备类型、来源和时间。
站点设置页面
新增 /admin/settings 页面,网站名称、副标题、Logo、导航菜单、页脚链接、显示开关这些以前要改代码的,现在后台直接可视化编辑。数据存在 site_settings.json,通过 Express 中间件每次请求读取,改完刷新前台就生效,不用重启服务。
其他优化
- 登录防暴力破解 — 5 次失败锁定 15 分钟
- Markdown 渲染缓存 — 文件未变不重解析,避免每次请求都调用 marked
- 全局错误中间件 — 异步错误兜底,不再直接崩
- 自动备份 — 每天凌晨 2 点自动备份 data/ 和 posts/,保留 7 份
- 健康检查端点 —
GET /health返回运行状态
修了一个 Bug
数据看板页面 (analytics.ejs) 之前用 include('../layout', ...) 套了前台的 layout,导致显示前台导航栏(首页/文章/商品...),一点就跳到前台退出了后台。改成了独立的后台页面结构,和其他管理页一致。
总结清单
| 项目 | 状态 |
|---|---|
| 登录暴力破解保护 | ✅ |
| 全局错误中间件 | ✅ |
| Markdown 渲染缓存 | ✅ |
| 数据面板可视化 | ✅ |
| 访客 IP 追踪 | ✅ |
| 站点设置页面 | ✅ |
| 全站主题切换 | ✅ |
| 自动备份 | ✅ |
| 健康检查 | ✅ |
| analytics 页面重写 | ✅ |
工具选对了,事情就成了一半。☁️