针对动态菜单结构的路由注册方法、装置和计算机设备制造方法及图纸

技术编号:25478664 阅读:65 留言:0更新日期:2020-09-01 23:00
本发明专利技术公开了一种针对动态菜单结构的路由注册方法、装置和计算机设备。其中,针对动态菜单结构的路由注册方法包括:获取前端页面的菜单列表;筛选出与菜单列表相关的JS对象;获取菜单列表的结构信息;根据结构信息和JS对象确定与菜单列表对应的路由信息,并将路由信息注册为VUE路由。本发明专利技术实施例的针对动态菜单结构的路由注册方法、装置和计算机设备,通过将注册成Vue路由之前的复杂JS对象拆分保存,再根据菜单列表的结构信息进行筛选拼接,实现了基于一套代码即可对用户角色菜单权限的控制和对菜单结构变化后的自动响应,大大降低开发和维护成本。

【技术实现步骤摘要】
针对动态菜单结构的路由注册方法、装置和计算机设备
本专利技术涉及页面开发
,尤其涉及一种针对动态菜单结构的路由注册方法、装置和计算机设备。
技术介绍
在一些web应用(可以通过Web访问的应用程序)中,通常会给用户分配不同的角色身份,不同角色拥有不同的菜单权限,即不同角色能看到并使用的菜单是不同的。使用Vue框架开发时,会通过导航菜单改变浏览器地址,Vue路由会根据开发者配置的路由关系使浏览器渲染出对应当前浏览器地址的Vue组件,来实现页面跳转。因为不同菜单有不同的层级结构,便需要不同的JS对象结构来注册Vue路由。现有技术中,会将这些JS对象储存在后端数据库,再由前端向后端发网络请求获取JS对象,并将获取到的JS对象注册成Vue路由。但是,在开发过程中或上线后的版本迭代中,如果发生了用户菜单权限增减、层级调整等情况时,后端数据库中的JS对象并不能响应上述变化,需要开发者额外进行人工维护,开发和维护成本高。
技术实现思路
本专利技术的目的旨在至少在一定程度上解决上述的技术问题之一。为此,本专利技术的第一个目的在于提出一种针对动态菜单结构的路由注册方法,能够降低开发和维护成本。本专利技术的第二个目的在于提出一种针对动态菜单结构的路由注册装置。本专利技术的第三个目的在于提出一种计算机设备。本专利技术的第四个目的在于提出一种非临时性计算机可读存储介质。为了实现上述目的,本专利技术第一方面实施例提出一种针对动态菜单结构的路由注册方法,该方法包括:获取前端页面的菜单列表;筛选出与所述菜单列表相关的JS对象;获取所述菜单列表的结构信息;根据所述结构信息和所述JS对象确定与所述菜单列表对应的路由信息,并将所述路由信息注册为VUE路由。可选的,每个JS对象包含一对浏览器路径与Vue组件的对应关系,所述JS对象保存在前端。可选的,根据所述结构信息和所述JS对象确定与所述菜单列表对应的路由信息,包括:根据所述结构信息对获取的所述JS对象进行拼接操作,并生成与所述菜单列表对应的路由信息。可选的,在获取前端页面的菜单列表之前,还包括:获取角色信息,根据所述角色信息确定所述菜单列表。可选的,在将所述路由信息注册为VUE路由之后,还包括:根据所述VUE路由渲染所述前端页面。可选的,当所述菜单列表发生变化时,还包括:更新所述菜单列表的结构信息。本专利技术实施例的针对动态菜单结构的路由注册方法,通过将注册成Vue路由之前的复杂JS对象拆分保存,再根据菜单列表的结构信息进行筛选拼接,实现了基于一套代码即可对用户角色菜单权限的控制和对菜单结构变化后的自动响应,大大降低开发和维护成本。为了实现上述目的,本专利技术第二方面实施例提出了一种针对动态菜单结构的路由注册装置,包括:第一获取模块,用于获取前端页面的菜单列表;筛选模块,用于筛选出与所述菜单列表相关的JS对象;第二获取模块,用于获取所述菜单列表的结构信息;注册模块,用于根据所述结构信息和所述JS对象确定与所述菜单列表对应的路由信息,并将所述路由信息注册为VUE路由。可选的,每个JS对象包含一对浏览器路径与Vue组件的对应关系,所述JS对象保存在前端。可选的,所述注册模块,具体用于:根据所述结构信息对获取的所述JS对象进行拼接操作,并生成与所述菜单列表对应的路由信息。可选的,装置还包括:确定模块,用于在获取前端页面的菜单列表之前,获取角色信息,根据所述角色信息确定所述菜单列表。可选的,装置还包括:渲染模块,用于在将所述路由信息注册为VUE路由之后,根据所述VUE路由渲染所述前端页面。可选的,装置还包括:更新模块,用于当所述菜单列表发生变化时,更新所述菜单列表的结构信息。本专利技术实施例的针对动态菜单结构的路由注册装置,通过将注册成Vue路由之前的复杂JS对象拆分保存,再根据菜单列表的结构信息进行筛选拼接,实现了基于一套代码即可对用户角色菜单权限的控制和对菜单结构变化后的自动响应,大大降低开发和维护成本。为了实现上述目的,本专利技术第三方面实施例提出了一种计算机设备,包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序,所述处理器执行所述计算机程序时,实现如第一方面实施例所述的针对动态菜单结构的路由注册方法。为了实现上述目的,本专利技术第四方面实施例还提出了一种非临时性计算机可读存储介质,其上存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现如第一方面实施例所述的针对动态菜单结构的路由注册方法。本专利技术附加的方面和优点将在下面的描述中部分给出,部分将从下面的描述中变得明显,或通过本专利技术的实践了解到。附图说明构成本专利技术的一部分的说明书附图用来提供对本专利技术的进一步理解,本专利技术的示意性实施例及其说明用于解释本专利技术,并不构成对本专利技术的不当限定。在附图中:图1是本专利技术一实施例的针对动态菜单结构的路由注册方法的流程图;图2是菜单列表效果示意图;图3是注册VUE路由的代码示意图;图4是本专利技术另一实施例的针对动态菜单结构的路由注册方法的流程图;图5是切换项目效果示意图;图6是本专利技术又一实施例的针对动态菜单结构的路由注册方法的流程图;图7是本专利技术再一实施例的针对动态菜单结构的路由注册方法的流程图;图8是本专利技术一实施例的针对动态菜单结构的路由注册装置的结构示意图;图9是本专利技术另一实施例的针对动态菜单结构的路由注册装置的结构示意图;图10是本专利技术又一实施例的针对动态菜单结构的路由注册装置的结构示意图;图11是本专利技术再一实施例的针对动态菜单结构的路由注册装置的结构示意图。具体实施方式需要说明的是,在不冲突的情况下,本专利技术中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本专利技术。以下结合具体实施例对本专利技术作进一步详细描述,这些实施例不能理解为限制本专利技术所要求保护的范围。下面参考附图描述本专利技术实施例的针对动态菜单结构的路由注册方法、装置和计算机设备。图1是本专利技术一实施例的针对动态菜单结构的路由注册方法的流程图,如图1所示,该方法包括以下步骤:S1,获取前端页面的菜单列表。其中,菜单列表为菜单选项的集合,如图2所示,资产管理、计算和云主机三个菜单选项组合成了一个菜单列表。S2,筛选出与菜单列表相关的JS对象。其中,JS对象是一种基本数据类型,每个JS对象包含一对浏览器路径与Vue组件的对应关系,JS对象保存在前端。而Vue组件是Vue项目的重要部分,用户在浏览器中可见的内容都写在Vue组件中,一个Vue项目可由多个Vue组件构成。上例中,资产管理、计算和云主机分别对应一个JS对象。S3,获取菜单列表的结构信息。菜单列表是具有结构的,如资产管理为一级菜单选项,其包本文档来自技高网...

【技术保护点】
1.一种针对动态菜单结构的路由注册方法,其特征在于,包括:/n获取前端页面的菜单列表;/n筛选出与所述菜单列表相关的JS对象;/n获取所述菜单列表的结构信息;/n根据所述结构信息和所述JS对象确定与所述菜单列表对应的路由信息,并将所述路由信息注册为VUE路由。/n

【技术特征摘要】
1.一种针对动态菜单结构的路由注册方法,其特征在于,包括:
获取前端页面的菜单列表;
筛选出与所述菜单列表相关的JS对象;
获取所述菜单列表的结构信息;
根据所述结构信息和所述JS对象确定与所述菜单列表对应的路由信息,并将所述路由信息注册为VUE路由。


2.如权利要求1所述的方法,其特征在于,每个JS对象包含一对浏览器路径与Vue组件的对应关系,所述JS对象保存在前端。


3.如权利要求2所述的方法,其特征在于,根据所述结构信息和所述JS对象确定与所述菜单列表对应的路由信息,包括:
根据所述结构信息对获取的所述JS对象进行拼接操作,并生成与所述菜单列表对应的路由信息。


4.如权利要求1所述的方法,其特征在于,在获取前端页面的菜单列表之前,还包括:
获取角色信息,根据所述角色信息确定所述菜单列表。


5.如权利要求1所述的方法,其特征在于,在将所述路由信息注册为VUE路由之后,还包括:
根据所述VUE路由渲染所述前端页面。


6.如权利要求1所述的方法,其特征在于,当所述菜单列表发生变化时,还包括:
更新所述菜单列表的结构信息。


7.一种针对动态菜单结构的路由注册装置,其特征在于,包括:
第一获取模块,用于获取前端页面的菜单列表;
筛选模块,用于筛选出与所述菜单列表相关的JS对象;
第二获取模块,用于获取所述菜单列表的结构信息;

【专利技术属性】
技术研发人员:石伟张大朋何牧君孙洪涛窦焕娟潘飞马光
申请(专利权)人:曙光信息产业北京有限公司
类型:发明
国别省市:北京;11

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1