A method for implementing dynamic global container mounting based on Qiankun micro-frontend

Abstract

The present invention discloses a method for implementing dynamic mounting of a global container based on a Qiankun micro-frontend. The front-end engineering configures micro-application parameters and custom parameters. The micro-application parameters include the micro-application name, entry address, container ID, and activation path. The custom parameters refer to the main application tag. After the user logs in, the front-end obtains all routing data through the API interface. The microservice registers the micro-application based on Qiankun and renders the page in a slot and custom parameter manner to complete the user login. Once the URL changes, the matching logic of Qiankun is automatically triggered to activate the micro-application that matches it. If the main application is activated, the page specifies the rendering area to mount the main application container, otherwise the sub-application container is mounted to achieve dynamic mounting of the micro-application. The present invention adopts the slot and custom parameter method in the main application layout component to uniformly mount the main application and sub-application containers, thereby achieving dynamic mounting of the micro-application container, thereby rendering the page normally.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and more specifically, to a method for implementing dynamic mounting of a global container based on a Qiankun micro frontend. Background Art

[0002] Microservice single-page applications (SPAs) are particularly common in back-end and mid-stage management systems. Multiple applications often switch frequently, but only one is displayed at a time. Before a page can render, a sub-application container must be mounted. Typically, sub-application containers are configured independently and then mounted onto the main application in a standardized manner. However, in complex back-end and mid-stage management systems, dynamic mounting of sub-application containers is relatively rare, and no method exists to implement this for complex scenarios. Summary of the Invention

[0003] The purpose of the present invention is to provide an implementation method for dynamic mounting of global containers based on Qiankun micro front-end, which is used to solve the problem that there is no implementation method for dynamic mounting of sub-application containers in complex scenarios in the prior art.

[0004] The present invention solves the above problems through the following technical solutions:

[0005] A method for implementing dynamic global container mounting based on Qiankun micro-frontend, including:

[0006] Step A: The front-end engineering configures micro-application parameters and custom parameters. Micro-application parameters include the micro-application name, entry address, container ID, and activation path. Custom parameters refer to the main application tag, which is used to mark whether the current microservice is activating the main application or sub-application. Its initial value is true, and the main application is activated by default. Changes in the URL will match these configuration parameters, thereby starting the corresponding micro-application.

[0007] Step B: After the user logs in, the front-end engineering obtains all routing data through the API interface, and implements routing encapsulation through format conversion and routing lazy loading. The routing data includes the address, corresponding component, and the name of the application to which it belongs.

[0008] Step C: The microservice is based on the Qiankun registration micro application, and uses slots and custom parameters to render the page to complete the user login;

[0009] Step D: When the user clicks on different pages, the URL changes. The change in URL will automatically trigger Qiankun's matching logic. All micro-applications that match the activation path rules will be activated. If the main application is activated, the page specifies the rendering area to mount the main application container. If the sub-application is activated, the main application mark is modified to false, and the page specifies the rendering area to mount the sub-application container to achieve dynamic loading of micro-applications.

[0010] Before a micro-application is activated and the page is rendered, all the encapsulated routing data will be filtered and processed. Based on whether the name of the currently activated micro-application is consistent with the name of the application in the routing data, the routing data that matches the current micro-application will be filtered out. The routing data includes the address, corresponding components, etc.

[0011] When the URL changes, the routing data of the currently activated micro-app is compared. If the URL exists in the current micro-app routing data, the page is rendered normally, otherwise 404 is returned.

[0012] Rendering pages using slots and custom parameters specifically includes:

[0013] Insert a slot component into the content panel area of the layout component. The slot component is used to determine the application page to be displayed in the content panel area.

[0014] Among them, the slot component only contains two containers, also called divs, namely the main application container (main application div) and the sub-application container (sub-application div). Since only one container is loaded at the same time, the judgment basis is the main application tag. If it is true, the main application div is mounted, and the content panel area of the layout component displays the main application page; otherwise, the sub-application div is mounted, and the content panel area of the layout component displays the sub-application page.

[0015] Compared with the prior art, the present invention has the following advantages and beneficial effects:

[0016] The patent of this invention adopts slots and custom parameters in the main application layout component in the middle and back-end management scenario, uses one layout component to mount different applications respectively, that is, uniformly mounts the main application and sub-application containers, realizes dynamic mounting of micro-application containers, and thus renders the page normally. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] Figure 1 is a flow chart of the present invention;

[0018] Figure 2 Call the schematic for the slot component;

[0019] Figure 3 Mark the logic judgment flow chart for the main application;

[0020] Figure 4 Flowchart of routing screening logic judgment;

[0021] Figure 5 A schematic diagram of the page layout. DETAILED DESCRIPTION

[0022] The present invention will be further described in detail below with reference to the examples, but the embodiments of the present invention are not limited thereto.

[0023] Example:

[0024] Combined with attachment Figure 1 As shown, a global container dynamic mounting implementation method based on Qiankun micro front-end, where Qiankun micro front-end is a microservice front-end using Qiankun framework, for the middle and back-end management system, such as Figure 5 As shown, the page layout usually includes a header tag, a slider control, a content panel, and a footer. The entire page layout is mapped and rendered by the layout component Layout. The present invention uses slots and custom parameters to achieve dynamic rendering of micro-application pages. The method includes:

[0025] Step A: Configure micro-application parameters and custom parameters in the front-end engineering. Micro-application parameters include the micro-application name, entry address, container ID, and activation path. Custom parameters refer to the main application tag, which is used to mark whether the current microservice is activated as the main application or sub-application. Its initial value is true, and the main application is activated by default.

[0026] Step B: After the user logs in, the front-end engineering obtains all routing data through the API interface. This data needs to adapt to the routing configuration in the routing instance. Since the components in the routing instance are objects and the components in the initial data are strings, format conversion is required. After format conversion, the routing lazy loading mapping component is used to implement the routing configuration; the routing data includes the address, corresponding component, and the name of the application to which it belongs.

[0027] Step C: The microservice is based on the Qiankun registration micro application, and uses slots and custom parameters to render the page to complete the user login;

[0028] Slots insert specified content into a specified area. The layout page is mapped by the layout component Layout, and the content panel in the core area of the page will be inserted into the Slot component according to the slot tag to determine which application page will be displayed in the area. The internal implementation logic of the Slot component is as follows: Figure 2 As shown, the page rendering method using slots and custom parameters specifically includes:

[0029] First, introduce the Layout component into the Slot component. The purpose is to insert the Slot component into the Layout component.

[0030] Secondly, insert the slot tag into the content area of the Layout component to mark the location where the Slot component is inserted;

[0031] The Slot component contains only two divs, namely the main application div and the sub-application div. Since a single-page application only renders one page at a time, only one of them can be rendered here through the if-else method, and the judgment is based on the initialization parameter isMain. If isMain is true, the content area of the Layout component displays the main application page, otherwise it displays the sub-application page. The judgment basis of isMain is the browser URL. According to the Qiankun implementation mechanism, once the URL changes, it will automatically trigger the matching logic of Qiankun, and all micro-applications that match the activation path rules will be activated. If the main application is activated, isMain is true, and the page specifies the rendering area to mount the main application container. Otherwise, it is false, and the page specifies the rendering area to mount the sub-application container to achieve dynamic loading of micro-applications. Its logical judgment is as follows: Figure 3 As shown;

[0032] Step D: When the user clicks on different pages, the URL changes. The change in URL will automatically trigger Qiankun's matching logic. All micro-applications that match the activation path rules will be activated. If the main application is activated, the page specifies the rendering area to mount the main application container. If the sub-application is activated, the main application mark is modified to false, and the page specifies the rendering area to mount the sub-application container to achieve dynamic loading of micro-applications.

[0033] Once the URL changes, the Qiankun mechanism will be automatically triggered to activate the matching micro-application. Before rendering the page, all routing data needs to be filtered based on whether the name of the currently activated micro-application is consistent with the name of the application in the routing data. If they are the same, the routing data of the current micro-application will be filtered out. Otherwise, the routing data will not be processed. The logical judgment is as follows: Figure 4 As shown; when the URL is changed again, by comparing the current micro-application routing data, it is determined whether the URL exists in the current micro-application routing data. If it exists, the page is loaded normally, otherwise 404 is displayed.

[0034] Although the present invention is described herein with reference to illustrative embodiments of the present invention, the above embodiments are merely preferred embodiments of the present invention, and the embodiments of the present invention are not limited to the above embodiments. It should be understood that those skilled in the art can design many other modifications and implementations, which will fall within the scope and spirit of the principles disclosed in this application.

Claims

1. A method for implementing dynamic global container mounting based on Qiankun micro frontend, characterized in that: include: Step A: Configure micro-application parameters and custom parameters in the front-end engineering. Micro-application parameters include the micro-application name, entry address, container ID, and activation path. Custom parameters refer to the main application tag, which is used to mark whether the current microservice is activated as the main application or sub-application. Its initial value is true, and the main application is activated by default. Step B: After the user logs in, the front-end engineering obtains all routing data through the API interface, and implements routing encapsulation through format conversion and routing lazy loading. The routing data includes the address, corresponding component, and the name of the application to which it belongs. Step C: The microservice is based on the Qiankun registration micro application, and uses slots and custom parameters to render the page to complete the user login; Rendering pages using slots and custom parameters specifically includes: Insert a slot component into the content panel area of the layout component. The slot component is used to determine the application page to be displayed in the content panel area. The slot component contains only two containers, the main application container and the sub-application container. Since only one container is loaded at a time, the main application flag is used as the judgment basis. If the main application flag is true, the main application container is mounted, and the content panel area of the layout component displays the main application page. Otherwise, the sub-application container is mounted, and the content panel area of the layout component displays the sub-application page. Step D: When the user clicks on different pages, the URL changes. The change in URL will automatically trigger Qiankun's matching logic. All micro-applications that match the activation path rules will be activated. If the main application is activated, the page specifies the rendering area to mount the main application container. If the sub-application is activated, the main application mark is modified to false, and the page specifies the rendering area to mount the sub-application container to achieve dynamic loading of micro-applications.

2. According to the method of claim 1, a global container dynamic mounting method based on Qiankun micro front-end is characterized in that: When a micro-application is activated, all encapsulated routing data will be filtered before the corresponding page is rendered. Based on whether the name of the currently activated micro-application is consistent with the name of the application in the routing data, the routing data that matches the current micro-application will be filtered out. The routing data contains the address and corresponding components.

3. According to the method of claim 1, the method is characterized in that: When the URL changes, the routing data of the currently activated micro-app is compared. If the URL exists in the current micro-app routing data, the page is rendered normally, otherwise 404 is returned.

Images