// 权限枚举示例 const PermissionEnum = { MANAGE_USER: 'user:manage', // 管理用户 MANAGE_POST: 'post:manage', // 管理帖子 MANAGE_BOARD: 'board:manage', // 管理板块 VIEW_ADMIN_PANEL: 'admin:view', // 查看后台面板 // ... 更多权限 };
// Sequelize ORM 模型定义示例 const Board = sequelize.define('Board', { name: { type: DataTypes.STRING, allowNull: false }, description: { type: DataTypes.TEXT }, parentId: { type: DataTypes.INTEGER, defaultValue: 0 }, sortOrder: { type: DataTypes.INTEGER, defaultValue: 0 }, status: { type: DataTypes.TINYINT, defaultValue: 0 } });
后端准备好了数据和规则，现在轮到我把它们变成用户看得见、摸得着的界面。我的工作就是搭建一座桥，让管理员的每一次点击，都能准确触发后端的逻辑，并把结果清晰地展示回来。这不仅仅是调用API，更是关于如何让复杂的权限和树状板块结构，在浏览器里变得直观和易于操作。
基于权限动态渲染管理菜单与操作按钮
用户登录后，我会立刻向服务器请求他的权限列表。这个列表不是一个简单的“是管理员”或“不是”，而是一组像 ['board:manage', 'user:view'] 这样的具体权限编码。拿到这个列表后，整个管理后台的界面就不再是固定的了。
左侧的导航菜单由我来动态生成。我会有一个完整的菜单配置数组，里面定义了所有可能的管理项目，比如“板块管理”、“用户列表”、“系统设置”。每一项都关联着所需的权限码。在渲染之前，我会逐项检查：当前用户的权限列表里，包含这项所需的权限吗？如果包含，我就把这项菜单渲染出来；如果不包含，我就直接跳过它，用户根本不会看到这个菜单项的存在。同样的逻辑用在每一个页面内的操作按钮上。在板块管理页面，只有拥有 board:delete 权限的用户，才会看到“删除”按钮。对于没有权限的用户，按钮根本不会出现在DOM中，而不是简单地显示为灰色不可点击。这样做更安全，也从源头避免了误操作的可能。我的代码让界面成为了权限的视觉映射，不同身份的人看到的是完全不同的工作台。
板块树的动态展示、编辑与拖拽排序前端实现
从后端拿到那棵板块树的数据后，我的任务是用前端技术把它生动地展现出来。我选择使用一个递归组件来渲染这棵树。这个组件会接收一个板块节点作为参数，先渲染出这个节点的名称和状态标签，然后检查它是否有 children 数组。如果有，我就再次调用这个组件本身，去渲染它的子节点。这样，无论板块有多少层，都能自动地以缩进折叠的形式展示出来，就像我们在文件资源管理器里看到的那样。
管理员需要编辑板块名称或描述时，我实现了一个“双击编辑”或“点击编辑图标”的功能。点击后，当前的静态文本会瞬间切换成一个输入框，管理员修改后，按下回车，我立刻将新数据通过更新API发送到后端，并在收到成功响应后，无缝地更新本地显示的文本。最有趣的部分是拖拽排序。我会引入一个拖拽库，让每个板块节点都可以被拖拽。当管理员将一个“Python”板块拖到“编程语言”板块上方时，我需要精确地计算出这次拖拽意味着什么：是改变了同级顺序，还是改变了父级归属？拖拽结束时，我会收集所有变动的信息，组装成一个新的顺序数组，调用后端专门编写的排序接口。同时，为了提供即时反馈，在API调用成功前，我会先乐观地更新前端的树形视图，让它立刻响应拖拽结果。如果后端调用失败，我再悄悄回滚。整个过程需要流畅自然，让管理员感觉像是在直接操纵数据本身。
帖子发布与移动时的板块选择器组件开发
无论是用户发布新帖子，还是管理员批量移动旧帖子，都需要一个地方来选择目标板块。这个板块选择器组件会被复用在多个地方。它本质上是一个增强版的下拉选择框，但里面装的不是简单列表，而是一棵缩略的板块树。
我首先会调用那个公开的 GET /api/boards 接口，获取状态正常的板块树。然后，我把它渲染成一个可折叠、可搜索的选择界面。用户点击选择器，弹出一个层，里面是清晰的树状结构。他可以逐级展开“编程语言”找到“Python”。我还会在顶部增加一个搜索框，用户输入“Py”，我能快速过滤出所有名称包含“Py”的板块，并高亮显示路径。当用户选中某个板块后，选择器会收起，并显示选中板块的完整路径，比如“首页 > 编程语言 > Python”。在帖子移动的场景，这个组件会更加重要。管理员可能在帖子列表页勾选多个帖子，然后点击“移动”按钮，这时我会弹出一个模态框，里面就嵌入这个板块选择器。管理员选好新家，点击确认，我的代码就收集好帖子ID数组和目标板块ID，发送给移动API。这个小小的选择器，连接了海量帖子和清晰的板块分类，是维持论坛内容井然有序的关键入口。通过它，复杂的树形数据变得平易近人，用户的操作成本被降到了最低。