A page configuration method, a page display method and a computing device

Abstract

This application provides a page configuration method, a page display method, and a computing device, relating to the field of computing device technology. The method includes: obtaining first information from a menu management system; the first information is used to indicate routing information of multiple first pages generated by a backend device for a target system; the first pages are pages corresponding to menu items of the target system; obtaining pre-configured second information; the second information is used to indicate routing information of multiple pre-configured second pages of the target system by a frontend device; the second pages are pages in the target system other than those corresponding to menu items; for each of the multiple second pages, based on the first information and the second information, the second page is determined as a child page of the target first page to generate page configuration information for the target system; the page configuration information of the target system is used to render and generate the frontend page of the target system. These steps improve the flexibility of page configuration.

Description

Technical Field

[0001] This application relates to the field of computing device technology, and in particular to a page configuration method, a page display method, and a computing device. Background Technology

[0002] Currently, the industry typically uses menu management systems to configure routing information for target systems (such as enterprise project management systems) to generate front-end pages. However, some frequently used pages (pages not corresponding to menu items) in the target system have routing information that is not suitable for configuration by a menu management system. Forcing the use of a menu management system for configuration will limit the flexibility of page configuration. Summary of the Invention

[0003] This application provides a page configuration method, a page display method, and a computing device, which can improve the flexibility of page configuration.

[0004] In a first aspect, an embodiment of this application provides a page configuration method, comprising: obtaining first information; the first information being used to indicate routing information of multiple first pages generated by a backend device for a target system; the first page being the page corresponding to a menu item of the target system; obtaining second information; the second information being used to indicate routing information of multiple second pages pre-configured by a frontend device for the target system; the second page being other pages in the target system besides the page corresponding to the menu item; generating a routing tree of the target system based on the first information and the second information; the routing tree being used to indicate the hierarchical structure of multiple pages of the target system, and the routing method between multiple pages; the multiple pages of the target system include multiple first pages and multiple second pages.

[0005] The page configuration method provided in this application allows the front-end device to obtain routing information (first information) of multiple first pages corresponding to menu items, and routing information (second information) of multiple second pages (other than the pages corresponding to menu items) corresponding to non-menu items. For each second page, the front-end device can determine it as a child page of the target first page based on the first and second information, thereby generating page configuration information for the target system. In this way, on the one hand, the above method can simultaneously configure menu item pages and non-menu item pages in the target system, ensuring the functional integrity of the target system. On the other hand, by obtaining information (second information) of non-menu item pages from a different source than that of menu item pages, and then determining the second page as a child page of the target first page, non-menu item pages can be defined as subordinate functions of a menu item page, ensuring that non-menu items do not affect the display of menu item pages, thus improving the flexibility of page configuration.

[0006] In one possible implementation, for each of a plurality of second pages, determining the second page as a child page of a target first page based on first information and second information includes: determining the target first page from the plurality of first pages based on the routing information of the second page; determining the child pages of the target first page based on the routing information of the target first page; merging the routing information of the child pages and the routing information of the second page as a child route of the first target page, thereby determining the second page as a child page of the target first page, wherein the routing information of the child pages is included in the routing information of the target first page. This method provides a specific scheme for generating a routing tree, thereby improving the feasibility of this scheme.

[0007] In another possible implementation, determining the target first page based on the routing information of the second page includes: determining the target first page from the plurality of first pages based on a first parameter included in the routing information of the second page; the first parameter is used to indicate the parent page of the second page during route navigation. Through the first parameter, a hierarchical relationship can be established between the second page and the first page, enabling the combination of menu item pages and non-menu item pages.

[0008] In another possible implementation, obtaining the second information includes: obtaining the user's access permission information; obtaining routing information for a plurality of pre-configured second pages; and filtering the routing information of second pages that match the access permission information from the plurality of second pages to obtain the second information. As can be seen from the above steps, for pages that the user does not have permission to access, the page configuration information will not include the routing information of these pages, thereby preventing users from unauthorized access based on vulnerabilities in static routing.

[0009] In another possible implementation, after generating the routing tree of the target system, the method further includes: when the second page is accessed, generating breadcrumb navigation for the second page based on the routing tree; the breadcrumb navigation is used to indicate how to navigate to the second page within the target system. By generating breadcrumb navigation for the second page based on the routing tree, users can understand the current page's location and return method in real time, improving the user experience.

[0010] In another possible implementation, the method further includes: obtaining the icon of the target menu item; the target menu item being any menu item in the target system; the icon being in Scalable Vector Graphics (SVG) format; adjusting the size and / or color of the target menu item's icon according to the front-end style of the target menu item; and associating the adjusted icon with the target menu item in the page configuration information. Through this method, flexible changes in icon color and size are achieved on the front-end page, overcoming the shortcomings of existing fixed icon styles and improving the user's human-computer interaction experience.

[0011] In another possible implementation, the method further includes: generating breadcrumb navigation for the second page based on the page configuration information; the breadcrumb navigation indicating the navigation method of the second page in the target system; and associating the breadcrumb navigation with the second page in the page configuration information. Through the above steps, a breadcrumb generation method is provided, ensuring the feasibility of this solution.

[0012] In another possible implementation, generating breadcrumb navigation for the second page based on the page configuration information includes: determining a second parameter in the routing information of the second page; the second parameter indicating the parent page of the second page at the business level; determining a first redirection method for the parent page based on the page configuration information; and merging the first redirection method and the identifier of the second page to generate breadcrumb navigation for the second page. Breadcrumb navigation generated in this way allows users to understand the fixed redirection method of the current page within the target system, which helps users quickly understand the hierarchical structure of the target system and improves the user experience.

[0013] In another possible implementation, generating breadcrumb navigation for the second page based on the page configuration information includes: obtaining the previous page of the second page; determining a second redirection method for the previous page based on the page configuration information; merging the second redirection method with the identifier of the second page to generate breadcrumb navigation for the second page. Breadcrumb navigation generated in this way accurately indicates which page the user navigated from to access the second page, making it easier for the user to return to the page before the redirection, thereby improving the user experience.

[0014] Secondly, embodiments of this application provide a page display method applied to a terminal device. The method includes: obtaining page configuration information of a target system; determining the page configuration information according to the page configuration method described in the first aspect; rendering and displaying a front-end page of the target system according to the page configuration information; rendering and displaying controls of at least one second page in response to user operations on menu items in the front-end page; the second page being a sub-page of the page corresponding to the menu item; and rendering and displaying the second page in response to user operations on the second page.

[0015] Thirdly, embodiments of this application provide a page configuration apparatus, which includes one or more functional modules for implementing the page configuration method described in the first aspect above.

[0016] Fourthly, embodiments of this application provide a page display device, which includes one or more functional modules for implementing the page display method described in the second aspect above.

[0017] Fifthly, embodiments of this application provide a computing device including a processor and a memory; the processor is coupled to the memory; the memory is used to store computer instructions, which are loaded and executed by the processor to enable the computing device to implement the methods of the first or second aspect described above.

[0018] Sixthly, embodiments of this application provide a computer-readable storage medium comprising: computer software instructions; when the computer software instructions are executed in a computing device, they cause the computing device to implement the methods of the first or second aspect described above.

[0019] In a seventh aspect, embodiments of this application provide a computer program product that, when run on a computing device, causes the computing device to execute the steps of the methods related to the first or second aspect described above, so as to implement the methods of the first or second aspect described above.

[0020] The beneficial effects of the third to seventh aspects mentioned above can be referred to the corresponding descriptions of the first or second aspects, and will not be repeated here. Attached Figure Description

[0021] Figure 1 This application provides a schematic diagram of the composition of a front-end device according to an embodiment of the present application. Figure 2 A flowchart illustrating a page configuration method provided in an embodiment of this application; Figure 3 A schematic diagram of the interface of a menu management system provided in an embodiment of this application; Figure 4A flowchart illustrating another page configuration method provided in an embodiment of this application; Figure 5 A flowchart illustrating yet another page configuration method provided in an embodiment of this application; Figure 6 A schematic diagram of the interface of a target system provided in an embodiment of this application; Figure 7 A flowchart illustrating yet another page configuration method provided in an embodiment of this application; Figure 8 A flowchart illustrating yet another page configuration method provided in an embodiment of this application; Figure 9 A flowchart illustrating yet another page configuration method provided in an embodiment of this application; Figure 10 A schematic diagram of the interface of another menu management system provided in an embodiment of this application; Figure 11 A schematic diagram illustrating an icon display effect provided in an embodiment of this application; Figure 12 A schematic diagram of a page display process provided for an embodiment of this application; Figure 13 A schematic diagram illustrating a page change as provided in an embodiment of this application; Figure 14 This is a schematic diagram of a breadcrumb navigation display process provided in an embodiment of this application. Detailed Implementation

[0022] 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 skilled in the art without creative effort are within the scope of protection of this application.

[0023] It should be noted that in the embodiments of this application, the words "exemplarily" or "for example" are used to indicate examples, illustrations, or explanations. Any embodiment or design scheme described as "exemplarily" or "for example" in the embodiments of this application should not be construed as being more preferred or advantageous than other embodiments or design schemes. Specifically, the use of the words "exemplarily" or "for example" is intended to present the relevant concepts in a specific manner.

[0024] To facilitate a clear description of the technical solutions of the embodiments of this application, the terms "first" and "second" are used in the embodiments of this application to distinguish the same or similar items with essentially the same function and effect. Those skilled in the art can understand that the terms "first" and "second" are not intended to limit the quantity or execution order.

[0025] The following is a brief explanation of the technical terms used in the embodiments of this application: 1. Router: or front-end routing, is a mechanism used to manage the mapping relationship between uniform resource locators (URLs) and pages. It can listen for changes in the content of the URL and update the page content without refreshing the browser.

[0026] 2. Menu Management System: Used to define, configure, maintain, and control the "menu structure" in a target system (such as a human resources management system). It allows for the configuration and modification of menu items in the target system through visual management, including configuring display permissions for menu items and adjusting the hierarchical structure of menu items. The routing information generated by the menu management system can also be called dynamic routing.

[0027] 3. Breadcrumb navigation: A web page navigation design scheme that displays the current page location and return method through a hierarchical structure.

[0028] This application provides a page configuration method that, by determining the page corresponding to a non-menu item as a child page of the page corresponding to a menu item, not only can the synchronous configuration of the non-menu item page and the menu item page be achieved, but also the non-menu item will not affect the page display of the menu item, thereby improving the flexibility of page configuration.

[0029] In some implementations, the front-end device can obtain routing information (first information) for multiple first pages corresponding to menu items, and routing information (second information) for multiple second pages (other than the pages corresponding to menu items) corresponding to non-menu items. For each second page, the front-end device can determine it as a child page of the target first page based on the first and second information, thereby generating page configuration information for the target system. This approach allows for the simultaneous configuration of menu item pages and non-menu item pages within the target system, ensuring the functional integrity of the system. Furthermore, by obtaining information (second information) for non-menu item pages from a different source than that for menu item pages, and then determining the second page as a child page of the target first page, non-menu item pages can be defined as subordinate functions of a menu item page. This ensures that non-menu items do not affect the display of menu item pages, thereby improving the flexibility of page configuration.

[0030] The embodiments provided in this application will now be described in detail with reference to the accompanying drawings.

[0031] The technical solutions provided in this application can be applied to computing devices, which can be front-end devices, specifically including PDAs, ultra-mobile personal computers (UMPCs), tablets, laptops, netbooks, desktop computers, all-in-one computers, etc. This application does not specifically limit the type of front-end device.

[0032] Figure 1 This is a schematic diagram illustrating the composition of a front-end device provided in an embodiment of this application. Figure 1 As shown, the front-end device may include a processor 101 and a memory 102; the memory 102 stores instructions executable by the processor 101; when the processor 101 is configured to execute instructions, the front-end device executes the page configuration method in the embodiments of this application.

[0033] In some implementations, the front-end device includes a display screen, and the developers of the target system can configure the pages of the target system by operating the display screen.

[0034] In some implementations, the front-end device communicates with a web server. After generating page configuration information for the target system, the front-end device can publish the page configuration information to the web server, allowing users to access the target system through their terminal devices.

[0035] It should be noted that the system architecture and application scenarios described in the embodiments of this application are for the purpose of more clearly illustrating the technical solutions of the embodiments of this application, and do not constitute a limitation on the technical solutions provided in the embodiments of this application. As those skilled in the art will know, with the evolution of system architecture and the emergence of new business scenarios, the technical solutions provided in the embodiments of this application are also applicable to similar technical problems.

[0036] Figure 2 This is a flowchart illustrating a page configuration method provided in an embodiment of this application. For example, the page configuration method provided in this embodiment can be applied to... Figure 1 In the front-end device shown, in other words, it can be accessed through... Figure 1 The front-end device executes the method; specifically, the method can be executed by the processor of the front-end device.

[0037] like Figure 2 As shown, the page configuration method provided in this application embodiment may include the following steps: S201. Obtain first information from the menu management system.

[0038] The first information includes routing information for multiple first pages in the target system. The first page refers to the page corresponding to a menu item in the target system.

[0039] In some implementations, the front-end device can obtain initial information from a menu management system. This menu management system can be deployed on the front-end device or on other devices. Developers can configure the menu items of the target system through the menu management system to generate the initial information. This initial information includes routing information for multiple first pages. The routing information for each first page can include the page name, icon, routing path (used to identify the current page's navigation method in the target system), and its hierarchy. For example, Figure 3 This is a schematic diagram of the interface of a menu management system provided in an embodiment of this application. Developers of the target system can use... Figure 3 The interface shown allows users to adjust the attribute parameters of each first page (page name (menu item), icon, route path, access permissions, etc.) and the hierarchical structure between menu items (such as adjusting "System Announcement" to a sub-menu item of "Home") through a visual interactive interface, thereby generating the first information.

[0040] It should be understood that different users may see different menu pages when logging into the target system. For example, some menu items may be invisible to ordinary users but visible to administrators. Therefore, by configuring access permissions, differentiated configuration of the page content can be achieved.

[0041] S202, Obtain the pre-configured second information.

[0042] The second piece of information includes routing information for multiple second pages in the target system. These second pages are all pages in the target system other than those corresponding to menu items.

[0043] For the target system, in addition to the first page corresponding to the menu items, it also includes other pages besides the menu items. These pages are not triggered by the user actively clicking on the menu items, and therefore are not suitable for configuration through a menu management system. In this embodiment, these pages are pre-configured into the front-end device using static front-end routes (in the form of fixed front-end code). When page configuration is required, the front-end device can obtain these static routes (secondary information) locally.

[0044] In some implementations, developers can refer to the menu data structure configured in the menu management system to develop routing information for multiple second pages. The data structure of the routing information for the second pages can be consistent with that of the routing information for the first page, facilitating the subsequent merging of the first and second information. For example, the routing information may include basic parameters such as: route path (path), route name (componentName) (a unique identifier for the current page's route path), page name (name), and component path (component) (indicating the storage location of page components within the current page). Additionally, the routing information includes a first parameter (e.g., parentRouteName), which indicates the parent page of the second page during route navigation. Specifically, the first parameter indicates the parent page of the second page during route navigation by indicating the parent route of the current page.

[0045] For the second page, although it can be configured using static routes, static routes are not subject to access control, potentially leading to unauthorized access issues. For example, a user may not have access to the target page, but the static route for that page still exists. The user could then access the target page by entering the static route in the browser, thus exceeding their authorized access rights. To address this issue, some implementations, such as... Figure 4 As shown, the above S202 can be specifically implemented as follows: S2021. Obtain the user's access permission information.

[0046] S2022, Obtain routing information for multiple pre-configured second pages.

[0047] S2023. Filter the routing information of the second page that matches the access permission information from multiple second pages to obtain the second information.

[0048] Regarding S2021-S2023 above, the menu management system can be used to configure user access permission information. The front-end device can obtain user access permission information from the menu management system, which indicates the list of pages the user is authorized to access. Additionally, the routing information for the second page includes permission configuration parameters (permissionKey parameters), which characterize which users are allowed access to that second page. The front-end device compares the permissionKey parameter and access permission information for each second page to filter out the second pages that the user can access (i.e., those that meet the access permission information), and obtains the second information based on the routing information of those authorized to access the second pages.

[0049] In this way, the page configuration information generated based on the second information does not contain routing information for pages that the user is not authorized to access, thereby avoiding the problem of unauthorized access by users based on the vulnerability of static routes.

[0050] S203. For each of the multiple second pages, based on the first information and the second information, the second page is determined as a child page of the target first page, so as to generate the page configuration information of the target system.

[0051] The target page is one of multiple first pages; the page configuration information of the target system is used to render and generate the front-end page of the target system.

[0052] In this embodiment, for each second page, the front-end device can determine the second page as a child page of the target first page based on the first and second information, thereby establishing an association between non-menu item pages and menu item pages, and generating complete page configuration information for the target system. Then, the front-end device can publish the page configuration information to a web server, facilitating user access to the target system through the web server.

[0053] In one possible implementation, such as Figure 5 As shown, the above S203 can be specifically implemented as follows: S2031. Based on the routing information of the second page, determine the target first page from multiple first pages.

[0054] Specifically, the target first page is determined from multiple first pages based on the first parameter (e.g., parentRouteName) included in the routing information of the second page. The first parameter indicates the parent page of the second page during route navigation.

[0055] S2032. Based on the routing information of the target first page, determine the child pages of the target first page.

[0056] For example, the routing information of the first page also includes associated child routes, which indicate the child pages of the first page. Here, child pages refer to the child pages at the time of route navigation, or the pages corresponding to the child routes.

[0057] S2033. Merge the routing information of the child page and the routing information of the second page as the child route of the first target page, so as to determine the second page as the child page of the target first page.

[0058] The routing information of child pages is included in the routing information of the target first page.

[0059] If the current second page has the target first page as its parent page, then the second page and the target first page's original child pages are at the same level. Therefore, the routing information of the child page and the second page can be merged into a child route of the first page, thus identifying the second page as a child page of the target first page.

[0060] Similarly, for each second page, the operation of S2033 above is performed to insert each second page into the sub-level of the corresponding menu item in sequence, thereby realizing page configuration.

[0061] In this way, for pages that are not suitable for generation by the menu management system (such as pages not corresponding to menu items), routing information can be obtained through static configuration, and then these pages can be designated as child pages of the menu item pages. This approach fully leverages the advantages of front-end devices in generating routing information, meeting business and project development requirements without affecting the accurate display of menu item pages, ensuring an unaffected user experience. Figure 6 As shown, the menu item "Announcement Details" is not included on the menu page of the target system, but the announcement details page can be accessed normally and displays the specific announcement content to the user.

[0062] In another possible implementation, such as Figure 7 As shown, the above S203 can also be implemented as follows: S701, recursively loop through each first page.

[0063] For each first page, the front-end device sequentially performs the following steps to determine whether a corresponding subordinate second page exists. The currently looping first page can be referred to as the target first page.

[0064] S702. If the first parameter in the target first page matches the first parameter in the second page, obtain the lower-level data of the target first page.

[0065] The front-end device determines whether it matches the target first page based on the value of the first parameter in the second page. If the match is successful, the front-end device retrieves the lower-level data of the target first page (i.e., the routing information of the original child pages of the target first page) from the first information.

[0066] S703, merge the routing information of the second page with the data of the lower level.

[0067] If a second page is successfully matched, it means that the second page is a child page of the first page and belongs to the same level. Therefore, the routing information of the lower-level data and the second page can be merged as a child route of the first page, thus identifying the second page as a child page of the target first page.

[0068] S704, recursively loop through the new first page.

[0069] After the current first page is processed, the front-end device recursively loops to new first pages, repeatedly executing S702-S703 until the recursive loop is completed. That is, after each first page is traversed and processed, the routing information after processing multiple first pages is combined to generate page configuration information.

[0070] It should be noted that there may be a hierarchical relationship between multiple first pages. For example, if first page 'a' is the parent page of first page 'b', it can be represented as: first page 'a' > first page 'b'. After processing first page 'a', first page 'b' can be used as the object of the next recursive loop, repeating the above steps S602-S603. That is, the above process is repeated for the child pages of the first page, traversing each level in the order of parent-child-child-child's child, until all first pages have been traversed.

[0071] Let's illustrate this with a specific example.

[0072] For example, a project management system might include a menu item with the following hierarchical structure: Personal Workbench - System Announcements. When a user clicks on the page corresponding to "System Announcements," they can view multiple system announcements. Generally, clicking on any system announcement will bring up the "Announcement Details" page. However, pages like "Announcement Details" are not suitable as menu items, meaning they are not suitable for configuring routing information through a menu management system (backend device). This is because menu items refer to pages with navigation functionality (users can actively click on the corresponding components on the page to trigger them), while announcement details are passively triggered pages (the project management system's menu page does not directly display the "Announcement Details" menu item, but users can trigger its display by clicking on a link in a system announcement). Forcing such pages to be configured through a menu management system would increase the understanding cost for non-developers and the risk of misoperation. For example, if the project management system's menu items are forcibly set to a hierarchical structure like: Personal Workbench > System Announcements > Announcement Details Page, but in reality, the system doesn't have a menu item like "Announcement Details Page," the specific content of the announcement details page depends on the identifier of a specific announcement. Simply clicking on the announcement details page would cause the system to be unclear about which announcement to display, resulting in an inaccurate, blank menu page, thus affecting the user experience. Therefore, in the page configuration method provided in this application embodiment, "Personal Workbench - System Announcements" is configured through the menu management system, while "Announcement Details" is statically configured. That is, "Announcement Details" is not configured through the menu management system to avoid developers' misunderstandings and affecting the accurate display of menu items. Furthermore, the front-end device can determine "Announcement Details" as a sub-page of "System Announcements," ensuring that the "Announcement Details" page can be redirected normally through the menu item.

[0073] In some scenarios, to enable users to accurately locate the position of the accessed page within the target system, such as... Figure 8 As shown in the embodiments of this application, a method for generating breadcrumb navigation is also provided, that is, the page configuration method provided in the embodiments of this application further includes: S801. Generate the breadcrumb navigation for the second page based on the page configuration information.

[0074] Breadcrumb navigation is used to indicate how the second page is navigated to in the target system, that is, to indicate the current position of the second page and the way to return.

[0075] In one possible implementation, the above S801 can be specifically implemented as follows: Step a1: Determine the second parameter in the routing information of the second page; the second parameter is used to indicate the parent page of the second page at the business level. Step a2: Determine the first redirect method for the parent page based on the page configuration information; Step a3: Merge the first redirect method and the identifier of the second page to generate the breadcrumb navigation of the second page.

[0076] For steps a1-a3 above, the front-end device can determine whether the second parameter (e.g., parentName) is included based on the routing information of the second page. The second parameter indicates the parent page of the second page at the business level. If the second parameter is not included, it means that the second page is the top-level page (e.g., the homepage of the target system), and the name of the second page can be directly used as its corresponding breadcrumb navigation. If the second parameter is included, it means that the second page has a parent page at the business level, and the name of the parent page can be used as the second redirect method, combined with the identifier of the second page (parent first, child second) to generate the breadcrumb navigation of the second page.

[0077] For example, continue to combine Figure 6 To clarify, for the "Announcement Details" page, the routing information indicates that the parent page at the business level is "System Announcements," and the parent page of "System Announcements" is "Personal Workbench." Therefore, as follows... Figure 6 As shown, the generated breadcrumb navigation is "Personal Workbench > System Announcements > Announcement Details".

[0078] The breadcrumb navigation generated in the above manner allows users to understand the fixed navigation method of the current page in the target system, which helps users quickly understand the hierarchical structure of the target system and improves the user experience.

[0079] In another possible implementation, the above S801 can be specifically implemented as follows: Step b1: Get the previous page of the second page; Step b2: Determine the second redirect method for the previous page based on the page configuration information; Step b3: Merge the second jump method and the identifier of the second page to generate the breadcrumb navigation of the second page.

[0080] For steps b1-b3 above, the front-end device is configured with another method for generating breadcrumb navigation: the navigation is generated by concatenating the navigation method of the page preceding the second page (the source page for page navigation) with the identifier of the second page. It should be noted that this method generates dynamic breadcrumb navigation; the specific content of the second navigation method is a variable during page configuration and can be determined based on user actions during actual use.

[0081] For example, if a user clicks on an announcement on the "Message Notifications" page and enters the "Announcement Details" page, the generated breadcrumb navigation will be "Message Notifications > Announcement Details".

[0082] The breadcrumb navigation generated in the above way can accurately indicate which page the user jumped from to access the second page, making it easier for the user to return to the page before the jump through the breadcrumb navigation, thereby improving the user experience.

[0083] It's important to note that for the same page, the parent page indicated by the first parameter in the routing information may not be the same page as the business-level parent page indicated by the second parameter. For example, for the "Announcement Details" page, its parent page during routing is "Personal Workbench," meaning the "Announcement Details" page and the "System Announcement" page are at the same level in terms of routing. This is because the "Announcement Details" page can be accessed in multiple ways (users can open the announcement from any interface in the target system, which will pop up the Personal Workbench and display the announcement details in the pop-up window). If "Announcement Details" is forcibly bound to a sub-page of "System Announcement," it will restrict the user's access method, meaning users must access "Announcement Details" through the "System Announcement" page. This limits the flexibility of the target system development and leads to a poor user experience. However, directly generating breadcrumb navigation according to the routing hierarchy (e.g., generating breadcrumb navigation as: Personal Workbench > System Announcement / (Same Level) Announcement Details) is illogical at the business level. Because for users, when a user opens a new page from the current page, that new page is a child page of the current page (e.g., breadcrumb navigation: Personal Workbench > System Announcements > Announcement Details). Therefore, this application embodiment configures both a first parameter and a second parameter in the routing information. The first parameter ensures the flexibility of the routing, while the second parameter ensures that the display effect of the breadcrumb navigation can conform to the user's usage habits.

[0084] S802. Associate the breadcrumb navigation with the second page in the page configuration information.

[0085] By generating breadcrumb navigation for the second page and linking it to the page configuration information, subsequent terminal devices can simultaneously render and display the corresponding breadcrumb navigation when displaying the second page based on the page configuration information. This allows users to understand their current page location and return method in real time through the breadcrumb navigation, improving the user experience.

[0086] In some scenarios, the industry currently uses menu management systems to configure menu item icons for the target system. However, current solutions all configure menu item icons by uploading images with fixed colors and sizes. This limits the flexibility of the icons, making it difficult to adapt them to user needs and affecting the user's interactive experience.

[0087] Based on this, such as Figure 9 As shown, the page configuration method provided in this application embodiment further includes: S901, Get the icon of the target menu item.

[0088] The target menu item is any menu item in the target system; the icon format is scalable vector graphics (SVG). SVG is a language for describing two-dimensional graphics; in other words, the SVG format generates two-dimensional images in real time through image code.

[0089] In some implementations, developers can upload icons for target menu items through a menu management system. For example, Figure 10 This diagram illustrates a first interface provided in an embodiment of the present application. After an administrator clicks the "Change" control on an icon in the menu management system interface, the first interface is displayed as a pop-up window. The first interface includes an icon upload area where users can upload custom icons for target menu items. The menu management system then saves the icon (specifically, image code) to a preset location. During use, the front-end device retrieves the SVG format icon from the preset location based on the icon's upload path.

[0090] S902. Adjust the size and / or color of the target menu item's icon according to the target menu item's front-end style.

[0091] After the front-end device obtains the icon (image code), it can use the `replace` method to change the unit of the size control parameters (width and height) in the image code from absolute units (px) to relative units (em units). This makes the icon size variable, allowing the terminal device to set the icon size based on the target menu item's size (CSS property `font-size`) when rendering and displaying the target menu item and its icon. Additionally, the `replace` method can be used to replace the color control parameter (`fillcolor`) in the image code from a fixed value to "currentColor". This allows the terminal device to set the icon color based on the target menu item's color (CSS property `color`) when rendering and displaying the target menu item and its icon.

[0092] Additionally, the processed image code is further processed using the v-html or innerHTML tools. v-html or innerHTML are front-end-provided "code-to-object" tools, which allow the front-end device to generate corresponding icons based on the image code for rendering and display on the front end, rather than directly rendering and displaying the image code itself.

[0093] S903. Associate the adjusted icon with the target menu item in the page configuration information.

[0094] The adjusted icon is associated with the target menu item in the routing tree. This allows subsequent terminal devices to render the icon's image code into the DOM tree (which describes the hierarchical structure of page elements) of the page corresponding to the target menu item when displaying it. Consequently, the icon of the target menu item is displayed on the page, and its size and color change according to the front-end style of the target menu item. For example... Figure 11 As shown, during the process of the target system, if the user selects a to-do center, the corresponding icon of the to-do center will be highlighted (selected state). If the user cancels the selection, the icon will be grayed out (unselected state).

[0095] By using the above methods, the color and size of icons on the front-end page can be flexibly changed, which solves the problem of the fixed style of existing icons and improves the user's human-computer interaction experience.

[0096] In the page configuration method provided in this application embodiment, the front-end device can obtain routing information (first information) of multiple first pages corresponding to menu items, and obtain routing information (second information) of multiple second pages (i.e., pages other than those corresponding to menu items) corresponding to non-menu items. For each second page, the front-end device can determine the second page as a child page of the target first page based on the first and second information, thereby generating page configuration information for the target system. In this way, on the one hand, the above method can simultaneously configure menu item pages and non-menu item pages in the target system, ensuring the functional integrity of the target system. On the other hand, by obtaining information (second information) of non-menu item pages from a different source than that of menu item pages, and then determining the second page as a child page of the target first page, the non-menu item pages can be defined as subordinate functions of a certain menu item page, ensuring that non-menu items do not affect the display of menu item pages, thereby improving the flexibility of page configuration.

[0097] Figure 12 This is a schematic flowchart illustrating a page display method provided in an embodiment of this application. For example, the page display method provided in this embodiment can be applied to a terminal device.

[0098] like Figure 12 As shown, the page display methods include: S1201. Obtain the page configuration information of the target system.

[0099] The page configuration information is determined according to the page configuration method described in S201-S203 above.

[0100] In this embodiment of the application, when a user needs to access the target system, they can enter the network address of the Web service through the browser of the terminal device, and then the terminal device sends an access request to the Web server to obtain the page configuration information of the target system.

[0101] S1202. Render and display the front-end page of the target system according to the page configuration information.

[0102] In this embodiment of the application, after the terminal device obtains the page configuration information, it obtains the content to be displayed based on the page routing information included in the page configuration information, such as the menu items included in the page, the icons of the menu items, the components of the menu items, and the specific page content in the menu items, thereby rendering and displaying the front-end page of the target system.

[0103] S1203. In response to the user's operation on the menu items in the front-end page, render and display at least one control of a second page.

[0104] The second page is a sub-page of the page corresponding to the menu item.

[0105] In this embodiment of the application, after a user clicks on a menu item, the corresponding sub-function of the menu item will be displayed, that is, at least one control of a second page, so that the user can further access the page corresponding to the non-menu item.

[0106] S1204. In response to the user's operation on the second page, render and display the second page.

[0107] In this embodiment, the user can click on the controls on the second page. In response to the user's operation, the terminal device renders and displays the second page, allowing the user to view the specific content of the non-menu item page.

[0108] For example, such as Figure 13 As shown, after a user clicks the "System Announcements" menu item, the terminal device displays multiple announcement titles, each corresponding to a space on a second page. Users can further click on a title to display the announcement details for that title.

[0109] In some implementations, when a user accesses the second page, the terminal device can simultaneously render and display the breadcrumb navigation of the second page, as detailed in the following process: Figure 14 As shown.

[0110] 1401. The terminal device obtains relevant information about the currently accessed second page.

[0111] The terminal device can obtain relevant information about the currently accessed second page from the browser, such as the identifier of the second page and the requested address of the second page.

[0112] 1402. Determine whether the request address of the second page includes the identifier of the previous page.

[0113] The terminal device checks whether the requested address includes "fromName=xxx". If it does, it means that the currently accessed second page is redirected from another page, and the terminal device can dynamically generate breadcrumb navigation, i.e., execute S1403. If it does not include it, the terminal device can statically obtain breadcrumb navigation, i.e., execute S1404.

[0114] S1403. Based on the routing information of the previous page, obtain the second redirection method and display breadcrumb navigation.

[0115] The terminal device obtains the routing information of the previous page from the page configuration information and determines the second redirection method of the previous page from the routing information. Then, it concatenates the second redirection method with the identifier of the current second page to generate breadcrumb navigation and displays the breadcrumb navigation.

[0116] S1404. Obtain the static breadcrumb navigation from the routing information on the second page and display the breadcrumb navigation.

[0117] As mentioned earlier, the second page is pre-configured with associated breadcrumb navigation (generated through the aforementioned steps a1-a3). The terminal device can directly obtain the breadcrumb navigation from the routing information and then render and display it.

[0118] As can be seen, the above mainly describes the solutions provided by the embodiments of this application from a methodological perspective. To achieve the above functions, the embodiments of this application provide corresponding hardware structures and / or software modules for executing each function. Those skilled in the art should readily recognize that, in conjunction with the modules and algorithm steps of the various examples described in the embodiments disclosed herein, the embodiments of this application can be implemented in hardware or a combination of hardware and computer software. Whether a function is executed in hardware or by computer software driving hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0119] In an exemplary embodiment, this application also provides a page configuration apparatus. This page configuration apparatus may be the aforementioned front-end device or a processor within the front-end device. The page configuration apparatus may include one or more functional modules for implementing the page configuration method of the above method embodiments.

[0120] In an exemplary embodiment, this application also provides a page display device. The page display device may be the aforementioned terminal device or a processor within the terminal device. The page display device may include one or more functional modules for implementing the page display method of the above method embodiments.

[0121] This application also provides a computer-readable storage medium. All or part of the processes in the above method embodiments can be executed by computer instructions instructing related hardware; for example, the related hardware can be a processor of a computing device. The program instructions can be stored in the above-described computer-readable storage medium, and when executed, they can implement the processes of the above method embodiments. The computer-readable storage medium can be memory. The above-described computer-readable storage medium can also be an external storage device, such as a hard disk, smart media card (SMC), secure digital (SD) card, flash card, etc. Further, the above-described computer-readable storage medium can include both memory and external storage devices. The above-described computer-readable storage medium is used to store the above-described computer program instructions and other programs and data required for the above-described software package translation.

[0122] This application also provides a computer program product comprising a computer program that, when run on a computing device, causes the computing device to perform any of the methods described in the above embodiments.

[0123] Although this application has been described herein in conjunction with various embodiments, those skilled in the art, by reviewing the accompanying drawings, disclosure, and appended claims, will understand and implement other variations of the disclosed embodiments in carrying out the claimed application. In the claims, the word "comprising" does not exclude other components or steps, and "a" or "an" does not exclude multiple instances. A single processor or other unit can implement several functions listed in the claims. While different dependent claims may recite certain measures, this does not mean that these measures cannot be combined to produce good results.

[0124] Although this application has been described in conjunction with specific features and embodiments, it is obvious that various modifications and combinations can be made thereto without departing from the spirit and scope of this application. Accordingly, this specification and drawings are merely exemplary illustrations of this application as defined by the appended claims, and are considered to cover any and all modifications, variations, combinations, or equivalents within the scope of this application. Clearly, those skilled in the art can make various alterations and modifications to this application without departing from the spirit and scope of this application. Thus, if such modifications and modifications of this application fall within the scope of the claims of this application and their equivalents, this application is also intended to include such modifications and modifications.

[0125] The above are merely specific embodiments of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions within the technical scope disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

Claims

1. A page configuration method, characterized in that, Applied to a front-end device, the method includes: Obtain first information from the menu management system; the first information includes routing information for multiple first pages in the target system; the first page is the page corresponding to a menu item in the target system; Obtain pre-configured second information; the second information includes routing information for multiple second pages in the target system; the second pages are other pages in the target system besides the pages corresponding to the menu items; For each of the plurality of second pages, based on the first information and the second information, the second page is determined as a child page of the target first page to generate the page configuration information of the target system; the target page is one of the plurality of first pages; the page configuration information of the target system is used to render and generate the front-end page of the target system.

2. The method according to claim 1, characterized in that, For each of the plurality of second pages, determining the second page as a child page of the target first page based on the first information and the second information includes: Based on the routing information of the second page, the target first page is determined from the plurality of first pages; Based on the routing information of the target first page, determine the child pages of the target first page; The routing information of the child page and the routing information of the second page are merged to form a child route of the first target page, so that the second page is determined as a child page of the target first page, and the routing information of the child page is included in the routing information of the target first page.

3. The method according to claim 2, characterized in that, Determining the target first page based on the routing information of the second page includes: The target first page is determined from the plurality of first pages based on the first parameter included in the routing information of the second page; the first parameter is used to indicate the parent page of the second page during route navigation.

4. The method according to any one of claims 1-3, characterized in that, The acquisition of the pre-configured second information includes: Obtain user access permission information; Retrieve routing information for multiple pre-configured second pages; The second information is obtained by filtering the routing information of the second pages that match the access permission information from the plurality of second pages.

5. The method according to any one of claims 1-4, characterized in that, The method further includes: Obtain the icon of the target menu item; the target menu item is any menu item in the target system; the icon is in scalable vector graphics (SVG) format. Adjust the size and / or color of the icon of the target menu item according to the front-end style of the target menu item; Associate the adjusted icon with the target menu item in the page configuration information.

6. The method according to any one of claims 1-5, characterized in that, The method further includes: The breadcrumb navigation for the second page is generated based on the page configuration information; the breadcrumb navigation is used to indicate the navigation method of the second page in the target system; Associate the breadcrumb navigation with the second page in the page configuration information.

7. The method according to claim 6, characterized in that, Based on the page configuration information, generate the breadcrumb navigation for the second page, including: Determine the second parameter in the routing information of the second page; the second parameter is used to indicate the parent page of the second page at the business level; The first redirect method of the parent page is determined based on the page configuration information; The first redirection method and the identifier of the second page are combined to generate the breadcrumb navigation of the second page.

8. The method according to claim 6, characterized in that, Based on the page configuration information, generate the breadcrumb navigation for the second page, including: Get the previous page of the second page; The second redirect method for the previous page is determined based on the page configuration information. The second redirection method and the identifier of the second page are combined to generate the breadcrumb navigation of the second page.

9. A page display method, characterized in that, Applied to a terminal device, the method includes: Obtain the page configuration information of the target system; the page configuration information is determined according to the page configuration method as described in any one of claims 1-8; Based on the page configuration information, render and display the front-end page of the target system; In response to a user's operation on a menu item in the front-end page, at least one control for a second page is rendered and displayed; the second page is a child page of the page corresponding to the menu item. In response to the user's action on the second page, render and display the second page.

10. A computing device, characterized in that, The computing device includes a processor and a memory; the processor is coupled to the memory. The memory is used to store computer instructions; The computer instructions are loaded and executed by the processor to enable the computing device to implement the page configuration method as described in any one of claims 1-8, or the page display method as described in claim 9.

Images