Power grid micro-front-end construction method and architecture based on qiankun framework

Abstract

The application provides a power grid micro-front-end construction method and architecture based on a qiankun framework, and the method comprises the following steps: starting a main application of the qiankun micro-front-end framework; registering a global state in the main application and listening to a global state change event; when a sub-application loaded through route matching receives a business request corresponding to another sub-application, triggering the global state change event and transmitting parameters about the business request for calling the another sub-application into the global state change event; after the main application listens to the global state change event, judging whether the another sub-application has been mounted in a hidden container, if not, performing manual mounting; and the another sub-application executes corresponding business functions after obtaining the global state change event from the main application. The application can realize parallel running and cross-sub-application communication of sub-applications in the power grid micro-front-end based on the qiankun framework, and realize business reuse while maintaining the independence of sub-applications.

Description

Technical Field

[0001] This invention relates to the field of power grid business application technology, specifically to a method and architecture for constructing a power grid micro-frontend based on the Qiankun framework. Background Technology

[0002] With the rapid expansion of power grid business modules, their front-end systems face two major challenges: first, the fragmentation of the technology stack due to multi-team development (such as the mixed use of Vue / React); and second, the increasingly complex module coupling problem. Therefore, there is an urgent need to build a front-end framework with technical compatibility and module decoupling capabilities to enable independent development and flexible integration of power grid business modules.

[0003] With the widespread application of Qiankun micro-frontend technology, the power grid front-end system can divide the entire application into a main application and multiple interrelated sub-applications corresponding to various modules. This successfully achieves modular decoupling between the main application and the sub-applications, and each sub-application can be developed and deployed independently. However, this architecture also brings new technical challenges: in traditional monolithic architectures, modules can directly call each other (e.g., module A directly accesses the business details page of module B); while under the Qiankun micro-frontend framework, although the main application and sub-applications can communicate, there is inherent technical isolation between sub-applications, preventing them from communicating. For example, sub-application A cannot call sub-application B. This technical isolation forces developers to copy the business details page code of sub-application B into sub-application A in business reuse scenarios, increasing code redundancy and creating the risk of multiple version maintenance with business iterations, significantly increasing project costs. Summary of the Invention

[0004] The technical problem to be solved by this invention is to provide a method and architecture for constructing a power grid micro-front-end based on the Qiankun framework, which can realize parallel operation of sub-applications and cross-sub-application communication, and achieve service reuse while maintaining the independence of sub-applications.

[0005] To solve the above-mentioned technical problems, the first technical solution adopted by the present invention is as follows:

[0006] The method for constructing a power grid micro-frontend based on the qiankun framework includes:

[0007] Start the main application of the qiankun micro-frontend framework;

[0008] Register a global state in the main application and listen for global state change events;

[0009] When a sub-application loaded via route matching receives a business request from another corresponding sub-application, a global state change event is triggered, and parameters regarding the business request to call the other sub-application are passed into it;

[0010] After the main application listens to the global state change event, it determines whether the other sub-application has been mounted in the hidden container. If not, it performs manual mounting.

[0011] The other sub-application obtains the global state change event from the main application and then executes the corresponding business function.

[0012] Optionally, it also includes:

[0013] After the main application detects a route change, it determines whether the sub-application matching the route is mounted in the hidden container; if so, it unmounts the sub-application from the hidden container and mounts it to the main application container.

[0014] The main application loads the sub-application that matches the route.

[0015] Optionally, it also includes:

[0016] Create the main application under the qiankun micro-frontend framework;

[0017] Register two or more sub-applications under the main application that are matched by the route.

[0018] Optionally, it also includes:

[0019] Each sub-application listens to the global state of the main application through pre-mounted global lifecycle hooks and obtains global state change events of the main application.

[0020] Optionally, after obtaining the global state change event from the main application, the other sub-application executes the corresponding business function, including:

[0021] After obtaining the global state change event, all sub-applications determine whether they are another sub-application based on the parameters they carry.

[0022] If so, then execute the corresponding business function.

[0023] Optionally, the main application is a power grid customer information system; the sub-applications include user sub-applications and billing sub-applications.

[0024] Another technical solution provided by this invention is:

[0025] The power grid micro-front-end architecture based on the Qiankun framework includes a main application and two or more sub-applications registered under the main application through route matching.

[0026] The sub-application is configured to be mounted to the main application container before being loaded via route matching;

[0027] The main application is configured to register a global state and listen for global state change events after startup; and to trigger a global state change event when a sub-application loaded through route matching receives a business request from another sub-application, and to pass in parameters about the business request to call the other sub-application; and to determine whether the other sub-application has been mounted in the hidden container after listening to the global state change event, and to manually mount it if not.

[0028] The other sub-application is configured to execute the corresponding business function after obtaining the global state change event from the main application.

[0029] Optionally, the main application is further configured to, upon detecting a route change, determine whether the route-matching sub-application is mounted in a hidden container; if so, unmount it from the hidden container and mount it to the main application container; and load the route-matching sub-application.

[0030] Optionally, the sub-application is configured to listen to the global state of the main application through a pre-mounted global lifecycle hook and obtain global state change events of the main application.

[0031] The sub-application is specifically configured to, after obtaining the global state change event, determine whether it is another sub-application based on the parameters it carries; if so, it executes the corresponding business function.

[0032] Optionally, the main application is a power grid customer information system; the sub-applications include user sub-applications and billing sub-applications.

[0033] The beneficial effects of this invention are as follows: The power grid micro-frontend construction method and architecture based on the Qiankun framework provided by this invention will trigger a global state change when there are mutual calling requirements between sub-applications, and will pass in specific business request parameters about the target sub-application being called; after the main application, which monitors the global state change in real time, detects it, it will ensure that the target sub-application is currently only mounted on a hidden container and can be isolated from the currently visible sub-applications; so that the target sub-application monitoring the global state of the main application can be called, while ensuring that the interface is displayed normally. In this way, parallel operation of sub-applications and cross-sub-application communication are realized in the power grid micro-frontend based on the Qiankun framework, and business reuse is achieved while maintaining the independence of sub-applications. Attached Figure Description

[0034] Figure 1 A flowchart illustrating the method for constructing a power grid micro-front-end based on the Qiankun framework provided in an embodiment of the present invention;

[0035] Figure 2This is a flowchart illustrating the method for constructing a power grid micro-front-end based on the Qiankun framework, provided for a specific embodiment of the present invention. Detailed Implementation

[0036] To explain in detail the technical principles, specific implementable solutions, possible application scenarios, and achievable objectives and effects of the present invention, exemplary embodiments of the present invention will be described in more detail below with reference to the accompanying drawings. It is understood that the embodiments described herein and the embodiments shown in the accompanying drawings are only used to more clearly illustrate the technical solutions of the present invention, and are therefore only examples intended to explain the present invention, and should not be construed as limiting the present invention. It should be understood that the present invention can be implemented in various forms and should not be limited to the embodiments set forth herein.

[0037] This invention utilizes global state change monitoring to forward inter-sub-application call requests to the target sub-application via the main application; it uses a main application container and a hidden container to isolate and mount the currently visible sub-application from the target sub-application; the target sub-application mounted in the hidden container executes corresponding operations after obtaining the global state of the main application. This solves the problem that the existing Qiankun micro-frontend framework does not support cross-sub-application communication.

[0038] To better understand the above technical solutions, the following will provide a detailed explanation of the technical solutions in conjunction with the accompanying drawings and specific implementation methods.

[0039] Explanation of technical terms involved in this invention:

[0040] In a Vue project, app-main is the core content area of ​​the application and the main container for rendering dynamic route components. In the qiankun micro-frontend framework, app-main serves as the mounting container for sub-applications. By configuring activeRule, it enables the dynamic loading of sub-applications, which means it is responsible for dynamically rendering the matching business component content according to route changes.

[0041] vite-plugin-qiankun: As a plugin that facilitates the integration of sub-applications into the qiankun micro-frontend framework, it simplifies the integration process of sub-applications into the qiankun micro-frontend framework. In particular, sub-applications integrated using this plugin can adopt different build tools than the main application, achieving a technology stack-independent micro-frontend architecture.

[0042] Main application container: such as the app node. In the micro frontend architecture, the app node serves as the main application container. It is the core DOM node that carries sub-applications and serves as the mounting target for sub-applications. It is responsible for providing independent rendering space for sub-applications. When the route matches the activation rules of the sub-application, qiankun will inject the HTML, JS, and CSS of the sub-application into this container to achieve dynamic loading.

[0043] Hidden containers: such as the appHide node. In a micro-frontend architecture, the appHide node acts as a hidden container, permanently hiding child applications through CSS styles to achieve hidden mounting. This allows the called child application B to complete the entire mounting process. Although the child application is not rendered in the hidden state, its JS context and state can be kept active by preloading resources for the frontend framework. When the mounting is triggered, it can be quickly activated and displayed, while avoiding actual rendering in the visible area; thus achieving dynamic mounting control.

[0044] loadMicroApp: This is a method in the qiankun micro-frontend framework for manually loading sub-applications. It is used to dynamically load sub-applications on demand. It is a non-route-driven method that can load sub-applications at any time and supports displaying multiple sub-applications simultaneously.

[0045] `registerMicroApps` is the core API of the Qiankun micro-frontend framework, used to register sub-applications in the main application and configure their loading rules. Basic functions include: sub-application registration, which receives an application configuration array (`apps`) and defines key parameters such as the sub-application's name, entry address, mounting container, and activation rules; and lifecycle management, supporting global lifecycle hooks (`lifeCycles`) to execute custom logic (such as permission verification and data preloading) when sub-applications are loaded / unloaded. Operating modes include: automatic mounting mode, which automatically loads matching sub-applications based on route changes; and a manual control module, requiring manual management of when sub-applications are mounted.

[0046] initGlobalState: This is a global state registration method for the qiankun micro-frontend framework, used to enable cross-application communication between the main application and sub-applications; it has global state sharing capabilities, allowing bidirectional data transfer and monitoring between the main application and sub-applications.

[0047] onGlobalStateChange: This is an API in the qiankun micro-frontend framework used to listen for changes in global state. It is one of the core methods of the MicroAppStateActions instance returned by initGlobalState. It mainly provides state listening functionality. By registering callback functions, it can respond to changes in global state. When the main application or sub-application modifies the state through setGlobalState, all instances listening to that state will trigger the callback.

[0048] `setGlobalState` is a method in the qiankun micro-frontend framework that triggers changes to the global state, i.e., updates the global state. It has state update functionality, can modify the global state (globalState) initialized by the main application, and notify all child applications listening to this state.

[0049] invokeMicroApp: This is an event type where a custom main application actively calls a specific function of a sub-application. It is a cross-application API call and is used by the main application to trigger a specific function of the sub-application.

[0050] Figure 1 This is a flowchart illustrating the method for constructing a power grid micro-front-end based on the Qiankun framework, as provided in an embodiment of the present invention.

[0051] like Figure 1 As shown in the figure, an embodiment of the present invention provides a method for constructing a power grid micro-front end based on the Qiankun framework, including the following steps S1 to S3:

[0052] S1: Start the main application of the qiankun micro-frontend framework and register multiple sub-applications.

[0053] Here, multiple sub-application instances are allowed to exist simultaneously under a main application. These sub-applications are registered in the main application and automatically activated through route matching.

[0054] In some specific implementations, the construction method of this embodiment further includes:

[0055] S10: Create two containers, one as the main application container, identified as the app node, used for automatically mounting sub-applications; the other as a hidden container, identified as the appHide node, permanently hidden using CSS styles, used for manually mounting sub-applications as needed.

[0056] For ease of explanation and understanding, the term "app node" will be used to refer to the main application container, and the term "appHide node" will be used to refer to the hidden container.

[0057] In some specific implementations, the process of registering multiple sub-applications specifically includes:

[0058] In the main application's entry file, use the registerMicroApps method to register multiple sub-applications that can be automatically activated by route matching.

[0059] For example, the process of automatically activating a sub-application through route matching is as follows: After registration, if the browser path navigates to... At that time, activate sub-application A; navigate to At that time, sub-application B is activated.

[0060] S2: Register a global state in the main application and listen for global state change events.

[0061] Specifically, after the main application registers its global state using the initGlobalState global state management tool provided by the qiankun micro-frontend framework, the main application and each sub-application will listen to the onGlobalStateChange event to obtain specific state changes, thereby realizing bidirectional data communication between the main application and each sub-application.

[0062] In some specific embodiments, after step S2, the following steps S21 and S22 are also included:

[0063] S21: After the main application detects a route change, it determines whether the sub-application matching the route is mounted on the appHide node; if so, it calls the unload method of the sub-application instance to manually unload it from the appHide node and mount it to the app node.

[0064] S22: The main application loads the sub-application that matches the current route.

[0065] Here, the steps described above ensure that the sub-application matched by the route is only mounted on the main application container's `app` node. This not only enables the rendering of the corresponding visual content immediately after route matching, avoiding delays or flickering caused by secondary mounting (the same sub-application being mounted twice), thus accelerating interface response speed; but more importantly, it isolates the currently visible sub-application from another sub-application called subsequently (mounted on the hidden container `appHide` node), ensuring that the target sub-application runs in the background without interfering with the interface of the currently visible sub-application, facilitating parallel operation of sub-applications and cross-sub-application communication.

[0066] For example, such as Figure 2 As shown, the main application listens for route changes and matches the route to... If the route matches, then determine if the corresponding sub-application A is mounted on the appHide node; if so, manually unmount it from the appHide node and mount it on the app node before loading sub-application A; similarly, if the route matches... If so, determine whether the corresponding sub-application B is mounted on the appHide node; if so, manually unmount it from the appHide node, mount it on the app node, and then load the sub-application B.

[0067] S3: When a sub-application loaded through route matching receives a business request from another corresponding sub-application, a global state change event is triggered, and parameters regarding the business request to call the other sub-application are passed into it.

[0068] In other words, when a business request is received from another sub-application (e.g., sub-application A) within the currently visible sub-application (e.g., sub-application A), for example, if the user interface of sub-application A needs to view the business details of sub-application B, the sub-application currently loaded via route matching, i.e., the currently visible sub-application A, will trigger a global state change event. This event will contain parameters specifying the business request to be invoked from the target sub-application B, and the application will then wait for a response from the target sub-application B.

[0069] In some specific embodiments, step S1 may further include:

[0070] The main application defines the event type for calling specific functions of the sub-application as invokeMicroApp, so that when the main application receives this event type, the call to the specific function of the target sub-application can be manually triggered as needed.

[0071] In some specific implementations, the parameters passed in are the parameters required for the target business request to call the target sub-application through "invokeMicroApp".

[0072] For example, such as Figure 2 As shown, the triggering of the global state change event, and the passing in of parameters regarding the business request to call the other sub-application, specifically includes:

[0073] Call the global state's setGlobalState method, passing in:

[0074] evtType='invokeMicroApp', appName='appB', type=showDrawXXX.

[0075] In the parameters passed above, "evtType" represents the event type, "appName" represents the name of the target sub-application corresponding to the event, and "type" represents the instruction corresponding to a specific function / target business. The parameters passed above indicate that the `invokeMicroApp` method is used to call the `showDrawXXX` function of the sub-application `appB` (displaying the drawer component XXX).

[0076] It is understood that in this embodiment, when faced with the need for communication between sub-applications, the currently visible sub-application will trigger a global state change event. This event, carrying specific business request parameters about the target sub-application being called, will be immediately listened to and processed by the main application. This enables the invocation of the specified function of the target sub-application.

[0077] S4: After the main application listens to the global state change event, it determines whether the target sub-application has been mounted on the appHide node. If not, it performs manual mounting; if so, it executes S5.

[0078] S5: The other sub-application obtains the global state change event from the main application and then executes the corresponding business function.

[0079] For example, such as Figure 2 As shown, when the main application listens for an event of type "invokeMicroApp", it will determine whether the target sub-application has been mounted on the node marked appHide based on the name of the sub-application to be called recorded therein. If it has been mounted, the next step is executed; if it has not been mounted, the loadMicroApp method is called to manually mount the sub-application to be called on the node marked appHide, wait for the sub-application to be mounted to complete, execute the above operations when it is "mounted", and record the currently manually mounted sub-application instance.

[0080] Here, when the event listened to by the main application corresponds to an "event type that calls a specific function of a sub-application," namely "invokeMicroApp," it will first ensure that the target sub-application of the event, i.e., the sub-application to be called, is only mounted on the appHide node, ensuring isolation between it and the currently visible sub-application through mounting. Then, it only needs to wait for the target sub-application, which is also listening for changes in the global state of the main business, to execute. In this way, on the one hand, it ensures that the target sub-application is isolated from the currently visible sub-application through mounting, avoiding errors in the visual interface display; on the other hand, it prevents direct interaction between sub-applications, maintaining their independence and reducing coupling.

[0081] In some specific embodiments, step S5 is implemented through the following sub-steps S51-S53:

[0082] S51: Each sub-application attaches a global lifecycle hook to listen to the global state of the main application and obtain global state change events of the main application.

[0083] This step is specifically executed in step S2, which is when the main application registers its global state, it attaches the lifecycle hooks it supports to each sub-application so that each sub-application can share the global state changes of the main application in real time and realize bidirectional communication between the main application and each sub-application.

[0084] For example, each sub-application obtains the global state of the main application through the lifecycle hooks mounted on the qiankun configured in its entry file.

[0085] S52: Each sub-application obtains the global state change event from the main application through the global lifecycle hook;

[0086] Here, the global state change state refers to the global state change event triggered by the currently visible sub-application A in step S3 above.

[0087] S53: After obtaining the global state change event, each sub-application determines whether it is the target sub-application to be called based on the parameters carried in the event; if so, it executes the corresponding business function; if not, it does not take any action.

[0088] Here, each sub-application will listen to the complete global state change events triggered by the currently visible sub-application from the main application. Thus, each sub-application can determine whether it is the "target sub-application" based on the "appName" parameter in the event. Only when it determines that it is the "target sub-application" specified in the event will it execute the "business function" specified in the event.

[0089] This enables the calling of specified functions of other sub-applications within the currently visible sub-application under the qiankun micro-frontend framework; it also ensures rapid and timely response and normal interface display.

[0090] For example, sub-application A obtains the global state of the main application through the mounted lifecycle hooks of qiankun in its entry file; when the browser path navigates to the sub-application, that is, the current interface is loading and displaying sub-application A, and it is necessary to view the business details information of sub-application B, the setGlobalState method of the global state is called, passing in parameters such as evtType='invokeMicroApp', appName='appB', type=showDrawXXX, etc., and waiting for the response of sub-application B;

[0091] When the main application listens to the global state change event triggered by the sub-application A, it determines the event type as "invokeMicroApp" and the target sub-application as "sub-application B" through parsing. Then, it only executes the following: confirms that "sub-application B" as the target sub-application is only mounted on the appHide node (if not, it performs manual mounting).

[0092] Sub-application B listens to the global state of the main application through the mounted lifecycle hook of qiankun in its entry file and obtains the onGlobalStateChange event. After parsing and determining that the event type is "invokeMicroApp" and that it is the target sub-application "sub-application B", it will execute according to the "type=showDrawXXX" parameter and open the corresponding business interface.

[0093] Repeat the above steps when sub-application B needs to call the function of sub-application A.

[0094] The power grid micro-front-end construction method based on the Qiankun framework provided in this embodiment has at least the following advantages:

[0095] (1) While maintaining the independence of each business sub-application, it can realize mutual calls between sub-applications, while maintaining the reusability of business code and reducing project maintenance costs.

[0096] (2) By relaying messages through the main application, direct coupling between sub-applications is avoided, thus reducing code intrusion.

[0097] (3) Dynamically load / unload sub-applications that need to communicate to avoid unnecessary performance overhead.

[0098] Based on the above embodiments, the present invention also provides a power grid micro-front-end architecture based on the qiankun framework.

[0099] This embodiment provides a power grid micro-front-end architecture based on the Qiankun framework, including: a main application, and two or more sub-applications registered under the main application through route matching.

[0100] The sub-application is configured to be mounted to the main application container before being loaded via route matching;

[0101] The main application is configured to register a global state and listen for global state change events after startup; and to trigger a global state change event when a sub-application loaded through route matching receives a business request from another sub-application, and to pass in parameters about the business request to call the other sub-application; and to determine whether the other sub-application has been mounted in the hidden container after listening to the global state change event, and to manually mount it if not.

[0102] The other sub-application is configured to execute the corresponding business function after obtaining the global state change event from the main application.

[0103] In some specific implementations, the main application is further configured to, upon detecting a route change, determine whether the route-matching sub-application is mounted on a hidden container; if so, unmount it from the hidden container and mount it onto the main application container; and load the route-matching sub-application.

[0104] In some specific implementations, the sub-application is configured to listen to the global state of the main application through a pre-mounted global lifecycle hook and obtain global state change events of the main application.

[0105] The sub-application is specifically configured to, after obtaining the global state change event, determine whether it is another sub-application based on the parameters it carries; if so, it executes the corresponding business function.

[0106] In some specific implementations, the main application is a power grid customer information system; the sub-applications include user sub-applications and billing sub-applications.

[0107] In some specific implementations, the process of creating the main application and sub-application projects in this embodiment is as follows:

[0108] Create a Vue project named app-main, import the qiankun framework, and use it as the main application;

[0109] Create a Vue project app-a, and import the vite-plugin-qiankun plugin as a sub-application A;

[0110] Create a Vue project app-b, import the vite-plugin-qiankun plugin as a sub-application B; and so on, create the target number of sub-applications.

[0111] This invention also provides a specific application scenario, which is described in the specific application of the power grid micro-front-end construction method and architecture based on the qiankun framework provided in the above embodiments of this invention to help with understanding.

[0112] 1. Deploy the main business application and all sub-applications.

[0113] Main application: Customer information system;

[0114] Sub-applications:

[0115] (1) User sub-application (including modules such as user and role);

[0116] (2) Payment sub-application (including cashier, payment slip, and other modules);

[0117] 2. Master / Sub-application Configuration

[0118] The main application registers sub-applications through route matching; when the browser navigates to... When it is determined that the user's sub-application is only mounted on the main application container, open the user's sub-application; navigate to... When it is determined that the charging sub-application is only mounted on the main application container, the charging sub-application is opened.

[0119] The main application registers a global state and listens for global state change events. When it receives an event to open a sub-application, it checks whether the sub-application is already mounted on the hidden node. If it is not mounted, it mounts it manually. If it is already mounted, it does nothing.

[0120] After initialization, the sub-application listens to the global state of the main application through global lifecycle hooks, obtains global state change events of the main application, and executes the corresponding operation when the event is determined to be a business function call instruction corresponding to itself.

[0121] 3. The cashier performs the payment task (calling the user sub-application from the payment sub-application).

[0122] The cashier enters the customer information system, which is the main application, and opens the cashier page (i.e., opens the payment sub-application).

[0123] Entering a user ID displays a brief user information. When more detailed information about the user is needed, clicking the user ID sends a request to the main application to open the "User Details Information Interface" of the "User Sub-application".

[0124] When the main application receives the event, it determines whether the "user sub-application" is only mounted on the hidden node; if it is not mounted on the hidden node, it performs manual mounting.

[0125] User sub-applications listen for events received by the main application, respond accordingly, and display the user details interface.

[0126] 4. Administrators can view the user's 360-degree view (calling the charging sub-application within the user's sub-application).

[0127] The administrator enters the customer information system and opens the user 360 view page (i.e., opens the user sub-application).

[0128] When entering a user ID to view the user's recharge and electricity purchase information, a request is sent to the main application to open the "Payment Sub-application";

[0129] When the main application receives the event, it determines whether the "charging sub-application" is only mounted on the hidden node; if it is not mounted on the hidden node, it first performs manual mounting.

[0130] The billing sub-application listens for events received by the main application, responds accordingly, and displays the bill details interface.

[0131] In summary, the power grid micro-front-end construction method and architecture based on the Qiankun framework provided by this invention can realize the parallel operation of sub-applications and cross-sub-application communication in the power grid micro-front-end based on the Qiankun framework, and achieve service reuse while maintaining the independence of sub-applications.

[0132] It should be noted that any reference signs placed between parentheses in the claims should not be construed as limiting the claims. The word "comprising" does not exclude the presence of components or steps not listed in the claims. The word "a" or "an" preceding a component does not exclude the presence of a plurality of such components. The invention can be implemented by means of hardware comprising several different components and by means of a suitably programmed computer. In a unit claim enumerating several means, several of these means may be embodied by the same item of hardware. The use of the words first, second, and third, etc., does not indicate any order. These words can be interpreted as names.

[0133] Although preferred embodiments of the invention have been described, those skilled in the art, upon learning the basic inventive concept, can make other changes and modifications to these embodiments. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments as well as all changes and modifications falling within the scope of the invention.

[0134] Obviously, those skilled in the art can make various modifications and variations to this invention without departing from its spirit and scope. Therefore, if these modifications and variations fall within the scope of the claims of this invention and their equivalents, this invention also intends to include these modifications and variations.

[0135] In the description of this invention, it should be understood that the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of indicated technical features. Therefore, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature. In the description of this invention, "a plurality of" means two or more, unless otherwise explicitly specified.

[0136] In this invention, unless otherwise explicitly specified and limited, the terms "installation," "connection," "linking," and "fixing," etc., should be interpreted broadly. For example, they can refer to a fixed connection, a detachable connection, or an integral part; they can refer to a mechanical connection or an electrical connection; they can refer to a direct connection or an indirect connection through an intermediate medium; they can refer to the internal communication of two components or the interaction between two components. Those skilled in the art can understand the specific meaning of the above terms in this invention according to the specific circumstances.

[0137] In this invention, unless otherwise explicitly specified and limited, "above" or "below" the second feature can mean that the first feature is in direct contact with the second feature, or that the first feature is in indirect contact with the second feature through an intermediate medium. Furthermore, "above," "over," and "on top" of the second feature can mean that the first feature is directly above or diagonally above the second feature, or simply that the first feature is at a higher horizontal level than the second feature. "Below," "below," and "under" the second feature can mean that the first feature is directly below or diagonally below the second feature, or simply that the first feature is at a lower horizontal level than the second feature.

[0138] In the description of this specification, the references to terms such as "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., refer to specific features, structures, materials, or characteristics described in connection with that embodiment or example, which are included in at least one embodiment or example of the present invention. In this specification, the illustrative expressions of the above terms should not be construed as necessarily referring to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments or examples. Moreover, without contradiction, those skilled in the art can combine and integrate the different embodiments or examples described in this specification, as well as the features of different embodiments or examples.

[0139] The above description is merely an embodiment of the present invention and does not limit the patent scope of the present invention. Any equivalent modifications made based on the content of the present invention specification and drawings, or direct or indirect applications in related technical fields, are similarly included within the patent protection scope of the present invention.

Claims

1. A method for constructing a power grid micro-front end based on the Qiankun framework, characterized in that, include: Start the main application of the qiankun micro-frontend framework; Create two containers: one is the main application container, used for automatically mounting sub-applications; the other is a hidden container, used for manually mounting sub-applications as needed. Register a global state in the main application and listen for global state change events; After the main application detects a route change, it determines whether the sub-application matching the route is mounted in a hidden container. If so, it is unloaded from the hidden container and mounted to the main application container; the main application loads the sub-application that matches the route. When a sub-application loaded via route matching receives a business request from another corresponding sub-application, a global state change event is triggered, and parameters regarding the business request to call the other sub-application are passed into it; the passed parameters are the parameters required to call the business request to the other sub-application through the invokeMicroApp function; After the main application listens to the global state change event, it determines whether the other sub-application has been mounted in the hidden container. If not, it performs manual mounting. Each sub-application listens to the global state of the main application through pre-mounted global lifecycle hooks and obtains global state change events of the main application; The other sub-application executes the corresponding business function after obtaining the global state change event from the main application; specifically, after obtaining the global state change event, all sub-applications determine whether they are the other sub-application based on the parameters it carries. If so, then execute the corresponding business function.

2. The method for constructing a power grid micro-front end based on the Qiankun framework as described in claim 1, characterized in that, Also includes: Create the main application under the qiankun micro-frontend framework; Register two or more sub-applications under the main application that are matched by the route.

3. The method for constructing a power grid micro-front end based on the Qiankun framework as described in claim 1, characterized in that, The main application is the power grid customer information system; the sub-applications include user sub-applications and billing sub-applications.

4. A power grid micro-front-end system based on the Qiankun framework, characterized in that: It includes a main application, and two or more sub-applications registered under the main application through route matching; it also includes two containers, one for the main application, used for automatically mounting sub-applications; and the other is a hidden container, used for manually mounting sub-applications on demand. The sub-application is configured to be mounted to the main application container before being loaded via route matching; The main application is configured to register a global state and listen for global state change events after startup. And when a sub-application loaded via route matching receives a business request from another corresponding sub-application, a global state change event is triggered, and parameters regarding the business request to call the other sub-application are passed into it; wherein, the passed parameters are the parameters required to call the business request of the other sub-application through the invokeMicroApp function; and after listening to the global state change event, it is determined whether the other sub-application has been mounted in the hidden container. If not, it is manually mounted; the main application is also configured to, after listening to the route change, determine whether the route-matched sub-application is mounted in the hidden container; if so, it is unmounted from the hidden container and mounted to the main application container; and load the route-matched sub-application; The other sub-application is configured to execute the corresponding business function after obtaining the global state change event from the main application; The sub-application is also configured to listen to the global state of the main application through a pre-mounted global lifecycle hook and obtain global state change events of the main application. The sub-application is specifically configured to, after obtaining the global state change event, determine whether it is another sub-application based on the parameters it carries; if so, it executes the corresponding business function.

5. The power grid micro-front-end system based on the Qiankun framework as described in claim 4, characterized in that, The main application is the power grid customer information system; the sub-applications include user sub-applications and billing sub-applications.

Images