A menu display method, apparatus, device and medium

Abstract

This application discloses a menu display method, apparatus, device, and medium, relating to the field of web page display. It involves receiving a page request initiated by a browser; obtaining menu data and a routing configuration file; the menu data containing menu information for multiple menus, with the nesting level and route name of each menu pre-configured; matching the menu data with the routing configuration file to generate a menu tree; and server-side rendering of the menu tree to generate an HTML file, which the browser then uses to render a visual page containing the menus. This solution pre-specifies the nesting relationships and route names between menus, thus allowing for unique identification of menu levels through nesting relationships and menu selection status through route names during menu display. Furthermore, server-side rendering reduces the pressure on front-end rendering and improves rendering efficiency.

Description

Technical Field

[0001] This application relates to the field of web page display, and in particular to a menu display method, apparatus, device, and medium. Background Technology

[0002] In backend management systems with rapid functional module iterations, fast-changing business scenarios, and numerous navigation menus, a separate menu module is needed to maintain the navigation menus. Each different functional module has a separate menu item. As business scenarios change, menus can be dynamically added, edited, and deleted. Customized menu navigation can then be achieved by assigning different menu options to each user role. Currently, backend management system menu modules are implemented using a single-page application. Users click on a menu item to select it, then the associated path information is pushed to the browser's routing stack. Finally, the page component matched based on the path information replaces the existing component, simulating a page jump and refresh.

[0003] However, web pages often contain links to other pages. When a link is clicked and the page is redirected, the single-page application's routing model determines the menu's selection by precisely matching the path information associated with the menu with the browser's current routing information. If the redirected page doesn't accurately match the corresponding menu, the interface won't be able to handle the current menu's selection. Furthermore, currently, navigation menu pages are mostly dynamically loaded by the front-end system without dynamic rendering on the back-end. This causes inconsistencies between the requested interface and the front-end-generated interface, resulting in secondary rendering of the front-end interface, wasting back-end resources and increasing the burden on the front-end.

[0004] In view of the above problems, designing a menu display method that can accurately handle the menu selection state and efficiently render the navigation menu page is a problem that urgently needs to be solved by technicians in this field. Summary of the Invention

[0005] The purpose of this application is to provide a menu display method, apparatus, device, and medium that can accurately handle the menu selection state and efficiently render the navigation menu page.

[0006] To address the aforementioned technical problems, this application provides a menu display method applied to a server, comprising:

[0007] Receive page requests initiated by the browser;

[0008] Obtain menu data and route configuration file; wherein, the menu data contains menu information for multiple menus, and the nesting level and route name of each menu are pre-configured; the route configuration file contains at least the path, the route name, component information, associated page name, and nesting relationship configuration information;

[0009] The menu data is matched with the routing configuration file to generate a menu tree;

[0010] The menu tree is rendered on the server to generate an HTML file;

[0011] The HTML file is sent to the browser so that the browser can render and generate a visual page containing the menu based on the HTML file.

[0012] Preferably, the step of matching the menu data with the routing configuration file to generate a menu tree includes:

[0013] Obtain the menu information from the menu data and the configuration information from the routing configuration file;

[0014] Obtain the route name from each of the menu items;

[0015] Match the route name in the menu information with the route name in the route configuration file;

[0016] When a match is successful, the remaining configuration information in the routing configuration file is assigned to the menu information;

[0017] Format the menu data to generate the menu tree.

[0018] Preferably, the server-side rendering of the menu tree includes:

[0019] Obtain user information from the page request;

[0020] Determine whether the user has the menu permissions corresponding to each menu in the menu tree;

[0021] If the user does not have the permission for the menu corresponding to the menu, then the menu is not visible;

[0022] If the user has the menu permission corresponding to the menu, then the menu link of the menu is associated with the component information in the menu information to facilitate server-side rendering.

[0023] Preferably, associating the menu link with the component information in the menu information includes:

[0024] Obtain the menu type of the menu; wherein, the menu type includes menu directory and menu link;

[0025] When the menu type is the menu directory, determine whether the menu link under the menu directory is active;

[0026] If the menu link under the menu directory is activated, then the menu link is associated with the component information and the menu directory is set to an expanded state; otherwise, the menu directory is set to a collapsed state.

[0027] When the menu type is the menu link, determine whether the menu link is active;

[0028] If the menu link is activated, then the menu link is associated with the component information.

[0029] Preferably, determining whether the menu link is active includes:

[0030] Determine whether the current page name is included in the associated page name of the menu link;

[0031] If so, the menu link is activated.

[0032] To address the aforementioned technical problems, this application also provides another menu display method, applied to the browser side, including:

[0033] A page request is sent to the server so that the server can obtain menu data and route configuration file, match the menu data with the route configuration file to generate a menu tree, and render the menu tree on the server to generate an HTML file.

[0034] The menu data includes menu information for multiple menus, with the nesting level and route name of each menu pre-configured; the route configuration file includes at least the path, route name, component information, associated page name, and nesting relationship configuration information.

[0035] Receive the HTML file;

[0036] A visual page containing the menu is generated based on the HTML file.

[0037] Preferably, it further includes:

[0038] When a user clicks on a menu item, if the menu item is in an expanded state, then all menu links under the menu item are hidden and the menu item is set to a collapsed state.

[0039] If the menu directory is in a collapsed state, then all the menu links under the menu directory are displayed and the menu directory is set to an expanded state;

[0040] When the user clicks the menu link, collapse the rest of the menu items and deactivate all the menu links;

[0041] The menu link clicked by the user is activated, and the corresponding routing information is pushed into the stack;

[0042] The current page is refreshed based on the component information associated with the menu link clicked by the user.

[0043] Preferably, it further includes:

[0044] Use breadcrumb navigation to listen for information on the current page and routes.

[0045] Preferably, it further includes:

[0046] Obtain the user's personalized settings;

[0047] The display style of the menu on the current page can be changed according to the personalized settings.

[0048] To address the aforementioned technical problems, this application also provides a menu display device, applied to a server, comprising:

[0049] The first receiving module is used to receive page requests initiated by the browser.

[0050] The acquisition module is used to acquire menu data and route configuration files; wherein, the menu data contains menu information of multiple menus, and the nesting level and route name of each menu are pre-configured; the route configuration file contains at least the path, the route name, component information, associated page name, and nesting relationship configuration information;

[0051] A matching module is used to match the menu data with the routing configuration file to generate a menu tree;

[0052] The first rendering module is used to perform server-side rendering of the menu tree to generate an HTML file;

[0053] The first sending module is used to send the HTML file to the browser so that the browser can render and generate a visual page containing the menu based on the HTML file.

[0054] To address the aforementioned technical problems, this application also provides another menu display device, applied to a browser, comprising:

[0055] The second sending module is used to send a page request to the server so that the server can obtain menu data and routing configuration file, match the menu data with the routing configuration file to generate a menu tree, and render the menu tree on the server to generate an HTML file.

[0056] The menu data includes menu information for multiple menus, with the nesting level and route name of each menu pre-configured; the route configuration file includes at least the path, route name, component information, associated page name, and nesting relationship configuration information.

[0057] The second receiving module is used to receive the HTML file;

[0058] The second rendering module is used to render and generate a visual page containing the menu based on the HTML file.

[0059] To address the aforementioned technical problems, this application also provides a menu display device, comprising:

[0060] Memory, used to store computer programs;

[0061] A processor is used to implement the steps of the menu display method described above when executing the computer program.

[0062] To address the aforementioned technical problems, this application also provides a computer-readable storage medium storing a computer program, which, when executed by a processor, implements the steps of the menu display method described above.

[0063] The menu display method provided in this application receives a page request initiated by the browser; obtains menu data and a route configuration file; wherein the menu data contains menu information for multiple menus, and the nesting level and route name of each menu are pre-configured; the route configuration file contains at least path, route name, component information, associated page name, and nesting relationship configuration information; the menu data is matched with the route configuration file to generate a menu tree; the menu tree is server-side rendered to generate an HTML file; and the HTML file is sent to the browser so that the browser can render and generate a visual page containing the menu based on the HTML file. Therefore, the above solution pre-specifies the nesting relationship and route name between menus when creating menus or pages. Thus, when displaying menus, the nesting relationship can uniquely identify the association between menu levels, and the route name can confirm the selected state of the menu, achieving accurate handling of the menu selection state. Furthermore, the server-side rendering method, acting as the backend rendering, ensures the consistency between the requested page and the frontend-generated page, reducing the pressure on frontend rendering and improving rendering efficiency.

[0064] In addition, embodiments of this application also provide a menu display device, an apparatus, and a computer-readable storage medium, with the same effect as above. Attached Figure Description

[0065] To more clearly illustrate the embodiments of this application, the accompanying drawings used in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0066] Figure 1 A flowchart illustrating a menu display method provided in this application embodiment;

[0067] Figure 2 A flowchart illustrating another menu display method provided in this application embodiment;

[0068] Figure 3 A schematic diagram of a menu display device provided in an embodiment of this application;

[0069] Figure 4 A schematic diagram of another menu display device provided in the embodiments of this application;

[0070] Figure 5 This is a structural diagram of a menu display device provided in an embodiment of this application. Detailed Implementation

[0071] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those of ordinary skill in the art without creative effort are within the protection scope of this application.

[0072] The core of this application is to provide a menu display method, device, equipment, and medium.

[0073] To enable those skilled in the art to better understand the present application, the present application will be further described in detail below with reference to the accompanying drawings and specific embodiments.

[0074] Currently, menu modules in backend management systems are implemented using a single-page application (SPA). Users click on a menu item to select it, then the associated path information is pushed to the browser's routing stack. Finally, the page component matched to the path information replaces the existing component, simulating a page jump and refresh. However, other page jump links often exist within the page. When a link is clicked to redirect, the single-page routing model relies on precise matching of the menu's associated path information with the browser's current routing information to select the menu. If the redirected page doesn't precisely match the corresponding menu item, the interface cannot handle the current menu selection. Furthermore, existing navigation menu technologies often rely on dynamic loading by the frontend system, without dynamic rendering of the backend page. This results in inconsistencies between the requested interface and the frontend-generated interface, leading to secondary rendering of the frontend interface, wasting backend resources and increasing frontend load. Therefore, this application provides a menu display method. Figure 1 A flowchart illustrating a menu display method provided in an embodiment of this application. The method is applied to a server, such as... Figure 1 As shown, it includes:

[0075] S10: Receive page requests initiated by the browser.

[0076] It is understood that the menu display method provided in this embodiment can be applied to various backend management scenarios, such as business management, satellite management or other management scenarios. This embodiment does not limit the application scenarios of the menu display method provided in this embodiment, but depends on the specific implementation situation.

[0077] In practice, when a user clicks the menu, the server first receives a page request initiated by the user in the browser. This page request contains user information and permissions. Furthermore, after receiving the page request, the server retrieves the stored menu data and other relevant data.

[0078] S11: Obtain menu data and route configuration file.

[0079] The menu data contains menu information for multiple menus, with the nesting level and route name of each menu pre-configured; the route configuration file contains at least the path, route name, component information, associated page name, and nesting relationship configuration information.

[0080] Specifically, the server retrieves menu data and route configuration files. These menu data and route configuration files are system files created and written during the development phase of the backend management system. The route configuration file, written during development, includes at least the path, route name, component information, associated page names, and nesting information. After configuration, the route configuration file is packaged and stored in the frontend page files.

[0081] Furthermore, the menu data contains information for multiple menus. When creating menu information, it must include at least the menu name, menu permissions, route name, parent component, menu type, external link information, icon, component information, sorting, and menu status. Specifically, the menu name is used for user access when the menu is displayed; menu permissions represent the permissions required to use the menu, and the corresponding menu information can only be displayed when the user has the necessary permissions; the route name is used to match the route name in the route configuration file to confirm the menu's selection status, and simultaneously loads the page through the corresponding component information to display the menu; the parent component identifies the nesting relationship between menus; the menu type represents the type of menu, specifically including menu directory, menu link, and permission information; the icon and sorting represent the menu's icon information and position information; the menu status indicates whether the current menu is valid. External link information indicates whether the current link links to other address information; external link information has high priority, and when external link information is completed, other route information will not take effect. When a user clicks on this external link, they will be redirected to the corresponding external link page in the form of opening a new tab.

[0082] During the development phase, after the routing configuration file is written and the menu information is created, the nesting level and permissions of each menu are configured, and different menu permissions are assigned according to different users.

[0083] S12: Match the menu data with the routing configuration file to generate a menu tree.

[0084] Furthermore, the obtained menu data is matched with the route configuration file to generate menu data, which is then used for front-end parsing and Document Object Model (DOM) rendering.

[0085] The DOM is a standard programming interface recommended by the W3C for processing Extensible Markup Language (EXPLE). It is a platform- and language-independent application programming interface (API) that allows dynamic access to programs and scripts, updating their content, structure, and style of WWW documents. Documents can be further processed, and the results can be added to the current page. The DOM is a tree-based API that requires the entire document to be represented in memory during processing. In this embodiment, the menu tree is the DOM tree. The DOM specification does not impose any restrictions on the document representation method; it is simply one of many common document structures. The basic elements constituting the DOM structure are nodes, and the document structure is composed of hierarchical nodes. The concept of a node in the DOM model is broad; for example, the entire document is a single node, called a document node. In addition, there are element nodes, attribute nodes, comment nodes, etc. Therefore, the DOM tree is a tree-like data structure organized with the HTML Document as the root node and the remaining nodes as child nodes.

[0086] It should be noted that this embodiment does not impose restrictions on the specific process of generating the menu tree, and it depends on the specific implementation.

[0087] S13: Server-side rendering of the menu tree to generate an HTML file.

[0088] It's important to note that Server-Side Rendering (SSR) refers to a page processing technology where the server-side completes the HTML structure assembly of the page, sends it to the browser, and then binds its state and events to create a fully interactive page. Through SSR, data retrieval, processing, filtering, and component and route matching are performed on the server, compiling the generated menu tree into an HTML file so that the browser can render a visual menu tree structure for the user.

[0089] Furthermore, this embodiment does not impose any restrictions on the specific process of server-side rendering of the menu tree; it depends on the specific implementation.

[0090] S14: Send the HTML file to the browser so that the browser can render and generate a visual page containing the menu based on the HTML file.

[0091] Finally, the server sends the generated HTML file to the browser, which can then render an interactive visual page containing a menu based on the HTML file.

[0092] In this embodiment, a page request initiated by the browser is received; menu data and a routing configuration file are obtained; the menu data contains menu information for multiple menus, and the nesting level and route name of each menu are pre-configured; the routing configuration file contains at least the path, route name, component information, associated page name, and nesting relationship configuration information; the menu data and the routing configuration file are matched to generate a menu tree; the menu tree is server-side rendered to generate an HTML file; and the HTML file is sent to the browser so that the browser can render a visual page containing the menu based on the HTML file. Therefore, the above solution pre-specifies the nesting relationship and route name between menus when creating menus or pages. Thus, when the menu is displayed, the nesting relationship can uniquely identify the association between menu levels, and the route name can confirm the selected state of the menu, achieving accurate processing of the menu selection state. Furthermore, server-side rendering as the backend ensures the consistency between the requested page and the frontend-generated page, reducing the pressure on frontend rendering and improving rendering efficiency.

[0093] Based on the above embodiments:

[0094] As a preferred embodiment, matching menu data with routing configuration files to generate a menu tree includes:

[0095] Retrieve information about each menu item from the menu data, and retrieve configuration information from the routing configuration file;

[0096] Retrieve the route name from each menu item;

[0097] Match the route name in the menu information with the route name in the route configuration file;

[0098] When a match is successful, the remaining configuration information in the route configuration file is assigned to the menu information;

[0099] Format the menu data to generate a menu tree.

[0100] In a preferred embodiment, the menu tree is generated by matching menu data with the routing configuration file. Specifically, firstly, each menu item in the menu data is retrieved, and the route name in each menu item is matched with the route name in the routing configuration file; a successful match is confirmed when they match. After a successful match, other configuration information from the routing configuration file is assigned to the menu information, that is, the path, component information, associated page name, and nesting relationship configuration information from the routing configuration file are added to the menu information, so that the menu information is associated with page paths, page components, and other information. Further, the menu data is formatted to form a tree-structured menu tree.

[0101] In this embodiment, the system obtains menu information from the menu data and configuration information from the routing configuration file; it also obtains the route name from each menu item; matches the route name in the menu information with the route name in the routing configuration file; when a match is successful, it assigns the remaining configuration information from the routing configuration file to the menu information; and it formats the menu data to generate a menu tree. This process generates the menu tree to facilitate subsequent backend rendering.

[0102] Based on the above embodiments:

[0103] As a preferred embodiment, server-side rendering of the menu tree includes:

[0104] Retrieve user information from page requests;

[0105] Determine whether the user has the menu permissions corresponding to each menu in the menu tree;

[0106] If the user does not have the corresponding menu permission, the menu will not be visible;

[0107] If the user has the corresponding menu permissions, the menu link will be associated with the component information in the menu information to facilitate server-side rendering.

[0108] In practice, each menu item is rendered on the server-side when rendering the menu tree. First, the user's information from the page request is retrieved, including user details and permissions. Then, it's determined whether the user has the permissions for each menu item in the menu tree, specifically whether their current permissions include the permissions for that menu item. If the user lacks the permissions, the menu item will be invisible, and the user will not be able to navigate to the page associated with that link. If the user has the permissions, the menu item will be visible, and the menu link will be associated with the component information in the menu details for server-side rendering.

[0109] In this embodiment, the user's information is obtained from the page request; it is determined whether the user has the corresponding menu permissions for each menu in the menu tree; if the user does not have the corresponding menu permissions, the menu is not visible; if the user has the corresponding menu permissions, the menu link of the menu is associated with the component information in the menu information for server-side rendering, thus realizing the backend rendering of the menu tree.

[0110] Based on the above embodiments:

[0111] As a preferred embodiment, associating menu links with component information in the menu information includes:

[0112] Get the menu type; where menu type includes menu directory and menu link;

[0113] When the menu type is a menu directory, determine whether the menu links under the menu directory are active;

[0114] If the menu links under the menu directory are active, associate the menu links with the component information and set the menu directory to the expanded state; otherwise, set the menu directory to the collapsed state.

[0115] When the menu type is a menu link, determine whether the menu link is active;

[0116] If the menu link is active, associate the menu link with the component information.

[0117] It's important to note that menu directories do not have page display functionality, while menu links do. A menu directory contains multiple menu links, and the relationship between the menu directory and the menu links is reflected through data nesting. Therefore, when associating menu links with component information within the menu information, the menu type must be determined beforehand.

[0118] Understandably, menu types include menu directories and menu links. When the menu type is a menu directory, it checks whether the menu links within the menu directory are active. If the menu links are active, the menu links are associated with the component information, and the menu directory is expanded to display the menu links within it. If the menu links are inactive, the menu directory is collapsed to hide the menu links. When the menu type is a menu link, it checks whether the menu link is active. If the menu link is active, the menu link is associated with the component information.

[0119] Activation of a menu link indicates that the user can click on the menu link, thereby redirecting to the corresponding page. To display the selected state of the menu, it is necessary to ensure that the menu link is activated when associating it with component information. In this embodiment, the specific method for determining whether a menu link is activated is not limited and depends on the specific implementation.

[0120] As a preferred embodiment, determining whether a menu link is active specifically includes:

[0121] Determine whether the current page's name is included in the associated page names of the menu links;

[0122] If so, the menu link is active.

[0123] In practice, it can be determined whether the current page name on the browser is included in the associated page name of the menu link. If it is confirmed that the current page name is included in the associated page name of the menu link, then the menu link is activated.

[0124] Figure 2 A flowchart illustrating another menu display method provided in this application embodiment. The method is applied to the browser side, such as... Figure 2 As shown, it includes:

[0125] S15: Send a page request to the server so that the server can obtain menu data and route configuration files, match the menu data with the route configuration files to generate a menu tree, and render the menu tree on the server to generate an HTML file.

[0126] The menu data contains menu information for multiple menus, with the nesting level and route name of each menu pre-configured; the route configuration file contains at least the path, route name, component information, associated page name, and nesting relationship configuration information.

[0127] S16: Receive HTML file.

[0128] S17: Render a visual page containing a menu based on the HTML file.

[0129] In this embodiment, a page request is sent to the server to obtain menu data and a routing configuration file. The menu data and routing configuration file are matched to generate a menu tree, which is then rendered on the server to generate an HTML file. The menu data contains information about multiple menus, with the nesting level and route name of each menu pre-configured. The routing configuration file contains at least the path, route name, component information, associated page name, and nesting relationship configuration information. The HTML file is received. A visual page containing the menu is generated based on the HTML file. Therefore, the above solution pre-specifies the nesting relationship and route name between menus when creating menus or pages. Thus, when the menu is displayed, the nesting relationship uniquely identifies the association between menu levels, and the route name confirms the selected state of the menu, achieving accurate processing of menu selection. Furthermore, server-side rendering as the backend ensures consistency between the requested page and the frontend-generated page, reducing the pressure on frontend rendering and improving rendering efficiency.

[0130] Based on the above embodiments, in order to improve the user experience of using the menu on the browser, as a preferred embodiment, it further includes:

[0131] When a user clicks on the menu item, if the menu item is in an expanded state, all menu links under the menu item will be hidden and the menu item will be in a collapsed state.

[0132] If the menu directory is collapsed, all menu links under the menu directory will be displayed and the menu directory will be expanded.

[0133] When a user clicks a menu link, collapse the rest of the menu items and deactivate all menu links.

[0134] Activate the menu link clicked by the user and push the corresponding routing information to the stack;

[0135] The current page is refreshed based on the component information associated with the menu link clicked by the user.

[0136] In practice, when a user clicks on a menu item, if the menu item is expanded, all menu links within it are hidden, and the menu item itself is collapsed to reveal all its content, allowing the user to view other menu items. If the menu item is collapsed, all menu links within it are displayed, and the menu item itself is expanded for user access.

[0137] Furthermore, when a user clicks a menu link, it means that the user is only accessing that menu link at this time, and will not click on or access other menu links and menu directories. At this time, the remaining menu directories are collapsed and the activation status of all menu links is deactivated. The menu link clicked by the user is activated, and the corresponding routing information is pushed to the browser's routing table stack. Finally, the current page is refreshed according to the component information associated with the menu link clicked by the user, thus realizing the access to the menu link and refreshing the current page at the same time.

[0138] Based on the above embodiments:

[0139] As a preferred embodiment, it also includes:

[0140] Use breadcrumb navigation to listen for information on the current page and routes.

[0141] Breadcrumb navigation is designed to inform users of their current page location, allowing them to quickly return to the previous page. Breadcrumb navigation can be broadly categorized into three types:

[0142] Location-based navigation displays the current page's position within the overall website hierarchy; attribute-based breadcrumb navigation, commonly found on e-commerce websites, displays product attribute categories; and path-based navigation records and displays the web pages a user has visited.

[0143] Breadcrumb navigation helps users understand their current location on the website and its position within the overall site; it helps users understand the website's hierarchical structure, thus improving user experience; it reduces bounce rate, allowing users to see content of interest and encouraging them to stay on the site; it also facilitates search engine indexing, promotes internal link building, and improves search engine ranking.

[0144] In this embodiment, the browser is equipped with a breadcrumb navigation function for secondary display of the menu, which can show the menu hierarchy and reveal hierarchical relationships that do not exist in the menu. The breadcrumbs and the menu are linked; when a link in the breadcrumb is clicked, the current route is changed to the route associated with the breadcrumb, thereby triggering a route listener event, which in turn changes the activation state of the menu links and the expanded state of the menu routes on the current page.

[0145] Based on the above embodiments:

[0146] As a preferred embodiment, it also includes:

[0147] Obtain the user's personalized settings;

[0148] Change the display style of the menu on the current page according to your personalization settings.

[0149] Furthermore, to optimize the user experience, the system menu also supports user customization. Specifically, it acquires the user's personalized settings, which may include settings such as the background color, font size, and mouse cursor style of the navigation and menu bar. The display style of the menu on the current page is changed according to these personalized settings, thus enabling customization of the menu style. In addition, users can also customize the menu item name and other menu content by right-clicking on the menu item; this is not limited in this embodiment and depends on the specific implementation.

[0150] Figure 3 This is a schematic diagram of a menu display device provided in an embodiment of this application. The menu display device is applied to a server, such as... Figure 3 As shown, it includes:

[0151] The first receiving module 10 is used to receive page requests initiated by the browser.

[0152] Module 11 is used to obtain menu data and route configuration files.

[0153] The menu data contains menu information for multiple menus, with the nesting level and route name of each menu pre-configured; the route configuration file contains at least the path, route name, component information, associated page name, and nesting relationship configuration information.

[0154] Matching module 12 is used to match menu data with routing configuration files to generate a menu tree.

[0155] The first rendering module 13 is used to perform server-side rendering of the menu tree to generate HTML files.

[0156] The first sending module 14 is used to send an HTML file to the browser so that the browser can render and generate a visual page containing a menu based on the HTML file.

[0157] Since the embodiments of the apparatus and the embodiments of the method correspond to each other, please refer to the description of the embodiments of the method for the embodiments of the apparatus, which will not be repeated here.

[0158] Figure 4 This is a schematic diagram of another menu display device provided in an embodiment of this application. The menu display device is applied to a browser, such as... Figure 4 As shown, it includes:

[0159] The second sending module 15 is used to send page requests to the server so that the server can obtain menu data and route configuration files, match the menu data with the route configuration files to generate a menu tree, and render the menu tree on the server to generate an HTML file.

[0160] The menu data contains menu information for multiple menus, with the nesting level and route name of each menu pre-configured; the route configuration file contains at least the path, route name, component information, associated page name, and nesting relationship configuration information.

[0161] The second receiving module 16 is used to receive HTML files.

[0162] The second rendering module 17 is used to render and generate a visual page containing a menu based on the HTML file.

[0163] Since the embodiments of the apparatus and the embodiments of the method correspond to each other, please refer to the description of the embodiments of the method for the embodiments of the apparatus, which will not be repeated here.

[0164] Figure 5 A structural diagram of a menu display device provided in an embodiment of this application is shown below. Figure 5 As shown, the menu display device includes:

[0165] Memory 20 is used to store computer programs.

[0166] The processor 21 is used to implement the steps of the menu display method mentioned in the above embodiments when executing a computer program.

[0167] The menu display device provided in this embodiment may include, but is not limited to, smartphones, tablets, laptops, or desktop computers.

[0168] The processor 21 may include one or more processing cores, such as a quad-core processor or an octa-core processor. The processor 21 may be implemented using at least one of the following hardware forms: Digital Signal Processor (DSP), Field-Programmable Gate Array (FPGA), or Programmable Logic Array (PLA). The processor 21 may also include a main processor and a coprocessor. The main processor, also known as the Central Processing Unit (CPU), is used to process data in the wake-up state; the coprocessor is a low-power processor used to process data in the standby state. In some embodiments, the processor 21 may integrate a Graphics Processing Unit (GPU), which is responsible for rendering and drawing the content to be displayed on the screen. In some embodiments, the processor 21 may also include an Artificial Intelligence (AI) processor, which handles computational operations related to machine learning.

[0169] The memory 20 may include one or more computer-readable storage media, which may be non-transitory. The memory 20 may also include high-speed random access memory and non-volatile memory, such as one or more disk storage devices or flash memory devices. In this embodiment, the memory 20 is used to store at least the following computer program 201, which, after being loaded and executed by the processor 21, is capable of implementing the relevant steps of the menu display method disclosed in any of the foregoing embodiments. In addition, the resources stored in the memory 20 may also include an operating system 202 and data 203, and the storage method may be temporary or permanent storage. The operating system 202 may include Windows, Unix, Linux, etc. The data 203 may include, but is not limited to, the data involved in the menu display method.

[0170] In some embodiments, the menu display device may further include a display screen 22, an input / output interface 23, a communication interface 24, a power supply 25, and a communication bus 26.

[0171] Those skilled in the art will understand that Figure 5 The structure shown does not constitute a limitation on the menu display device and may include more or fewer components than illustrated.

[0172] Finally, this application also provides an embodiment corresponding to a computer-readable storage medium. The computer-readable storage medium stores a computer program, which, when executed by a processor, implements the steps described in the above method embodiments (which may be a method corresponding to the server side, a method corresponding to the browser side, or a method corresponding to both the server side and the browser side).

[0173] It is understood that if the methods in the above embodiments are implemented as software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and executes all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0174] The above provides a detailed description of a menu display method, apparatus, device, and medium provided in this application. The various embodiments in the specification are described in a progressive manner, with each embodiment focusing on its differences from other embodiments. Similar or identical parts between embodiments can be referred to interchangeably. For the apparatus disclosed in the embodiments, since it corresponds to the method disclosed in the embodiments, the description is relatively simple; relevant parts can be referred to in the method section. It should be noted that those skilled in the art can make several improvements and modifications to this application without departing from the principles of this application, and these improvements and modifications also fall within the protection scope of the claims of this application.

[0175] It should also be noted that, in this specification, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

Claims

1. A menu display method characterized by comprising: Applied to the server side, comprising: receiving a page request initiated by the browser side; obtaining menu data and route configuration file; wherein the menu data contains menu information of multiple menus, and the nesting level and route name of each menu are pre-configured; the route configuration file contains at least path, route name, component information, associated page name and nesting relationship configuration information; matching the menu data and the route configuration file to generate a menu tree; server-side rendering the menu tree to generate an HTML file; send the HTML file to the browser side, so that the browser side renders the visual page containing the menu according to the HTML file; server-side rendering the menu tree includes: associate the menu link of the menu with the component information in the menu information, the specific process includes: obtaining the menu type of the menu; wherein the menu type includes menu directory and menu link; when the menu type is the menu directory, judge whether the menu link under the menu directory is activated; if the menu link under the menu directory has been activated, associate the menu link with the component information, and set the menu directory to an expanded state, otherwise set the menu directory to a collapsed state; when the menu type is the menu link, judge whether the menu link is activated; if the menu link has been activated, associate the menu link with the component information; the judgment of whether the menu link is activated includes: determine whether the page name of the current page is contained in the associated page name of the menu link; if yes, the menu link has been activated.

2. The menu display method according to claim 1, wherein the matching of the menu data and the route configuration file to generate a menu tree includes: obtain each menu information in the menu data, and obtain the configuration information of the route configuration file; obtain the route name in each menu information; match the route name in the menu information with the route name in the route configuration file; when the matching is successful, assign the remaining configuration information in the route configuration file to the menu information; format the menu data to generate the menu tree.

3. The menu display method according to claim 1, wherein the server-side rendering of the menu tree includes: obtain the information of the user in the page request; determine whether the user has the menu authority corresponding to each menu in the menu tree; if the user does not have the menu authority corresponding to the menu, the menu is invisible; if the user has the menu authority corresponding to the menu, associate the menu link of the menu with the component information in the menu information for server-side rendering.

4. A menu display method characterized by comprising: applied to the browser side, comprising: The page request is sent to the server, so that the server obtains menu data and a routing configuration file, the menu data is matched with the routing configuration file to generate a menu tree, and the menu tree is rendered on the server to generate an HTML file; the server-side rendering of the menu tree comprises: associating a menu link of a menu with component information in menu information, and the specific process comprises: obtaining a menu type of the menu; the menu type comprises a menu directory and a menu link; when the menu type is the menu directory, it is judged whether the menu link under the menu directory is activated; if the menu link under the menu directory has been activated, the menu link is associated with the component information, and the menu directory is set to an expanded state, otherwise, the menu directory is set to a collapsed state; when the menu type is the menu link, it is judged whether the menu link is activated; if the menu link has been activated, the menu link is associated with the component information; the judgment of whether the menu link is activated comprises: judging whether a page name of a current page is contained in an associated page name of the menu link; if yes, the menu link has been activated; The menu data comprises menu information of a plurality of menus, and the nesting level and the routing name of each menu are preconfigured; the routing configuration file comprises at least path, routing name, component information, associated page name and nesting relationship configuration information; The HTML file is received; A visual page comprising the menu is rendered according to the HTML file.

5. The menu display method according to claim 4, wherein Further comprising: When a user clicks a menu directory, if the menu directory is in an expanded state, all menu links under the menu directory are hidden, and the menu directory is set to a collapsed state; If the menu directory is in the collapsed state, all the menu links under the menu directory are displayed, and the menu directory is set to the expanded state; When the user clicks the menu link, the remaining menu directories are closed, and the activation state of all the menu links is cancelled; The menu link clicked by the user is activated, and corresponding routing information is pushed into a stack; The current page is refreshed according to the component information associated with the menu link clicked by the user.

6. The menu display method according to claim 4, wherein Further comprising: The current page and routing information are monitored through breadcrumb navigation.

7. The menu display method according to claim 4, wherein Further comprising: Personalized settings of a user are obtained; The display style of the menu in the current page is changed according to the personalized settings.

8. A menu display device, characterized by comprising: Applied to a server, comprising: A first receiving module configured to receive a page request initiated by a browser; A obtaining module configured to obtain menu data and a routing configuration file; the menu data comprises menu information of a plurality of menus, and the nesting level and the routing name of each menu are preconfigured; the routing configuration file comprises at least path, routing name, component information, associated page name and nesting relationship configuration information; A matching module configured to match the menu data with the routing configuration file to generate a menu tree; A rendering module configured to render the menu tree on the server to generate an HTML file. The first rendering module is configured to perform server-side rendering on the menu tree to generate an HTML file. The first sending module is configured to send the HTML file to the browser end, so that the browser end renders and generates a visual page containing the menu according to the HTML file. The server-side rendering on the menu tree comprises: The menu link of the menu is associated with the component information in the menu information, and the specific process comprises: The menu type of the menu is obtained; wherein the menu type comprises a menu directory and a menu link; When the menu type is the menu directory, it is determined whether the menu link under the menu directory is activated; If the menu link under the menu directory has been activated, the menu link is associated with the component information, and the menu directory is set to an expanded state, otherwise, the menu directory is set to a collapsed state; When the menu type is the menu link, it is determined whether the menu link is activated; If the menu link has been activated, the menu link is associated with the component information. The determination of whether the menu link is activated comprises: It is determined whether the page name of the current page is contained in the associated page name of the menu link; If yes, the menu link has been activated.

9. A menu display device, characterized by comprising: The application is applied to the browser end, and comprises: The second sending module is configured to send a page request to the server end, so that the server end obtains menu data and a routing configuration file, matches the menu data with the routing configuration file to generate a menu tree, performs server-side rendering on the menu tree to generate an HTML file; the server-side rendering on the menu tree comprises: associating a menu link of a menu with component information in menu information, and the specific process comprises: obtaining a menu type of the menu; wherein the menu type comprises a menu directory and a menu link; when the menu type is the menu directory, it is determined whether the menu link under the menu directory is activated; if the menu link under the menu directory has been activated, the menu link is associated with the component information, and the menu directory is set to an expanded state, otherwise, the menu directory is set to a collapsed state; when the menu type is the menu link, it is determined whether the menu link is activated; if the menu link has been activated, the menu link is associated with the component information; the determination of whether the menu link is activated comprises: determining whether the page name of the current page is contained in the associated page name of the menu link; if yes, the menu link has been activated. The menu data comprises menu information of a plurality of menus, and the nesting level and the routing name of each menu are preconfigured; the routing configuration file comprises at least path, routing name, component information, associated page name and nesting relationship configuration information. The second receiving module is configured to receive the HTML file. The second rendering module is configured to render and generate a visual page containing the menu according to the HTML file.

10. A menu display device characterized by comprising: It comprises: The memory is configured to store a computer program. A processor for implementing the steps of the menu display method according to any one of claims 1 to 7 when executing the computer program.

11. A computer readable storage medium, characterized in that, A computer readable storage medium having stored thereon a computer program which, when executed by a processor, implements the steps of the menu display method according to any one of claims 1 to 7.

Images