Navigation switching method and device of product module

Abstract

The invention discloses a navigation switching method and device for a product module, and relates to the technical field of modular navigation switching, and the method comprises the following steps: generating a user permission model according to user information, and generating a navigation bar according to the user permission model; capturing a click event of a user, and initiating a module switching request according to a module corresponding to the navigation item; querying the dependency relationship of the modules after receiving a module switching request, loading the resources of the dependent modules according to the dependency relationship, loading the core resources of the target module after the loading of the resources of the dependent modules is completed, and displaying the basic layout; when the basic layout is displayed, the dynamic data and the secondary resources are loaded in parallel, the page is filled with the core data, and module display is completed. According to the invention, the problems of low module switching efficiency and redundant resource loading in the prior art are effectively solved, and the user experience and resource management are optimized.

Description

Technical Field

[0001] The present invention relates to the technical field of modular navigation switching, and in particular to a navigation switching method and device for a product module. Background Art

[0002] With the development of information technology, the modular design concept in modern software systems has been widely used. Modular design can effectively improve scalability, flexibility and maintainability, which is particularly important in complex enterprise-level applications. Especially in large-scale systems involving multi-user and multi-role management, different functional modules and operation interfaces are usually provided according to the user's permissions. With the diversification and complexity of user needs, how to efficiently and flexibly manage and switch different modules has become an important issue to improve user experience and performance. In this context, the navigation switching function has been widely used. The navigation switching function is not just a simple module switching. It also needs to consider complex issues such as user permissions, module dependencies, resource loading, etc. Especially when dealing with multi-level module structures and multi-role permission allocation, the traditional navigation switching method often seems to be stretched and cannot meet the needs of efficiency and flexibility.

[0003] However, existing navigation switching technologies have some significant shortcomings. First, most traditional navigation switching methods are based on static configuration, ignoring the specific permissions of users and the complex dependencies between modules, which may result in unnecessary resources being loaded when switching modules, wasting bandwidth and computing resources. Secondly, when dealing with module dependencies, the existing technology often adopts a serial loading method, which results in a slow response speed for module switching and a poor user experience. For switching methods with complex permissions and deep module hierarchies, traditional navigation switching methods cannot accurately control the visible modules and operating permissions of different users, which can easily lead to security risks. Therefore, in the existing technology's modular methods with multiple users and multiple permissions, there is an urgent need for a navigation switching method that can dynamically generate a navigation bar, accurately control module access based on permissions, and efficiently load module-dependent resources to improve performance and user experience. Summary of the invention

[0004] In view of the above existing problems, the present invention is proposed.

[0005] Therefore, the present invention provides a navigation switching method for product modules, which is used to solve the problems of redundant resource loading and slow switching speed when switching modules in the prior art.

[0006] In order to solve the above technical problems, the present invention provides the following technical solutions:

[0007] In a first aspect, the present invention provides a navigation switching method for a product module, which includes generating a user authority model according to user information, and generating a navigation bar according to the user authority model; capturing a user's click event, and initiating a module switching request according to the module corresponding to the navigation item; after receiving the module switching request, querying the module dependency, loading the resources of the dependent module according to the dependency, and after the dependent module resources are loaded, loading the core resources of the target module and displaying the basic layout; while displaying the basic layout, loading dynamic data and secondary resources in parallel, filling the core data into the page, and completing the module display.

[0008] As a preferred solution of the navigation switching method of the product module of the present invention, the user information includes user ID, role identification, accessible module list, module hierarchy structure and permission operation scope.

[0009] As a preferred solution of the navigation switching method of the product module of the present invention, wherein: the generating of the user authority model comprises the following specific steps:

[0010] Based on the user ID and role ID, a query request is sent to the database to obtain the list of modules accessible to the user and the operation permissions of each module;

[0011] Based on the different types of module lists accessible to users, the modules are divided into three different hierarchical structures: primary modules, secondary modules, and tertiary modules;

[0012] Based on the module's own configuration, obtain the dependencies between modules;

[0013] According to the different levels and dependencies of modules, the modules are organized into a tree structure, with the first-level module as the root node, the second-level module as the child node, the third-level module mounted under the second-level module, and the module dependencies recorded in each node;

[0014] The obtained list of modules accessible to users, the operation permissions of each module and the tree structure composed of modules are integrated to generate a user permission model.

[0015] As a preferred solution of the navigation switching method of the product module of the present invention, wherein: the navigation bar is generated according to the user authority model, and the specific steps are as follows:

[0016] Generate the front-end navigation bar structure according to the module hierarchy and dependency relationship, generate a top-level navigation button for each first-level module, generate a sub-navigation item for each second-level module, nest it under the corresponding first-level module, and generate a specific operation button for each third-level module, nest it under the second-level module;

[0017] According to the user permission model, set the visibility and accessibility permissions for each navigation item. If the user does not have access permissions, the corresponding navigation item is automatically hidden.

[0018] As a preferred solution of the navigation switching method of the product module of the present invention, the steps of capturing the user's click event and initiating a module switching request according to the module corresponding to the navigation item are as follows:

[0019] The navigation bar captures the user's click events through the event monitoring mechanism;

[0020] After capturing the user click event, extract the module ID corresponding to the specific navigation item clicked by the user from the current click event;

[0021] After extracting the module ID, the access rights of the current module are verified through the user permission model, and based on the user's role identification and permission scope, it is checked whether the user has the right to access the module;

[0022] After the access permission check is passed, check whether the current module depends on other modules;

[0023] If it depends on other modules, recursively parse and verify their validity to generate the dependency loading order;

[0024] If it does not depend on other modules, it will directly enter the core resource loading of the current module;

[0025] After the dependent modules are loaded, a module switching request is initiated to switch to the target module.

[0026] As a preferred solution of the navigation switching method of the product module of the present invention, wherein: after the access permission is verified, it is checked whether the current module depends on other modules. The specific steps are as follows:

[0027] After the permission check is passed, read the dependency field from the configuration file of the current module;

[0028] When the dependency field is empty, it is considered that the current module has no dependencies on other modules;

[0029] When the dependency field is not empty, it is considered that the current module depends on other modules.

[0030] As a preferred solution of the navigation switching method of the product module of the present invention, wherein: after receiving the module switching request, the module dependency is queried, and the resources of the dependent module are loaded according to the dependency relationship. After the dependent module resources are loaded, the core resources of the target module are loaded, and the basic layout is displayed. The specific steps are as follows:

[0031] After receiving the module switching request, the front-end initiates a dependency query request to the back-end through a network request based on the module ID of the target module. After receiving the query request from the front-end, the back-end queries the dependency list of the target module from the database and returns the query result to the front-end.

[0032] After receiving the list of dependent module relationships, the front-end identifies the dependent modules that need to be loaded through the front-end module manager, and adopts an asynchronous loading mechanism based on Promise.all() to load the resources of multiple dependent modules in parallel to reduce loading delays;

[0033] After all dependent module resources are loaded, the front-end first obtains the core resources required by the target module. After the front-end obtains the core resources required by the target module, it initializes the basic layout of the target module, injects the core resources into the basic layout of the target module, and displays the basic layout.

[0034] When displaying the basic layout, Lazy Loading is used to delay the acquisition of non-core resources required by the target module, reducing the initial loading time and further improving the module switching speed.

[0035] As a preferred solution of the navigation switching method of the product module of the present invention, wherein: while the basic layout is displayed, the core data and the secondary resources are loaded in parallel, the core data is filled into the page, and the module display is completed. The specific steps are as follows:

[0036] During the basic layout display process, asynchronous parallel requests for core data are initiated through AJAX, and secondary resources are delayed loading through LazyLoading;

[0037] After all core data and secondary resources are loaded, visual feedback is used to prompt the user that the target module has been switched.

[0038] In a second aspect, the present invention provides a navigation switching device for a product module, comprising a navigation bar generation module, a module switching request module, a resource loading module and a page display module; the navigation bar generation module is used to generate a user authority model according to user information, and generate a navigation bar according to the user authority model; the switching request module is used to capture user click events, and initiate a module switching request according to the module corresponding to the navigation item; the resource loading module is used to query the module dependency after receiving the module switching request, load the resources of the dependent module according to the dependency, and after the dependent module resources are loaded, load the core resources of the target module and display the basic layout; the page display module is used to load dynamic data and secondary resources in parallel while displaying the basic layout, fill the core data into the page, and complete the module display.

[0039] In a third aspect, the present invention provides a computer device comprising a memory and a processor, wherein the memory stores a computer program, wherein: when the computer program is executed by the processor, any step of the navigation switching method of the product module as described in the first aspect of the present invention is implemented.

[0040] In a fourth aspect, the present invention provides a computer-readable storage medium having a computer program stored thereon, wherein: when the computer program is executed by a processor, it implements any step of the navigation switching method of the product module as described in the first aspect of the present invention.

[0041] The beneficial effects of the present invention are as follows: by dynamically generating a navigation bar through a user authority model, accurate navigation control based on user authority is achieved, so that users can only access modules for which they have authority, thereby improving security and flexibility. At the same time, by querying the dependency relationship of the module, the required dependent module resources can be intelligently loaded, and core data and secondary resources can be loaded in parallel while displaying the basic layout, significantly improving the speed of module switching and the efficiency of page loading. This method effectively solves the problems of low module switching efficiency and redundant resource loading in the prior art, and optimizes user experience and resource management. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the accompanying drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other accompanying drawings can be obtained based on these accompanying drawings without paying creative work.

[0043] Figure 1 This is a flowchart of the navigation switching method of the product module in Example 1.

[0044] Figure 2 This is a flowchart for generating a user authority model in Example 1. DETAILED DESCRIPTION

[0045] In order to make the above-mentioned objects, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are described in detail below in conjunction with the accompanying drawings.

[0046] In the following description, many specific details are set forth to facilitate a full understanding of the present invention, but the present invention may also be implemented in other ways different from those described herein, and those skilled in the art may make similar generalizations without violating the connotation of the present invention. Therefore, the present invention is not limited to the specific embodiments disclosed below.

[0047] Secondly, the term "one embodiment" or "embodiment" as used herein refers to a specific feature, structure, or characteristic that may be included in at least one implementation of the present invention. The term "in one embodiment" that appears in different places in this specification does not necessarily refer to the same embodiment, nor does it refer to a separate or selective embodiment that is mutually exclusive with other embodiments.

[0048] Example 1, reference Figure 1 and Figure 2 , which is the first embodiment of the present invention, and provides a navigation switching method for a product module, comprising the following steps:

[0049] S1: Generate a user permission model according to user information, and generate a navigation bar according to the user permission model.

[0050] User information includes user ID, role ID, list of accessible modules, module hierarchy and scope of permission operations.

[0051] S1.1: Based on the user ID and role ID, a query request is initiated to the database to obtain a list of modules accessible to the user and the operation permissions of each module.

[0052] Furthermore, a query request is initiated to the backend database through the user ID and role identification. Based on the user's identity information, the database retrieves the access rights that the user has and generates a list of modules that the user can access. At the same time, the database also returns the corresponding operation permission information for each module, clarifying the operations that the user can perform in each module (such as viewing, editing, deleting, etc.). The query results include the module's hierarchical structure and permission scope, and this information is returned to the front end for subsequent generation of the user permission model and navigation bar.

[0053] S1.2: Based on the different types of module lists accessible to users, the modules are divided into three different hierarchical structures: primary modules, secondary modules, and tertiary modules.

[0054] Furthermore, for example, the first-level module usually represents the main functional area, such as "user management" or "order management"; the second-level module is the sub-function under the first-level module, such as "user registration" or "order query"; the third-level module is further refined into specific operation items, such as "add user" or "view order details". This hierarchical structure helps to modularize and hierarchize complex functions, which is convenient for users to navigate and operate. For example, the first-level module usually represents the main functional area, such as "user management" or "order management"; the second-level module is the sub-function under the first-level module, such as "user registration" or "order query"; the third-level module is further refined into specific operation items, such as "add user" or "view order details". This hierarchical structure helps to modularize and hierarchize complex functions, which is convenient for users to navigate and operate. For example, the first-level module usually represents the main functional area, such as "user management" or "order management"; the second-level module is the sub-function under the first-level module, such as "user registration" or "order query"; the third-level module is further refined into specific operation items, such as "add user" or "view order details". This hierarchical structure helps to modularize and layer complex functions, making it easier for users to navigate and operate.

[0055] S1.3: Based on the module’s own configuration, obtain the dependencies between modules.

[0056] Furthermore, the module dependencies are obtained by reading the module's own configuration file or the pre-defined dependency information in the database. Each module's configuration file usually contains a list of other modules it depends on, specifying which other modules or resources the module needs to load and execute normally at runtime. By parsing these configurations, the dependencies and loading order of each module are confirmed in turn to ensure that all necessary dependent modules have been loaded first when the module is switched or loaded, avoiding runtime errors or missing functions.

[0057] It should be noted that dependency specifically refers to the fact that when a module is running or loaded, it needs the functions or resources of other modules to support its normal operation. For example, the "Order Management" module may depend on the "User Management" module, because the processing of the order requires the confirmation of the user's information first. If the "User Management" module is not loaded or initialized, the "Order Management" module cannot run normally.

[0058] S1.4: According to the different levels and dependencies of modules, the modules are organized into a tree structure, with the first-level module as the root node, the second-level module as the child node, the third-level module mounted under the second-level module, and the module dependencies recorded in each node.

[0059] S1.5: Integrate the obtained list of modules accessible to the user, the operation permissions of each module, and the tree structure composed of modules to generate a user permission model.

[0060] Furthermore, the list of user-accessible modules obtained from the database, the operation permissions of each module, and the hierarchy and dependencies of the modules are integrated together to generate a tree-structured user permission model. The model takes the first-level module as the root node, and the second-level and third-level modules are mounted in sequence, which clearly shows the hierarchical relationship and dependency between modules. At the same time, each module node is accompanied by the user's operation permission information to ensure that the user's access scope can be accurately controlled during navigation or function calls. The beneficial effect of the user permission model is that it provides a dynamic and extensible permission management framework to ensure that users can only access modules for which they have permission, thereby improving security, flexibility and maintenance efficiency.

[0061] S1.6: Generate the front-end navigation bar structure based on the module hierarchy and dependencies, generate a top-level navigation button for each first-level module, generate a sub-navigation item for each second-level module, nest it under the corresponding first-level module, and generate a specific operation button for each third-level module, nest it under the second-level module.

[0062] It should be noted that the front-end navigation bar structure is generated according to the module hierarchy and dependency relationship. For example, in an e-commerce management system, "Product Management" as a first-level module will generate a top-level navigation button, "Product Classification" as a second-level module will generate sub-navigation items nested under "Product Management", and "Add Product" as a third-level module will generate specific operation buttons nested under "Product Classification". The significance of this step is that through a clear hierarchical navigation structure, users can intuitively and efficiently find the required functional modules, which improves the user experience while ensuring the scalability and modular management of navigation.

[0063] S1.7: According to the user permission model, set the visibility and accessibility permissions for each navigation item. If the user does not have access permissions, the corresponding navigation item is automatically hidden.

[0064] Furthermore, all navigation items are traversed, and the permission information in the user permission model is checked to determine whether the user has access rights to the corresponding module. If a module is marked as invisible in the permission model, the corresponding navigation item is automatically hidden; if the user has only partial operation permissions, the corresponding function button (such as edit or delete) will be disabled or not displayed. Through this dynamic adjustment, it can ensure that users can only see and operate the modules they have permission for, improving security and user experience.

[0065] S2: Capture the user's click event and initiate a module switching request based on the module corresponding to the navigation item.

[0066] S2.1: The navigation bar captures the user's click events through the event monitoring mechanism.

[0067] It should be noted that the event monitoring mechanism is a front-end programming technology used to monitor user interaction on the interface, such as clicks, hovers, inputs, and other operations. In the navigation bar, the event monitoring mechanism binds a listener to each navigation item (for example, listening to the click event). When the user clicks the navigation item, the listener captures the event and performs corresponding operations, such as navigating to the corresponding module or initiating a module switching request. The monitoring mechanism is usually dynamically bound by programming when the page is loaded, ensuring that each navigation item can respond to the user's click operation in real time, thereby realizing the interactive experience of the page.

[0068] S2.2: After capturing the user click event, extract the module ID corresponding to the specific navigation item clicked by the user from the current click event.

[0069] Furthermore, the module ID corresponding to the navigation item is extracted from the user click event, as follows:

[0070] Bind event listeners:

[0071] When the navigation bar loads, a click event listener is bound to each navigation item. When the user clicks a navigation item, the listener captures the click event and passes an event object (usually called an event object) containing the click information.

[0072] Get the clicked element:

[0073] Once the listener captures the click event, the specific HTML element clicked by the user is obtained through the event.target property. event.target points to the navigation item element that the user clicked.

[0074] Extract module ID:

[0075] Each navigation item HTML element usually contains a unique identifier (module ID) associated with its corresponding module. This ID can be stored in the element's data-* attributes, id attributes, or class attributes. For example, a navigation item may have a data-module-id attribute to store the module ID. The module ID is extracted through event.target.getAttribute('data-module-id').

[0076] Returns the module ID:

[0077] After successfully extracting the module ID, the ID is used in the subsequent module switching logic, such as initiating a module switching request or loading module resources. In this way, the module clicked by the user can be accurately located and the corresponding operation can be performed.

[0078] S2.3: After extracting the module ID, the access rights of the current module are verified through the user permission model, and based on the user's role identification and permission scope, it is checked whether the user has the right to access the module.

[0079] Furthermore, after extracting the module ID, first search for the permission information of the module in the user permission model. The user permission model contains the user's role identification and a list of accessible modules, and records in detail the operation permissions of each module (such as viewing, editing, deleting, etc.). According to the extracted module ID, match the corresponding module entry, and check whether the user has access rights to the module in combination with the user's role identification and permission range. If the user has access rights to the module in the permission model, the module is allowed to continue loading; otherwise, access is denied and a prompt of insufficient permissions may be displayed to ensure the security and accuracy of module access.

[0080] S2.4: After the access permission is verified, check whether the current module depends on other modules.

[0081] If it depends on other modules, it will be recursively parsed and verified for validity to generate the dependency loading order.

[0082] If it does not depend on other modules, it will directly enter the core resource loading of the current module.

[0083] Further, recursively parse and verify its validity:

[0084] When it is found that the current module depends on other modules, each dependent module will be parsed one by one in a recursive manner. The process of recursive parsing is: first read the dependency list of the current module, find all directly dependent modules, and then check whether these modules also have dependencies. If the dependent module has further dependencies, continue to parse in depth until all dependent modules are parsed. Each time a module is parsed, the validity of the module will be verified to ensure that it can be loaded and run normally. This includes checking whether the dependent module exists, whether it has been loaded, whether the version is compatible, etc., to prevent loading invalid or incompatible modules.

[0085] Generate dependency loading order:

[0086] After recursive parsing is completed, a loading order is generated based on the dependencies to ensure that the modules are loaded in the correct order. Specifically, the modules without dependencies are loaded first, and then the modules that depend on the resolved modules are loaded in sequence. In this way, it is ensured that all dependencies of each module have been successfully loaded before loading. This generation of dependency loading order can avoid errors caused by missing dependencies when loading modules, while improving the efficiency and reliability of module loading.

[0087] After the dependent modules are loaded, a module switching request is initiated to switch to the target module.

[0088] After the access permission check is passed, check whether the current module depends on other modules. The specific steps are as follows:

[0089] After the permission check is passed, the dependency field is read from the configuration file of the current module.

[0090] If the dependencies field is empty, it is assumed that the current module has no dependencies on other modules.

[0091] If the dependencies field is not empty, the current module is considered to have dependencies on other modules.

[0092] It should be noted that the dependency field is used in the module configuration to record information about other modules or resources that the module depends on, so as to ensure that the modules it depends on are loaded before loading the module.

[0093] S3: After receiving the module switching request, query the module dependencies, load the resources of the dependent modules according to the dependencies, load the core resources of the target module after the dependent module resources are loaded, and display the basic layout.

[0094] S3.1: After receiving the module switching request, the front end initiates a dependency query request to the back end through a network request based on the module ID of the target module. After receiving the query request from the front end, the back end queries the dependency list of the target module from the database and returns the query result to the front end.

[0095] It should be noted that after receiving the module switching request, the front end first extracts the corresponding module ID according to the navigation item clicked by the user, and sends the module ID to the back end through a network request (such as AJAX or Fetch API), initiating a query request for the dependency relationship. After receiving the request, the back end retrieves the dependency list related to the module ID by querying the module configuration table in the database, including all other modules that the module depends on and their loading order. After the query is completed, the back end packages the retrieved dependency list into response data and returns it to the front end. After receiving the query results, the front end parses the dependency relationship and loads resources according to the order of dependent modules to ensure that the dependencies between modules are correctly handled.

[0096] The dependency list is a record of detailed information about all other modules that a module depends on, including the identification of the dependent module (such as module ID), dependency type (such as hard dependency or optional dependency), loading order, version requirements, etc. This table is used to ensure that when a module is loaded, all necessary dependent modules have been loaded in the correct order to ensure the normal operation of the module.

[0097] S3.2: After the front-end receives the dependency module relationship list, it identifies the dependency modules that need to be loaded through the front-end module manager, and adopts an asynchronous loading mechanism based on Promise.all() to load the resources of multiple dependency modules in parallel at the same time to reduce loading delays.

[0098] Furthermore, after the front end receives the list of dependent module relationships, it first parses the list through the front-end module manager and identifies all dependent modules that need to be loaded one by one. The module manager not only identifies the dependent modules, but also determines the loading priority of each module based on the loading characteristics of the module (such as required dependencies and optional dependencies). To improve loading efficiency, the module manager adopts an asynchronous parallel loading mechanism, initiating multiple loading requests in parallel through Promise.all() instead of loading them one by one in sequence. The resources of each dependent module are loaded in parallel through network asynchronous requests (such as fetch, XMLHttpRequest or dynamic script injection) to ensure that the waiting time is reduced as much as possible. During the loading process, the module manager monitors the loading status of each dependent module to ensure that the resources are successfully acquired and available.

[0099] S3.3: After all dependent module resources are loaded, the front end first obtains the core resources required by the target module. After the front end obtains the core resources required by the target module, it initializes the basic layout of the target module, injects the core resources into the basic layout of the target module, and displays the basic layout;

[0100] Furthermore, after all the resources of the dependent modules are loaded, the front-end module manager starts loading the core resources required by the target module first. Core resources usually include the main functional logic, style files, template structure and other key parts of the module. In order to improve loading efficiency, the loading of core resources also adopts an asynchronous parallel method, and the required JavaScript, CSS, HTML templates and other files are obtained through parallel requests. During the loading process, the module manager monitors the loading status of each resource in real time to ensure that all resources are successfully downloaded and executed correctly. When all core resources are loaded and available, the front-end will immediately initialize the basic layout of the target module and inject the core resources into the basic layout. The functions and data of the dependent modules will also be injected into the layout to ensure that the module is fully presented and works properly on the front-end page.

[0101] It should be noted that the basic layout specifically refers to the initial interface structure and basic UI elements of the target module, including the page frame, navigation bar, content area, placeholders, static text, and basic interactive components. These elements provide framework support for the complete display of the module. Users can see the general layout structure of the module in the basic layout, waiting for further filling and loading of dynamic data and dependent module resources to achieve the final complete functional display.

[0102] S3.4: When displaying the basic layout, lazy loading is used to delay the acquisition of non-core resources required by the target module, thereby reducing the initial loading time and further improving the module switching speed.

[0103] Furthermore, when the basic layout is displayed, the front end delays the loading of non-core resources required by the target module through Lazy Loading, such as pictures, videos, non-critical style files, and third-party libraries. These non-core resources will not block the initial rendering of the page, but will trigger loading when the user scrolls to the relevant area or interacts with the page. The specific process is that the front end uses IntersectionObserver to monitor the visibility of page elements, and only starts loading the corresponding resource files when the placeholders of non-core resources enter the viewport. In this way, the basic layout and core functions of the module can be quickly presented first, reducing the initial loading time, and gradually loading non-critical resources, thereby further improving the speed of module switching and user experience.

[0104] It should be noted that the basis for the division of core resources and non-core resources is specifically: the necessity of resources for page rendering and function realization: if these resources are missing, the page cannot be displayed normally or the user cannot interact with the module, resulting in the inability to realize the core function or serious damage to the user experience. For example, HTML templates are used to build the basic structure of the page to ensure that the layout and content can be displayed correctly; CSS styles are used to define the basic layout and core interactive elements of the page (such as navigation bars and button styles) to ensure the visualization of the page and the basic interactive experience of users; JavaScript code manages the core functional logic of the module, such as form validation, data processing, and user operation feedback; in addition, key API data (such as product details, prices, and inventory) are also one of the core resources, because these data directly determine the content presentation and functional availability of the module.

[0105] The classification of non-core resources is based on the following specific criteria: the resources have little impact on the user's first experience, and their absence will not hinder the performance of the core functions of the page, so they can be loaded when the user scrolls or interacts to reduce the initial page loading time. For example, decorative images and background images can be loaded only when the user scrolls to the relevant area through Lazy Loading technology; non-critical CSS styles (such as animation effects, shadows, or custom fonts) can be loaded lazily because these styles do not affect the basic layout and interactive functions of the page; multimedia resources such as video and audio are usually large in size and can be loaded only when the user actively clicks to play; in addition, third-party tools or plug-ins (such as comment modules, social sharing buttons, and advertising content) can be loaded asynchronously after the core content of the page is loaded to avoid blocking the initial rendering.

[0106] S4: While the basic layout is being displayed, dynamic data and secondary resources are loaded in parallel, the core data is filled into the page, and the module display is completed.

[0107] S4.1: During the basic layout display process, asynchronous parallel requests for core data are initiated through AJAX, and secondary resources are loaded lazily through Lazy Loading.

[0108] Furthermore, during the basic layout display process, asynchronous parallel requests are initiated through AJAX to obtain the core data required by the target module, such as user information, business data and other key content. These requests run in the background and will not block the display of the page. At the same time, the loading of secondary resources, such as pictures, non-critical scripts or style files, is postponed through Lazy Loading technology, and they are only loaded when the user scrolls to the relevant area or needs these resources. This approach ensures that the core functions and content of the page can be presented to the user quickly, reduces the initial loading time, and optimizes the overall performance and user experience.

[0109] S4.2: After all core data and secondary resources are loaded, visual feedback is used to prompt the user that the target module has been switched.

[0110] Specifically, remove the loading animation or progress bar, display the full content of the page, and update the page status, such as the activation status of the toggle button or display a prompt message "Loading completed". These visual feedbacks can not only intuitively tell users that the module is ready, but also improve the user's operation fluency and experience, and avoid users mistakenly thinking that it is still loading.

[0111] The present embodiment also provides a navigation switching device for a product module, comprising: a navigation bar generation module, a module switching request module, a resource loading module and a page display module; the navigation bar generation module is used to generate a user authority model according to user information, and generate a navigation bar according to the user authority model; the switching request module is used to capture the user's click event, and initiate a module switching request according to the module corresponding to the navigation item; the resource loading module is used to query the module dependency after receiving the module switching request, load the resources of the dependent module according to the dependency, and after the dependent module resources are loaded, load the core resources of the target module and display the basic layout; the page display module is used to load dynamic data and secondary resources in parallel while displaying the basic layout, fill the core data into the page, and complete the module display.

[0112] This embodiment also provides a computer device, which is suitable for the navigation switching method of product modules, including: a memory and a processor; the memory is used to store computer executable instructions, and the processor is used to execute computer executable instructions to implement the navigation switching method of product modules proposed in the above embodiment.

[0113] The computer device may be a terminal, and the computer device includes a processor, a memory, a communication interface, a display screen and an input device connected via a system bus. The processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The communication interface of the computer device is used to communicate with an external terminal in a wired or wireless manner, and the wireless manner can be achieved through WIFI, an operator network, NFC (near field communication) or other technologies. The display screen of the computer device may be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer device may be a touch layer covering the display screen, or a key, trackball or touchpad provided on the housing of the computer device, or an external keyboard, touchpad or mouse, etc.

[0114] This embodiment also provides a storage medium on which a computer program is stored. When the program is executed by a processor, the navigation switching method of the product module proposed in the above embodiment is implemented; the storage medium can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (Static Random Access Memory, referred to as SRAM), electrically erasable programmable read-only memory (Electrically Erasable Programmable Read-Only Memory, referred to as EEPROM), erasable programmable read-only memory (Erasable Programmable Read Only Memory, referred to as EPROM), programmable read-only memory (Programmable Red-Only Memory, referred to as PROM), read-only memory (Read-Only Memory, referred to as ROM), magnetic storage, flash memory, magnetic disk or optical disk.

[0115] In summary, the present invention achieves precise navigation control based on user permissions by: generating a user permission model to dynamically generate a navigation bar, so that users can only access modules for which they have permissions, thereby improving security and flexibility. At the same time, by querying the dependencies of the modules, the required dependent module resources can be intelligently loaded, and core data and secondary resources can be loaded in parallel while displaying the basic layout, significantly improving the speed of module switching and the efficiency of page loading. This method effectively solves the problems of low module switching efficiency and redundant resource loading in the prior art, and optimizes user experience and resource management.

[0116] Example 2, referring to Table 1, is the second example of the present invention. To further verify the technical solution of the present invention, experimental simulation data of the navigation switching method of the product module is provided.

[0117] The embodiment compares the performance of the method of the present invention with that of the traditional method. In the experiment, the operation process of multiple users in these two methods was simulated, a navigation bar was generated for each user's authority, and authority control and module loading tests were performed. User information includes user ID, role identification, accessible module list, module hierarchy structure and operation authority of each module. The present invention dynamically generates a navigation bar based on user information, parses module dependencies, and delays the loading of secondary resources through Lazy Loading technology.

[0118] First, the method of the present invention initiates a query request to the database based on the user ID and role identifier, and dynamically generates the user's permission model, including a list of modules accessible to the user, the operation permissions of each module, the hierarchical structure, and the dependencies between modules. This step ensures that the method of the present invention can generate an accurate module navigation bar based on the user's actual permissions.

[0119] Secondly, the modules are divided into primary, secondary and tertiary modules according to their hierarchical structure, and the dependencies of each module are parsed to ensure that the loading order between modules is correct. This step ensures the reliable loading of modules by recursively parsing the dependencies and avoids functional failures due to missing dependencies.

[0120] Next, the navigation bar structure is dynamically generated through the generated user permission model. The first-level module generates the top-level navigation button, the second-level module generates the sub-navigation item, and the third-level module generates the specific operation button. At the same time, the visibility and accessibility of each navigation item are set according to the user's permission model to ensure that users can only see and operate the modules they have permission to.

[0121] Finally, during the module switching process, the user's click event is captured and the user's access rights are verified according to the user permission model. If the verification is passed, the module resources are loaded in the order of dependency, and the secondary resources are delayed by lazy loading technology to optimize the module loading speed. Finally, the user is prompted with visual feedback that the module switching is complete, which improves the user experience and efficiency.

[0122] The traditional method in this experiment uses static configuration to manage user permissions and generate module navigation, which means that the navigation bar and permission control are based on pre-defined fixed configuration files and cannot be dynamically adjusted according to the user's real-time information. This method cannot flexibly handle complex user permission structures and module dependencies, and is prone to problems such as inaccurate permission control and slow module loading. In addition, this method does not support optimization methods such as lazy loading.

[0123] The details are shown in Table 1 below:

[0124] Table 1 Module switching performance test and comparison table

[0125]

[0126] Through the analysis of the data in the above table, it can be clearly seen that the method of the present invention is significantly superior to the traditional method in multiple performance indicators, especially in terms of navigation bar generation time, dependency resolution time, module loading speed and permission control accuracy. The method of the present invention dynamically generates a user permission model, combined with the hierarchical structure and dependency of the modules, and can adjust the display of the navigation bar and the visibility of the functional modules in real time to ensure operational efficiency and security. For example, the navigation bar generation time of the method of the present invention is about 40-50% faster than that of the traditional method, and the module loading speed is optimized through the Lazy Loading technology, while maintaining a 0% error rate in permission control, while the traditional method has multiple permission control errors.

[0127] The product module navigation switching method of the present invention can not only dynamically generate a user permission model, quickly parse module dependencies, and improve the speed of navigation bar generation and module switching, but also accurately control the module access rights of each user to ensure security and reliability. This shows that the present invention not only improves operating efficiency, but also takes into account the flexibility and accuracy of permission management, and effectively solves the shortcomings of traditional methods in dealing with complex permissions and module dependencies.

[0128] It should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention rather than to limit it. Although the present invention has been described in detail with reference to the preferred embodiments, those skilled in the art should understand that the technical solutions of the present invention may be modified or replaced by equivalents without departing from the spirit and scope of the technical solutions of the present invention, which should all be included in the scope of the claims of the present invention.

Claims

1. A navigation switching method for a product module, characterized in that: include, Generate a user permission model based on user information, and generate a navigation bar based on the user permission model; Capture the user's click event and initiate a module switching request based on the module corresponding to the navigation item; After receiving the module switching request, query the module's dependencies, load the dependent module's resources according to the dependencies, load the target module's core resources after the dependent module resources are loaded, and display the basic layout; While the basic layout is being displayed, dynamic data and secondary resources are loaded in parallel, and the core data is filled into the page to complete the module display; The user information includes user ID, role identification, list of accessible modules, module hierarchy and scope of permission operation.

2. The product module navigation switching method according to claim 1, characterized in that: The specific steps of generating the user authority model are as follows: Based on the user ID and role ID, a query request is sent to the database to obtain the list of modules accessible to the user and the operation permissions of each module; Based on the different types of module lists accessible to users, the modules are divided into three different hierarchical structures: primary modules, secondary modules, and tertiary modules; Based on the module's own configuration, obtain the dependencies between modules; According to the different levels and dependencies of modules, the modules are organized into a tree structure, with the first-level module as the root node, the second-level module as the child node, the third-level module mounted under the second-level module, and the module dependencies recorded in each node; The obtained list of modules accessible to users, the operation permissions of each module and the tree structure composed of modules are integrated to generate a user permission model.

3. The product module navigation switching method according to claim 1, characterized in that: The specific steps of generating a navigation bar according to the user authority model are as follows: Generate the front-end navigation bar structure according to the module hierarchy and dependency relationship, generate a top-level navigation button for each first-level module, generate a sub-navigation item for each second-level module, nest it under the corresponding first-level module, and generate a specific operation button for each third-level module, nest it under the second-level module; According to the user permission model, set the visibility and accessibility permissions for each navigation item. If the user does not have access permissions, the corresponding navigation item is automatically hidden.

4. The product module navigation switching method according to claim 1, characterized in that: The capture of the user's click event and initiation of a module switching request according to the module corresponding to the navigation item are as follows: The navigation bar captures the user's click events through the event monitoring mechanism; After capturing the user click event, extract the module ID corresponding to the specific navigation item clicked by the user from the current click event; After extracting the module ID, the access rights of the current module are verified through the user permission model, and based on the user's role identification and permission scope, it is checked whether the user has the right to access the module; After the access permission check is passed, check whether the current module depends on other modules; If it depends on other modules, recursively parse and verify their validity to generate the dependency loading order; If it does not depend on other modules, it will directly enter the core resource loading of the current module; After the dependent modules are loaded, a module switching request is initiated to switch to the target module.

5. The product module navigation switching method according to claim 4, characterized in that: After the access permission check is passed, check whether the current module depends on other modules. The specific steps are as follows: After the permission check is passed, read the dependency field from the configuration file of the current module; When the dependency field is empty, it is considered that the current module has no dependencies on other modules; When the dependency field is not empty, it is considered that the current module depends on other modules.

6. The product module navigation switching method according to claim 1, characterized in that: After receiving the module switching request, the module dependency is queried, and the resources of the dependent module are loaded according to the dependency. After the dependent module resources are loaded, the core resources of the target module are loaded, and the basic layout is displayed. The specific steps are as follows: After receiving the module switching request, the front-end initiates a dependency query request to the back-end through a network request based on the module ID of the target module. After receiving the query request from the front-end, the back-end queries the dependency list of the target module from the database and returns the query result to the front-end. After receiving the list of dependent module relationships, the front-end identifies the dependent modules that need to be loaded through the front-end module manager, and adopts an asynchronous loading mechanism based on Promise.all() to load the resources of multiple dependent modules in parallel to reduce loading delays; After all dependent module resources are loaded, the front-end first obtains the core resources required by the target module. After the front-end obtains the core resources required by the target module, it initializes the basic layout of the target module, injects the core resources into the basic layout of the target module, and displays the basic layout. When displaying the basic layout, Lazy Loading is used to delay the acquisition of non-core resources required by the target module, reducing the initial loading time and further improving the module switching speed.

7. The product module navigation switching method according to claim 1, characterized in that: While the basic layout is being displayed, the core data and secondary resources are loaded in parallel, the core data is filled into the page, and the module display is completed. The specific steps are as follows: During the basic layout display process, asynchronous parallel requests for core data are initiated through AJAX, and secondary resources are delayed loading through LazyLoading; After all core data and secondary resources are loaded, visual feedback is used to prompt the user that the target module has been switched.

8. A navigation switching device for a product module, based on the navigation switching method for a product module according to any one of claims 1 to 7, characterized in that: Including navigation bar generation module, module switching request module, resource loading module and page display module; A navigation bar generation module is used to generate a user authority model according to user information, and generate a navigation bar according to the user authority model; The switching request module is used to capture the user's click event and initiate a module switching request according to the module corresponding to the navigation item; The resource loading module is used to query the module dependencies after receiving the module switching request, load the resources of the dependent modules according to the dependencies, and after the dependent module resources are loaded, load the core resources of the target module and display the basic layout; The page display module is used to load dynamic data and secondary resources in parallel while displaying the basic layout, filling the core data into the page to complete the module display.

9. A computer device comprising a memory and a processor, wherein the memory stores a computer program, wherein: When the processor executes the computer program, the steps of the product module navigation switching method according to any one of claims 1 to 8 are implemented.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the product module navigation switching method according to any one of claims 1 to 8 are implemented.

Images