[发明专利]一种网页动态菜单生成方法及装置

说明书

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

技术领域

本发明实施例涉及网页前端技术，尤其涉及一种网页动态菜单生成方法及装置。

背景技术

在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路径进行关联，以生成所述网页动态菜单。