外观
逛一逛后台
字数
2031 字
预计阅读
8 分钟
项目跑起来了，先别急着写代码。花半个小时把后台逛一遍，弄清楚每个菜单是干什么的。后面写代码时，你会知道自己在改的是哪一部分。
界面布局
text
┌──────────┬───────────────────────────────────────────────┐
│ Logo │ 面包屑 🔍 搜索 ⛶ 全屏 🔔 文A 语言 ⚙ 设置 头像 │ ← 顶栏
│ ├───────────────────────────────────────────────┤
│ 侧边栏 │ 首页 × │ 岗位管理 × │ 用户管理 × │ ← 标签页
│ 菜单 ├───────────────────────────────────────────────┤
│ │ │
│ │ 页面内容 │
│ │ │
└──────────┴───────────────────────────────────────────────┘先试试这些：
- 点顶栏的"语言"按钮，切换成英文。整个界面，包括菜单、按钮、表格表头、错误提示，都会变成英文。再切回中文；
- 点顶栏右侧的齿轮图标（页面设置），试试把布局换成"顶部菜单"，打开"暗色模式"；
- 打开几个菜单，看看顶部的标签页。在标签上点右键，可以关闭其他标签；
- 点头像 → 个人中心，可以修改昵称、头像和密码。
菜单都是干什么的
系统管理：管理"人"和"权限"
| 菜单 | 作用 |
|---|---|
| 用户管理 | 系统里的账号：新建、停用、重置密码、分配角色 |
| 角色管理 | 一组权限的集合，比如"财务"、"客服"。给用户分配角色，用户就拥有了这些权限 |
| 菜单管理 | 侧边栏的菜单，以及每个页面里的按钮权限 |
| 部门管理 | 公司的组织架构（树形结构） |
| 岗位管理 | 职位，比如"开发工程师"、"产品经理" |
| 字典管理 | 下拉框里的选项，比如"性别：男、女" |
| 参数设置 | 可以在后台修改的配置，比如"登录失败几次后锁定" |
| 地区管理 | 省市区数据 |
它们之间的关系是这样的：
text
用户 ──属于──▶ 部门
│
└──拥有──▶ 角色 ──包含──▶ 菜单和按钮权限
└──设置──▶ 数据范围（能看到哪些部门的数据）系统监控：看系统运行得怎么样
| 菜单 | 作用 |
|---|---|
| 在线用户 | 现在谁在线，可以把某人"踢下线" |
| 定时任务 | 按时间自动执行的任务，比如每天凌晨清理日志 |
| 调度日志 | 定时任务每次执行的记录 |
| 服务监控 | 服务器的 CPU、内存、磁盘 |
| 缓存监控、缓存列表 | Redis 的运行情况和里面的数据 |
| 数据监控 | MySQL 的运行情况 |
消息中心、文件管理、日志管理
这三组菜单都在 系统管理 下面。
- 消息中心：通知公告、站内信、邮件、短信，以及它们的模板和发送记录；
- 文件管理：所有上传过的文件，以及文件存储的配置（存在本地还是云存储）；
- 日志管理：谁在什么时候做了什么（操作日志），谁在什么时候登录过（登录日志），以及接口的访问记录和错误记录。
每个菜单的详细用法见功能总览。
系统工具：给开发者用的
| 菜单 | 作用 |
|---|---|
| 代码生成 | 根据数据库的表，自动生成前后端代码。后面做第一个模块时会用到 |
| 表单构建 | 拖拽设计表单，可以导出 JSON 或 Vue 页面代码（这里不保存；审批用的表单在"流程管理 → 表单管理"里保存） |
| 系统接口 | 所有后端接口的文档，可以直接在页面上调用 |
| 生成示例 | 用代码生成器生成的示例：图书（单表）、知识主题（树表）、发票（主子表），以及实时推送示例 |
流程审批：发起和处理审批
| 菜单 | 作用 |
|---|---|
| 发起申请 | 选一个审批，填写申请单并提交 |
| 我的待办、我的已办 | 等你处理的审批，和你处理过的审批 |
| 我的发起、抄送我的 | 你提交的申请，和抄送给你的申请 |
| 请假申请 | 请假示例：用写代码的方式把业务页面接入审批流程 |
| 流程管理 | 管理员用：新建审批（向导）、模型管理、表单管理、实例管理、任务管理、审批数据 |
试试 流程管理 → 新建审批 → 从模板创建 → 请假，不写一行代码就能做出一个请假审批。详见工作流。
动手：体验一下权限
这是后台最核心的功能，一定要亲手试一试。我们来创建一个只能查看岗位、不能修改的用户。
1. 新建一个部门
系统管理 → 部门管理，点"新增"：
- 上级部门：选择最顶层的那个部门；
- 部门名称：
实习生组； - 其他保持默认，点"保存"。
2. 新建一个角色
系统管理 → 角色管理，点"新增"：
- 角色名称：
实习生； - 角色编码：
intern； - 保存。
然后在这个角色那一行，点 更多 → 菜单权限，在权限树中：
- 展开"系统管理 → 岗位管理"；
- 只勾选"浏览"，不要勾"新增"、"修改"、"删除"；
- 保存。
3. 新建一个用户
系统管理 → 用户管理，点"新增"：
- 用户名：
xiaoming； - 昵称：
小明； - 部门：
实习生组； - 角色：
实习生； - 密码：自己设一个，比如
Intern@2026（不填的话使用系统参数里的初始密码）； - 保存。
4. 用新用户登录
打开一个浏览器的无痕窗口（Chrome：⌘ + Shift + N 或者 Ctrl + Shift + N），访问 http://localhost:5173，用 xiaoming 登录（第一次登录同样需要改密码）。
你会发现：
- 侧边栏只有"岗位管理"，其他菜单都看不到；
- 岗位管理页面里，没有"新增"、"编辑"、"删除"按钮。
5. 实时修改权限
回到 admin 的窗口，在角色的 更多 → 菜单权限 里，给"实习生"再勾选上岗位管理的"新增"，保存。
然后回到小明的窗口，刷新一下页面："新增"按钮出现了。小明不需要重新登录。
6. 把他踢下线
在 admin 的窗口里打开 系统监控 → 在线用户，找到 xiaoming，点"强退"。
看看小明的窗口：他马上就被退出到登录页了。这是通过 WebSocket 实时推送实现的。
7. 看看留下了什么记录
打开 系统管理 → 日志管理 → 操作日志：刚才新建部门、角色、用户、授权、强退，每一步都被记录了下来，包括谁做的、什么时候做的、提交了什么参数。
再看看 系统管理 → 日志管理 → 登录日志，里面有 xiaoming 的登录和被强退的记录。
小结
刚才你体验了一个后台管理系统最核心的几件事：
- 用户、部门、角色、权限是怎么关联起来的；
- 权限不仅控制菜单，还控制每一个按钮；
- 所有的操作都会留下记录。
这些功能都是项目已经做好的，你以后写的每一个新功能，也会自动拥有权限控制和操作日志。
下一步：第一次改代码。