cms-api 为前后端分离的博客管理系统。

后端技术栈：egg.js + mysql + sequelize + jwt 等

前端技术栈：vue全家桶 + axios + elementUI + markdown编辑器等

前端项目地址：https://github.com/caiheping/vue-cms

node版本8以上

MySQL数据库

git clone https://github.com/caiheping/egg-cms.git
# 如果clone 很慢，也可以拉码云的仓库
git clone https://gitee.com/caiheping/egg-cms.git
cd egg-cms
npm install

然后修改config/config.default.js和database/config.json（这个改不改都行）下自己的数据库用户名和密码

创建数据库egg_cms_development

在egg_cms_development数据库下导入项目根目录下egg_cms_development.sql文件

运行项目

npm run dev

浏览器打开 http://127.0.0.1:7001/index.html

admin登录账号：admin，密码： 123456 普通用户账号密码自己用admin去用户管理创建

• 登录 -- 完成
• 首页 -- 去我的博客
• 文章列表 -- 增删改查
• 文章类型 -- 增删改查
• 用户中心 -- 增删改查
• 角色管理 -- 增删改查
• 菜单管理 -- 增删改查
• 部门管理 -- 增删改查
• 通知公告 -- 增删改查
• 头像上传 -- 完成
• 我的博客前端界面（知道地址后无需登录就可以进入）

cms-api
├─ app
|	├─ controller			// 用于解析用户的输入，处理后返回相应的结果
|	├─ extend				// 用于框架的扩展
|	├─ middleware			// 用于编写中间件
|	├─ model				// 用于放置领域模型
|	├─ public				// 用于放置静态资源
|	├─ rules				// 参数校验文件
|	├─ schedule				// 用于定时任务，可选，具体参见定时任务
|	├─ service				// 用于编写业务逻辑层，可选，建议使用
|	├─ utils				// 工具文件
|	├─ router.js				// 用于配置 URL 路由规则
├─ config
|	├─ config.default.js	// 用于编写配置文件
|	├─ plugin.js			// 用于配置需要加载的插件
├─ database
|	├─ migrations			// 数据库迁移文件
|	├─ seeders				// 种子文件
|	├─ config.json				// sequelize 配置文件
├─ logs						// 日志文件
├─ run
├─ test
├─ typings
├─ www						// 前端打包文件
...

演示地址：http://blog.caihp.top （自己服务器只开放部分功能，想要查看全部功能，请copy代码在自己的电脑上看）

用户名： test

密码：123456

登录页

首页

博客管理 > 文章列表

博客管理 > 文章类型

博客管理 > 友情链接

系统管理 > 用户管理

系统管理 > 角色管理

系统管理 > 菜单管理

系统管理 > 部门管理

系统管理 > 字典管理

系统管理 > 通知公告

我的博客 > 首页

我的博客 > 文章详情

传送门：前端vue3 + 后端egg项目地址：https://github.com/caiheping/oa-api 或者 https://gitee.com/caiheping/oa-api

如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！ ^_^

一、关于项目的搭建：

1. 搭建环境下载软件：node版本8以上 和 Navicat（或者MySQL数据库）

2. 在Navicat中，创建数据库egg_cms_development,然后导入原博主的项目根目录下数据库数据egg_cms_development.sql文件

3. 用VSC打开项目，然后修改config/config.default.js文件中的数据库名和密码。

4. 在VSC里新建终端输入npm install 命令下载npm ,再用命令 npm run dev 运行项目

5. 运行成功后浏览器打开网址http://127.0.0.1:7001/index.html，即可成功打开项目，项目默认登录账号admin,密码：123456，只需输入图片验证码即可进入首页。

二：关于 博客管理>文章列表 功能的介绍：

以下是如何使用文章列表页面的指南：

1. 查看文章列表： 打开文章列表页面，用户可以看见所有已发布的文章。

2. 分页浏览：

   • 如果文章数量较多，可以使用页面底部的分页控件来浏览不同页的文章。

1. 使用搜索框：

   • 在页面顶部的搜索框中输入想要查找的文章标题。

2. 执行搜索：

   • 点击“搜索”按钮，系统会显示与搜索条件匹配的文章。

3. 重置搜索：

   • 如果需要清除搜索条件，可以点击“重置”按钮。

1. 点击文章标题：
   • 在文章列表中，点击你想要查看的文章标题，通常会跳转到文章的详细页面。

1. 点击“修改”按钮：

   • 在文章列表中，找到你想要修改的文章，点击该文章行的“修改”按钮。

2. 编辑文章：

   • 系统会跳转到文章编辑页面，你可以在这里修改文章的标题、内容等信息。

3. 保存修改：

   • 修改完成后，点击“确定”按钮保存修改。

1. 点击“删除”按钮：

   • 在文章列表中，找到你想要删除的文章，点击该文章行的“删除”按钮。

2. 确认删除：

   • 系统可能会弹出确认对话框，询问你是否确定要删除文章，点击“确定”以确认删除。

1. 访问文章类型管理：

   • 在左侧导航栏中，点击“文章类型”以管理文章的分类。

2. 添加或修改类型：

   • 在文章类型管理页面，你可以添加新的文章类型或修改现有的类型。

以下是对该页面的详细描述：

1. 标题:

• 用于输入文章的标题。 副标题：写副标题

2. 分类：

• 有一个下拉菜单，用于选择文章的分类。

3. 内容：

• 用于输入文章的正文内容。编辑框上方有一些文本格式化工具，如加粗、斜体、列表、链接等，便于用户编辑修改。

这个增加文章页面的设计让用户能够方便地创建和编辑文章，同时提供实时预览功能，以便用户在发布前检查文章的最终效果。

文章列表功能在后台管理系统中为用户提供了多项便利,直观的界面设计使得即使是非技术用户也能轻松上手，进行文章的增删改查操作。

1. 打开部门列表页面
   • 登录后台管理系统后，在左侧导航栏中点击 “系统管理” → “部门管理”。
   • 页面将显示所有已创建的部门信息，包括部门名称、状态、排序、创建时间等。

1. 点击新增
   • 点击部门列表左/右上角的 “新增” 按钮。
2. 填写部门信息
   • 上级部门：从下拉菜单中选择该部门的上级（如“总部”），系统要求此参数必填，若未选择，将提示 “parentId 不能为空” 。
   • 部门名称：输入部门名称（如“测试一部”），该字段为必填项，若为空，会提示 “部门名称不能为空” 。

• 部门顺序：可按需设置部门的显示顺序（若不设置，系统可能会有默认排序规则 ）。此参数也是必填的，若未填写，将提示 “显示顺序不能为空” 。
• 部门状态：选择“正常”或“停用”。

3. 保存设置
   • 点击 “确定” 完成添加；点击 “取消” 放弃操作。

1. 点击编辑按钮
   • 在部门列表中，找到目标部门，点击其操作栏中的 “编辑” 按钮。
2. 修改内容
   • 在弹出的编辑页面中调整部门名称、状态等信息。
3. 保存修改
   • 点击 “确定” 保存更改；点击 “取消” 退出编辑。

1. 点击删除按钮
   • 在部门列表中，找到目标部门，点击其操作栏中的 “删除” 按钮。
2. 确认操作
   • 系统将弹出确认对话框，点击 “确定” 完成删除；点击 “取消” 中止操作。

• 层级关系：添加部门时需正确选择上级部门，确保组织架构清晰。

• 状态管理：停用部门后，其下属部门及相关权限可能受影响，请谨慎操作。

  博客管理 > 文章类型 —— 梁文莉

关于博客管理 > 文章类型功能的介绍：

以下是如何使用文章类型页面的指南：

界面介绍：

• 文章类型页面：

  1. 左侧导航栏
     • 包含多个管理模块，如“首页”、“博客管理”、“文章列表”、“文章类型”、“友情链接”和“系统管理”。
     • 当前选中的是“文章类型”模块。
  2. 顶部导航栏
     • 包含搜索框、刷新按钮、用户信息等。
  3. 文章类型列表
     • 显示当前已有的文章类型。
     • 列表包含以下列：
       • 名称：文章类型的名称。
       • 键值：文章类型的键值。
       • 显示排序：文章类型的显示顺序。
       • 备注：对文章类型的备注信息。
       • 创建时间：文章类型创建的时间。
       • 操作：提供“修改”和“删除”按钮，用于编辑或删除文章类型。
  4. 分页控制
     • 显示当前页码和总条数，并提供翻页功能。

• 添加文章类型弹窗：

  1. 弹窗标题
     • 显示“添加文章类型”。
  2. 输入字段
     • 名称：输入文章类型的名称（必填）。
     • 键值：输入文章类型的键值（必填）。
     • 显示排序：设置文章类型的显示顺序（默认值为0）。
     • 备注：输入对文章类型的备注信息（选填）。
  3. 操作按钮
     • 确定：点击后保存新添加的文章类型。
     • 取消：点击后取消操作并关闭弹窗。

使用指南

• 查看文章类型
  1. 在左侧导航栏中点击“文章类型”进入文章类型页面。
  2. 在文章类型列表中查看已有的文章类型及其相关信息。
• 添加文章类型
  1. 在文章类型页面，点击“新增”按钮。
  2. 在弹出的“添加文章类型”弹窗中：
     • 输入文章类型的名称（必填）。
     • 输入文章类型的键值（必填）。
     • 设置显示排序（可选，默认值为0）。
     • 输入备注信息（可选）。
  3. 点击“确定”按钮保存新添加的文章类型，或点击“取消”按钮取消操作。
• 修改文章类型
  1. 在文章类型列表中找到需要修改的文章类型。
  2. 点击对应行的“修改”按钮。
  3. 在弹出的编辑窗口中进行修改。
  4. 点击“确定”按钮保存修改，或点击“取消”按钮取消操作。
• 删除文章类型
  1. 在文章类型列表中找到需要删除的文章类型。
  2. 点击对应行的“删除”按钮。
  3. 系统会弹出确认删除的提示框，确认后文章类型将被删除。

注意事项

• 确保输入的文章类型名称和键值唯一，避免重复。
• 修改和删除操作不可逆，请谨慎操作。
• 确保在操作前备份重要数据，以防误操作导致数据丢失。

在后台管理系统的首页右上角，点击头像旁边的下拉箭头，可以访问三个选项：个人中心、布局设置和退出登录。

• 个人信息管理：查看和编辑基本信息，如用户名、手机号码和邮箱。
• 账户安全：通过手机号码和邮箱进行安全验证，如找回密码或接收系统通知。
• 个性化服务：选择性别，用于个性化服务或统计分析。
• 权限管理：显示所属部门和角色，帮助系统管理员了解用户的组织归属，便于权限管理和工作协调。
• 账户历史：记录账户的创建时间，有助于追踪账户的历史和进行审计。

1. 个人信息概览：

   • 展示用户的头像、用户名、所属部门、所属角色以及创建日期等基本信息。

2. 用户名：

   • 显示为“admin”，标识用户在系统中的身份。

3. 手机号码和邮箱：

   • 输入框，用于填写或修改联系方式，用于账户安全验证和接收系统通知。

4. 性别：

   • 提供“男”和“女”选项，用于个性化服务或统计分析。

5. 所属部门和角色：

   • 显示用户所属的组织结构和权限级别，定义用户在系统中可以执行的操作。

6. 创建日期：

   • 记录账户的创建时间，有助于追踪账户的历史和进行审计。

7. 基本资料和修改密码选项卡：

   • 提供用户管理个人信息和账户安全的界面。

8. 保存和关闭按钮：

   • “保存”按钮用于保存用户对个人信息的修改，“关闭”按钮用于关闭个人中心页面。

布局设置功能位于右上角的系统布局配置区域，允许用户自定义和调整系统界面的布局，以满足个人的工作习惯和偏好。

1. 主题颜色：

   • 允许用户选择不同的主题颜色，以改变界面的整体视觉风格，提供更个性化的用户体验。

2. 开启 Tags-Views：

   • 控制是否在界面上显示标签视图，帮助用户快速切换不同的工作页面，提高工作效率。

3. 固定 Header：

   • 允许用户选择是否固定页面顶部的导航栏，便于在滚动页面时更容易访问导航选项。

4. 显示 Logo：

   • 控制是否在页面顶部显示系统Logo，增强品牌识别度，使界面更加美观。

1. 访问布局设置：

   • 在右上角找到系统布局配置区域，这里包含了所有布局设置的选项。

2. 调整设置：

   • 根据个人偏好，点击相应的开关或选择器进行设置。

3. 保存设置：

   • 完成设置后，通常系统会自动保存你的选择，或者可能需要点击一个“保存”按钮来应用更改。

4. 查看效果：

   • 设置完成后，界面会立即反映你的更改，你可以立即看到新的布局效果。

通过这些布局设置，用户可以根据自己的需求和偏好调整后台管理系统的界面，使其更加符合个人的工作习惯，从而提高工作效率和满意度。

• 打开用户中心页面，用户可以看见所有已添加的用户。

• 如果用户数量较多，可以使用页面底部的分页控件来浏览不同页的用户。

1. 使用搜索框： 在页面顶部的搜索框中输入想要查找的用户名。
2. 执行搜索： 点击“搜索”按钮，系统会显示与搜索条件匹配的用户。
3. 重置搜索： 如果需要清除搜索条件，可以点击“重置”按钮。

• 在用户列表中，点击用户名可以查看用户的详细信息。

1. 点击“修改”按钮： 在用户列表中，找到你想要修改的用户，点击该用户行的“修改”按钮。
2. 编辑用户信息： 系统会弹出修改用户窗口，你可以在这里修改用户的昵称、归属部门、用户性别、角色、手机号码、状态（正常或停用）、邮箱和备注。
3. 保存修改： 修改完成后，点击“确定”按钮保存修改。

1. 点击“删除”按钮： 在用户列表中，找到你想要删除的用户，点击该用户行的“删除”按钮。
2. 确认删除： 系统可能会弹出确认对话框，询问你是否确定要删除用户，点击“确定”以确认删除。

1. 点击“重置密码”按钮： 在用户列表中，找到你想要重置密码的用户，点击该用户行的“重置密码”按钮。
2. 输入新密码： 系统会弹出提示窗口，要求输入新密码。
3. 确认重置： 输入新密码并点击“确定”按钮。

1. 点击“新增”按钮： 在用户列表上方，点击“新增”按钮。
2. 填写用户信息： 系统会弹出添加用户窗口，输入昵称、归属部门、用户性别、角色、手机号码、状态（正常或停用）、邮箱和备注。
3. 保存新用户信息： 点击“确定”按钮保存新用户信息。

• 在用户列表中，找到需要切换状态的用户，点击状态开关。
• 状态开关可以在“正常”和“停用”之间切换。

用户中心功能在后台管理系统中的好处包括集中管理用户信息，提高系统的安全性和稳定性，同时也便于维护和扩展。这种设计方法强调用户的参与和反馈，确保产品能够满足用户的实际需求，提升用户体验。

1. 打开角色管理页面
   • 在登录后台管理系统后，点击左侧导航栏中的 “角色管理”。
   • 页面将显示已有已创建的角色及其详细信息，即角色编号、角色名称、权限字符、显示顺序、状态、创建人和创建时间。

1. 点击新增
   • 点击角色管理页面顶部的 “新增” 按钮。
2. 填写信息
   • 在弹出的添加角色窗口中，输入角色名称、权限字符、显示顺序，并选择状态和菜单权限。
3. 保存角色
   • 可在输入备注信息后点击 “确定保存新角色” 即可创建新角色。

1. 选定角色
   • 在角色列表中，找到需要编辑的角色，
2. 修改角色信息
   • 点击右侧的 “修改” 按钮，在弹出的编辑窗口中修改角色信息，
3. 保存更改
   • 点击 “确定” 即可保存修改新的角色信息。

1. 选择分配角色
   • 在角色列表中，找到需要分配数据权限的角色，点击其右侧的 “数据权限” 按钮。
2. 填写角色信息权限
   • 在弹出的窗口中，填写角色名称、权限字符，在权限范围框中有下拉列表可选择不同部门的数据权限。
3. 保存信息
   • 点击 “确定” 保存数据权限设置，即可以给不同角色分配不同的数据权限信息。

1. 选择删除角色
   • 在角色列表中，勾选需要删除的角色。点击页面顶部的 “删除” 按钮。
2. 确定删除操作
   • 在弹出的删除确认窗口中，点击 “确定” 执行删除操作，即可删除不需要的角色。

• 在搜索框中输入角色名称、状态或角色状态。点击 “搜索” 按钮，即可筛选出符合条件的角色。

角色管理功能使用户可以方便有效地管理系统中的角色及其权限，确保系统的安全性和灵活性。

这个页面是一个后台管理系统的菜单管理界面。以下是页面的详细介绍指南：

左侧有一个导航栏，包含“首页”和“菜单管理”两个选项卡，当前选中的是“菜单管理”。导航栏的图标和文字可以帮助用户快速找到所需的功能模块。

菜单名称：“首页”、“博客管理”、“系统管理”。

图标：菜单项的图标，帮助用户快速识别菜单项。

排序：菜单项的排序顺序，数值越小，菜单项的优先级越高。

权限标识：菜单项的权限标识，用于控制不同用户的访问权限。

组件名：菜单项对应的组件名称，如“家”、“布局”。

状态：显示菜单项的状态。

创建时间：显示菜单项的创建时间，格式为“YYYY-MM-DD HH:MM:SS”。

操作：提供对菜单项的操作选项，包括“修改”、“新增”和“删除”。

用户点击此按钮来添加新的菜单项。

1）菜单类型：目录、菜单、按钮。

点击选择目录和菜单后再点击输入框会下滑目录和菜单。

点击按钮则会弹出菜单名称：用于输入新菜单项的名称（必填项）。 显示排序：用于输入菜单项的显示顺序（必填项）。 权限标识：用于输入菜单项的权限标识。 菜单状态：用于选择菜单项的状态，正常或停用。 确定和取消按钮：点击“确定”按钮提交表单并保存新菜单项。点击“取消”按钮关闭对话框而不保存任何更改。

2）菜单图标：用户可以点击旁边图标选择器来选择菜单项的图标。点击后输入框中显示的是图标的标识符，可以选择你需要的图标（例如 # 表示不使用图标）。

3）菜单名称：输入新菜单项的名称（必填项）。

4）显示排序：用于输入菜单项的显示顺序（必填项）。

5）是否外链：用于选择菜单项是否为外链。

是（外链）：
当选择“是”时，表示该菜单项将链接到一个外部网站或外部资源。例如，你可以设置一个菜单项链接到一个在线文档、外部API接口或其他非本系统的网站。在这种情况下，通常需要在“路由地址”字段中输入完整的外部URL地址。

否（非外链）：
当选择“否”时，表示该菜单项将链接到系统内部的某个页面或组件。例如，你可以设置一个菜单项链接到系统内部的用户管理页面、订单管理页面等。在这种情况下，通常需要在“路由地址”字段中输入系统内部的路由路径，而不是完整的URL。

6）路由地址：用于输入菜单项对应的路由地址（如果“是否外链”选择“否”，则需要填写）。

7）组件名：用于输入菜单项对应的组件名称。

8）显示状态：通常用于控制菜单项在前端界面上的可见性。

正常：当显示状态设置为“正常”时，该菜单项会在前端界面上显示，用户可以看到并点击该菜单项。

停用：当显示状态设置为“停用”时，该菜单项不会在前端界面上显示，用户无法看到该菜单项。（适用于暂时不需要用户访问的菜单项，或者在某些条件下需要隐藏的菜单项。）

9）菜单状态：通常用于控制菜单项的启用状态。

正常：当菜单状态设置为“正常”时，该菜单项是启用的，用户可以点击并访问该菜单项所指向的页面或功能。

停用：当菜单状态设置为“停用”时，该菜单项是禁用的，用户无法点击并访问该菜单项所指向的页面或功能。

10）确定和取消按钮： 点击“确定”按钮提交表单并保存新菜单项。点击“取消”按钮关闭对话框而不保存任何更改。

修改：可以编辑菜单项的详细信息。

点击某个菜单项右侧的“修改”按钮会弹出一个“修改菜单”的对话框。用于编辑已存在的菜单项，各个选项功能的作用如（3. 新增按钮功能）的按钮功能作用一样。

新增：此按钮可以在当前菜单项下添加子菜单项。

删除：此按钮可以删除选中的该菜单项。

这个页面主要用于管理系统中的菜单项，管理员可以通过此界面添加、修改、删除菜单项，以及调整菜单项的排序和权限标识，从而实现对系统的灵活管理。

一.博客管理 > 友情链接

友情链接页面指南

• 我们想要搜索链接时，我们可以在名称的输入框输入名称，然后点击搜索按钮就会我们想要搜索的内容

• 点击后可以重置搜索条件。

• 点击新增按钮会出现一个页面框，我们可以在里面输入新的链接，里面有名称、链接和备注，其中名称和链接的输入不可以为空，当我们全部的输入好之后可以点击确定按钮，这样就可以见建成一个新的链接，我们点击取消按钮时，就会返回到原来的页面。

• 当我们选中链接时，修改按钮会点亮，我们点击它会出现一个页面框，这时我们就可以修改我们想要修改的内容，然后点击确定按钮就可以了。

• 当我们选中链接时，删除按钮会点亮，我们点击它会出现是否要删掉，点击确定按钮时就会帮我们删除掉刚才想要删除的链接。

在友情链接的页面我们可以看到名称、链接、备注的内容，创建的时间和操作（修改和删除）

二.系统管理 > 通知公告的解释

通知公告的页面指南

主操作区域：

• 可以输入公告标题进行搜索。

• 可以选择公告的类型进行筛选。

• 点击后可以根据输入的条件进行搜索。

• 点击后可以重置搜索条件。

• 显示公告的详细信息，包括：公告标题：显示公告的标题、 公告类型：显示公告的类型（如“公告”）、 状态：显示公告的状态（如“启用”）、创建者：显示创建公告的用户、创建时间：显示公告的创建时间、操作：提供对公告的操作选项，如“修改”和“删除”。

• 显示当前页码和总条数，并提供分页导航按钮。

• 点击新增按钮会出现一个页面框

​公告标题​：输入框，用于输入公告的标题。

​公告类型​：下拉菜单，用于选择公告的类型。​

状态​：单选按钮，用于选择公告的状态（启用或停用）。

​内容​：富文本编辑器，用于输入公告的详细内容。

​确定按钮​：点击后保存公告。

​取消按钮​：点击后取消添加公告操作。​

• 当我们选中公告时，删除按钮会点亮，我们点击它会出现是否要删掉，点击确定按钮时就会帮我们删除掉刚才想要删除的公告。

• 当我们选中公告时，修改按钮会点亮，我们点击它会出现一个页面框，这时我们就可以修改我们想要修改的内容，然后点击确定按钮就可以了。