前台菜单管理详解

1. 菜单管理概述

若依框架的菜单管理模块是系统管理员用来配置系统菜单、目录和按钮的工具。菜单管理模块不仅可以组织和管理系统的导航结构，还可以进行权限管理，确保不同角色的用户只能访问他们有权限查看的菜单项。菜单项的配置包括目录、菜单和按钮三种类型，每种类型有不同的配置需求。

菜单管理模块的作用：

• 配置路由：在菜单管理模块中，你可以为每个菜单项配置对应的路由地址和组件路径。这些配置告诉系统，当用户点击某个菜单项时，应该加载哪个组件。
• 权限管理：通过配置权限标识，可以控制哪些用户或角色有权限访问该菜单项。
• 前端显示：配置了菜单项后，这些菜单会显示在前端的侧边栏导航中，用户可以点击这些菜单项进行页面跳转。

页面组件的创建：

• 菜单管理模块 不会 自动生成页面组件。你仍然需要手动编写和创建这些组件。
• 具体来说，你需要在项目的 src/views/ 目录下创建相应的 Vue 组件文件，这些组件文件的路径需要与菜单管理中配置的 组件路径 对应。

自动配置路由：

• 当你在菜单管理模块中配置了路由地址和组件路径后，系统会根据这些配置 自动生成动态路由。这意味着你不需要手动去 src/router/index.js 或其他路由配置文件中添加这些路由。
• 但是，这仅限于路由的自动配置，你仍然需要确保对应的 Vue 组件存在，并且路径正确。

1.1 目录（一级菜单）

1.1.1 目录的作用

目录是系统菜单的一级分组，用于组织和分类其他菜单项（即二级菜单）或按钮。通常目录不会直接与某个前端页面绑定，而是作为导航的分组项。

1.1.2 配置目录的选项

在配置目录时，你需要填写以下内容：

• 菜单类型：选择“目录”。这是创建一级菜单的首要条件。
• 菜单图标：可以从框架中提供的图标库中选择一个合适的图标。这些图标将在菜单项的前面显示，帮助用户快速识别菜单内容。
• 显示排序：该选项决定了目录在菜单列表中的显示顺序，数值越小的排在越前面。
• 菜单名称：这是目录在前端页面中显示的名称。
• 是否外链：决定这个目录是否为外部链接。通常内部系统的目录不会选择外链，若依框架中仅“若依官网”配置为外链。
• 路由地址：设置点击目录时的 URL 地址。通常情况下，目录本身不设定具体的页面路径，而是为包含的子菜单或按钮提供导航。

注意事项

如果你的一级目录设置了路由地址，但是没有子菜单的情况下，点击会触发路径的效果，就会跳到404页面，所以你要么就不要创建空目录，要么创建目录一定要带子菜单。

1.1.3 配置目录的示例

以“系统管理”为例：

• 菜单类型：目录
• 菜单图标：选择一个表示系统管理的图标
• 显示排序：设置为 1，确保它在菜单列表中靠前显示
• 菜单名称：系统管理
• 是否外链：否
• 路由地址：/system

当你点击这个目录时，它不会直接加载页面，而是展开显示其下的子菜单项，如“岗位管理”和“部门管理”。

配图：

1.2 菜单（二级菜单）

1.2.1 菜单的作用

菜单是系统功能的具体实现页面。用户点击菜单项后，系统会加载对应的前端页面（Vue 组件）。菜单项通常嵌套在某个目录下，作为目录的子项。

1.2.2 配置菜单的选项

在配置菜单时，你需要填写以下内容：

• 菜单类型：选择“菜单”。这是创建二级菜单的必选条件。
• 上级菜单：选择该菜单的上级目录。例如，如果你正在配置“岗位管理”，上级菜单应选择“系统管理”。
• 组件路径：输入与该菜单关联的前端 Vue 组件路径。例如“system/post/index”表示将加载 src/views/system/post/index.vue 组件。
• 权限标识：这是用于权限管理的字符串。例如 system:post:list，它用于在权限控制中标识该菜单项是否可见。
• 菜单名称：这是菜单在前端页面中显示的名称。
• 显示排序：设置该菜单在同级菜单中的显示顺序。

1.2.3 配置菜单的示例

以“岗位管理”为例：

• 菜单类型：菜单
• 上级菜单：系统管理
• 组件路径：system/post/index
• 权限标识：system:post:list
• 菜单名称：岗位管理
• 显示排序：2

配置完成后，当用户点击“岗位管理”菜单项时，系统将加载 src/views/system/post/index.vue 页面，并展示岗位管理的功能界面。需要注意的是，用户必须具备 system:post:list 权限才能看到这个菜单项。

配图：

1.3 按钮（操作按钮）

1.3.1 按钮的作用

按钮用于配置页面中的操作功能，例如“新增”、“修改”、“删除”等。这些按钮通常不直接关联前端路由，而是与某些操作权限相关。

1.3.2 配置按钮的选项

在配置按钮时，你需要填写以下内容：

• 菜单类型：选择“按钮”。
• 上级菜单：选择该按钮所属的菜单。例如“岗位管理”下的“新增”按钮。
• 权限标识：按钮的权限控制字符串。例如 system:post:query，用于控制用户是否有权限使用该按钮。
• 菜单名称：这是按钮的显示名称。
• 显示排序：设置该按钮在同级按钮中的显示顺序。

1.3.3 配置按钮的示例

以“岗位查询”为例：

• 菜单类型：按钮
• 上级菜单：岗位管理
• 权限标识：system:post:query
• 菜单名称：查询

配置完成后，当用户访问“岗位管理”页面时，只有拥有 system:post:query 权限的用户才能看到并使用“查询”按钮。

配图：

2. 数据库表 sys_menu

2.1 sys_menu 表概述

若依框架使用 sys_menu 数据表来存储所有的菜单、目录和按钮信息。每个菜单项（无论是目录、菜单还是按钮）都是 sys_menu 表中的一条记录。

2.2 表字段说明

• menu_id：菜单ID，是表的主键，唯一标识每个菜单项。
• menu_name：菜单名称，即在前端显示的名称。
• parent_id：父菜单ID，用于标识该菜单项的上级目录。如果该值为0，则表示它是一级目录。
• order_num：显示排序，用于控制菜单项的显示顺序。
• path：路由地址，即菜单项对应的URL路径。
• component：组件路径，即前端 Vue 组件的路径。
• is_frame：是否为外链，0表示是外链，1表示否。
• is_cache：是否缓存该菜单页面，0表示缓存，1表示不缓存。
• menu_type：菜单类型，M表示目录，C表示菜单，F表示按钮。
• visible：菜单状态，0表示显示，1表示隐藏。
• status：菜单状态，0表示正常，1表示停用。
• perms：权限标识，用于权限控制。
• icon：菜单图标的样式。
• create_time：创建时间。
• update_time：更新时间。

2.3 数据库表示例

假设有如下数据表内容：

• 菜单名称：系统管理
• 父菜单ID：0 （因为它是一级目录）
• 显示排序：1
• 路由地址：/system
• 组件路径：空
• 权限标识：空（因为是目录）
• 菜单类型：M
• 图标：icon-example
• 状态：0

此条记录表示的是“系统管理”目录。

配图：

总结

若依框架的菜单管理模块通过 sys_menu 数据表统一管理系统的菜单结构。系统管理员可以通过菜单管理页面方便地创建、编辑和删除菜单项，包括目录、菜单和按钮。在配置菜单时，管理员需要提供菜单项的名称、路径、权限标识等信息，并在前端手动创建与之对应的 Vue 组件。这种机制极大地提高了系统的可配置性和扩展性，使得管理系统的菜单变得更加灵活和直观。