Skip to content

Repository files navigation

Hyperpost Admin

Build Status Version License Vue Element UI

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 封装

按资源拆分 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

About

🐱一个前后端分离的博客系统项目的管理系统前端

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages