个人开发接口文档

Appearance

菜单管理 ​

概述 ​

菜单管理是系统中用于管理和维护前端导航菜单的核心模块。通过该模块，管理员可以添加、编辑、删除和排序菜单项，并且可以配置菜单的可见性和权限控制。菜单管理模块确保了系统的导航结构清晰、易于扩展，并且能够根据用户角色动态展示不同的菜单内容。

主要功能 ​

1. 菜单列表查看 ​

  • 功能描述：管理员可以查看所有已配置的菜单项及其详细信息。

  • 字段说明：

    • 菜单ID：唯一标识符。
    • 菜单名称：菜单项的显示名称。
    • 路由路径：菜单项对应的路由地址。
    • 父级菜单ID：关联上级菜单项（0表示顶级菜单）。
    • 图标：菜单项的图标样式。
    • 排序序号：菜单项在同级中的显示顺序。
    • 状态：菜单项的状态（启用/禁用）。
    • 创建时间：菜单项的创建时间。
    • 更新时间：菜单项的最后更新时间。

  • 操作按钮：

    • 编辑：进入编辑模式，修改菜单项信息。
    • 删除：删除选中的菜单项。
    • 排序：调整菜单项的显示顺序。

2. 添加菜单项 ​

  • 功能描述：管理员可以新增一个菜单项。

  • 字段说明：

    • 菜单名称：必填，菜单项的显示名称。
    • 路由路径：必填，菜单项对应的路由地址。
    • 父级菜单：选择上级菜单项（可选，默认为顶级菜单）。
    • 图标：选择或上传菜单项的图标（可选）。
    • 排序序号：设置菜单项在同级中的显示顺序（可选，默认为最大值加1）。
    • 状态：选择菜单项的状态（启用/禁用）。

  • 操作按钮：

    • 保存：保存新增的菜单项。
    • 取消：放弃新增并返回菜单列表。

3. 编辑菜单项 ​

  • 功能描述：管理员可以编辑现有菜单项的信息。

  • 字段说明：

    • 菜单名称：可修改，菜单项的显示名称。
    • 路由路径：可修改，菜单项对应的路由地址。
    • 父级菜单：可修改，选择上级菜单项。
    • 图标：可修改，选择或上传菜单项的图标。
    • 排序序号：可修改，设置菜单项在同级中的显示顺序。
    • 状态：可修改，选择菜单项的状态（启用/禁用）。

  • 操作按钮：

    • 保存：保存修改后的菜单项信息。
    • 取消：放弃修改并返回菜单列表。

4. 删除菜单项 ​

  • 功能描述：管理员可以删除指定的菜单项。
  • 确认提示：删除前会弹出确认对话框，提醒管理员是否继续删除。
  • 级联删除：如果删除的是父级菜单项，可以选择是否同时删除其所有子菜单项。

5. 排序菜单项 ​

  • 功能描述：管理员可以通过拖拽或手动输入序号来调整菜单项的显示顺序。
  • 操作方式：
    • 拖拽排序：通过鼠标拖拽菜单项进行排序。
    • 手动输入：直接在排序序号字段中输入新的序号。

6. 权限配置 ​

  • 功能描述：管理员可以为每个菜单项配置访问权限，确保只有授权用户才能访问。

  • 字段说明：

    • 角色列表：选择允许访问该菜单项的角色。
    • 权限类型：选择具体的权限类型（如只读、编辑等）。

  • 操作按钮：

    • 保存：保存权限配置。
    • 取消：放弃修改并返回菜单列表。

技术实现 ​

数据库设计 ​

  • 菜单表 (menus)：

    • id：主键，自增。
    • name：菜单名称。
    • path：路由路径。
    • parent_id：外键，关联上级菜单项（0表示顶级菜单）。
    • icon：图标样式。
    • order_num：排序序号。
    • status：菜单状态（0: 禁用, 1: 启用）。
    • created_at：创建时间。
    • updated_at：更新时间。

  • 菜单权限表 (menu_permissions)：

    • menu_id：外键，关联菜单表。
    • role_id：外键，关联角色表。
    • permission_type：权限类型（如只读、编辑等）。

前端实现 ​

技术栈 ​

  • 框架：Vue.js 3.x
  • UI库：Naive UI
  • 状态管理：Pinia
  • 路由管理：Vue Router
  • API请求：Axios

页面结构 ​

  1. 菜单列表页

    • 组件：MenuList.vue
    • 功能：
      • 使用 Naive UI 的 n-data-table 组件展示菜单列表。
      • 支持分页、排序和筛选功能。
      • 提供搜索栏，使用 n-input 和 n-button 组件实现模糊查询。
      • 提供批量操作按钮（如批量删除）。
      • 提供操作列，包含编辑、删除、排序等功能按钮。

  2. 添加菜单项页

    • 组件：AddMenu.vue
    • 功能：
      • 使用 Naive UI 的 n-form 和 n-form-item 组件构建菜单项添加表单。
      • 表单字段包括菜单名称、路由路径、父级菜单、图标、排序序号、状态。
      • 提交表单时，调用后端 API 新增菜单项。

  3. 编辑菜单项页

    • 组件：EditMenu.vue
    • 功能：
      • 使用 Naive UI 的 n-form 和 n-form-item 组件构建菜单项编辑表单。
      • 表单字段包括菜单名称、路由路径、父级菜单、图标、排序序号、状态。
      • 提交表单时，调用后端 API 更新菜单项信息。

  4. 排序菜单项页

    • 组件：SortMenu.vue
    • 功能：
      • 使用 Naive UI 的 n-draggable 组件实现拖拽排序。
      • 提供手动输入排序序号的功能。
      • 提交排序结果时，调用后端 API 更新菜单项的排序序号。

  5. 权限配置页

    • 组件：MenuPermissions.vue
    • 功能：
      • 使用 Naive UI 的 n-select 组件选择允许访问该菜单项的角色。
      • 使用 n-radio-group 组件选择具体的权限类型。
      • 提交权限配置时，调用后端 API 更新菜单项的权限信息。

接口列表 ​

1. 获取菜单列表 ​

  • URL：/api/menus
  • 方法：GET

请求参数 ​

参数名类型是否必填默认值描述
pageint否1当前页码
pageSizeint否10每页显示条数
searchstring否搜索关键字（菜单名称、路由路径等）

成功响应 ​

json
{
  "total": 100,
  "data": [
    {
      "id": 1,
      "name": "首页",
      "path": "/home",
      "parentId": 0,
      "icon": "home-icon",
      "orderNum": 1,
      "status": 1,
      "createdAt": "2023-09-01T08:00:00Z",
      "updatedAt": "2023-09-01T08:00:00Z"
    },
    ...
  ]
}

2. 添加菜单项 ​

  • URL：/api/menus
  • 方法：POST
  • 请求头:
    • Content-Type: application/json

请求体 ​

json
{
  "name": "新菜单",
  "path": "/new-menu",
  "parentId": 0,
  "icon": "new-icon",
  "orderNum": 1,
  "status": 1
}

成功响应 ​

json
{
  "id": 101,
  "name": "新菜单",
  "path": "/new-menu",
  "parentId": 0,
  "icon": "new-icon",
  "orderNum": 1,
  "status": 1,
  "createdAt": "2023-09-01T08:00:00Z",
  "updatedAt": "2023-09-01T08:00:00Z"
}

3. 编辑菜单项 ​

  • URL：/api/menus/{id}
  • 方法：PUT
  • 路径参数：
    • id：菜单项ID
  • 请求头:
    • Content-Type: application/json

请求体 ​

json
{
  "name": "更新后的菜单",
  "path": "/updated-menu",
  "parentId": 0,
  "icon": "updated-icon",
  "orderNum": 1,
  "status": 1
}

成功响应 ​

json
{
  "id": 101,
  "name": "更新后的菜单",
  "path": "/updated-menu",
  "parentId": 0,
  "icon": "updated-icon",
  "orderNum": 1,
  "status": 1,
  "updatedAt": "2023-09-01T08:00:00Z"
}

4. 删除菜单项 ​

  • URL：/api/menus/{id}
  • 方法：DELETE
  • 路径参数：
    • id：菜单项ID

成功响应 ​

json
{
  "message": "删除成功"
}

5. 排序菜单项 ​

  • URL：/api/menus/sort
  • 方法：POST
  • 请求头:
    • Content-Type: application/json

请求体 ​

json
{
  "menuIds": [1, 2, 3, 4]
}

成功响应 ​

json
{
  "message": "排序成功"
}

6. 配置菜单权限 ​

  • URL：/api/menus/{id}/permissions
  • 方法：POST
  • 路径参数：
    • id：菜单项ID
  • 请求头:
    • Content-Type: application/json

请求体 ​

json
{
  "roleId": 1,
  "permissionType": "edit"
}

成功响应 ​

json
{
  "message": "权限配置成功"
}

附录 ​

接口规范 ​

  • HTTP状态码：

    • 200 OK：请求成功。
    • 201 Created：资源创建成功。
    • 204 No Content：请求成功但无返回内容。
    • 400 Bad Request：客户端请求有误。
    • 404 Not Found：请求的资源不存在。
    • 409 Conflict：请求冲突，例如资源已存在。

  • 错误响应格式：

    json
    {
  "error": "Error message",
  "details": ["Detail 1", "Detail 2"]
}

  • 时间格式：

    • 使用 ISO 8601 标准格式，例如 2023-01-01T00:00:00Z。

总结 ​

菜单管理模块是系统中不可或缺的一部分，它不仅提供了对导航菜单的全面管理，还确保了系统的灵活性和可维护性。通过合理的权限配置和菜单项的增删改查功能，管理员可以有效地管理和调整菜单结构，保障系统的稳定运行和用户体验。如果有其他问题或需要进一步的帮助，请随时联系技术支持团队。

滇ICP备2024047254号-1
滇公网安备53011102001490