Hyperpost Admin —— 基于 Vue 2 + Element UI 的博客后台管理系统,是 Hyperpost 博客系统的管理端模块,面向管理员提供内容生产、内容维护和数据查看功能。
Hyperpost 是一个前后端分离的个人博客系统,核心需求包括:支持发布、修改、删除博客文章,文章可上传配图,访客可注册账号并在文章下方留言评论。
本项目 Hyperpost Admin是博客系统的后台管理前端,面向管理员和用户,负责内容管理、数据监控和系统配置。
| 层级 | 技术 |
|---|---|
| 前端框架 | Vue 2 + Element UI |
| 路由管理 | Vue Router |
| 状态管理 | Vuex |
| HTTP 请求 | Axios |
| Markdown 编辑 | markdown-it |
| 代码管理 | Git / GitHub |
- 🔐 管理员登录与权限:JWT 认证,路由守卫拦截未登录访问
- 📊 数据看板:文章数、评论数、用户数、总浏览量统计,近 7 日趋势图
- 📝 文章管理:文章列表分页、搜索、状态筛选,支持新增/编辑/删除/上下架
- 🖼 Markdown 编辑:支持实时预览、图片上传、封面图设置
- 💬 评论管理:评论审核、隐藏、恢复、删除,支持嵌套评论展示
- 🏷 标签管理:标签新增、重命名、删除,关联文章检查
- 📁 图片管理:查看已上传图片(可选功能)
- ⚡ 错误处理:统一异常提示、Loading 状态、二次确认弹窗
- Node.js >= 8.9
- npm >= 3.0.0
git clone https://github.com/QzKevin/Hyperpost-admin.git
cd Hyperpost-admin
npm install
npm run dev
启动后自动打开 http://localhost:9528
Hyperpost-admin/
src/
api/ # Axios 接口封装
assets/ # 静态资源
components/ # 业务无关通用组件
layout/ # 后台布局(侧边栏、顶部栏、内容区)
router/ # 路由配置和权限守卫
store/ # 用户、权限、全局状态
styles/ # 全局样式和主题变量
utils/ # Token、日期、上传、格式化工具
views/
login/ # 登录页
dashboard/ # 数据看板
article/ # 文章列表、编辑、新增
comment/ # 评论管理
tag/ # 标签管理
upload/ # 图片资源管理(可选)
| 路由 | 页面 | 说明 |
|---|---|---|
| /login | 管理员登录 | 输入账号密码,登录成功后保存 Token |
| / | 后台首页 | 重定向到 /dashboard |
| /dashboard | 数据看板 | 展示文章、评论、用户、浏览量等统计 |
| /articles | 文章管理 | 文章分页、搜索、状态筛选、删除、上下架 |
| /articles/create | 新增文章 | Markdown 编辑器、封面图、标签、发布状态 |
| /articles/:id/edit | 编辑文章 | 回填文章内容并提交修改 |
| /comments | 评论管理 | 评论列表、文章筛选、审核、隐藏、删除 |
| /tags | 标签管理 | 标签新增、重命名、删除 |
| /uploads | 图片管理 | 查看已上传图片(可选功能) |
按资源拆分 API 文件:
src/api/auth.ts
src/api/article.ts
src/api/comment.ts
src/api/tag.ts
src/api/upload.ts
src/api/dashboard.ts