vue-admin-blog

介绍

这是 Marco's Blog 的后台管理系统，本项目采用 vue3.x typescript vite 等进行开发，具备完善的类型安全机制，在功能上实现了对全站资源的基本管理和统计分析，与 vue-ssr-blog 不同的是，它是一个完全由前端渲染的系统。

技术栈

• vue3.x
• vue-router
• vuex
• typescript
• vite
• naive-ui
• quill editor
• nodejs

主要功能

• 首页
  • 文章、评论、留言、用户注册统计
  • 访客的浏览器偏好分析
  • 访客操作系统分析
  • 访问量的走势分析
  • 最新留言面板
  • 网站基本概况
• 文章管理
  • 基本信息展示
  • 模糊搜索
  • 基本信息编辑
  • 多条件查询
  • 控制上下线（切换草稿与发布状态）
  • 删除
• 创建文档
  • 保存草稿
  • 发布/更新
  • 支持实时生成目录大纲
  • 文档封面上传七牛云
  • 自动保存
  • 容灾措施，再次进入编辑界面时提示还原未经保存的内容
  • quill 富文本编辑器
    • 支持选择不同语言的代码块
    • 文档内图片上传至七牛云
• 文章评论管理
  • 基本信息展示
  • 模糊搜索
  • 管理员添加评论
  • 管理员回复评论
  • 删除
• 留言管理
  • 基本信息展示
  • 模糊搜索
  • 添加管理员留言
  • 管理员回复留言
  • 删除
• 消息提醒
  • 产生新文章评论时
  • 产生新留言时
  • 产生新的文章pv时
  • 支持设置已读
  • 删除
• 密码管理
• 数据备份
  • 一键备份数据库
  • 备份文件下载
  • 自动备份（留坑，有时间再开发~）
• 博客首页名言管理（留坑，有时间再开发~）
• 豆瓣爬虫的精细化控制（留坑，有时间再开发~）
  • 手动触发
  • 分页起止点

Build Setup

关于部署至生产环境的详细教程，请查看这篇文章

# install dependencies
npm install

# serve with hot reload at localhost:6180
npm run dev

# build for production with minification

# 注意，此命令输出生产包至 dist 目录
# 部署时将 dist 下 的所有文件上传至你的静态服务目录中的admin文件夹，例如 /usr/local/nginx/htmls/admin
npm run build

预览

首页

文章管理

文章评论管理

留言管理

消息管理

创建文档

文档编辑器

密码管理

数据备份

其它

1. 本系统对quill编辑器进行了一些魔改，在插入代码块时可选择不同的语言类型，这给前端展示代码块的UI风格提供了多种可能。目前前台展示端使用 prism 作为代码高亮插件，它可以自由组合你需要高亮的语言。
2. 文档编辑过程中每5分钟自动保存一次。
3. 文档编辑模块具备容灾措施。当有意外情况发生，文档未经保存而退出时，下一次进入，系统将会提示从本地存储还原未经保存的快照。

最后的最后，如果你喜欢这个项目，不妨star鼓励一下~