基于路由懒加载的菜单管理方法及装置与流程

1.本发明涉及计算机技术领域，尤其涉及一种基于路由懒加载的菜单管理方法及装置。


背景技术：

2.随着我国工业化和信息化的深度融合，国内的信息系统项目正在逐渐向大型化、复杂化的方向发展，复杂系统管理需求缺口巨大。
3.目前，在应用开发过程中，大多数平台中菜单路由的把控都是基于服务端接口调用，通过菜单管理对菜单进行修改。
4.然而在现有菜单开发过程中，由于开发进度不同，前端菜单开发往往需要等待服务端开发菜单管理以及用户权限后才能继续进行开发，不利于前端菜单开发，导致前端开发效率低下；另外，在开发过程中可能存在需要将菜单及路由文件存储在前置本地配置文件中的特殊需求，管理方式笨拙，维护繁琐，不易满足菜单快速开发的需求。


技术实现要素：

5.本发明提供一种基于路由懒加载的菜单管理方法及装置，用以解决现有技术中菜单管理方式笨拙以致维护繁琐、不易满足需求的缺陷，实现。
6.本发明提供一种基于路由懒加载的菜单管理方法，包括：基于用户权限，从服务端获取菜单数据对象；基于路由懒加载将所述菜单数据对象映射至路由实例对应的预先创建的组件对象，并根据所述菜单数据对象对应的层级关系，对所述菜单数据对象进行渲染，生成菜单。
7.根据本发明提供的一种基于路由懒加载的菜单管理方法，所述根据所述菜单数据对象对应的层级关系，对所述菜单数据对象进行渲染，生成菜单，包括：遍历所述菜单数据对象；根据预先创建菜单配置的层级关系，判断当前层级对应的菜单数据对象是否可见且无子菜单；若是，则渲染所述菜单数据对象对应的菜单项，生成菜单，且所述菜单无下拉菜单；否则，渲染所述当前层级的菜单数据对象对应的子菜单，生成下拉菜单，并将当前层级切换至下一子层级，返回判断所述当前层级对应的菜单数据对象是否可见且无子菜单，直至所述当前层级对应的菜单数据对象可见且无子菜单，生成菜单。
8.根据本发明提供的一种基于路由懒加载的菜单管理方法，所述将当前层级切换至下一子层级，包括：依据预先创建菜单配置的导航菜单及属性使用路由管理器进行菜单跳转。
9.根据本发明提供的一种基于路由懒加载的菜单管理方法，所述依据预先创建菜单配置的导航菜单及属性使用路由管理器进行菜单跳转，包括：在启用所述路由管理器时，在激活导航时，以所述菜单的默认主页作为路由地址进行路由跳转；依据不生效处理激活所述菜单的默认主页。
10.根据本发明提供的一种基于路由懒加载的菜单管理方法，在所述生成菜单之后，
还包括：遍历所述菜单，得到当前生成菜单；判断所述当前生成菜单是否可见，并基于所述当前生成菜单可见，选择当前路径；判断所述当前生成菜单的菜单标题与所述当前路径的路由标题是否相同，若相同，则选中当前生成菜单；否则，返回判断下一层级对应的子菜单是否可见，直至下一层级对应的子菜单可见，选择当前路径，并基于所述当前生成菜单的菜单标题与所述当前路径的路由标题相同，选中对应子菜单。
11.根据本发明提供的一种基于路由懒加载的菜单管理方法，所述基于用户权限，从服务端获取菜单数据对象，包括：基于用户权限，向所述服务端发送超文本传输协议请求，并接收所述服务端基于所述超文本传输协议请求返回的菜单数据对象；其中，所述菜单数据对象为所述服务端基于所述超文本传输协议请求选择菜单数据，并进行格式转换、过滤得到的。
12.本发明还提供一种基于路由懒加载的菜单管理装置，包括：数据获取模块，基于用户权限，从服务端获取菜单数据对象；菜单生成模块，基于路由懒加载将所述菜单数据对象映射至路由实例对应的预先创建的组件对象，并根据所述菜单数据对象对应的层级关系，对所述菜单数据对象进行渲染，生成菜单。
13.本发明还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如上述任一种所述基于路由懒加载的菜单管理方法的步骤。
14.本发明还提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如上述任一种所述基于路由懒加载的菜单管理方法的步骤。
15.本发明还提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现如上述任一种所述基于路由懒加载的菜单管理方法的步骤。
16.本发明提供的基于路由懒加载的菜单管理方法及装置，基于路由懒加载，在用户登录后，基于用户权限获取对应的菜单数据对象，以便于按照规则映射成路由及渲染生成菜单，简洁直观、易于操作，进而便于维护用户体验，实现对各权限、多层级、非可见菜单的渲染，提高渲染精度。
附图说明
17.为了更清楚地说明本发明或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
18.图1是本发明提供的基于路由懒加载的菜单管理方法的流程示意图；
19.图2是本发明提供的菜单配置的示意图；
20.图3是本发明提供的生成菜单的流程示意图；
21.图4是本发明提供的菜单选中的流程示意图；
22.图5是本发明提供的基于路由懒加载的菜单管理装置的结构示意图；
23.图6是本发明提供的电子设备的结构示意图。
具体实施方式
24.为使本发明的目的、技术方案和优点更加清楚，下面将结合本发明中的附图，对本发明中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
25.图1示出了本发明一种基于路由懒加载的菜单管理方法的流程示意图，该方法执行主体为前端，即网页端或界面交互端，方法包括：
26.s01，基于用户权限，从服务端获取菜单数据对象；
27.s02，基于路由懒加载将菜单数据对象映射至路由实例对应的预先创建的组件对象，并根据菜单数据对象对应的层级关系，对菜单数据对象进行渲染，生成菜单。
28.需要说明的是，本说明书中的s0n不代表基于路由懒加载的菜单管理方法的先后顺序，下面具体结合图2-图4描述本发明的基于路由懒加载的菜单管理方法。
29.步骤s01，基于用户权限，从服务端获取菜单数据对象。
30.在本实施例中，基于用户权限，从服务端获取菜单数据对象，包括：基于用户权限，通过axios获取菜单数据对象，具体而言：基于用户权限，向服务端发送超文本传输协议请求，并接收服务端基于超文本传输协议请求返回的菜单数据对象；其中，菜单数据对象为服务端基于超文本传输协议请求选择菜单数据，并进行格式转换、过滤得到的。
31.需要说明的是，菜单数据对象包括菜单标题(name)、菜单图标(icon)、菜单可见(hidden)、组件名(comonentname)、路由地址(path)、组件路径(component)和目录级别(level)中的至少一项。
32.在一个可选实施例中，参考图2，在基于用户权限，从服务端获取菜单数据对象之前，还包括：创建菜单。具体包括：创建菜单对应的组件对象。本实施例中，组件对象包括菜单标题(name)、菜单图标(icon)、菜单可见(hidden)、组件名(comonentname)、路由地址(path)、组件路径(component)和目录级别(level)中的至少一项。需要说明的是，创建组件对象与从服务端获取的菜单数据对象一一对应。另外，通过在页面进行菜单图形化配置，简洁直观，且易于维护。
33.步骤s02，基于路由懒加载将菜单数据对象映射至路由实例对应的预先创建的组件对象，并根据菜单数据对象对应的层级关系，对菜单数据对象进行渲染，生成菜单。
34.需要说明的是，路由懒加载即为路由按需加载，使用路由懒加载，在路由配置中按需引入，通过在组件对象(components)中写入相应函数，以便于在调用相应函数时，在对应的组件对象中加载对应的菜单数据对象，从而便于在用户登录系统后，在用户权限下按需引入菜单数据对象。
35.在本实施例中，参考图3，根据菜单数据对象对应的层级关系，对菜单数据对象进行渲染，生成菜单，包括：遍历菜单数据对象；根据预先创建菜单配置的层级关系，判断当前层级对应的菜单数据对象是否可见且无子菜单；若是，则渲染菜单数据对象对应的菜单项，生成菜单，且菜单无下拉菜单；否则，渲染当前层级的菜单数据对象对应的子菜单，生成下拉菜单，并将当前层级切换至下一子层级，返回判断当前层级对应的菜单数据对象是否可见且无子菜单，直至当前层级对应的菜单数据对象可见且无子菜单，生成菜单。
36.应当补充的是，将当前层级切换至下一子层级，包括：依据预先创建菜单配置的导
航菜单及属性(el-menu)使用路由管理器(vue-router)进行菜单跳转。更进一步地说，依据预先创建菜单配置的导航菜单及属性使用路由管理器进行菜单跳转，包括：在启用路由管理器时，在激活导航时，以菜单的默认主页作为路由地址进行路由跳转；依据不生效处理(default-active)激活菜单的默认主页(index)。
37.在一个可选实施例中，参考图4，在生成菜单之后，还包括：选中当前生成菜单的子菜单。具体包括：遍历菜单，得到当前生成菜单；判断当前生成菜单是否可见，并基于当前生成菜单可见，选择当前路径；判断当前生成菜单的菜单标题与当前路径的路由标题是否相同，若相同，则选中当前生成菜单；否则，返回判断下一层级对应的子菜单是否可见，直至下一层级对应的子菜单可见，选择当前路径，并基于当前生成菜单的菜单标题与当前路径的路由标题相同，选中对应子菜单。
38.综上所述，本发明实施例基于路由懒加载，在用户登录后，基于用户权限获取对应的菜单数据对象，以便于按照规则映射成路由及渲染生成菜单，简洁直观、易于操作，进而便于维护用户体验，实现对各权限、多层级、非可见菜单的渲染，提高渲染精度。
39.下面对本发明提供的基于路由懒加载的菜单管理装置进行描述，下文描述的基于路由懒加载的菜单管理装置与上文描述的基于路由懒加载的菜单管理方法可相互对应参照。
40.图5示出了一种基于路由懒加载的菜单管理装置的结构示意图，该装置，包括：
41.数据获取模块51，基于用户权限，从服务端获取菜单数据对象；
42.菜单生成模块52，基于路由懒加载将所述菜单数据对象映射至路由实例对应的预先创建的组件对象，并根据所述菜单数据对象对应的层级关系，对所述菜单数据对象进行渲染，生成菜单。
43.在本实施例中，数据获取模块51，包括：数据获取单元，基于用户权限，通过axios获取菜单数据对象。具体而言，数据获取单元，包括：请求发送子单元，基于用户权限，向服务端发送超文本传输协议请求；数据接收子单元，接收服务端基于超文本传输协议请求返回的菜单数据对象；菜单数据对象为服务端基于超文本传输协议请求选择菜单数据，并进行格式转换、过滤得到的。需要说明的是，菜单数据对象包括菜单标题(name)、菜单图标(icon)、菜单可见(hidden)、组件名(comonentname)、路由地址(path)、组件路径(component)和目录级别(level)中的至少一项。
44.在一个可选实施例中，该装置，还包括：菜单创建模块，创建菜单对应的组件对象。本实施例中，组件对象包括菜单标题(name)、菜单图标(icon)、菜单可见(hidden)、组件名(comonentname)、路由地址(path)、组件路径(component)和目录级别(level)中的至少一项。需要说明的是，创建组件对象与从服务端获取的菜单数据对象一一对应。另外，通过在页面进行菜单图形化配置，简洁直观，且易于维护。
45.菜单生成模块52，包括：映射单元，基于路由懒加载将菜单数据对象映射至路由实例对应的预先创建的组件对象；菜单生成单元，根据菜单数据对象对应的层级关系，对菜单数据对象进行渲染，生成菜单。
46.需要说明的是，路由懒加载即为路由按需加载，使用路由懒加载，在路由配置中按需引入，通过在组件对象(components)中写入相应函数，以便于在调用相应函数时，在对应的组件对象中加载对应的菜单数据对象，从而便于在用户登录系统后，在用户权限下按需
引入菜单数据对象。
47.具体而言，菜单生成单元，包括：遍历子单元，遍历菜单数据对象；菜单渲染子单元，根据预先创建菜单配置的层级关系，判断当前层级对应的菜单数据对象是否可见且无子菜单；若是，渲染菜单数据对象对应的菜单项，生成菜单，且菜单无下拉菜单；否则，渲染当前层级的菜单数据对象对应的子菜单，生成下拉菜单，并将当前层级切换至下一子层级，返回判断当前层级对应的菜单数据对象是否可见且无子菜单，直至当前层级对应的菜单数据对象可见且无子菜单，生成菜单。
48.应当补充的是，菜单渲染子单元，包括：跳转孙单元，依据预先创建菜单配置的导航菜单及属性(el-menu)使用路由管理器(vue-router)进行菜单跳转，以便于将当前层级切换至下一子层级。更进一步地说，跳转孙单元，包括：跳转曾孙单元，在启用路由管理器时，在激活导航时，以菜单的默认主页作为路由地址进行路由跳转；不生效处理曾孙单元，依据不生效处理(default-active)激活菜单的默认主页(index)。
49.在一个可选实施例中，该装置还包括菜单选中模块，选中当前生成菜单的子菜单。在本实施例中，菜单选中模块，包括：遍历单元，遍历菜单，得到当前生成菜单；菜单选中单元，判断当前生成菜单是否可见，并基于当前生成菜单可见，选择当前路径；判断当前生成菜单的菜单标题与当前路径的路由标题是否相同，若相同，则选中当前生成菜单；否则，返回判断下一层级对应的子菜单是否可见，直至下一层级对应的子菜单可见，选择当前路径，并基于当前生成菜单的菜单标题与当前路径的路由标题相同，选中对应子菜单。
50.综上所述，本发明实施例通过数据获取模块，在用户登录后，基于用户权限获取对应的菜单数据对象，并通过菜单生成模块基于路由懒加载按照规则映射成路由及渲染生成菜单，简洁直观、易于操作，进而便于维护用户体验，实现对各权限、多层级、非可见菜单的渲染，提高渲染精度。
51.图6示例了一种电子设备的实体结构示意图，如图6所示，该电子设备可以包括：处理器(processor)61、通信接口(communications interface)62、存储器(memory)63和通信总线64，其中，处理器61，通信接口62，存储器63通过通信总线64完成相互间的通信。处理器61可以调用存储器63中的逻辑指令，以执行基于路由懒加载的菜单管理方法，该方法包括：基于用户权限，从服务端获取菜单数据对象；基于路由懒加载将所述菜单数据对象映射至路由实例对应的预先创建的组件对象，并根据所述菜单数据对象对应的层级关系，对所述菜单数据对象进行渲染，生成菜单。
52.此外，上述的存储器63中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(rom，read-only memory)、随机存取存储器(ram，random access memory)、磁碟或者光盘等各种可以存储程序代码的介质。
53.另一方面，本发明还提供一种计算机程序产品，所述计算机程序产品包括计算机程序，计算机程序可存储在非暂态计算机可读存储介质上，所述计算机程序被处理器执行
时，计算机能够执行上述各方法所提供的基于路由懒加载的菜单管理方法，该方法包括：基于用户权限，从服务端获取菜单数据对象；基于路由懒加载将所述菜单数据对象映射至路由实例对应的预先创建的组件对象，并根据所述菜单数据对象对应的层级关系，对所述菜单数据对象进行渲染，生成菜单。
54.又一方面，本发明还提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现以执行上述各方法提供的基于路由懒加载的菜单管理方法，该方法包括：基于用户权限，从服务端获取菜单数据对象；基于路由懒加载将所述菜单数据对象映射至路由实例对应的预先创建的组件对象，并根据所述菜单数据对象对应的层级关系，对所述菜单数据对象进行渲染，生成菜单。
55.以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。
56.通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如rom/ram、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。
57.最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。