CN106598591B - 一种网页动态菜单生成方法及装置 - Google Patents

一种网页动态菜单生成方法及装置 Download PDF

Info

Publication number
CN106598591B
CN106598591B CN201611139723.5A CN201611139723A CN106598591B CN 106598591 B CN106598591 B CN 106598591B CN 201611139723 A CN201611139723 A CN 201611139723A CN 106598591 B CN106598591 B CN 106598591B
Authority
CN
China
Prior art keywords
menu
data
tree model
dynamic
tree
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201611139723.5A
Other languages
English (en)
Other versions
CN106598591A (zh
Inventor
罗星星
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shenzhen Ikinoop Technology Co ltd
Original Assignee
Shenzhen Ikinoop Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shenzhen Ikinoop Technology Co ltd filed Critical Shenzhen Ikinoop Technology Co ltd
Priority to CN201611139723.5A priority Critical patent/CN106598591B/zh
Publication of CN106598591A publication Critical patent/CN106598591A/zh
Application granted granted Critical
Publication of CN106598591B publication Critical patent/CN106598591B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Human Computer Interaction (AREA)
  • Information Transfer Between Computers (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明实施例公开了一种网页动态菜单生成方法及装置。所述方法包括:根据预设的菜单数据生成菜单树模型;将所述菜单树模型中的菜单项加载到路由服务中;根据所述菜单树模型中的菜单项以及所述路由服务生成网页动态菜单。通过本发明的技术方案,能够减少路由文件的配置,简化动态菜单的后期开发和维护操作,提高开发效率。

Description

一种网页动态菜单生成方法及装置
技术领域
本发明实施例涉及网页前端技术,尤其涉及一种网页动态菜单生成方法及装置。
背景技术
在Web前端系统的开发中,开发者们总需要将变化的数据实时反应到用户界面上,这时就需要对DOM(Document Object Model,文档对象模型)进行操作,而复杂或频繁的DOM操作通常是性能瓶颈产生的原因,ReactJS作为当前最流行的前端框架之一,其改变了传统意义上直接操作DOM的方式,引入了虚拟DOM的机制,当数据发生变化时,React会重新构建DOM,并与上一个DOM比对出差异部分,通过render方式刷新到页面,提高了软件性能。
动态菜单是前端开发中必不可少的一部分,目前基于React技术的网页动态菜单生成方法是,直接在路由中对每个菜单相应的路由服务进行配置,再通过URL(UniformResource Locator,统一资源定位符)匹配路由,最后由相应的Menu菜单组件对页面进行处理,从而实现动态菜单在网页中的展示。
现有的技术方案中,随着菜单项目的增加,将使得在开发过程中会重复编写例如网页标签等内容,从而使路由配置文件变得越来越臃肿,同时也不便于对动态菜单进行后期的开发和维护操作。
发明内容
本发明实施例提供一种网页动态菜单生成方法及装置,以实现减少路由文件的配置,简化动态菜单的后期开发和维护操作,提高开发效率。
第一方面,本发明实施例提供了一种网页动态菜单生成方法,该方法包括:
根据预设的菜单数据生成菜单树模型;
将所述菜单树模型中的菜单项加载到路由服务中;
根据所述菜单树模型中的菜单项以及所述路由服务生成网页动态菜单。
进一步的,所述根据预设的菜单数据生成菜单树模型,包括:
从目标数据库中获取预设的菜单数据,其中,所述菜单数据包括数据类型以及与数据类型对应的数据值;
根据预设的树形结构中包括的待填充数据值的数据类型,将所述预设的菜单数据封装在所述树形结构中,生成菜单树模型。
进一步的,所述菜单数据的数据类型包括:
菜单标识码、菜单名称、父节点、是否子节点以及统一资源定位符URL路径。
进一步的,所述将所述菜单树模型中的菜单项加载到路由服务中,包括:
读取所述菜单树模型中的一个根菜单的根菜单URL路径;
将所述根菜单URL路径加载至路由服务中;
获取所述菜单树模型中位于所述根菜单下的全部子菜单的URL路径,并将所述全部子菜单的URL路径加载至路由服务中;
返回执行读取所述菜单树模型中的一个根菜单的根菜单URL路径的操作,直至完成对所述菜单树模型中的全部菜单项的处理。
进一步的,其特征在于,所述根据所述菜单树模型中的菜单项以及所述路由服务生成网页动态菜单,包括:
将所述菜单树模型中的菜单项添加到菜单显示组件中;
将所述菜单显示组件中的菜单项与所述路由服务加载的与菜单项对应的URL路径进行关联,以生成所述网页动态菜单。
进一步的,其特征在于,所述菜单数据的数据类型还包括:处理页面展示的组件;
所述方法还包括:在所述目标数据库中,将根菜单下的最底层子菜单的处理页面展示的组件的数据值设置为树组件。
进一步的,其特征在于,所述根据所述菜单树模型中的菜单项以及所述路由服务生成网页动态菜单,包括:
接收用户的网页动态菜单的生成请求;
如果所述网页动态菜单的生成请求满足预设的权限控制条件,则在显示所述网页动态菜单的同时,显示与所述菜单树模型对应的树组件;
根据用户对所述树组件中的菜单数据进行的增加操作、修改操作以及删除操作,对所述目标数据库中的菜单数据进行相应的数据更新。
第二方面,本发明实施例还提供了一种网页动态菜单生成装置,该装置包括:
菜单树生成模块,用于根据预设的菜单数据生成菜单树模型;
路由服务加载模块,用于将所述菜单树模型中的菜单项加载到路由服务中;
动态菜单生成模块,用于根据所述菜单树模型中的菜单项以及所述路由服务生成网页动态菜单。
进一步的,所述菜单树生成模块包括:
菜单数据获取子模块,用于从目标数据库中获取预设的菜单数据,其中,所述菜单数据包括数据类型以及与数据类型对应的数据值;
菜单数据封装子模块,用于根据预设的树形结构中包括的待填充数据值的数据类型,将所述预设的菜单数据封装在所述树形结构中,生成菜单树模型。
进一步的,所述菜单数据的数据类型包括:
菜单标识码、菜单名称、父节点、是否子节点以及统一资源定位符URL路径。
进一步的,所述路由服务加载模块具体用于:
读取所述菜单树模型中的一个根菜单的根菜单URL路径;
将所述根菜单URL路径加载至路由服务中;
获取所述菜单树模型中位于所述根菜单下的全部子菜单的URL路径,并将所述全部子菜单的URL路径加载至路由服务中;
返回执行读取所述菜单树模型中的一个根菜单的根菜单URL路径的操作,直至完成对所述菜单树模型中的全部菜单项的处理。
进一步的,所述动态菜单生成模块具体用于:
将所述菜单树模型中的菜单项添加到菜单显示组件中;
将所述菜单显示组件中的菜单项与所述路由服务加载的与菜单项对应的URL路径进行关联,以生成所述网页动态菜单。
进一步的,所述菜单数据的数据类型还包括:处理页面展示的组件;
所述装置还包括:树组件设置模块,用于在所述目标数据库中,将根菜单下的最底层子菜单的处理页面展示的组件的数据值设置为树组件。
进一步的,所述动态菜单生成模块具体用于:
接收用户的网页动态菜单的生成请求;
如果所述网页动态菜单的生成请求满足预设的权限控制条件,则在显示所述网页动态菜单的同时,显示与所述菜单树模型对应的树组件;
根据用户对所述树组件中的菜单数据进行的增加操作、修改操作以及删除操作,对所述目标数据库中的菜单数据进行相应的数据更新。
本发明实施例通过将预设的菜单数据生成菜单树模型,再将菜单树模型中的菜单项加载到路由服务中,最后根据菜单树模型中的菜单项以及相应的路由服务生成网页动态菜单,解决了现有技术中因重复编写程序代码而导致路由配置文件过于臃肿,也不便于对动态菜单进行后期的开发和维护操作的问题,实现了减少路由文件的配置,简化动态菜单的后期开发和维护操作,提高开发效率的效果。
附图说明
图1是本发明实施例一提供的一种网页动态菜单生成方法的流程示意图;
图2是本发明实施例二提供的一种网页动态菜单生成方法的流程示意图;
图3是本发明实施例三提供的一种网页动态菜单生成方法的流程示意图;
图4是本发明实施例四提供的一种网页动态菜单生成方法的流程示意图;
图5是本发明实施例五提供的一种网页动态菜单生成方法的流程示意图;
图6是本发明实施例六提供的一种网页动态菜单生成装置的结构示意图。
具体实施方式
下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是,此处所描述的具体实施例仅仅用于解释本发明,而非对本发明的限定。另外还需要说明的是,为了便于描述,附图中仅示出了与本发明相关的部分而非全部结构。
实施例一
图1为本发明实施例一提供的一种网页动态菜单生成方法的流程示意图。该方法可适用于生成网页动态菜单的情况,该方法可以由网页动态菜单生成装置来执行,该装置可由硬件和/或软件组成,且一般可集成在电脑以及所有包含web前端系统开发功能的智能终端中。具体包括如下:
S110、根据预设的菜单数据生成菜单树模型。
其中,预设的菜单数据可以是存储在数据库中与菜单项的信息相对应的数据,例如菜单项为“系统配置”,则预设的菜单数据可以是存储在数据库中的与“系统配置”相关的信息所对应的数据。
具体的,树模型为预先编写好的数据读取程序,用于读取数据库中存储的菜单数据,并通过程序代码以树结构的形式将菜单数据对应的菜单项之间的关系体现出来。例如,若数据库中存储了两组菜单数据,分别对应于“系统菜单”和“系统配置”两个菜单项,则树模型可通过Java后台接口获取“系统菜单”和“系统配置”相应的菜单数据,并根据这两组菜单数据生成以“系统配置”为根菜单的菜单树模型,而在该菜单树模型中“系统菜单”则通过调用子菜单函数设置为“系统配置”下的子菜单。生成菜单树模型的好处在于,可以在后续加载路由服务以及生成网页动态菜单时同时加载和生成多个菜单项,从而简化动态菜单的开发过程,提高开发效率。
S120、将菜单树模型中的菜单项加载到路由服务中。
具体的,可以使用层层递归循环的方式将菜单树模型中的菜单项加载到路由服务中,优选的,该路由服务为React Router中的服务,将菜单树模型中的菜单项加载到路由服务后,React前端页面才可以通过配置的URL访问菜单树模型中的菜单项。例如,若菜单树模型中包含“系统配置”和“系统菜单”这两个菜单项,则需要在React Router中加载这两个菜单项分别对应的URL,添加路由服务成功后,才能访问相应的系统配置页面和系统菜单页面。
其中,通过对菜单树模型的循环加载可以简化繁琐的加载每个菜单项所对应的URL路径的过程,从而减少路由文件的配置,简化动态菜单的后期开发和维护操作,提高开发效率的效果。
S130、根据菜单树模型中的菜单项以及路由服务生成网页动态菜单。
具体的,当与菜单项对应的路由服务加载成功后,即可通过菜单组件将菜单树模型中的菜单项在网页上显示出来,并可通过点击菜单项的方式对菜单项对应的网页进行访问。优选的,菜单组件为React的Menu组件,示例性的,前端页面需要将菜单项展示成正常的网页动态菜单,则需要借助React的Menu组件来实现,由于菜单项是动态可变化的,所以同样需要采用循环的方式将菜单树模型中所有的菜单项生成对应的MenuItem信息。例如,菜单树模型中存在“系统配置”和“系统菜单”两个菜单项,路由服务中加载了“系统配置”和“系统菜单”这两个菜单项的URL路径,通过将菜单树模型所包含的“系统配置”和“系统菜单”通过一段加载程序循环加载至React的Menu组件中,即可生成以“系统配置”和“系统菜单”为菜单项的网页动态菜单。
本实施例的技术方案,通过将预设的菜单数据生成菜单树模型,再将菜单树模型中的菜单项加载到路由服务中,最后根据菜单树模型中的菜单项以及相应的路由服务生成网页动态菜单,利用菜单树模型能够同时加载多个菜单项的优点,解决了现有技术中因重复编写程序代码而导致路由配置文件过于臃肿,也不便于对动态菜单进行后期的开发和维护操作的问题,实现了减少路由文件的配置,简化动态菜单的后期开发和维护操作,提高开发效率的效果。
实施例二
图2为本发明实施例二提供的一种网页动态菜单生成方法的流程示意图。本实施例以上述实施例为基础进行优化,提供了优选的网页动态菜单生成方法,具体是,将根据预设的菜单数据生成菜单树模型进一步优化为,包括:从目标数据库中获取预设的菜单数据,其中,菜单数据包括数据类型以及与数据类型对应的数据值;根据预设的树形结构中包括的待填充数据值的数据类型,将预设的菜单数据封装在树形结构中,生成菜单树模型。
S210、从目标数据库中获取预设的菜单数据,其中,菜单数据包括数据类型以及与数据类型对应的数据值。
具体的,在第一次生成网页动态菜单时,需要生成动态菜单的菜单项所对应的菜单数据可以通过事先录入的方式预设在目标数据库中,例如可以将预设的菜单数据通过手动录入的方式存储在目标数据库的特定数据表中,也可以将预设的菜单数据通过目标数据库对应的数据管理系统录入并存储在目标数据库的特定数据表中,该目标数据库的特定数据表可专门用于存储预设的菜单数据,也可以用于存储其他特定组件的菜单数据。
具体的,可通过调用目标数据库的接口,通过传参的方式获取目标数据库中预设的菜单数据。其中,菜单数据包括数据类型以及与数据类型对应的数据值,数据类型以及与数据类型对应的数据值对应地存储在目标数据库中。
优选的,菜单数据的数据类型包括:菜单标识码、菜单名称、父节点、是否子节点以及统一资源定位符URL路径。其中,菜单标识码为数据库自动生成的与菜单项对应的标识码,菜单名称为与菜单项对应的用于显示的名称,父节点表示此菜单数据对应的菜单项的上一级菜单所对应的菜单标识码,是否子节点表示此菜单数据对应的菜单项是否为最下级菜单,URL路径表示与该菜单项对应的网页的URL。优选的,菜单数据的数据类型还可以包括处理页面展示的组件,用于将菜单树模型通过组件的形式展示在页面上。
示例性的,菜单数据的数据类型在目标数据库中优选分别表示为id、name、parentId、isLeaf、url以及component这六个字段。其中,id为菜单标识码;name为菜单名称;parentId为父节点的id;isLeaf表示此菜单数据对应的菜单项是否是子节点,即是否为最下级菜单;url为菜单项所对应的URL路径;component为处理页面展示的组件。示例性的,若该菜单数据对应的菜单项是一级菜单且还存在下一级菜单,则parentId设置为root,isLeaf设置为false;若该菜单数据对应的菜单项是二级菜单且还存在下一级菜单,则parentId设置为一级菜单项所对应的id,isLeaf设置为false;若该菜单数据对应的菜单项是三级菜单且还存在下一级菜单,则parentId设置为二级菜单项所对应的id,isLeaf设置为false,以此类推;若该菜单数据对应的菜单项是最下级的菜单,则parentId设置为上一级菜单项所对应的id,isLeaf设置为true。
S220、根据预设的树形结构中包括的待填充数据值的数据类型,将预设的菜单数据封装在树形结构中,生成菜单树模型。
具体的,树形结构由一系列赋值代码组成,用于实现将菜单数据以树形结构的方式展示出来,根据预设的菜单数据可以获取菜单项之间的层级关系,将存储在目标数据库中表示菜单项层级关系的字符串转化为实际的表示菜单项之间关系的代码,例如通过父节点以及是否子节点的取值,就可以确定该菜单项在树形结构中的位置。其中,预设的树形结构中包括的待填充数据值的数据类型为目标数据库中存储的预设菜单数据的数据类型。示例性的,“系统配置”是根菜单,“系统配置”的子菜单为“系统菜单”,对于包含“系统配置”以及“系统菜单”两个菜单项的菜单树模型,可通过如下代码实现将菜单数据封装在树形结构中,生成菜单树模型:
Figure BDA0001177596530000101
Figure BDA0001177596530000111
将预设的菜单数据封装在树形结构中的好处在于,为后续将菜单项加载到路由服务中提供方便,先将所有菜单项整合在一起,通过一段配置程序就可以对树形结构中的所有菜单项进行路由服务加载,从而免去了冗长的重复性配置操作,减少了路由文件的配置,提高了开发效率。
S230、将菜单树模型中的菜单项加载到路由服务中。
S240、根据菜单树模型中的菜单项以及路由服务生成网页动态菜单。
本实施例的技术方案,通过将从目标数据库中获取的菜单数据封装在树形结构中生成菜单树模型,再将菜单树模型中的菜单项加载到路由服务中,最后根据菜单树模型中的菜单项以及相应的路由服务生成网页动态菜单,实现了减少路由文件的配置,简化动态菜单的后期开发和维护操作,提高开发效率的效果。
实施例三
图3为本发明实施例三提供的一种网页动态菜单生成方法的流程示意图。本实施例以上述各实施例为基础进行优化,提供了优选的网页动态菜单生成方法,具体是,将菜单树模型中的菜单项加载到路由服务中进一步优化为,包括:读取菜单树模型中的一个根菜单的根菜单URL路径;根据根菜单URL路径对根菜单进行加载;获取菜单树模型中位于根菜单下的全部子菜单的URL路径,并根据子菜单的URL路径对全部子菜单进行加载;返回执行读取菜单树模型中的一个根菜单的根菜单URL路径的操作,直至完成对菜单树模型中的全部根菜单的处理。
S310、根据预设的菜单数据生成菜单树模型。
S320、读取菜单树模型中的一个根菜单的根菜单URL路径。
具体的,可通过将菜单树模型用数组的方式读取该菜单树模型中一个根菜单的根菜单URL路径,优选的,该数组可设置为menuDatas[],然后调用React中的map函数对这个数组遍历地读取每个菜单项所对应的URL路径,遍历顺序为首先读取数组中的第一组菜单,其中,第一组菜单中则是先读取根菜单所对应的根菜单URL路径,即读取menuDatas[0]中根菜单所对应的根菜单URL路径。
S330、将根菜单URL路径加载至路由服务中。
具体的,通过路径加载的方式将读取的根菜单URL路径对应地加载至路由服务中,其中,路径加载的方式可以是将根菜单URL路径值赋给路由中的路径参数,从而自动加载至路由服务。
S340、获取菜单树模型中位于根菜单下的全部子菜单的URL路径,并将全部子菜单的URL路径加载至路由服务中。
具体的,与读取菜单树模型中的根菜单URL路径相同的方式,读取菜单树模型中位于根菜单下的全部子菜单的URL路径,同样的,采用给路由中的路径参数赋值的方式将全部子菜单的URL路径加载至路由服务中。
S350、是否完成对菜单树模型中的全部菜单项的处理,若是,则执行S360;若否,则返回执行S320。
具体的,若菜单树模型中还存在其他的根菜单,即若菜单树模型至少包括两个菜单组,则继续执行S320读取下一个菜单组中的根菜单所对应的根菜单URL路径。
示例性的,通过如下代码就可实现将菜单树模型中的所有菜单加载至ReactRouter中,将菜单数据转化为其中的Router服务:
Figure BDA0001177596530000131
Figure BDA0001177596530000141
通过这种循环加载的方式,可以减少路由文件的配置,并且,只要修改树模型就可以实现相应地对路由服务中加载的URL的修改,简化了动态菜单的后期开发和维护操作,提高了开发效率。
S360、根据菜单树模型中的菜单项以及路由服务生成网页动态菜单。
本实施例的技术方案,通过将菜单树模型中的所有菜单对应的所有URL路径循环加载至路由服务中,然后根据菜单树模型中的菜单项以及相应的路由服务生成网页动态菜单,从而实现了减少路由文件的配置,简化动态菜单的后期开发和维护操作,提高开发效率的效果。
实施例四
图4为本发明实施例四提供的一种网页动态菜单生成方法的流程示意图。本实施例以上述各实施例为基础进行优化,提供了优选的网页动态菜单生成方法,具体是,将根据菜单树模型中的菜单项以及路由服务生成网页动态菜单进一步优化为,包括:将菜单树模型中的菜单项添加到菜单显示组件中;将菜单显示组件中的菜单项与路由服务加载的与菜单项对应的URL路径进行关联,以生成网页动态菜单。
S410、根据预设的菜单数据生成菜单树模型。
S420、将菜单树模型中的菜单项加载到路由服务中。
S430、将菜单树模型中的菜单项添加到菜单显示组件中。
具体的,可通过循环的方式将菜单树模型中的菜单项添加到菜单显示组件中,优选的,菜单显示组件为React的Menu组件。将菜单树模型中的菜单项添加至菜单显示组件具体表现为,将菜单项所对应的菜单名称添加至菜单显示组件中,利用菜单显示组件在网页上将菜单树模型中的所有菜单项展示出来。
S440、将菜单显示组件中的菜单项与路由服务加载的与菜单项对应的URL路径进行关联,以生成网页动态菜单。
具体的,将菜单项所对应的菜单名称加载至菜单显示组件的同时,需要将菜单项对应的URL路径与其所对应的菜单名称进行关联,其中,关联操作表现为通过菜单名称可以访问该URL路径所对应的网页,从而生成网页动态菜单。
示例性的,通过如下代码就可以实现将菜单树模型中的菜单项用React的Menu组件转化为网页动态菜单:
Figure BDA0001177596530000151
Figure BDA0001177596530000161
本实施例的技术方案,通过将菜单树模型中的菜单项添加至菜单显示组件中,并与路由服务加载的与菜单项对应的URL路径进行关联,从而生成网页动态菜单,实现了减少路由文件的配置,简化动态菜单的后期开发和维护操作,提高开发效率的效果。
实施例五
图5为本发明实施例五提供的一种网页动态菜单生成方法的流程示意图。本实施例以上述各实施例为基础进行优化,提供了优选的网页动态菜单生成方法,具体是,将网页动态菜单生成方法进一步优化为,还包括:在目标数据库中,将根菜单下的最底层子菜单的处理页面展示的组件的数据值设置为树组件。
S510、在目标数据库中,将根菜单下的最底层子菜单的处理页面展示的组件的数据值设置为树组件。
具体的,树组件优选可以为React的Tree组件,用于在网页上展示出所有菜单项的树形结构以及所有菜单项对应的菜单数据。设置树组件的好处在于,可以方便开发者后期对动态菜单中菜单项的添加、修改和删除操作,为开发者提供可视化的修改界面,另外,由于树组件也使用的是目标数据库,所以通过对树组件中的菜单项的操作,即可完成对目标数据库中预设的菜单数据进行修改,从而不用开发者直接去操作目标数据库,简化了动态菜单的后期开发和维护操作,提高了开发效率。
将根菜单下的最底层子菜单的处理页面展示的组件的数据值设置为树组件,可以使得所有根菜单,及其根菜单下的子菜单均自动展示在树组件中。示例性的,目标数据库中包含“系统配置”和“系统菜单”两个菜单项,且“系统配置”是根菜单,“系统菜单”是“系统配置”下的子菜单,则在目标数据库中设置如表1所示的菜单数据。
表1菜单数据
id 1 11
name 系统配置 系统菜单
parentId root 1
isLeaf false true
url system_configuration system_menu
component tree
S520、根据预设的菜单数据生成菜单树模型。
S530、将菜单树模型中的菜单项加载到路由服务中。
S540、接收用户的网页动态菜单的生成请求。
具体的,网页动态菜单的生成请求可以是登陆动态菜单配置网页的请求,若用户在浏览器上访问动态菜单配置网页,则根据收到的网页动态菜单的生成请求则可以通过查验用户权限,从而判断该用户是否有访问动态菜单配置网页的权限。
S550、如果网页动态菜单的生成请求满足预设的权限控制条件,则在显示网页动态菜单的同时,显示与菜单树模型对应的树组件。
具体的,当接收到的网页动态菜单的生成请求满足配置动态菜单的权限,优选是访问动态菜单配置网页的用户是管理员,则在该页面上显示网页动态菜单以及与菜单树模型对应的树组件;当接收到的网页动态菜单的生成请求不满足配置动态菜单的权限,优选是访问动态菜单配置网页的用户是普通游客,则在该页面上只显示网页动态菜单。
S560、根据用户对树组件中的菜单数据进行的增加操作、修改操作以及删除操作,对目标数据库中的菜单数据进行相应的数据更新。
具体的,当用户具有修改网页动态菜单的权限时,用户可通过树组件对其中的菜单数据进行增加操作、修改操作以及删除操作,相应的,目标数据库中的菜单数据也会随着操作的进行而同步更新。示例性的,若用户需要在原有的根菜单“系统配置”的基础上添加另一个根菜单“客服管理”,或在“系统配置”之下再添加一个子菜单“系统图标”,则在React的Tree组件中点击添加按钮,即可加入一个新的根菜单“客服管理”或在“系统配置”一栏下加入“系统图标”,且点击Tree组件中一个菜单项,即可出现该菜单项对应的菜单数据,例如菜单名称、菜单URL以及菜单对应组件,从而实现对菜单数据相应的修改操作。最后还可以通过刷新网页等方式,将树组件中的菜单项更新至菜单显示组件中。
本实施例的技术方案,通过将最下级子菜单所对应的显示页面处理组件设置为树组件,利用树组件的可视化操作,实现了简化动态菜单的后期开发和维护操作,提高开发效率的效果。
实施例六
图6为本发明实施例六提供的一种网页动态菜单生成装置的结构示意图。该装置可适用于生成网页动态菜单的情况,该装置可由硬件和/或软件组成,且一般可集成在电脑以及所有包含web前端系统开发功能的智能终端中。参考图6,网页动态菜单生成装置包括:菜单树生成模块610、路由服务加载模块620以及动态菜单生成模块630,下面对各模块进行具体说明。
菜单树生成模块610,用于根据预设的菜单数据生成菜单树模型;
路由服务加载模块620,用于将所述菜单树模型中的菜单项加载到路由服务中;
动态菜单生成模块630,用于根据所述菜单树模型中的菜单项以及所述路由服务生成网页动态菜单。
可选的,菜单树生成模块610包括:
菜单数据获取子模块,用于从目标数据库中获取预设的菜单数据,其中,所述菜单数据包括数据类型以及与数据类型对应的数据值;
菜单数据封装子模块,用于根据预设的树形结构中包括的待填充数据值的数据类型,将所述预设的菜单数据封装在所述树形结构中,生成菜单树模型。
进一步的,所述菜单数据的数据类型包括:
菜单标识码、菜单名称、父节点、是否子节点以及统一资源定位符URL路径。
进一步的,所述路由服务加载模块具体用于:
读取所述菜单树模型中的一个根菜单的根菜单URL路径;
将所述根菜单URL路径加载至路由服务中;
获取所述菜单树模型中位于所述根菜单下的全部子菜单的URL路径,并将所述全部子菜单的URL路径加载至路由服务中;
返回执行读取所述菜单树模型中的一个根菜单的根菜单URL路径的操作,直至完成对所述菜单树模型中的全部菜单项的处理。
进一步的,动态菜单生成模块630具体用于:
将所述菜单树模型中的菜单项添加到菜单显示组件中;
将所述菜单显示组件中的菜单项与所述路由服务加载的与菜单项对应的URL路径进行关联,以生成所述网页动态菜单。
进一步的,所述菜单数据的数据类型还包括:处理页面展示的组件;
所述装置还包括:树组件设置模块,用于在所述目标数据库中,将根菜单下的最底层子菜单的处理页面展示的组件的数据值设置为树组件。
进一步的,动态菜单生成模块630具体用于:
接收用户的网页动态菜单的生成请求;
如果所述网页动态菜单的生成请求满足预设的权限控制条件,则在显示所述网页动态菜单的同时,显示与所述菜单树模型对应的树组件;
根据用户对所述树组件中的菜单数据进行的增加操作、修改操作以及删除操作,对所述目标数据库中的菜单数据进行相应的数据更新。
上述产品可执行本发明任意实施例所提供的方法,具备执行方法相应的功能模块和有益效果。
注意,上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解,本发明不限于这里所述的特定实施例,对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此,虽然通过以上实施例对本发明进行了较为详细的说明,但是本发明不仅仅限于以上实施例,在不脱离本发明构思的情况下,还可以包括更多其他等效实施例,而本发明的范围由所附的权利要求范围决定。

Claims (7)

1.一种网页动态菜单生成方法,其特征在于,包括:
在目标数据库中,将根菜单下的最底层子菜单的处理页面展示的组件的数据值设置为树组件,用于展示菜单项的树形结构和菜单项对应的菜单数据;
根据预设的菜单数据生成菜单树模型;
将所述菜单树模型中的菜单项加载到路由服务中;
根据所述菜单树模型中的菜单项以及所述路由服务生成网页动态菜单;
所述将所述菜单树模型中的菜单项加载到路由服务中,包括:读取所述菜单树模型中的一个根菜单的根菜单URL路径;
将所述根菜单URL路径加载至路由服务中;
获取所述菜单树模型中位于所述根菜单下的全部子菜单的URL路径,并将所述全部子菜单的URL路径加载至路由服务中;
返回执行读取所述菜单树模型中的一个根菜单的根菜单URL路径的操作,直至完成对所述菜单树模型中的全部菜单项的处理。
2.根据权利要求1所述的方法,其特征在于,所述根据预设的菜单数据生成菜单树模型,包括:
从目标数据库中获取预设的菜单数据,其中,所述菜单数据包括数据类型以及与数据类型对应的数据值;
根据预设的树形结构中包括的待填充数据值的数据类型,将所述预设的菜单数据封装在所述树形结构中,生成菜单树模型。
3.根据权利要求1或2所述的方法,其特征在于,所述菜单数据的数据类型包括:
菜单标识码、菜单名称、父节点、是否子节点以及统一资源定位符URL路径。
4.根据权利要求1所述的方法,其特征在于,所述根据所述菜单树模型中的菜单项以及所述路由服务生成网页动态菜单,包括:
将所述菜单树模型中的菜单项添加到菜单显示组件中;
将所述菜单显示组件中的菜单项与所述路由服务加载的与菜单项对应的URL路径进行关联,以生成所述网页动态菜单。
5.根据权利要求1所述的方法,其特征在于,所述根据所述菜单树模型中的菜单项以及所述路由服务生成网页动态菜单,包括:
接收用户的网页动态菜单的生成请求;
如果所述网页动态菜单的生成请求满足预设的权限控制条件,则在显示所述网页动态菜单的同时,显示与所述菜单树模型对应的树组件;
根据用户对所述树组件中的菜单数据进行的增加操作、修改操作以及删除操作,对所述目标数据库中的菜单数据进行相应的数据更新。
6.一种网页动态菜单生成装置,其特征在于,包括:
菜单树生成模块,用于根据预设的菜单数据生成菜单树模型;
路由服务加载模块,用于将所述菜单树模型中的菜单项加载到路由服务中;
动态菜单生成模块,用于根据所述菜单树模型中的菜单项以及所述路由服务生成网页动态菜单;
所述路由服务加载模块具体用于:
读取所述菜单树模型中的一个根菜单的根菜单URL路径;
将所述根菜单URL路径加载至路由服务中;
获取所述菜单树模型中位于所述根菜单下的全部子菜单的URL路径,并将所述全部子菜单的URL路径加载至路由服务中;
返回执行读取所述菜单树模型中的一个根菜单的根菜单URL路径的操作,直至完成对所述菜单树模型中的全部菜单项的处理。
7.根据权利要求6所述的装置,其特征在于,所述菜单树生成模块包括:
菜单数据获取子模块,用于从目标数据库中获取预设的菜单数据,其中,所述菜单数据包括数据类型以及与数据类型对应的数据值;
菜单数据封装子模块,用于根据预设的树形结构中包括的待填充数据值的数据类型,将所述预设的菜单数据封装在所述树形结构中,生成菜单树模型。
CN201611139723.5A 2016-12-12 2016-12-12 一种网页动态菜单生成方法及装置 Active CN106598591B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201611139723.5A CN106598591B (zh) 2016-12-12 2016-12-12 一种网页动态菜单生成方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201611139723.5A CN106598591B (zh) 2016-12-12 2016-12-12 一种网页动态菜单生成方法及装置

Publications (2)

Publication Number Publication Date
CN106598591A CN106598591A (zh) 2017-04-26
CN106598591B true CN106598591B (zh) 2020-08-11

Family

ID=58597479

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201611139723.5A Active CN106598591B (zh) 2016-12-12 2016-12-12 一种网页动态菜单生成方法及装置

Country Status (1)

Country Link
CN (1) CN106598591B (zh)

Families Citing this family (15)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109471685A (zh) * 2017-09-08 2019-03-15 北京国双科技有限公司 下拉菜单的展示方法以及装置
CN108037967A (zh) * 2017-11-27 2018-05-15 深圳市丰巢科技有限公司 一种基于多父子结构的菜单加载方法以及电子设备
CN108255931B (zh) * 2017-11-30 2022-06-03 汤东澜 一种网站导航方法及服务器
CN107992350B (zh) * 2017-12-11 2021-01-26 杭州迪普科技股份有限公司 一种生成配置概览页面的方法及装置
CN108776609A (zh) * 2018-06-27 2018-11-09 郑州云海信息技术有限公司 一种管理导航菜单的方法、装置、计算机存储介质及终端
CN109189291A (zh) * 2018-07-26 2019-01-11 新华三大数据技术有限公司 菜单管理方法及装置
CN109165053B (zh) * 2018-08-15 2022-04-01 康美健康云服务有限公司 应用软件菜单配置方法、移动终端及计算机可读存储介质
CN109739495A (zh) * 2018-12-27 2019-05-10 山东中创软件工程股份有限公司 一种构建树结构的方法、装置、设备以及存储介质
CN110162720B (zh) * 2019-04-16 2023-07-18 平安科技(深圳)有限公司 网页页面加载方法、装置、计算机设备及存储介质
CN110502712A (zh) * 2019-08-09 2019-11-26 广东浪潮大数据研究有限公司 一种网页菜单生成方法、装置及服务器
CN110650091B (zh) * 2019-08-14 2022-08-02 平安普惠企业管理有限公司 路由配置信息处理方法、装置、计算机设备和存储介质
CN111324258B (zh) * 2020-02-04 2021-07-06 北京字节跳动网络技术有限公司 多级下拉菜单配置项内容生成方法、装置、设备和介质
CN111522999A (zh) * 2020-04-22 2020-08-11 北京思特奇信息技术股份有限公司 一种业务运营树管理的方法和装置
CN111770348B (zh) * 2020-05-13 2024-03-15 视联动力信息技术股份有限公司 菜单适配方法、装置及可读存储介质
CN115686683B (zh) * 2022-11-21 2023-09-08 广东保伦电子股份有限公司 一种菜单导航动态生成方法、装置、设备及介质

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101400167A (zh) * 2008-10-21 2009-04-01 北京闪联互动网络科技有限责任公司 移动终端的动态菜单实现方法、装置及系统
EP2166759A1 (en) * 2008-02-18 2010-03-24 Huawei Technologies Co., Ltd. A method and apparatus of playing dynamic audio-video menu
US8036347B1 (en) * 2006-10-18 2011-10-11 Avaya Inc. Method and apparatus providing additional information to an interactive voice response (IVR) system user

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101510207B (zh) * 2009-02-26 2011-04-20 中兴通讯股份有限公司 基于Web页面的树形菜单动态维护方法与装置
CN101714083A (zh) * 2009-12-16 2010-05-26 金蝶软件(中国)有限公司 一种应用程序菜单的生成方法、装置及应用系统
CN104536757A (zh) * 2014-12-26 2015-04-22 上海斐讯数据通信技术有限公司 一种多级菜单的实现方法

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8036347B1 (en) * 2006-10-18 2011-10-11 Avaya Inc. Method and apparatus providing additional information to an interactive voice response (IVR) system user
EP2166759A1 (en) * 2008-02-18 2010-03-24 Huawei Technologies Co., Ltd. A method and apparatus of playing dynamic audio-video menu
CN101400167A (zh) * 2008-10-21 2009-04-01 北京闪联互动网络科技有限责任公司 移动终端的动态菜单实现方法、装置及系统

Also Published As

Publication number Publication date
CN106598591A (zh) 2017-04-26

Similar Documents

Publication Publication Date Title
CN106598591B (zh) 一种网页动态菜单生成方法及装置
CN112506493B (zh) 一种基于vue的表格配置方法、装置、设备和介质
CN106598574B (zh) 页面渲染的方法和装置
US8365203B2 (en) Method for creating a native application for mobile communications device in real-time
CN111596965B (zh) 项目工程初始化方法、装置、计算机设备和存储介质
CN107463366B (zh) 一种基于移动App的界面动态化方法
CN103605502B (zh) 表单页面显示方法及服务器
CN106354483B (zh) 一种数据处理方法、装置及电子设备
WO2003009177A1 (en) Web site application development method using object model for managing web-based content
CN111708537A (zh) 基于组件模板的页面渲染方法、设备及可读存储介质
US20130132422A1 (en) System and method for creating and controlling an application operating on a plurality of computer platform types
CN103034517A (zh) 浏览器控制工具加载方法和装置
CN102662666B (zh) 一种界面菜单的创建方法及装置
CN110222251B (zh) 一种基于网页分割和搜索算法的服务包装方法
CN110209378A (zh) 页面生成方法、装置、终端及存储介质
CN103034518A (zh) 加载浏览器控制工具的方法及浏览器
CN112631591B (zh) 表元素联动方法、装置、设备与计算机可读存储介质
CN113885935A (zh) 资源打包方法、装置、电子设备及计算机可读存储介质
CN112825038A (zh) 基于通用组件语言规范的可视化页面制作方法和相关产品
CN117667094A (zh) 菜单配置及显示方法、装置、电子设备和存储介质
CN114385672A (zh) 信息处理方法及装置、电子设备及存储介质
CN109766388B (zh) 一种将数据存入HBase的方法和系统
CN113342399A (zh) 应用项目的结构配置方法、装置及可读存储介质
CN113608726B (zh) 代码生成方法、装置、电子设备及存储介质
CN112749216B (zh) 基于规则解析的数据导入方法、装置及设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant