CN115408627A - 一种菜单显示方法、装置、设备及介质 - Google Patents

Abstract

本申请公开了一种菜单显示方法、装置、设备及介质，涉及网页显示领域。通过接收浏览器端发起的页面请求；获取菜单数据与路由配置文件；菜单数据中包含多个菜单的菜单信息，各菜单的嵌套层级与路由名称预先配置；将菜单数据与路由配置文件进行匹配以生成菜单树；对菜单树进行服务端渲染生成HTML文件，以便于浏览器端根据HTML文件渲染生成包含菜单的可视化页面。上述方案预先指定了各菜单之间的嵌套关系及路由名称，因此在菜单显示时能够通过嵌套关系来唯一确认菜单层级之间的关联，并通过路由名称确认菜单的选中状态。进一步地，通过服务端渲染减轻了前端渲染的压力，提高了渲染的效率。

Description

一种菜单显示方法、装置、设备及介质

技术领域

本申请涉及网页显示领域，特别是涉及一种菜单显示方法、装置、设备及介质。

背景技术

在功能模块迭代快、业务场景变化快、导航菜单多的后台管理***中，需要设计单独的菜单模块去维护导航菜单。每一个不同的功能模块有一个单独的菜单项，随着业务场景的变化，可以动态地进行菜单地新增、编辑和删除，然后通过给每一个用户角色分配不同的菜单选项就可以实现用户的定制化菜单导航。目前，后台管理***的菜单模块都是采用单页面形式来实现，用户点击菜单实现菜单的选中状态，然后将菜单关联的路径信息推送到浏览器的路由堆栈中，最后根据路径信息匹配到的页面组件替换现有组件实现页面的模拟跳转和刷新。

然而，在页面中通常会有其他的页面跳转链接。当点击链接实现页面的调转后，由于单页面的路由模式是通过对菜单关联的路径信息和浏览器当前路由信息进行精准匹配实现菜单的选中状态，如果跳转的页面没有精准匹配到相应的菜单，将会导致界面无法处理当前菜单的选中状态。同时，目前导航菜单页面多是由前端***来动态加载，没有实现后端页面的动态渲染，造成界面请求的界面和前端生成的界面不一致，从而会造成前端界面的二次渲染，不但浪费了后端资源也加重了前端的压力。

鉴于上述问题，设计一种菜单显示方法，能够实现菜单选中状态的准确处理，以及导航菜单页面的高效率渲染，是该领域技术人员亟待解决的问题。

发明内容

本申请的目的是提供一种菜单显示方法、装置、设备及介质，能够实现菜单选中状态的准确处理，以及导航菜单页面的高效率渲染。

为解决上述技术问题，本申请提供一种菜单显示方法，应用于服务端，包括：

接收浏览器端发起的页面请求；

获取菜单数据与路由配置文件；其中，所述菜单数据中包含多个菜单的菜单信息，各菜单的嵌套层级与路由名称预先配置；所述路由配置文件中至少包含路径、所述路由名称、组件信息、关联页面名称和嵌套关系的配置信息；

将所述菜单数据与所述路由配置文件进行匹配以生成菜单树；

对所述菜单树进行服务端渲染，以生成HTML文件；

发送所述HTML文件至所述浏览器端，以便于所述浏览器端根据所述HTML文件渲染生成包含所述菜单的可视化页面。

优选地，所述将所述菜单数据与所述路由配置文件进行匹配以生成菜单树包括：

获取所述菜单数据中各所述菜单信息，并获取所述路由配置文件的所述配置信息；

获取各所述菜单信息中的所述路由名称；

将所述菜单信息中的所述路由名称与所述路由配置文件中的所述路由名称进行匹配；

当匹配成功时，将所述路由配置文件中其余的所述配置信息赋值至所述菜单信息中；

格式化所述菜单数据以生成所述菜单树。

优选地，所述对所述菜单树进行服务端渲染包括：

获取所述页面请求中的用户的信息；

判断所述用户是否具有所述菜单树中各所述菜单对应的菜单权限；

若所述用户不具有所述菜单对应的所述菜单权限，则所述菜单不可见；

若所述用户具有所述菜单对应的所述菜单权限，则将所述菜单的菜单链接与所述菜单信息中的所述组件信息进行关联，以便于进行服务端渲染。

优选地，所述将所述菜单的菜单链接与所述菜单信息中的所述组件信息进行关联包括：

获取所述菜单的菜单类型；其中，所述菜单类型包括菜单目录和菜单链接；

当所述菜单类型为所述菜单目录时，判断所述菜单目录下的所述菜单链接是否激活；

若所述菜单目录下的所述菜单链接已激活，则将所述菜单链接与所述组件信息进行关联，并将所述菜单目录置为展开状态，否则将所述菜单目录置为收缩状态；

当所述菜单类型为所述菜单链接时，判断所述菜单链接是否激活；

若所述菜单链接已激活，则将所述菜单链接与所述组件信息进行关联。

优选地，所述判断所述菜单链接是否激活包括：

判断当前页面的页面名称是否包含在所述菜单链接的关联页面名称中；

若是，则所述菜单链接已激活。

为解决上述技术问题，本申请还提供另一种菜单显示方法，应用于浏览器端，包括：

发送页面请求至服务端，以用于所述服务端获取菜单数据与路由配置文件，将所述菜单数据与所述路由配置文件进行匹配以生成菜单树，对所述菜单树进行服务端渲染以生成HTML文件；

其中，所述菜单数据中包含多个菜单的菜单信息，各菜单的嵌套层级与路由名称预先配置；所述路由配置文件中至少包含路径、所述路由名称、组件信息、关联页面名称和嵌套关系的配置信息；

接收所述HTML文件；

根据所述HTML文件渲染生成包含所述菜单的可视化页面。

优选地，还包括：

当用户点击菜单目录时，若所述菜单目录为展开状态，则隐藏所述菜单目录下的所有菜单链接并将所述菜单目录置为收缩状态；

若所述菜单目录为收缩状态，则显示所述菜单目录下的所有所述菜单链接并将所述菜单目录置为展开状态；

当所述用户点击所述菜单链接时，收起其余的所述菜单目录并取消所有所述菜单链接的激活状态；

将所述用户点击的所述菜单链接激活，并将对应的路由信息推送至堆栈中；

根据所述用户点击的所述菜单链接关联的所述组件信息刷新当前页面。

优选地，还包括：

通过面包屑导航监听当前页面和路由信息。

优选地，还包括：

获取所述用户的个性化设置；

根据所述个性化设置改变当前页面中所述菜单的显示样式。

为解决上述技术问题，本申请还提供一种菜单显示装置，应用于服务端，包括：

第一接收模块，用于接收浏览器端发起的页面请求；

获取模块，用于获取菜单数据与路由配置文件；其中，所述菜单数据中包含多个菜单的菜单信息，各菜单的嵌套层级与路由名称预先配置；所述路由配置文件中至少包含路径、所述路由名称、组件信息、关联页面名称和嵌套关系的配置信息；

匹配模块，用于将所述菜单数据与所述路由配置文件进行匹配以生成菜单树；

第一渲染模块，用于对所述菜单树进行服务端渲染，以生成HTML文件；

第一发送模块，用于发送所述HTML文件至所述浏览器端，以便于所述浏览器端根据所述HTML文件渲染生成包含所述菜单的可视化页面。

为解决上述技术问题，本申请还提供另一种菜单显示装置，应用于浏览器端，包括：

第二发送模块，用于发送页面请求至服务端，以用于所述服务端获取菜单数据与路由配置文件，将所述菜单数据与所述路由配置文件进行匹配以生成菜单树，对所述菜单树进行服务端渲染以生成HTML文件；

其中，所述菜单数据中包含多个菜单的菜单信息，各菜单的嵌套层级与路由名称预先配置；所述路由配置文件中至少包含路径、所述路由名称、组件信息、关联页面名称和嵌套关系的配置信息；

第二接收模块，用于接收所述HTML文件；

第二渲染模块，用于根据所述HTML文件渲染生成包含所述菜单的可视化页面。

为解决上述技术问题，本申请还提供一种菜单显示设备，包括：

存储器，用于存储计算机程序；

处理器，用于执行所述计算机程序时实现上述的菜单显示方法的步骤。

为解决上述技术问题，本申请还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述的菜单显示方法的步骤。

本申请所提供的菜单显示方法，通过接收浏览器端发起的页面请求；获取菜单数据与路由配置文件；其中，菜单数据中包含多个菜单的菜单信息，各菜单的嵌套层级与路由名称预先配置；路由配置文件中至少包含路径、路由名称、组件信息、关联页面名称和嵌套关系的配置信息；将菜单数据与路由配置文件进行匹配以生成菜单树；对菜单树进行服务端渲染，以生成HTML文件；发送HTML文件至浏览器端，以便于浏览器端根据HTML文件渲染生成包含菜单的可视化页面。由此可知，上述方案在创建菜单或页面时预先指定了各菜单之间的嵌套关系及路由名称，因此在菜单显示时能够通过嵌套关系来唯一确认菜单层级之间的关联，并通过路由名称确认菜单的选中状态，实现了菜单选中状态的准确处理。进一步地，通过作为后端渲染的服务端渲染的方式保证了页面请求的页面和前端生成的页面的一致性，减轻了前端渲染的压力，提高了渲染的效率。

此外，本申请实施例还提供菜单显示装置、设备及计算机可读存储介质，效果同上。

附图说明

为了更清楚地说明本申请实施例，下面将对实施例中所需要使用的附图做简单的介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本申请实施例提供的一种菜单显示方法的流程图；

图2为本申请实施例提供的另一种菜单显示方法的流程图；

图3为本申请实施例提供的一种菜单显示装置的示意图；

图4为本申请实施例提供的另一种菜单显示装置的示意图；

图5为本申请实施例提供的一种菜单显示设备的结构图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下，所获得的所有其他实施例，都属于本申请保护范围。

本申请的核心是提供一种菜单显示方法、装置、设备及介质。

为了使本技术领域的人员更好地理解本申请方案，下面结合附图和具体实施方式对本申请作进一步的详细说明。

目前，后台管理***的菜单模块都是采用单页面形式来实现：用户点击菜单实现菜单的选中状态，然后将菜单关联的路径信息推送到浏览器的路由堆栈中，最后根据路径信息匹配到的页面组件替换现有组件实现页面的模拟跳转和刷新。而在页面中通常会存在其他的页面跳转链接，当点击链接实现页面的调转后，由于单页面的路由模式是通过对菜单关联的路径信息和浏览器当前路由信息进行精准匹配实现菜单的选中状态，如果跳转的页面没有精准匹配到相应的菜单，将会导致界面无法处理当前菜单的选中状态。同时，导航菜单的现有技术多是由前端***来动态加载，没有实现后端页面的动态渲染，造成界面请求的界面和前端生成的界面不一致，会造成前端界面的二次渲染，从而浪费了后端资源也加重了前端的压力。因此，本申请实施例提供了一种菜单显示方法。图1为本申请实施例提供的一种菜单显示方法的流程图。方法应用于服务端，如图1所示，包括：

S10：接收浏览器端发起的页面请求。

可以理解的是，本实施例中所提供的菜单显示方法可以应用于多种后台管理场景，例如应用于商务管理、卫星管理或其他管理场景，本实施例中对于本实施例所提供的菜单显示方法的应用场景不做限制，根据具体的实施情况而定。

在具体实施中，当用户点击菜单时，服务端首先接收用户在浏览器端发起的页面请求。其中，页面请求中包含用户信息和用户权限。进一步地，当服务端接收到页面请求后，获取存储的菜单数据以及其他相关数据。

S11：获取菜单数据与路由配置文件。

其中，菜单数据中包含多个菜单的菜单信息，各菜单的嵌套层级与路由名称预先配置；路由配置文件中至少包含路径、路由名称、组件信息、关联页面名称和嵌套关系的配置信息。

具体地，服务端获取菜单数据与路由配置文件。其中，菜单数据与路由配置文件是在后台管理***的开发阶段进行编写与创建的***文件。其中，路由配置文件开发阶段进行编写时至少包括路径、路由名称、组件信息、关联页面名称和嵌套关系的配置信息。在配置完成后将路由配置文件打包存储至前端页面文件中。

进一步地，菜单数据中包含多个菜单的菜单信息；在菜单信息创建时，其中至少包含菜单名称、菜单权限、路由名称、父组件、菜单类型、外链信息、图标、组件信息、排序以及菜单状态的信息。具体地，菜单名称用于在菜单显示时供用户点击使用；菜单权限表征使用菜单的权限，当用户具有菜单权限时才能够显示对应菜单的菜单信息；路由名称用于与路由配置文件中的路由名称进行匹配，以确认菜单的选中状态，同时通过相应的组件信息加载页面，以实现菜单显示；父组件用于标识各菜单之间的嵌套关系；菜单类型表征菜单的类型，具体包括菜单目录、菜单链接和权限信息；图标和排序表征菜单的图标信息以及位置信息；菜单状态表征当前的菜单是否有效。外链信息表征当前链接是否链接到其他地址信息；外链信息具有较高的优先级，当外链信息填写完毕时，其他路由信息将不会生效，当用户点击此外链链接后将会以打开新的TAB页的形式跳转到相应的外链链接中。

在开发阶段，在路由配置文件编写完、菜单信息创建完成之后，配置各菜单的嵌套层级和权限，根据用户的不同分别赋予不同的菜单权限。

S12：将菜单数据与路由配置文件进行匹配以生成菜单树。

进一步地，将获取到的菜单数据与路由配置文件进行匹配，生成菜单数据，以便于前端的解析和文档对象模型(Document Object Model，DOM)的渲染。

DOM是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口，它可以动态地访问程序和脚本，更新其内容、结构和www文档的风格。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。本实施例中，菜单树即为DOM树，在DOM规范中，对于文档的表示方法并没有任何限制，只是多种文档结构中的一种较为普遍的实现方式。DOM结构构成的基本要素主要为节点，而文档的结构就是由层次化的节点组成。DOM模型中节点的概念很广泛，比如整个文档就是一个节点，称为文档节点。除此之外，还有元素节点，属性节点，注释节点等。因此，DOM树就是以HTML Document为根节点，其余节点为子节点组织成的一个树状数据结构。

需要注意的是，本实施例中对于菜单树的具体生成过程不做限制，根据具体的实施情况而定。

S13：对菜单树进行服务端渲染，以生成HTML文件。

需要注意的是，服务器端渲染(Server-Side Rendering，SSR)是指由服务端侧完成页面的HTML结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程。通过服务端渲染技术，会在服务端执行数据的拉取、处理、过滤以及组件和路由匹配功能，将生成的菜单树编译成HTML文件，以便于浏览器根据HTML渲染出用户可视化的菜单树结构。

此外，本实施例中对于菜单树的服务端渲染的具体过程不做限制，根据具体的实施情况而定。

S14：发送HTML文件至浏览器端，以便于浏览器端根据HTML文件渲染生成包含菜单的可视化页面。

最后，服务端发送生成的HTML文件至浏览器端，浏览器端能够端根据HTML文件渲染生成包含菜单的可交互的可视化页面。

本实施例中，通过接收浏览器端发起的页面请求；获取菜单数据与路由配置文件；其中，菜单数据中包含多个菜单的菜单信息，各菜单的嵌套层级与路由名称预先配置；路由配置文件中至少包含路径、路由名称、组件信息、关联页面名称和嵌套关系的配置信息；将菜单数据与路由配置文件进行匹配以生成菜单树；对菜单树进行服务端渲染，以生成HTML文件；发送HTML文件至浏览器端，以便于浏览器端根据HTML文件渲染生成包含菜单的可视化页面。由此可知，上述方案在创建菜单或页面时预先指定了各菜单之间的嵌套关系及路由名称，因此在菜单显示时能够通过嵌套关系来唯一确认菜单层级之间的关联，并通过路由名称确认菜单的选中状态，实现了菜单选中状态的准确处理。进一步地，通过作为后端渲染的服务端渲染的方式保证了页面请求的页面和前端生成的页面的一致性，减轻了前端渲染的压力，提高了渲染的效率。

在上述实施例的基础上：

作为一种优选的实施例，将菜单数据与路由配置文件进行匹配以生成菜单树包括：

获取菜单数据中各菜单信息，并获取路由配置文件的配置信息；

获取各菜单信息中的路由名称；

将菜单信息中的路由名称与路由配置文件中的路由名称进行匹配；

当匹配成功时，将路由配置文件中其余的配置信息赋值至菜单信息中；

格式化菜单数据以生成菜单树。

作为一种优选的实施例，菜单树的生成具体通过菜单数据与路由配置文件进行匹配生成。具体地，首先获取菜单数据中的各菜单信息，将每一条菜单信息中的路由名称与路由配置文件中的路由名称进行匹配；当二者一致时确认匹配成功。在匹配成功后，把路由配置文件里面的其他配置信息赋值到菜单信息中，也就是将路由配置文件中路径、组件信息、关联页面名称和嵌套关系等配置信息赋值添加至该菜单信息中，使得该菜单信息关联上页面路径，页面组件等信息。进一步地，对菜单数据进行格式化，使之成为树状结构的菜单树。

本实施例中，通过获取菜单数据中各菜单信息，并获取路由配置文件的配置信息；获取各菜单信息中的路由名称；将菜单信息中的路由名称与路由配置文件中的路由名称进行匹配；当匹配成功时，将路由配置文件中其余的配置信息赋值至菜单信息中；格式化菜单数据以生成菜单树。实现了菜单树的生成，以便于后续进行后端渲染。

在上述实施例的基础上：

作为一种优选的实施例，对菜单树进行服务端渲染包括：

获取页面请求中的用户的信息；

判断用户是否具有菜单树中各菜单对应的菜单权限；

若用户不具有菜单对应的菜单权限，则菜单不可见；

若用户具有菜单对应的菜单权限，则将菜单的菜单链接与菜单信息中的组件信息进行关联，以便于进行服务端渲染。

在具体实施中，在服务端渲染菜单树时渲染其中的每一条菜单信息。首先，获取页面请求中的用户的信息，其中包含用户的用户信息和用户权限。进一步判断用户是否具有菜单树中各菜单对应的菜单权限，具体根据当前的用户权限中是否包含当前菜单的菜单权限。当用户不具备此菜单权限时，此菜单将对用户不可见，用户也无法跳转到此链接关联的页面中；当用户具备此菜单权限时，此菜单对用户可见，则将该菜单的菜单链接与菜单信息中的组件信息进行关联，以便于进行服务端渲染。

本实施例中，通过获取页面请求中的用户的信息；判断用户是否具有菜单树中各菜单对应的菜单权限；若用户不具有菜单对应的菜单权限，则菜单不可见；若用户具有菜单对应的菜单权限，则将菜单的菜单链接与菜单信息中的组件信息进行关联以进行服务端渲染，实现了菜单树的后端渲染。

在上述实施例的基础上：

作为一种优选的实施例，将菜单的菜单链接与菜单信息中的组件信息进行关联包括：

获取菜单的菜单类型；其中，菜单类型包括菜单目录和菜单链接；

当菜单类型为菜单目录时，判断菜单目录下的菜单链接是否激活；

若菜单目录下的菜单链接已激活，则将菜单链接与组件信息进行关联，并将菜单目录置为展开状态，否则将菜单目录置为收缩状态；

当菜单类型为菜单链接时，判断菜单链接是否激活；

若菜单链接已激活，则将菜单链接与组件信息进行关联。

需要注意的是，由于菜单目录不具备页面展示功能，而菜单链接具备页面展示功能。菜单目录下包含多个菜单链接，菜单目录和菜单链接间通过数据嵌套体现二者之间的关系。因此在将菜单的菜单链接与菜单信息中的组件信息进行关联时，还需要提前确定菜单的菜单类型。

可以理解的是，菜单类型包括菜单目录和菜单链接。当菜单类型为菜单目录时，判断菜单目录下的菜单链接是否激活；若菜单目录下的菜单链接已激活，则将菜单链接与组件信息进行关联，并将菜单目录置为展开状态，以实现菜单目录中的各菜单链接的展示；若菜单目录下的菜单链接未激活，则将菜单目录置为收缩状态，隐藏其中的菜单链接；当菜单类型为菜单链接时，判断菜单链接是否激活；若菜单链接已激活，则将菜单链接与组件信息进行关联。

菜单链接的激活表征用户能够点击菜单链接，从而使页面跳转至相应的页面。为了实现菜单选中状态的显示，在进行菜单链接与组件信息进行关联的时候，需要确保菜单链接已激活。本实施例中，对于判断菜单链接是否激活的具体方式不做限制，根据具体的实施情况而定。

作为一种优选的实施例，判断菜单链接是否激活具体包括：

判断当前页面的页面名称是否包含在菜单链接的关联页面名称中；

若是，则菜单链接已激活。

在具体实施中，可通过判断浏览器端的当前页面的页面名称是否包含在菜单链接的关联页面名称中，当确认当前页面的页面名称包含在菜单链接的关联页面名称中，则菜单链接已激活。

图2为本申请实施例提供的另一种菜单显示方法的流程图。方法应用于浏览器端，如图2所示，包括：

S15：发送页面请求至服务端，以用于服务端获取菜单数据与路由配置文件，将菜单数据与路由配置文件进行匹配以生成菜单树，对菜单树进行服务端渲染以生成HTML文件。

其中，菜单数据中包含多个菜单的菜单信息，各菜单的嵌套层级与路由名称预先配置；路由配置文件中至少包含路径、路由名称、组件信息、关联页面名称和嵌套关系的配置信息；

S16：接收HTML文件。

S17：根据HTML文件渲染生成包含菜单的可视化页面。

本实施例中，通过发送页面请求至服务端，以用于服务端获取菜单数据与路由配置文件，将菜单数据与路由配置文件进行匹配以生成菜单树，对菜单树进行服务端渲染以生成HTML文件。其中，菜单数据中包含多个菜单的菜单信息，各菜单的嵌套层级与路由名称预先配置；路由配置文件中至少包含路径、路由名称、组件信息、关联页面名称和嵌套关系的配置信息；接收HTML文件。根据HTML文件渲染生成包含菜单的可视化页面。由此可知，上述方案在创建菜单或页面时预先指定了各菜单之间的嵌套关系及路由名称，因此在菜单显示时能够通过嵌套关系来唯一确认菜单层级之间的关联，并通过路由名称确认菜单的选中状态，实现了菜单选中状态的准确处理。进一步地，通过作为后端渲染的服务端渲染的方式保证了页面请求的页面和前端生成的页面的一致性，减轻了前端渲染的压力，提高了渲染的效率。

在上述实施例的基础上，为了提升用户在浏览器端对菜单使用的体验感，作为一种优选的实施例，还包括：

当用户点击菜单目录时，若菜单目录为展开状态，则隐藏菜单目录下的所有菜单链接并将菜单目录置为收缩状态；

若菜单目录为收缩状态，则显示菜单目录下的所有菜单链接并将菜单目录置为展开状态；

当用户点击菜单链接时，收起其余的菜单目录并取消所有菜单链接的激活状态；

将用户点击的菜单链接激活，并将对应的路由信息推送至堆栈中；

根据用户点击的菜单链接关联的组件信息刷新当前页面。

在具体实施中，当用户点击菜单目录时，若菜单目录为展开状态，则隐藏菜单目录下的所有菜单链接并将菜单目录置为收缩状态，以收起该菜单目录下的全部内容，以便于用户能够查看其他的菜单目录。若菜单目录为收缩状态，则显示菜单目录下的所有菜单链接并将菜单目录置为展开状态，以便于用户进行访问。

进一步地，当用户点击菜单链接时，说明用户此时只访问该菜单链接，对于其他的菜单链接和菜单目录不进行点击访问，此时收起其余的菜单目录并取消所有菜单链接的激活状态，将用户点击的菜单链接激活，并将对应的路由信息推送至浏览器路由表的堆栈中，最后根据用户点击的菜单链接关联的组件信息刷新当前页面，实现了菜单链接的访问，同时实现了当前页面的刷新。

在上述实施例的基础上：

作为一种优选的实施例，还包括：

通过面包屑导航监听当前页面和路由信息。

面包屑导航意在告知用户所处的当前页面的位置，方便用户可以通过该导航快速返回上一级网页。面包屑导航大致分为三类：

基于位置的导航，能够显示出当前页面在整个网站中所占据的层次；基于属性的面包屑导航，常见于电商类网站，能够显示商品的属性类别；基于路径的导航，能够记录显示用户所访问过的网页。

面包屑导航能够便于用户了解当前页面所处的位置，以及当前页面在整个网站中所处的位置；能够使用户了解网站的层次结构，进而浏览网站，提高用户体验；能够降低跳出率，用户通过面包屑导航可以看到自己感兴趣的内容从而吸引用户留在网站中继续进行浏览；便于搜索引擎对于网站的收录，有利于网站内链的建设，促进优化排名。

在本实施例，浏览器端设置有面包屑导航功能，用于菜单的次级展示，可以展示菜单的层级以及体现出菜单中不存在的层级关系。面包屑与菜单之间产生联动，当点击面包屑中的链接时，通过更改当前路由为面包屑关联的路由，从而触发路由监听事件，进而更改当前页面菜单链接的激活状态及菜单路由的展开状态。

在上述实施例的基础上：

作为一种优选的实施例，还包括：

获取用户的个性化设置；

根据个性化设置改变当前页面中菜单的显示样式。

进一步地，为了优化用户的使用体验，***的菜单还支持用户进行个性化定制。具体地，获取用户的个性化设置，具体可包括对导航及菜单栏的背景色、字体大小、鼠标样式等个性化设置；根据个性化设置改变当前页面中菜单的显示样式，实现了对菜单样式的自定义。此外，用户也可通过右击菜单项来实现对菜单项名称的自定义以及其他菜单内容的自定义，在本实施例中不做限制，根据具体的实施情况而定。

图3为本申请实施例提供的一种菜单显示装置的示意图。菜单显示装置应用于服务端，如图3所示，包括：

第一接收模块10，用于接收浏览器端发起的页面请求。

获取模块11，用于获取菜单数据与路由配置文件。

其中，菜单数据中包含多个菜单的菜单信息，各菜单的嵌套层级与路由名称预先配置；路由配置文件中至少包含路径、路由名称、组件信息、关联页面名称和嵌套关系的配置信息；

匹配模块12，用于将菜单数据与路由配置文件进行匹配以生成菜单树。

第一渲染模块13，用于对菜单树进行服务端渲染，以生成HTML文件。

第一发送模块14，用于发送HTML文件至浏览器端，以便于浏览器端根据HTML文件渲染生成包含菜单的可视化页面。

由于装置部分的实施例与方法部分的实施例相互对应，因此装置部分的实施例请参见方法部分的实施例的描述，这里暂不赘述。

图4为本申请实施例提供的另一种菜单显示装置的示意图。菜单显示装置应用于浏览器端，如图4所示，包括：

第二发送模块15，用于发送页面请求至服务端，以用于服务端获取菜单数据与路由配置文件，将菜单数据与路由配置文件进行匹配以生成菜单树，对菜单树进行服务端渲染以生成HTML文件。

其中，菜单数据中包含多个菜单的菜单信息，各菜单的嵌套层级与路由名称预先配置；路由配置文件中至少包含路径、路由名称、组件信息、关联页面名称和嵌套关系的配置信息。

第二接收模块16，用于接收HTML文件。

第二渲染模块17，用于根据HTML文件渲染生成包含菜单的可视化页面。

由于装置部分的实施例与方法部分的实施例相互对应，因此装置部分的实施例请参见方法部分的实施例的描述，这里暂不赘述。

图5为本申请实施例提供的一种菜单显示设备的结构图，如图5所示，菜单显示设备包括：

存储器20，用于存储计算机程序。

处理器21，用于执行计算机程序时实现如上述实施例中所提到的菜单显示方法的步骤。

本实施例提供的菜单显示设备可以包括但不限于智能手机、平板电脑、笔记本电脑或台式电脑等。

其中，处理器21可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器21可以采用数字信号处理器(Digital Signal Processor，DSP)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)、可编程逻辑阵列(Programmable LogicArray，PLA)中的至少一种硬件形式来实现。处理器21也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称中央处理器(CentralProcessing Unit，CPU)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器21可以在集成有图形处理器(Graphics Processing Unit，GPU)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器21还可以包括人工智能(Artificial Intelligence，AI)处理器，该AI处理器用于处理有关机器学习的计算操作。

存储器20可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器20还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。本实施例中，存储器20至少用于存储以下计算机程序201，其中，该计算机程序被处理器21加载并执行之后，能够实现前述任一实施例公开的菜单显示方法的相关步骤。另外，存储器20所存储的资源还可以包括操作***202和数据203等，存储方式可以是短暂存储或者永久存储。其中，操作***202可以包括Windows、Unix、Linux等。数据203可以包括但不限于菜单显示方法涉及到的数据。

在一些实施例中，菜单显示设备还可包括有显示屏22、输入输出接口23、通信接口24、电源25以及通信总线26。

本领域技术人员可以理解，图5中示出的结构并不构成对菜单显示设备的限定，可以包括比图示更多或更少的组件。

最后，本申请还提供一种计算机可读存储介质对应的实施例。计算机可读存储介质上存储有计算机程序，计算机程序被处理器执行时实现如上述方法实施例(可以是服务端侧对应的方法、也可以是浏览器端侧对应的方法，还可以是服务端侧和浏览器端侧对应的方法)中记载的步骤。

可以理解的是，如果上述实施例中的方法以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

以上对本申请所提供的一种菜单显示方法、装置、设备及介质进行了详细介绍。说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以对本申请进行若干改进和修饰，这些改进和修饰也落入本申请权利要求的保护范围内。

还需要说明的是，在本说明书中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

Claims (13)

1.一种菜单显示方法，其特征在于，应用于服务端，包括：

接收浏览器端发起的页面请求；

获取菜单数据与路由配置文件；其中，所述菜单数据中包含多个菜单的菜单信息，各菜单的嵌套层级与路由名称预先配置；所述路由配置文件中至少包含路径、所述路由名称、组件信息、关联页面名称和嵌套关系的配置信息；

将所述菜单数据与所述路由配置文件进行匹配以生成菜单树；

对所述菜单树进行服务端渲染，以生成HTML文件；

发送所述HTML文件至所述浏览器端，以便于所述浏览器端根据所述HTML文件渲染生成包含所述菜单的可视化页面。

2.根据权利要求1所述的菜单显示方法，其特征在于，所述将所述菜单数据与所述路由配置文件进行匹配以生成菜单树包括：

获取所述菜单数据中各所述菜单信息，并获取所述路由配置文件的所述配置信息；

获取各所述菜单信息中的所述路由名称；

将所述菜单信息中的所述路由名称与所述路由配置文件中的所述路由名称进行匹配；

当匹配成功时，将所述路由配置文件中其余的所述配置信息赋值至所述菜单信息中；

格式化所述菜单数据以生成所述菜单树。

3.根据权利要求1所述的菜单显示方法，其特征在于，所述对所述菜单树进行服务端渲染包括：

获取所述页面请求中的用户的信息；

判断所述用户是否具有所述菜单树中各所述菜单对应的菜单权限；

若所述用户不具有所述菜单对应的所述菜单权限，则所述菜单不可见；

若所述用户具有所述菜单对应的所述菜单权限，则将所述菜单的菜单链接与所述菜单信息中的所述组件信息进行关联，以便于进行服务端渲染。

4.根据权利要求3所述的菜单显示方法，其特征在于，所述将所述菜单的菜单链接与所述菜单信息中的所述组件信息进行关联包括：

获取所述菜单的菜单类型；其中，所述菜单类型包括菜单目录和菜单链接；

当所述菜单类型为所述菜单目录时，判断所述菜单目录下的所述菜单链接是否激活；

若所述菜单目录下的所述菜单链接已激活，则将所述菜单链接与所述组件信息进行关联，并将所述菜单目录置为展开状态，否则将所述菜单目录置为收缩状态；

当所述菜单类型为所述菜单链接时，判断所述菜单链接是否激活；

若所述菜单链接已激活，则将所述菜单链接与所述组件信息进行关联。

5.根据权利要求4所述的菜单显示方法，其特征在于，所述判断所述菜单链接是否激活包括：

判断当前页面的页面名称是否包含在所述菜单链接的关联页面名称中；

若是，则所述菜单链接已激活。

6.一种菜单显示方法，其特征在于，应用于浏览器端，包括：

发送页面请求至服务端，以用于所述服务端获取菜单数据与路由配置文件，将所述菜单数据与所述路由配置文件进行匹配以生成菜单树，对所述菜单树进行服务端渲染以生成HTML文件；

其中，所述菜单数据中包含多个菜单的菜单信息，各菜单的嵌套层级与路由名称预先配置；所述路由配置文件中至少包含路径、所述路由名称、组件信息、关联页面名称和嵌套关系的配置信息；

接收所述HTML文件；

根据所述HTML文件渲染生成包含所述菜单的可视化页面。

7.根据权利要求6所述的菜单显示方法，其特征在于，还包括：

当用户点击菜单目录时，若所述菜单目录为展开状态，则隐藏所述菜单目录下的所有菜单链接并将所述菜单目录置为收缩状态；

若所述菜单目录为所述收缩状态，则显示所述菜单目录下的所有所述菜单链接并将所述菜单目录置为展开状态；

当所述用户点击所述菜单链接时，收起其余的所述菜单目录并取消所有所述菜单链接的激活状态；

将所述用户点击的所述菜单链接激活，并将对应的路由信息推送至堆栈中；

根据所述用户点击的所述菜单链接关联的所述组件信息刷新当前页面。

8.根据权利要求6所述的菜单显示方法，其特征在于，还包括：

通过面包屑导航监听当前页面和路由信息。

9.根据权利要求6所述的菜单显示方法，其特征在于，还包括：

获取所述用户的个性化设置；

根据所述个性化设置改变当前页面中所述菜单的显示样式。

10.一种菜单显示装置，其特征在于，应用于服务端，包括：

第一接收模块，用于接收浏览器端发起的页面请求；

获取模块，用于获取菜单数据与路由配置文件；其中，所述菜单数据中包含多个菜单的菜单信息，各菜单的嵌套层级与路由名称预先配置；所述路由配置文件中至少包含路径、所述路由名称、组件信息、关联页面名称和嵌套关系的配置信息；

匹配模块，用于将所述菜单数据与所述路由配置文件进行匹配以生成菜单树；

第一渲染模块，用于对所述菜单树进行服务端渲染，以生成HTML文件；

第一发送模块，用于发送所述HTML文件至所述浏览器端，以便于所述浏览器端根据所述HTML文件渲染生成包含所述菜单的可视化页面。

11.一种菜单显示装置，其特征在于，应用于浏览器端，包括：

第二发送模块，用于发送页面请求至服务端，以用于所述服务端获取菜单数据与路由配置文件，将所述菜单数据与所述路由配置文件进行匹配以生成菜单树，对所述菜单树进行服务端渲染以生成HTML文件；

其中，所述菜单数据中包含多个菜单的菜单信息，各菜单的嵌套层级与路由名称预先配置；所述路由配置文件中至少包含路径、所述路由名称、组件信息、关联页面名称和嵌套关系的配置信息；

第二接收模块，用于接收所述HTML文件；

第二渲染模块，用于根据所述HTML文件渲染生成包含所述菜单的可视化页面。

12.一种菜单显示设备，其特征在于，包括：

存储器，用于存储计算机程序；

处理器，用于执行所述计算机程序时实现如权利要求1至9任一项所述的菜单显示方法的步骤。

13.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至9任一项所述的菜单显示方法的步骤。

Images