A method, device and storage medium for expanding base application scenarios in micro front-end
By configuring the sub-parts and rules for adding and deleting pages in the micro front-end base, adjusting the routing path using flag parameters, and dynamically building the page framework of the base, solving the problem that the base cannot adapt to the needs of diversified sub-applications, and improving compatibility and expansion of application scenarios.
Patent Information
- Application Number
- CN202210428784.2
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2022-04-22
- Publication Date
- 2025-08-12
- Estimated Expiration
- 2042-04-22
AI Technical Summary
In the prior art, when facing diverse sub-application scenarios, micro front-end base applications cannot independently adapt to the needs of different sub-applications, resulting in insufficient compatibility. Especially when aggregating third-party sub-applications, the content of the frame page cannot be flexibly adjusted.
Configure the page frame and rules that can add and delete page sub-parts in the dock, dynamically adjust the routing path through flag parameters, and the dock builds the corresponding page frame according to the sub-application requirements, including the status, menu and content page sub-parts, and activates the sub-application through IP addresses and ports.
It realizes the independent adaptation of the base to different sub-applications, improves compatibility, expands the scope of application of application scenarios, and can flexibly load diverse sub-application content.
Smart Images

Figure CN115269215B_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of micro-frontend technology, and in particular to a method, device and storage medium for expanding application scenarios of a base in a micro-frontend. Background Art
[0002] Microfrontends are a microservices-based web frontend architecture. They apply the microservices concept to the browser side, aggregating single web frontend applications and providing them to users. Each aggregated frontend application can be independently developed, deployed, and run.
[0003] In the prior art, aggregated sub-applications are managed through the base (i.e., the main application) within a micro-frontend. Currently, the main application manages sub-applications by providing links to each sub-application within its page, using these links as entry points for activating the sub-applications. Upon activation, the main application calls the sub-application and provides a corresponding framework page for the sub-application to load. Sub-applications aggregated by the main application are all loaded within the main application's framework page, but different sub-applications may have different requirements. For example, some sub-applications may not provide menus, only functional pages and links. In this case, the framework page provided by the main application needs to be able to uniformly manage the sub-application menus. Other sub-applications may have their own menus but rely on the main application to manage logged-in users and display login information at the top. In this case, the framework page provided by the main application should include a status bar at the top that displays logged-in user information. Other sub-applications, while relying on the main application to load their own pages, implement their own login information and menus. In this case, the main application only provides the sub-application's content area. Still other sub-applications may have internal features such as large visualization screens or other functions that require full-screen display. In this case, the main application may only provide an empty framework. Due to the diverse needs of sub-application scenarios, current technology requires that when a main application adds a new aggregated sub-application, especially when aggregating third-party sub-applications, the main application's adapted sub-applications are fixed, and the content of the framework page provided by the main application for the sub-application remains unchanged. This may lead to the need for unadapted application scenarios and the inability to cope with the diverse business scenarios and page formats of the newly added sub-applications. Summary of the Invention
[0004] In order to solve the above technical problems or at least partially solve the above technical problems, the present invention provides a method, device and storage medium for expanding the application scenarios of the base in the micro front end.
[0005] In a first aspect, the present invention provides a method for expanding application scenarios of a base in a micro front-end, comprising:
[0006] A page frame and a plurality of accesible page subsections are configured in the base;
[0007] A rule is agreed upon in the base, wherein the rule maps different page subsections contained in the page frame to different marking parameters;
[0008] When registering a new sub-application to be aggregated into the base in the base, query the rule to obtain a flag parameter based on the sub-application's requirements for the page sub-part contained in the page frame, and add the flag parameter to the sub-application's routing path in a set format;
[0009] When using any sub-application aggregated on the base, the base parses the flag parameters obtained by the routing path of the sub-application, and determines all the page sub-parts that need to be added to the page frame of the sub-application based on the flag parameters and rules. The base builds and provides the corresponding page frame to load the sub-application.
[0010] Furthermore, the page subsections include: a status page subsection for displaying status, a menu page subsection for displaying menus, and a content page subsection for displaying content.
[0011] Furthermore, when a new sub-application to be aggregated to the base is registered in the base, the base records the following: the IP address, port, and service name of the new sub-application;
[0012] The base establishes a corresponding relationship between the service name and the IP address and port of the newly added sub-application;
[0013] The base configures the routing path for the newly added sub-application and adds the service name of the newly added sub-application to the root routing path of the newly added sub-application according to the preset format.
[0014] Furthermore, when any sub-application aggregated on the base is used using a routing path, the base parses the service name in the routing path of the sub-application, and obtains the IP address and port of the sub-application based on the service name and the corresponding relationship, and then activates the sub-application through the IP address and port of the sub-application, and loads the content of the activated sub-application into the page frame provided by the base.
[0015] Furthermore, the requirement data is configured in a sub-application, wherein the requirement data configures all the page sub-parts that need to be added to the page framework required by the sub-application; when the sub-application is registered with the base, the requirement data is passed to the base, and the base uses the requirement data to query the rules to obtain the flag parameters corresponding to the requirement data.
[0016] Furthermore, the default style of each page sub-part and the default layout position in the page frame are preset in the base, and the page sub-part is added to the page frame according to the default style and default layout position of each page sub-part.
[0017] Furthermore, in the sub-application that needs to personalize the page frame, corresponding style variables and layout position variables are added to each page sub-part contained in the page frame required by the sub-application, and personalized assignments are made to form a decoration parameter set;
[0018] When the sub-application is registered with the base, the base obtains the decoration parameter set and adds the decoration parameter set to the sub-application's routing path according to the preset format;
[0019] When using any sub-application, the base parses the sub-application routing path to obtain its decoration parameter set, modifies the default style and default layout position of the corresponding page sub-section according to the decoration parameter set, and adds the page sub-section to the page frame according to the modified style and layout.
[0020] Furthermore, the default style of each page sub-part and the default layout position in the page frame are preset in the base. For sub-applications that are not configured with a decoration parameter set, when the base builds the required page frame, the page sub-part is added to the page frame according to the default style of each page sub-part and the default layout position in the page frame.
[0021] In the second aspect, the present invention provides a device for expanding the application scenarios of the base in the micro front-end, including: a processing unit, a storage unit, a communication unit, a display unit and a bus unit, the processing unit, storage unit, communication unit and display unit are connected through a bus, the communication unit is connected to the back-end server through network communication, the storage unit stores at least one instruction, and the processing unit reads and executes the instruction to implement the method of expanding the application scenarios of the base in the micro front-end.
[0022] In a third aspect, the present invention provides a storage medium, which stores at least one instruction, reads and executes the instruction, and implements the method of expanding the application scenarios of the base in the micro front end.
[0023] The above technical solution provided by the embodiment of the present invention has the following advantages compared with the prior art:
[0024] In the present invention, a page frame that can add and delete page sub-parts, page sub-parts that can be added and deleted, and rules are configured in the base, and the rules correspond one-to-one to the situations in which different page sub-parts are contained in the page frame and different flag parameters. When a sub-application is registered in the base, the rules are queried to obtain flag parameters based on the sub-application's requirements for the page sub-parts contained in the page frame, and the flag parameters are added to the sub-application's routing path according to the set format; the base can use any sub-application containing the flag parameter routing path to parse out the flag parameters of the sub-application, and determine all the page sub-parts that need to be added to the page frame of the sub-application based on the flag parameters and the rules, and the base constructs and provides the corresponding page frame to load the sub-application. The base provides the corresponding page frame to render the data loaded by the sub-application according to the sub-application's page frame requirements, thereby realizing the base's autonomous adaptation to sub-applications that require different page frames, greatly improving the scope of application of the base's compatibility with different sub-applications, and expanding the application scenarios of the base. BRIEF DESCRIPTION OF THE DRAWINGS
[0025] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the invention and, together with the description, serve to explain the principles of the invention.
[0026] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.
[0027] Figure 1 A flowchart of a method for expanding base application scenarios in a micro front-end provided by an embodiment of the present invention;
[0028] Figure 2 for Figure 1 A flowchart of the method shown in which the base configures the routing path of a sub-application based on the sub-application's demand for a page sub-section included in the page architecture;
[0029] Figure 3 for Figure 1 In the method shown, the base constructs and provides a flowchart of a corresponding page frame based on the flag parameters in the routing path of the sub-application used;
[0030] Figure 4 for Figure 1 A flowchart of the method shown in which the base activates a sub-application based on the service name in the routing path of the sub-application being used;
[0031] Figure 5A flowchart of creating a routing path for a sub-application based on a decoration parameter set of the sub-application that requires personalized customization of the page frame in Example 2;
[0032] Figure 6 A flowchart of the base in Example 2 constructing and providing a corresponding page framework based on the logo parameter and the decoration parameter set or logo parameter in the routing path of the sub-application used;
[0033] Figure 7 A schematic diagram of a device for expanding the application scenarios of the base in the micro front end is provided for an embodiment of the present invention. DETAILED DESCRIPTION
[0034] To make the objectives, technical solutions, and advantages of the embodiments of the present invention more clear, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of them. All other embodiments derived by persons of ordinary skill in the art based on the embodiments of the present invention without inventive effort shall fall within the scope of protection of the present invention.
[0035] It should be noted that, in this document, the terms "comprises," "includes," or any other variations thereof are intended to encompass non-exclusive inclusion, such that a process, method, article, or apparatus comprising a series of elements includes not only those elements but also other elements not explicitly listed, or elements inherent to such process, method, article, or apparatus. In the absence of further limitations, an element defined by the phrase "comprising a ..." does not preclude the presence of other identical elements in the process, method, article, or apparatus comprising the element.
[0036] Example 1
[0037] See Figure 1 As shown, an embodiment of the present invention provides a method for expanding the application scenarios of the base in the micro front end, including:
[0038] S100, the base configures the routing path of the sub-application based on the sub-application's requirements for the page sub-parts included in the page architecture. Figure 2 As shown, the base configures the routing path of the sub-application based on the sub-application's requirement for the page sub-section in the page architecture, including:
[0039] S101: Configure a page frame and several addable and deleteable page subsections in the base. Specifically, the page subsections include: a status page subsection for displaying status, such as a status bar that displays user login information and login status; a menu page subsection for displaying menus, such as a menu bar that displays a menu for managing sub-applications; and a content page subsection for displaying content, such as a content window that displays sub-application content.
[0040] The base flexibly adds page sub-parts in the page frame. Specifically, the default style of each page sub-part and the default layout position in the page frame are preset in the base, and the page sub-parts are added to the page frame according to the default style and default layout position of each page sub-part.
[0041] S102, agreeing on a rule in the base, wherein the rule maps the different page sub-parts contained in the page frame to different flag parameters. If the base defines N page sub-parts, then A flag parameter is used to represent the combination of all page frames and page sub-parts. Specifically, for example, if an "EMPTY" flag parameter is defined, it corresponds to the situation where no page sub-parts are added to the page frame.
[0042] S103, when the newly added sub-application to be aggregated to the base is registered in the base, the base queries the rule to obtain the flag parameter based on the sub-application's demand for the page sub-part contained in the page frame, and the base obtains the sub-application service name. In the specific implementation process, demand data is configured in a sub-application, wherein the demand data configures all the page sub-parts that need to be added to the page frame required by the sub-application. When the sub-application is registered in the base, the demand data is passed to the base. The base uses the demand data to query the rule to obtain the flag parameter corresponding to the demand data. In the specific implementation process, when the newly added sub-application to be aggregated to the base is registered in the base, the content obtained by the base record also includes: the IP address, port and service name of the newly added sub-application; the base associates the service name with the IP address and port of the newly added sub-application to establish a corresponding relationship.
[0043] S104: The base adds the sub-application's flag parameters and the sub-application's corresponding service name to the sub-application's routing path in a pre-set format. Specifically, the base adds the flag parameters corresponding to the sub-application's requirement data to the sub-application's routing path in a pre-set format, and adds the application's service name to the newly added sub-application's root routing path in a pre-set format.
[0044] S200: The base builds and provides a corresponding page frame based on the flag parameters in the routing path of the sub-application used. Figure 3 As shown, the base is constructed based on the flag parameters in the routing path of the sub-application used and provides the corresponding page framework including:
[0045] S201: The base parses the routing path of the sub-application to obtain the flag parameter. When using any sub-application aggregated on the base, the routing path of the sub-application is transmitted to the base, and the base parses the routing path of the sub-application to obtain the flag parameter of the sub-application.
[0046] S202: The base determines all the page sub-parts that need to be added to the page frame required by the sub-application based on the flag parameters and rules.
[0047] S203: The base is constructed according to all the page sub-parts that need to be added as determined in S202 and provides corresponding page frames.
[0048] S300, the base activates the sub-application based on the service name in the routing path of the sub-application used. For specific implementation, please refer to Figure 4 As shown, the base activates sub-applications based on the service name in the routing path of the sub-application used:
[0049] S301: The base parses the sub-application routing path to obtain the service name. When using any sub-application aggregated on the base, the routing path of the sub-application is transmitted to the base, and the base parses the routing path of the sub-application to obtain the service name of the sub-application.
[0050] S302: The base obtains the IP address and port of the sub-application based on the service name and the corresponding relationship.
[0051] S303: The base activates the sub-application through the IP address and port of the sub-application.
[0052] S400: Render and load the content of the activated sub-application into a corresponding page frame provided by the base for the sub-application.
[0053] Example 2
[0054] The difference between Example 2 and Example 1 is that the default style and default layout position of the page sub-sections in the base are configured to be adjustable, so that the base provides a personalized page framework for sub-applications that require customization. Specifically, the style variables of the page sub-sections are used to construct style instances of each page sub-section, and default values are assigned to the style variables to initialize the style instances. The layout position variables of the page sub-sections are used to construct layout instances of each page sub-section, and default values are assigned to the layout position variables to initialize the layout instances. A parameter passing interface is provided for the layout instance and the style instance so that the style variables in the style instance can obtain the corresponding style variable assignments from the decoration parameter set, and the layout position variables in the layout instance can obtain the corresponding layout position variable assignments from the decoration parameter set.
[0055] A method for expanding the application scenarios of the base in the micro front-end provided in Example 2 also includes:
[0056] Create the routing path of the sub-application based on the decoration parameter set of the sub-application that needs to customize the page framework. Figure 5 As shown, the process is as follows:
[0057] S11, in the sub-application that needs to personalize the page frame, add corresponding style variables and layout position variables to each page sub-part contained in the page frame required by the sub-application and assign personalized values to form a decoration parameter set.
[0058] S12: When the sub-application configured with the decoration parameter set is registered with the base, the base obtains the decoration parameter set.
[0059] S13, the base adds the decoration parameter set to the routing path of the sub-application according to a preset format. If the sub-application is not configured with a decoration parameter set, its routing path does not include the decoration parameter set.
[0060] In a method for expanding the application scenario of the base in a micro front-end provided in Example 2, the base is constructed based on the flag parameters and the decoration parameter set or flag parameters in the routing path of the sub-application used and provides a corresponding page framework. Figure 6 As shown, the process includes:
[0061] S21: The base obtains the routing path of the sub-application being used. When using any sub-application aggregated on the base, the routing path of the sub-application is transmitted to the base.
[0062] S22, the base detects whether its routing path contains a decoration parameter set; if so, execute S23, otherwise execute S25.
[0063] S23, the base parses the sub-application routing path to obtain its decoration parameter set, and modifies the style variable assignment in the style instance of the page sub-part added based on the flag parameter and / or the layout position variable assignment in the layout instance according to the decoration parameter set.
[0064] S24, when the base constructs the page framework required by the sub-application, the page sub-part is added to the page framework according to the modified style and the modified layout.
[0065] S25, when the base constructs the page frame required by the sub-application, the page sub-parts are added to the page frame according to the default styles of the respective page sub-parts and the default layout positions in the page frame.
[0066] Example 3
[0067] See Figure 7 As shown, an embodiment of the present invention provides a device for expanding the application scenarios of the base in the micro front end, including: a processing unit, a storage unit, a communication unit, a display unit and a bus unit, the processing unit, the storage unit, the communication unit and the display unit are connected through a bus, the communication unit is connected to the back-end server through network communication, the storage unit stores at least one instruction, and the processing unit reads and executes the instruction to implement the method of expanding the application scenarios of the base in the micro front end.
[0068] Example 4
[0069] An embodiment of the present invention provides a storage medium that stores at least one instruction, reads and executes the instruction, and implements the method for expanding the base application scenario in the micro front end.
[0070] In the present invention, a page frame that can add and delete page sub-parts, page sub-parts that can be added and deleted, and rules are configured in the base, and the rules correspond one-to-one to the situations in which different page sub-parts are contained in the page frame and different flag parameters. When a sub-application is registered in the base, the rules are queried to obtain flag parameters based on the sub-application's requirements for the page sub-parts contained in the page frame, and the flag parameters are added to the sub-application's routing path according to the set format; the base can use any sub-application containing the flag parameter routing path to parse out the flag parameters of the sub-application, and determine all the page sub-parts that need to be added to the page frame of the sub-application based on the flag parameters and the rules, and the base constructs and provides the corresponding page frame to load the sub-application. The base provides the corresponding page frame to render the data loaded by the sub-application according to the sub-application's page frame requirements, thereby realizing the base's autonomous adaptation to sub-applications that require different page frames, greatly improving the scope of application of the base's compatibility with different sub-applications, and expanding the application scenarios of the base.
[0071] In the present invention, for a sub-application configured with a decoration parameter set, its decoration parameter set is added to the routing path, and the base builds a corresponding page frame based on the flag parameters and the decoration parameter set in the routing path. Among them, the flag parameter can determine the page sub-section to be added, and the decoration parameter set can modify the style and layout position of the page sub-section. The base configures the page sub-section according to the modified style and layout position. For a sub-application that does not configure a device parameter set, the base only determines the page sub-section to be added based on the flag parameter, and configures the page sub-section to be added according to the default style and default layout position. This enables the base to meet the personalized customization of different sub-application page frames.
[0072] In the embodiments provided herein, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are merely illustrative. For example, the division of units described is merely a logical functional division. In actual implementation, other divisions may be employed, such as combining or integrating multiple units or components into another system, or omitting or disabling certain features. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interface, or the indirect coupling or communication connection between devices or units may be electrical, mechanical, or other.
[0073] The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of these units may be selected to achieve the purpose of this embodiment according to actual needs.
[0074] In addition, the functional units in various embodiments of the present invention may be integrated into a single processing unit, each unit may exist physically separately, or two or more units may be integrated into a single unit. The aforementioned integrated units may be implemented in the form of hardware or software functional units.
[0075] The foregoing description is intended only to provide specific embodiments of the present invention, which will enable those skilled in the art to understand and implement the present invention. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present invention. Therefore, the present invention is not intended to be limited to the embodiments shown herein, but is intended to be accorded the widest scope consistent with the principles and novel features claimed herein.
Claims
1. A method for expanding the application scenarios of the base in the micro front end, characterized in that: include: A page frame and a plurality of accesible page subsections are configured in the base; A rule is agreed upon in the base, wherein the rule maps different page subsections contained in the page frame to different marking parameters; When registering a new sub-application to be aggregated into the base in the base, query the rule to obtain a flag parameter based on the sub-application's requirements for the page sub-part contained in the page frame, and add the flag parameter to the sub-application's routing path in a set format; When using any sub-application aggregated on the base, the base parses the flag parameters obtained by the routing path of the sub-application, and determines all the page sub-parts that need to be added to the page frame of the sub-application based on the flag parameters and rules. The base builds and provides the corresponding page frame to load the sub-application.
2. The method for expanding the application scenarios of the base in the micro front end according to claim 1 is characterized in that: The page subsections include: a status page subsection for displaying status, a menu page subsection for displaying menus, and a content page subsection for displaying content.
3. The method for expanding the application scenarios of the base in the micro front end according to claim 1 is characterized in that: When registering a new sub-application to be aggregated to the base in the base, the base records the following: the IP address, port, and service name of the new sub-application; The base establishes a corresponding relationship between the service name and the IP address and port of the newly added sub-application; The base configures the routing path for the newly added sub-application and adds the service name of the newly added sub-application to the root routing path of the newly added sub-application according to the preset format.
4. The method for expanding the application scenarios of the base in the micro front end according to claim 3 is characterized in that: When using any sub-application aggregated on the base using a routing path, the base parses the service name in the sub-application's routing path, and obtains the IP address and port of the sub-application based on the service name and the corresponding relationship, and then activates the sub-application through the IP address and port of the sub-application, and loads the content of the activated sub-application into the page frame provided by the base.
5. The method for expanding the application scenarios of the base in the micro front end according to claim 1 is characterized in that: Demand data is configured in a sub-application, wherein the demand data configures all page sub-parts that need to be added to the page framework required by the sub-application; when the sub-application is registered with the base, the demand data is passed to the base, and the base uses the demand data to query the rules to obtain the flag parameters corresponding to the demand data.
6. The method for expanding the application scenarios of the base in the micro front end according to claim 1 is characterized in that: The default styles of each page sub-part and the default layout positions in the page frame are preset in the base, and the page sub-parts are added to the page frame according to the default styles and default layout positions of each page sub-part.
7. The method for expanding the application scenarios of the base in the micro front end according to claim 1 is characterized in that: In the sub-application that needs to customize the page framework, add corresponding style variables and layout position variables to each page sub-part contained in the page framework required by the sub-application, and assign personalized values to form a decoration parameter set; When the sub-application is registered with the base, the base obtains the decoration parameter set and adds the decoration parameter set to the sub-application's routing path according to the preset format; When using any sub-application, the base parses the sub-application routing path to obtain its decoration parameter set, modifies the default style and default layout position of the corresponding page sub-section according to the decoration parameter set, and adds the page sub-section to the page frame according to the modified style and layout.
8. The method for expanding the application scenarios of the base in the micro front end according to claim 7 is characterized in that: The default styles of each page sub-part and the default layout positions in the page frame are preset in the base. For sub-applications that are not configured with decoration parameter sets, when the base builds the required page frame, the page sub-parts are added to the page frame according to the default styles of each page sub-part and the default layout positions in the page frame.
9. A device for expanding the application scenarios of the base in the micro front end, characterized in that: include: A processing unit, a storage unit, a communication unit, a display unit and a bus unit, wherein the processing unit, the storage unit, the communication unit and the display unit are connected via a bus, the communication unit is connected to the back-end server via network communication, the storage unit stores at least one instruction, and the processing unit reads and executes the instruction to implement the method for expanding the base application scenario in the micro-front end as described in any one of claims 1-8.
10. A storage medium, characterized in that: The storage medium stores at least one instruction, reads and executes the instruction, and implements the method for expanding the base application scenario in the micro front end as described in any one of claims 1-8.
Citation Information
Patent Citations
Middleware system for realizing interactive increase value traffic based on IP set top box and method thereof
CN101252547A
Micro-front-end page control method and device, terminal equipment and storage medium
CN112948035A