The unified portal supports low-code rapid docking methods and equipment for various operating systems

Abstract

The present invention discloses a method and device for a unified portal to support low-code rapid docking with various operating systems. The method includes: configuring each sub-application, matching its corresponding page according to the configuration of the sub-application through a main application; adding listening events to the sub-application and its corresponding page through the main application; isolating the JavaScript style of each sub-application; after successfully matching the dynamic page according to the sub-application routing and JavaScript style, displaying a loading page and calling the sub-application resources. If the sub-application resource call is successful, closing the loading page; if the sub-application resource call fails, displaying an abnormal interface.

Description

Technical Field

[0001] The present invention relates to the field of front-end architecture, and in particular to a method and device for a unified portal to support low-code rapid docking with various operating systems. Background Art

[0002] The unified operation portal is referred to as the unified portal. It unifies the login and interface styles of various application systems. The existing integrated unified portal solutions are:

[0003] 1. Integrate the portal's login, menu bar, top bar and other common components;

[0004] 2. Through the load-balancing nginx proxy configuration, nginx is used to proxy various applications to achieve the same domain name, port, and IP.

[0005] However, the existing solutions have the following defects:

[0006] 1. Each docking application needs to reference the component code provided by the unified portal in the code and make adaptation adjustments to dock components such as login, menu bar, and top bar; the utilization rate of the integrated code is low, and the style conflict problem needs to be resolved in terms of style.

[0007] 2. With the existing integration solution, application developers cannot integrate in the local environment and need to integrate in the test environment to succeed, which is not conducive to troubleshooting and has high joint debugging costs.

[0008] 3. Only supports the Vue framework, and components do not correspond to other frameworks. Summary of the invention

[0009] The present invention provides a method and device for a unified portal to support low-code rapid docking with various operating systems, solving the technical problem of...

[0010] The unified portal supports low-code methods for quickly connecting to various operating systems, including:

[0011] Configure each sub-application, and use the main application to match its corresponding page according to the configuration of the sub-application;

[0012] Adding monitoring events for the sub-application and its corresponding page through the main application;

[0013] Isolate the JavaScript styles of each of the sub-applications;

[0014] After the dynamic page is successfully matched according to the sub-application routing and the JavaScript style, a loading page is displayed and the sub-application resources are called. If the sub-application resource call is successful, the loading page is closed. If the sub-application resource call fails, an abnormal interface is displayed.

[0015] In one embodiment of the present invention, the configuration of each sub-application specifically includes: configuring the forwarding of each sub-application through the configurable logic module clb, and synchronously adjusting the routing configuration of the sub-application; matching the corresponding page according to the sub-application routing through the main application, and separately processing the permissions of the sub-application routing; processing the main application related resources; after separately processing the permissions of the sub-application routing, rewriting the jump mode of the micro-front-end framework qiankun routing jump.

[0016] In one embodiment of the present invention, the adding of monitoring events to the sub-application and its corresponding page through the main application specifically includes: adding a registration rule data format initiated by the main application through the main application, and transmitting the registered data to the sub-application; adding global exception monitoring through the main application to monitor abnormal situations during the docking process, service calling process or page loading process.

[0017] In one embodiment of the present invention, the isolation processing of the JavaScript styles of each sub-application specifically includes: adding and setting the original style isolation configuration based on qiankun; adding a unique identifier and style area setting to each sub-application style.

[0018] In one embodiment of the present invention, the method also includes: obtaining the resource address corresponding to the sub-application in the main application configuration table; obtaining resources according to the resource address, and judging whether the resource information is correct according to the resource format of the resource to ensure correct forwarding of the file.

[0019] In one embodiment of the present invention, each sub-application is configured, specifically including: adjusting the program entry file of the sub-application; adding a public path js file public-path.js in the source code src directory, and determining whether it is a qiankun docking application. If so, assigning the base uniform resource locator baseURL of the sub-application to the path path of the packaged webpack file.

[0020] In one embodiment of the present invention, the adjustment of the program entry file of the sub-application specifically includes: mounting the initialization function through qiankun to obtain the container field data in the props of the main application; re-copying a copy of the routing data; assigning the routing data to the route by defining a vue instance; and binding the vue instance to a node.

[0021] In one embodiment of the present invention, each sub-application is configured, specifically including: configuring the foreground environment proxy with a domain that allows cross-domain execution, a method that allows cross-domain execution, and header information that allows cross-domain settings.

[0022] The unified portal supports low-code rapid docking with devices of various operating systems, including:

[0023] at least one processor; and,

[0024] A memory connected to the at least one processor via a bus; wherein,

[0025] The memory stores instructions executable by the at least one processor, and the instructions are executed to implement:

[0026] Configure each sub-application, and use the main application to match its corresponding page according to the configuration of the sub-application;

[0027] Adding monitoring events for the sub-application and its corresponding page through the main application;

[0028] Isolate the JavaScript styles of each of the sub-applications;

[0029] After the dynamic page is successfully matched according to the sub-application routing and the JavaScript style, a loading page is displayed and the sub-application resources are called. If the sub-application resource call is successful, the loading page is closed. If the sub-application resource call fails, an abnormal interface is displayed.

[0030] A non-volatile storage medium stores computer executable instructions, wherein the computer executable instructions are executed by a processor to implement the following steps:

[0031] Configure each sub-application, and use the main application to match its corresponding page according to the configuration of the sub-application;

[0032] Adding monitoring events for the sub-application and its corresponding page through the main application;

[0033] Isolate the JavaScript styles of each of the sub-applications;

[0034] After the dynamic page is successfully matched according to the sub-application routing and the JavaScript style, a loading page is displayed and the sub-application resources are called. If the sub-application resource call is successful, the loading page is closed. If the sub-application resource call fails, an abnormal interface is displayed.

[0035] The present invention provides a method and device for a unified portal to support low-code rapid docking with various operating systems, which at least includes the following beneficial effects:

[0036] 1. It saves a lot of workload for sub-applications: the existing docking scheme is relatively complex and difficult to understand for sub-application developers, and the code volume is large. Applications need to communicate multiple times, and the cost of joint debugging is high. Qiankun's configuration scheme is easy to understand, the configuration content is very simple and easy to understand, and there is no need to find the architecture to configure Nginx.

[0037] 2. Solved the forwarding exception problem caused by incorrect packaging configuration. The existing docking solution deployment needs to consider the incompatibility of the packaging configuration of the main application and the sub-application. Using Qiankun's configuration solution will no longer cause packaging problems. As long as the sub-application can be started normally on its own service and there is no code exception, it can be called normally.

[0038] 3. Solved the compatibility problem of page styles: the existing docking solution may involve code modification of sub-applications, which may cause style conflicts during component reference. Referencing portal components may require modification of the original layout. For example, the header is required to be fixed at the top, and the sub-application generally needs to adjust the layout by itself. Using Qiankun's configuration solution, the sub-application only needs to be initialized and packaged, which will not cause page style conflicts.

[0039] 4. It saves the frequent release process of the main application: the existing docking solution requires the main application to cooperate with the sub-application for upgrade and release, while the Qiankun configuration solution only requires personalized configuration.

[0040] 5. Rewrite the jump method provided by Qiankun to solve the forwarding problem between sub-applications;

[0041] 6. Optimize Qiankun's technology to solve the problem of unsuccessful resource forwarding. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] The drawings described herein are used to provide a further understanding of the present invention and constitute a part of the present invention. The exemplary embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute an improper limitation of the present invention. In the drawings:

[0043] Figure 1 A schematic diagram of the method steps for supporting low-code rapid docking of various operating systems with a unified portal provided by an embodiment of the present invention;

[0044] Figure 2 A configuration function design prototype diagram provided for an embodiment of the present invention;

[0045] Figure 3 A reference diagram of the code of the adjustment program entry file provided by an embodiment of the present invention;

[0046] Figure 4A code reference diagram for adding public-path.js to the src directory provided in an embodiment of the present invention;

[0047] Figure 5 A reference diagram of the vue.config.js configuration code provided by an embodiment of the present invention;

[0048] Figure 6 A reference diagram of the vue.config.js configuration code provided by an embodiment of the present invention;

[0049] Figure 7 A reference diagram of the foreground environment proxy configuration code provided by an embodiment of the present invention;

[0050] Figure 8 A schematic diagram of a system case provided for an embodiment of the present invention;

[0051] Fig. 9 A schematic diagram of a device that supports low-code rapid docking with various operating systems in a unified portal provided in an embodiment of the present invention. DETAILED DESCRIPTION

[0052] In order to make the purpose, technical scheme and advantages of the present invention clearer, the present invention will be described clearly and completely in conjunction with the specific embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0053] It should be noted that it is explicitly and implicitly understood by those of ordinary skill in the art that the embodiments described in the present invention can be combined with other embodiments without conflict. Unless otherwise defined, the technical terms or scientific terms involved in the present invention should be the usual meanings understood by people with ordinary skills in the technical field to which the present invention belongs. The words "one", "a", "a", "the" and the like involved in the present invention do not indicate a quantitative limitation and may represent the singular or plural. The terms "including", "comprising", "having" and any of their variations involved in the present invention are intended to cover non-exclusive inclusions; the terms "first", "second", "third", etc. involved in the present invention are merely to distinguish similar objects and do not represent a specific ordering of objects.

[0054] The present invention proposes a method and device for a unified portal to support low-code rapid docking with various operating systems. The giant stone application is disassembled into several autonomous loosely coupled micro-applications; the front-end plug-in is combined with the middleware of vue-router, and the sub-application configuration integration method is used to realize the technology that supports low-code and high-adaptation rapid docking with various operating systems, and a filtering layer is added to solve the problem of Qiankun's unsuccessful forwarding of individual files, and the jump method routing rules provided by Qiankun are rewritten to solve the problem of network protocol conflicts. The following is a detailed explanation.

[0055] Figure 1 A schematic diagram of the steps of a method for supporting low-code rapid docking of various operating systems with a unified portal provided by an embodiment of the present invention may include the following steps:

[0056] S110: Configure each sub-application, and use the main application to match the corresponding page according to the configuration of the sub-application.

[0057] In one embodiment of the present invention, each sub-application is configured, specifically including: configuring the forwarding of each sub-application through the configurable logic module clb, and synchronously adjusting the routing configuration of the sub-application; matching the corresponding page according to the sub-application routing through the main application, and separately processing the permissions of the sub-application routing; processing the main application related resources; after separately processing the permissions of the sub-application routing, rewriting the jump mode of the micro-front-end framework qiankun routing jump.

[0058] Specifically, by adjusting the subsystem routing, routing anomalies between applications can be handled to prevent conflicts between the main application, sub-application and the built-in routing rules of the front-end microservice Qiankun;

[0059] (1) First, clb configures the forwarding of each sub-application. For example, a business application is forwarded as / cbzx.

[0060] (2) The sub-application needs to adjust the route configuration synchronously. For example, the original route of a business application is / cbzx. In order to avoid conflicts with the qiankun mode (applications are distinguished by baseURL and single-node processing), it is adjusted to / sub / cbzx.

[0061] (3) The main application matches the corresponding page according to the sub-application route. Through the processing of routing permissions, due to the need to be compatible with the existing methods, permissions need to be processed separately. Based on the dynamic sub-application configuration, dynamic routing of sub-application display is realized. For example, the sub-application registration list is processed as a whole and individual sub-applications are integrated (for example, two sub-applications are switched on the same page).

[0062] (4) Processing of main application related resources (js, cs, pictures, etc.). For example, when processing related resources of / sub / cbzx, the processing method is to remove / sub.

[0063] (5) After the first three steps are completed, there is a problem that the page cannot be jumped. Therefore, the main application rewrites the jump method of the qiankun route jump to ensure that all jumps can be normal.

[0064] S120: Adding monitoring events for the sub-application and its corresponding page through the main application.

[0065] In one embodiment of the present invention, a monitoring event for a sub-application and its corresponding page is added through a main application, specifically including: adding a registration rule data format initiated by the main application through the main application, and transmitting the registered data to the sub-application; adding global exception monitoring through the main application to monitor abnormal situations during the docking process, service calling process or page loading process.

[0066] Specifically, add various monitoring events, such as parameter receiving events, exception monitoring events, etc.

[0067] (1) Parameter transmission and reception events: The main application adds the registration rule data format. It must be initiated by the main application to pass the registered data to the sub-application. There are 5 such events in total, 3 for the main application (one registration definition, one reception, and one modification) and 2 for the sub-application (one reception and one modification). This data is shared between the main application and the sub-application.

[0068] (2) Exception monitoring events: The main application adds an exception monitoring function to the global system. When an exception occurs during the docking process, service call process, or page loading process, the main application will give an error prompt.

[0069] S130: Isolate the JavaScript styles of each sub-application.

[0070] In one embodiment of the present invention, the JavaScript styles of each sub-application are isolated, specifically including: adding and setting the original style isolation configuration based on qiankun; adding a unique identifier and style area setting to each sub-application style.

[0071] Specifically, add js style isolation processing to prevent style conflicts.

[0072] (1) Add and set the original style isolation configuration based on qiankun;

[0073] (2) Add a unique identifier and style area settings to each sub-application style. For example, the sub-application adds a qiankunXXXid to the outermost layer of the main application area.

[0074] S140: After successfully matching the dynamic page according to the sub-application route and JavaScript style, display the loading page and call the sub-application resource. If the sub-application resource call is successful, close the loading page. If the sub-application resource call fails, display the abnormal interface.

[0075] Specifically, the sub-application and content rendering parts are processed, and the rendering location processing method is added. After the dynamic page matching successfully loads the sub-application rendering area, a loading is performed before calling the sub-application resource. If successful, the loading page is closed; if failed, an exception page is thrown.

[0076] In one embodiment of the present invention, a resource address corresponding to a sub-application in a main application configuration table is obtained; resources are obtained according to the resource address, and whether the resource information is correct is determined according to the resource format of the resource to ensure correct forwarding of the file.

[0077] Specifically, in response to the problem that Qiankun fails to forward individual files, a filtering layer is added to solve the problem. The specific solution is: use cross-network asynchronous resource fetch to obtain the resource address corresponding to the sub-application in the main application configuration table, and then re-map the js native method to determine the resource information (resource information includes website source code, pictures, documents, icons, etc.) according to the resource format (such as folder, suffix name, etc.), so as to achieve the purpose of correctly forwarding files.

[0078] Improvements have been made to qiankun's network protocol conflict issues and forwarding issues between sub-applications, such as jumping from sub-application A to sub-application B. The improvement plan is to rewrite the routing processing rules (such as push, replace, ensureURL, resolve) and its base path in the jump method provided by qiankun to solve the problem of network protocol conflict.

[0079] The following is the specific code for rewriting routing processing rules:

[0080] (1) Push—Rewriting of jump rules

[0081]

[0082]

[0083] (2) replace-redirect

[0084]

[0085] (3) ensureURL-determine the uniform resource locator

[0086]

[0087]

[0088] (4) resolve-return routing address

[0089]

[0090] In one embodiment of the present invention, each sub-application is configured, specifically including: adjusting the program entry file of the sub-application; adding a public path js file public-path.js in the source code src directory, and determining whether it is a qiankun docking application. If so, assigning the base uniform resource locator baseURL of the sub-application to the path path of the packaged webpack file.

[0091] In one embodiment of the present invention, adjusting the program entry file of the sub-application specifically includes: mounting the initialization function through qiankun to obtain the container field data in the props of the main application; re-copying a copy of the routing data; assigning the routing data to the routing by defining a vue instance; and binding the vue instance to the node.

[0092] In one embodiment of the present invention, each sub-application is configured, specifically including: configuring the foreground environment proxy with a domain that allows cross-domain execution, a method that allows cross-domain execution, and header information that allows cross-domain settings.

[0093] Specifically, Figure 2 The figure shows the configuration function design prototype.

[0094] Sub-application configuration steps:

[0095] Step 1: Run the initial configuration:

[0096] 1. Adjust the program entry file main.js and adjust the code reference Figure 3 .

[0097] (1) The microservice mounts the initialization function and obtains the container field data in the main application props.

[0098] (2) Copy the routing data again.

[0099] (3) Define the Vue instance and assign values ​​to routers, Vuex cache store, internationalization style il8n, and page render.

[0100] (4) Vue instance binding node.

[0101] (5) When running independently: follow up the qiankun status to determine whether it is connected in qiankun mode, call the render function, and run the project.

[0102] (6) Initialization: call the following function.

[0103] (7) First load: load the function for the first time.

[0104] (8) Update function and clear data.

[0105] 2. Add public-path.js to the src directory and implement the code as follows Figure 4 As shown;

[0106] Determine whether it is a Qiankun docking application. If so, assign the sub-application's baseURL to the path of the packaged file.

[0107] Step 2: Packaging configuration:

[0108] Configure in vue.config.js, such as Figure 5 As shown, define the project package name and the format configuration of the resource files in the current project package. Among them, the project package name must be unique and cannot be repeated (it can be system code-baseurl).

[0109] like Figure 6 As shown, add a configuration header. After this configuration is added, cross-domain resources are not intercepted.

[0110] Step 3: Front-end environment proxy configuration:

[0111] In the Nginx.conf file in the front-end environment, such as Figure 7 , add header.

[0112] (1) Here, the domains that are allowed to cross domains are configured. * means that all domains are accepted.

[0113] (2) The method that allows cross-domain execution is configured here;

[0114] (3) Header information that allows cross-domain settings is configured here.

[0115] like Figure 8 The following is a case diagram. After clicking the function menu, only Figure 8 The local refresh page in the box will not be loaded globally.

[0116] The solution provided by the present invention can achieve low-code integration, and ensure that the styles of sub-applications do not interfere with each other and global variables / events do not conflict without changing the core code of the sub-application; it is independent of the technology stack and can support a variety of technology frameworks; it can achieve local refresh of multiple sub-application switching; in response to the shortcomings of qiankun, the filtering layer and jump method are rewritten to solve the problems of unsuccessful resource forwarding and forwarding between sub-applications.

[0117] The above is a method for supporting low-code rapid docking of various operating systems with a unified portal provided by an embodiment of the present invention. Based on the same inventive idea, an embodiment of the present invention also provides a corresponding device for supporting low-code rapid docking of various operating systems with a unified portal, such as Fig. 9 shown.

[0118] This embodiment provides a unified portal that supports low-code rapid docking with various operating system devices, including:

[0119] At least one processor 901; and a memory 902 communicatively connected to the at least one processor 901 via a bus 903; wherein the memory 902 stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor 901 so that the at least one processor 901 can execute:

[0120] Configure each sub-application, and use the main application to match the corresponding page according to the sub-application configuration; add listening events for the sub-application and its corresponding page through the main application; isolate the JavaScript style of each sub-application; after successfully matching the dynamic page according to the sub-application routing and JavaScript style, display the loading page and call the sub-application resources. If the sub-application resource call is successful, close the loading page; if the sub-application resource call fails, display the exception interface.

[0121] Based on the same idea, some embodiments of the present invention also provide a medium corresponding to the above method.

[0122] Some embodiments of the present invention provide a storage medium storing computer executable instructions, wherein the computer executable instructions are executed by a processor to implement the following steps:

[0123] Configure each sub-application, and use the main application to match the corresponding page according to the sub-application configuration; add listening events for the sub-application and its corresponding page through the main application; isolate the JavaScript style of each sub-application; after successfully matching the dynamic page according to the sub-application routing and JavaScript style, display the loading page and call the sub-application resources. If the sub-application resource call is successful, close the loading page; if the sub-application resource call fails, display the exception interface.

[0124] The various embodiments of the present invention are described in a progressive manner, and the same or similar parts between the various embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the device and medium embodiments, since they are basically similar to the method embodiments, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiments.

[0125] The devices and media provided in the embodiments of the present invention correspond one-to-one to the methods, and therefore, the devices and media also have similar beneficial technical effects as the corresponding methods. Since the beneficial technical effects of the methods have been described in detail above, the beneficial technical effects of the devices and media will not be repeated here.

[0126] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity or method including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, commodity or method. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the process, method, commodity or method including the elements.

[0127] The above are only embodiments of the present invention and are not intended to limit the present invention. Although the present invention has been described in detail above with general descriptions and specific embodiments, it is obvious to those skilled in the art that some modifications or improvements can be made on the basis of the present invention. Therefore, these modifications or improvements made on the basis of not departing from the spirit of the present invention all belong to the scope of protection claimed in the present invention.

Claims

1. The unified portal supports low-code rapid docking with various operating systems, which is characterized by: include: Configure each sub-application, and use the main application to match its corresponding page according to the configuration of the sub-application; Adding monitoring events for the sub-application and its corresponding page through the main application; Isolate the JavaScript styles of each of the sub-applications; After the dynamic page is successfully matched according to the sub-application route and the JavaScript style, a loading page is displayed, and the sub-application resource is called. If the sub-application resource call is successful, the loading page is closed. If the sub-application resource call fails, an abnormal interface is displayed; The configuration of each sub-application specifically includes: configuring the forwarding of each sub-application through the configurable logic module clb, and synchronously adjusting the routing configuration of the sub-application; matching the corresponding page according to the sub-application routing through the main application, and processing the permissions of the sub-application routing separately; processing the main application related resources; after processing the permissions of the sub-application routing separately, rewriting the jump mode of the micro front-end framework qiankun routing jump; The adding of monitoring events to the sub-application and its corresponding page through the main application specifically includes: adding a registration rule data format initiated by the main application through the main application, and transmitting the registered data to the sub-application; adding global exception monitoring through the main application to monitor abnormal situations during the docking process, service calling process or page loading process.

2. The method according to claim 1, characterized in that The isolating processing of the JavaScript styles of each of the sub-applications specifically includes: Add the original style isolation configuration based on qiankun; Add a unique identifier and style locale to each sub-application style.

3. The method according to claim 1, characterized in that The method further comprises: Get the resource address corresponding to the sub-application in the main application configuration table; The resource is acquired according to the resource address, and whether the resource information is correct is determined according to the resource format of the resource to ensure that the file is forwarded correctly.

4. The method according to claim 1, characterized in that Configure each sub-application, including: Adjust the program entry file of the sub-application; Add the public path js file public-path.js in the source code src directory to determine whether it is a qiankun docking application. If so, assign the base URL of the sub-application to the path path of the packaged webpack file.

5. The method according to claim 4, characterized in that The program entry file of the adjustment sub-application specifically includes: Use qiankun to mount the initialization function and obtain the container field data in the main application props; Re-copy the routing data; By defining a vue instance, the routing data is assigned to the route; Bind the vue instance to a node.

6. The method according to claim 1, characterized in that Configure each sub-application, including: For the front-end environment proxy, configure the domains that allow cross-domain execution, the methods that allow cross-domain execution, and the header information that allows cross-domain settings.

7. The unified portal supports low-code rapid docking of devices of various operating systems, which is characterized by: include: at least one processor; as well as, A memory connected to the at least one processor via a bus; wherein, The memory stores instructions executable by the at least one processor, and the instructions are executed to implement: Configure each sub-application, and use the main application to match its corresponding page according to the configuration of the sub-application; Adding monitoring events for the sub-application and its corresponding page through the main application; Isolate the JavaScript styles of each of the sub-applications; After the dynamic page is successfully matched according to the sub-application route and the JavaScript style, a loading page is displayed, and the sub-application resource is called. If the sub-application resource call is successful, the loading page is closed. If the sub-application resource call fails, an abnormal interface is displayed; The configuration of each sub-application specifically includes: configuring the forwarding of each sub-application through the configurable logic module clb, and synchronously adjusting the routing configuration of the sub-application; matching the corresponding page according to the sub-application routing through the main application, and processing the permissions of the sub-application routing separately; processing the main application related resources; after processing the permissions of the sub-application routing separately, rewriting the jump mode of the micro front-end framework qiankun routing jump; The adding of monitoring events to the sub-application and its corresponding page through the main application specifically includes: adding a registration rule data format initiated by the main application through the main application, and transmitting the registered data to the sub-application; adding global exception monitoring through the main application to monitor abnormal situations during the docking process, service calling process or page loading process.

8. A non-volatile storage medium storing computer executable instructions, characterized in that: The computer executable instructions are executed by a processor to implement the following steps: Configure each sub-application, and use the main application to match its corresponding page according to the configuration of the sub-application; Adding monitoring events for the sub-application and its corresponding page through the main application; Isolate the JavaScript styles of each of the sub-applications; After the dynamic page is successfully matched according to the sub-application route and the JavaScript style, a loading page is displayed, and the sub-application resource is called. If the sub-application resource call is successful, the loading page is closed. If the sub-application resource call fails, an abnormal interface is displayed; The configuration of each sub-application specifically includes: configuring the forwarding of each sub-application through the configurable logic module clb, and synchronously adjusting the routing configuration of the sub-application; matching the corresponding page according to the sub-application routing through the main application, and processing the permissions of the sub-application routing separately; processing the main application related resources; after processing the permissions of the sub-application routing separately, rewriting the jump mode of the micro front-end framework qiankun routing jump; The adding of monitoring events to the sub-application and its corresponding page through the main application specifically includes: adding a registration rule data format initiated by the main application through the main application, and transmitting the registered data to the sub-application; adding global exception monitoring through the main application to monitor abnormal situations during the docking process, service calling process or page loading process.

Images