Micro-front-end-oriented universal basic capability adaptation method and device and storage medium

Abstract

The invention discloses a micro-front-end-oriented universal basic capability adaptation method and device and a storage medium, and the method comprises the steps: determining a sub-application which needs to be loaded at present, and obtaining the feature parameters of the sub-application; calculating the characteristic parameters through a preset adapter matching algorithm, and determining an adapter matched with the sub-application according to a calculation result; setting configuration items of the adapter according to the characteristic parameters of the sub-applications; and when the sub-application is activated, mounting the page content of the sub-application to a micro-front-end framework for display through the adapter. The universal micro-front-end adapter provided by the invention can automatically carry out front-end framework adaptation according to the sub-application framework and judge the adopted micro-front-end technology and base implementation according to the operating environment, the adaptation problem of different micro-front-end technology frameworks and bases is solved, the difference of gateway authentication, request headers and the like is processed through the adaptive requester, and the adaptability of the micro-front-end technology frameworks and bases is improved. The flexibility and expansibility of integration of the micro-front-end frame are improved.

Description

Technical Field

[0001] The present application relates to the technical field of micro-frontend frameworks, and in particular to a general basic capability adaptation method, device, and storage medium for micro-frontends. Background Art

[0002] When the base system integrates multiple sub-applications in its main site, if these sub-applications use different front-end frameworks, the micro-frontend of the front-end architecture mode is used to integrate the sub-applications, such as React, Vue, and Angular.

[0003] Since different technical frameworks use different technology stacks, the relevant micro-frontend integration can only adapt to one technical framework and does not support the adaptation of multiple technical frameworks. If the base system needs to integrate sub-applications with different technology stacks, specific configurations and code modifications must be made according to different technologies and bases, resulting in greater system complexity.

[0004] The above contents are only used to assist in understanding the technical solution of the present application and do not constitute an admission that the above contents are prior art. Summary of the invention

[0005] The main purpose of this application is to provide a general basic capability adaptation method, device and storage medium for micro-frontends, aiming to solve the technical problem that the existing micro-frontend integration cannot adapt to front-end frameworks of various technical types, resulting in the inability of the base system to seamlessly integrate multiple sub-applications.

[0006] To achieve the above objectives, the present application proposes a general basic capability adaptation method for micro front-ends, the method comprising: Determine the sub-application that needs to be loaded currently, and obtain characteristic parameters of the sub-application; Calculating the characteristic parameters by using a preset adapter matching algorithm, and determining an adapter matching the sub-application according to the calculation result; Setting configuration items of the adapter according to characteristic parameters of the sub-application; When the sub-application is activated, the page content of the sub-application is mounted to the micro-frontend framework for display through the adapter.

[0007] In one embodiment, the step of determining the sub-application currently to be loaded and obtaining the characteristic parameters of the sub-application includes: Reading a loading event of the sub-application to determine a loading status of the sub-application; If the sub-application is not loaded, obtaining the static resources of the sub-application, and extracting the characteristic parameters from the static resources; If the sub-application has been loaded, the behavior characteristic data of the sub-application is detected, and the characteristic parameters are extracted through the behavior characteristic data.

[0008] In one embodiment, the step of calculating the characteristic parameters by a preset adapter matching algorithm and determining the adapter matching the sub-application according to the calculation result includes: Determine a weight allocation algorithm according to the business requirements of the sub-application; Allocating weight values ​​corresponding to the feature parameters by means of the weight allocation algorithm, and calculating the comprehensive score of the sub-application using the weight values; An adapter matching the sub-application is determined according to the comprehensive score and the characteristic parameters.

[0009] In one embodiment, the step of determining an adapter matching the sub-application according to the comprehensive score and the characteristic parameter includes: Determining whether the comprehensive score and the characteristic parameter satisfy a matching rule of the adapter; When it is determined that the conditions are met, the adapter is used as an adapter matched by the sub-application.

[0010] In one embodiment, the step of setting the configuration items of the adapter according to the characteristic parameters of the sub-application includes: Obtaining demand data of the sub-application; Setting the routing path of the adapter according to the URL data extracted from the demand data; The flag parameter and the decoration parameter set carried in the demand data are embedded into the routing path.

[0011] In one embodiment, when the sub-application is activated, the step of mounting the page content of the sub-application to the micro-frontend framework for display through the adapter includes: Reading a decoration parameter set embedded in the routing path of the adapter, and selecting a matching page framework from the micro front-end framework according to the decoration parameter set; When the page frame is not selected, creating the page frame according to the decoration parameter set; The page content of the sub-application is displayed through the created page frame.

[0012] In one embodiment, after the step of calculating the characteristic parameters by a preset adapter matching algorithm and determining the adapter matching the sub-application according to the calculation result, the method further includes: Calling the initialization method of the adapter to initialize the adapter and registering the event detector; Before the step of mounting the page content of the sub-application to the micro-frontend framework for display through the adapter when the sub-application is activated, the method further includes: After it is detected that the base system has been loaded, the activation state of the sub-application is detected.

[0013] In one embodiment, before the step of calculating the characteristic parameters by a preset adapter matching algorithm and determining the adapter matching the sub-application according to the calculation result, the method further includes: Create a new adapter and store the adapter in the micro front-end framework; According to the sub-application integration requirements of the base system, real-time communication with the micro-front-end framework is carried out through the base system communication interface.

[0014] In addition, to achieve the above-mentioned objectives, the present application also proposes a general basic capability adaptation device for micro-frontends, the device comprising: a memory, a processor, and a computer program stored on the memory and executable on the processor, the computer program being configured to implement the steps of the general basic capability adaptation method for micro-frontends as described above.

[0015] In addition, to achieve the above-mentioned purpose, the present application also proposes a storage medium, which is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by the processor, the steps of the general basic capability adaptation method for micro-frontends as described above are implemented.

[0016] One or more technical solutions proposed in this application have at least the following technical effects: The technical solution of the present application determines the sub-application that needs to be loaded currently, and obtains the characteristic parameters of the sub-application; calculates the characteristic parameters through a preset adapter matching algorithm, and determines the adapter that matches the sub-application based on the calculation result; sets the configuration items of the adapter based on the characteristic parameters of the sub-application; and when the sub-application is activated, mounts the page content of the sub-application to the micro-frontend framework for display through the adapter. The present application proposes a universal micro-frontend adapter, which can automatically adapt to the frontend framework according to the framework of the sub-application, and determines the adopted micro-frontend technology and base implementation according to the operating environment, solving the adaptation problem of different micro-frontend technology frameworks and base implementations, and realizes the technical effect of increasing the flexibility and scalability of micro-frontend framework integration by providing an adapted requester to handle differences such as gateway authentication and request headers. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.

[0018] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0019] Figure 1 A flowchart of the first embodiment of the general basic capability adaptation method for micro front-ends provided in this application; Figure 2 This is a schematic diagram of the model architecture of a multimodal large model; Figure 3 This is a schematic diagram of the device structure of the hardware operating environment involved in the general basic capability adaptation method for micro-frontends in an embodiment of the present application.

[0020] The purpose, features and advantages of this application will be further described in conjunction with the embodiments and with reference to the accompanying drawings. DETAILED DESCRIPTION

[0021] It should be understood that the specific embodiments described herein are only used to explain the technical solutions of the present application and are not used to limit the present application.

[0022] In order to better understand the technical solution of the present application, a detailed description will be given below in conjunction with the accompanying drawings and specific implementation methods.

[0023] The main solution of the embodiment of the present application is: determine the sub-application that needs to be loaded currently, and obtain the characteristic parameters of the sub-application; calculate the characteristic parameters through a preset adapter matching algorithm, and determine the adapter that matches the sub-application based on the calculation result; set the configuration items of the adapter according to the characteristic parameters of the sub-application; when the sub-application is activated, mount the page content of the sub-application to the micro-front-end framework for display through the adapter.

[0024] Since the current micro-frontend integration can usually only adapt to one technical framework and does not support adaptation to multiple frameworks, the base system needs to be manually adapted when requiring the integration of applications with different micro-frontends, and perform specific configurations and code modifications based on different technologies and base implementations. This operation increases the complexity and development time of integration, resulting in the inability of the base system to seamlessly integrate multiple sub-applications to work.

[0025] The present application provides a solution and proposes a universal micro-frontend adapter, which can automatically adapt to the front-end framework according to the framework of the sub-application, and judge the micro-frontend technology and base implementation to be adopted according to the operating environment, thereby solving the adaptation problem of different micro-frontend technology frameworks and base implementations, and achieving the technical effect of increasing the flexibility and scalability of micro-frontend framework integration by providing an adapted requester to handle differences such as gateway authentication and request headers.

[0026] Based on this, the embodiment of the present application provides a general basic capability adaptation method for micro front-ends, referring to Figure 1 , Figure 1 This is a flow chart of the first embodiment of the general basic capability adaptation method for micro front-ends of this application. In this embodiment, the general basic capability adaptation method for micro front-ends includes steps S10 to S40: Step S10, determining the sub-application currently to be loaded, and obtaining characteristic parameters of the sub-application; Step S20, calculating the characteristic parameters by a preset adapter matching algorithm, and determining an adapter matching the sub-application according to the calculation result; Step S30, setting configuration items of the adapter according to characteristic parameters of the sub-application; Step S40, when the sub-application is activated, the page content of the sub-application is mounted to the micro-front-end framework for display through the adapter.

[0027] In this embodiment, the application data platform is operated normally through the base system, and the base system is the basic setting and system architecture that supports the normal operation of the application data platform. The above-mentioned application data platform may include an enterprise data platform, a financial data platform, a medical and health data platform, a unit data platform, an education data platform, a social media data platform, an industrial data platform, a transportation data platform, and an energy data platform.

[0028] In actual applications, in addition to its own functional settings, the base system can also realize the collaborative work of the application data platform by loading third-party sub-applications. Therefore, the base system can also include the system functions it possesses and the application functions developed by third parties. The application functions developed by the third party can include user review systems, product recommendation modules, order management interfaces, and other related functions that can assist in the use of the application data platform. For example, in the base system, system functions including data processing, storage, analysis, and user interaction can be realized through the integration of third-party applications.

[0029] To this end, a micro-frontend architecture connected to the base system is pre-created for the application based on the base system for integrated use of third-party applications.

[0030] Optionally, applications based on the base system can be connected to the created micro-front-end architecture, allowing the base station system to be integrated with third-party applications.

[0031] The micro-front-end architecture shown above, when connected to the base station system and enabling the base station system to realize the integrated use of third-party applications, implements the isolation and mounting of the third-party applications shown through the adapter stored therein to realize the integrated use of the third-party applications. Therefore, before the step of calculating the characteristic parameters through the preset adapter matching algorithm and determining the adapter matching the sub-application according to the calculation result, it also includes: Create a new adapter and store the adapter in the micro front-end framework; According to the sub-application integration requirements of the base system, real-time communication with the micro-front-end framework is carried out through the base system communication interface.

[0032] In this embodiment, based on the third-party sub-application integration requirements of the current base system, a micro-frontend framework is created to seamlessly integrate the third-party sub-applications of the base system. When building a micro-frontend framework, a suitable framework is customized. The micro-frontend frameworks in actual applications include Single-SPA, Qiankun, and Module Federation (Webpack 5). Qiankun is a micro-frontend framework based on Single-SPA.

[0033] Single-SPA supports mixed use of multiple front-end frameworks (such as React, Vue, Angular, etc.), provides powerful lifecycle management functions, and has an active community and detailed documentation. Qiankun is an improved framework based on Single-SPA; Module Federation (Webpack 5) allows different applications to share modules and can be used directly in the Webpack configuration without the need for an additional framework.

[0034] Specifically, the selection of the framework can be based on the technology stack type of the third-party sub-application to be integrated in the base system and the loading method of the sub-application, and the most matching framework can be selected from the above-mentioned micro-frontend framework to create the micro-frontend framework.

[0035] In creating the micro-frontend framework, the environment is configured according to the selected framework shown above. The specific process based on the environment configuration is actually related to the specific framework.

[0036] Optionally, taking the qiankun framework as an example for the process of environment configuration, first use npm or yarn to install the qiankun framework, create a new Vue project as the main application, introduce the qiankun framework in main.js to configure the registration and startup of the main application; then create a sub-application, add the life cycle hook of the qiankun in main.js, and the life cycle hook includes content such as bootstrap, mount, unmount, etc.; then, set publicPath in the vue.config.js of the sub-application as the packaging path of the sub-application. The main application indicated here can be defined as a base system connected to the micro-frontend framework, that is, after the base system is connected to the framework to achieve real-time communication, the base system is used as the main application of the micro-frontend framework, and the sub-application is defined as a third-party application to be integrated and used by the base system. Optionally, according to the usage requirements of the current micro-frontend framework, an application can be customized as the main application, and related sub-applications can be created based on the main application.

[0037] As shown above, based on the created micro-frontend framework, the integration of a third-party sub-application into the main application needs to be achieved by configuring routing and layout. In this embodiment, it specifically refers to the integration of the third-party sub-application into the base system, that is, the integration of the third-party sub-application into the base system is achieved by configuring routing and layout; the specific process of configuring routing and layout includes: configuring routing in the base system to load the sub-application; creating a container in the view of the base system for loading the sub-application; processing the routing prefix problem in the sub-application so that the sub-application can run independently.

[0038] Further, considering the service life of the micro-frontend framework, the large application can also be split into small modules for the framework of the micro-frontend framework, so that each module can be independently developed, tested and deployed, improving development efficiency and reducing code complexity. In the micro-frontend framework, the small modules obtained by splitting the large application are used as micro-applications, and independent deployment and maintenance in different micro-applications are set. The micro-applications communicate through interfaces or events, and select the corresponding technology stack according to the needs of the micro-applications, and use lazy loading, code splitting and other technologies to reduce the loading time of the main application and sub-applications. In addition, a unified CSS framework or design system is used to create the main application and sub-applications, and the log system and monitoring tools are integrated to promptly discover and solve problems.

[0039] In the micro-frontend framework, the communication between the base system and the third-party sub-application is realized through WebSocket. As shown above, in the micro-frontend framework, the base system as the main application communicates with the third-party sub-application to be integrated in real time through the WebSocket server. Therefore, based on the communication, the WebSocket server must be determined first, and the connection request and data transmission from the sub-application must be detected and processed through a WebSocket server provided by the base system. The address and port of the WebSocket server are configured to ensure that the sub-application can be correctly connected to the WebSocket server.

[0040] As shown above, when the communication application integrating the base system and the third-party application is implemented based on the WebSocket server, the specific configuration process based on the communication application specifically includes the following contents: 1) WebSocket server configuration process; Select a WebSocket server framework: Based on the technology stack and project requirements, select a suitable WebSocket server framework, such as Node.js's ws module, Java's Spring WebSocket, etc.

[0041] Build a WebSocket server. Use the selected framework to build a WebSocket server, configure the server's detection port, domain name and other basic information; write the core code of the WebSocket server, including the logic of handling connections, message reception and sending.

[0042] Configure security settings: Configure SSL / TLS encryption for the WebSocket server to ensure the security of communication data. Set appropriate firewall rules and access control policies to restrict unauthorized access.

[0043] Test and deploy: Test the WebSocket server locally or in a test environment to ensure that it functions properly. After the test passes, deploy the server to the production environment and configure the corresponding domain name and port.

[0044] 2) WebSocket client configuration process (in the base system); Initialize WebSocket connection: In the base system code, initialize the WebSocket client and specify the address and port of the WebSocket server. Use the WebSocket API to establish a connection and set the processing logic for events such as connection establishment, message reception, and connection closure.

[0045] Processing message reception: When the base system receives a message from the WebSocket server, it decides how to process it based on the message content. If the message is data required by the sub-application, it can forward the message to the corresponding sub-application.

[0046] Send messages to the server: When the base system needs to communicate with the server or other sub-applications, it sends messages through the WebSocket connection. Different types of messages can be sent according to needs, such as text messages, binary messages, etc.

[0047] Implement a heartbeat mechanism: To maintain the stability of the WebSocket connection, implement a heartbeat mechanism. Send heartbeat packets to the server periodically, and update the connection status when receiving the server's heartbeat response.

[0048] Optionally, according to the specific configuration process of the above communication application, the following processing logic is provided during implementation: Connection management: In the base system, a WebSocket connection pool is maintained to manage all connections with the WebSocket server. When a new connection is established, it is added to the connection pool; when a connection is closed, it is removed from the connection pool.

[0049] Message routing: Implement message routing mechanism to forward messages to corresponding sub-applications or servers according to message type, target address, etc. Middleware or proxy mode can be used to implement message routing.

[0050] Error handling: In the base system, an error handling mechanism is implemented to capture and handle errors that may occur during WebSocket communication. When an error occurs, corresponding handling measures can be taken according to the error type, such as retrying the connection, recording logs, etc.

[0051] Cross-domain processing: The base system and the WebSocket server are in different domains, so cross-domain processing is required. You can add fields such as Access-Control-Allow-Origin to the response header of the WebSocket server to allow the base system to make cross-domain requests.

[0052] Through the above configuration process and processing logic, the base system can be used as the main application in the micro-frontend framework, multiple third-party sub-applications can be integrated, and the WebSocket server can be used for efficient and real-time communication. This implementation process involves the construction and configuration of the WebSocket server, the initialization and message processing of the WebSocket client in the base system, connection management, message routing, error handling, and cross-domain processing. Ensuring the correct configuration and implementation of each link is the key to achieving stable and reliable WebSocket communication.

[0053] Furthermore, according to the configuration and implementation process shown above, testing and verification based on the communication is required, including: 1) Functional testing to ensure that the base system can successfully connect to the WebSocket server and can send and receive data.

[0054] 2) Performance testing: testing the latency, throughput and other performance indicators of the WebSocket connection to see if they can meet application requirements.

[0055] 3) Stability test: Test the stability of the WebSocket connection when it runs for a long time to avoid problems such as frequent disconnection or data loss.

[0056] 4) Security testing: Determine the security of the WebSocket connection. Based on the security test, WSS (WebSocket Secure) protocol and other methods may be used for encrypted transmission to prevent data leakage and illegal access.

[0057] In actual applications, the WebSocket server needs to be implemented through specific software, including but not limited to the ws module of Node.js, the websockets library of Python, the Spring WebSocket of Java, etc. Through the rich functions and configuration options it provides, it can meet the needs of communication connection between the micro front-end framework and the base system in different application scenarios.

[0058] Furthermore, based on the technology stack supported by the micro-frontend framework, a new adapter is created so that the sub-application based on the technology stack can run normally in the micro-frontend framework. The technology stack includes but is not limited to React, Vue, Angular, etc., which can be specifically determined based on the sub-application used by the base system, that is, the sub-application is essentially determined by the functional use of the base system to which the micro-frontend framework is connected. Therefore, when creating the new adapter, it is necessary to determine the technology stacks used by the sub-applications used in the micro-frontend framework, and determine the relevant information based on the sub-applications when they are applied in the micro-frontend framework, including technology stack differences, state management, style isolation, and communication mechanisms. Then, the function and performance requirements of the adapter are determined based on the relevant information.

[0059] Afterwards, according to the determined functional and performance requirements of the adapter, the corresponding technology stack and tool chain are selected, including front-end frameworks such as React, Vue, Angular, and creation tools such as Webpack and Vite. Based on the micro-front-end framework and construction tools, the functional library and framework type to be used by the adapter are determined to be implemented in the micro-front-end framework. The framework types include but are not limited to qiankun, micro-app, etc. The functional design of the adapter is performed according to the selected framework type and functional library. The functional design includes technology stack adaptation design, router adaptation design, state management adaptation design, style isolation adaptation design, and communication mechanism adaptation design. In the above, a design document is formed according to the functional design content, and the code of the adapter is written based on the design document. Based on the code coding of the adapter, an adapter that meets the requirements is generated so that the function of the adapter is correct and the performance meets the use requirements when applied.

[0060] Further, based on the design of the adapter, the interface definitions of the target micro-application and the source micro-application need to be clarified, the target micro-application is a micro-application that expects to receive data, and the source micro-application is a micro-application that provides data. When implementing the interface of the target micro-application, the method of the source micro-application is called or its properties are accessed inside it to obtain the required data. Therefore, based on the data conversion between the target micro-application and the source micro-application, the data provided by the source micro-application is converted into the format desired by the target micro-application by designing an adapter, and this data conversion action involves operations such as data type conversion, data structure adjustment or data filtering and mapping.

[0061] Furthermore, when data conversion between micro-applications is realized in the micro-frontend architecture, data can be correctly transmitted between micro-applications through an integrated communication protocol mechanism. In addition, the adapter is also provided with an error capture mechanism and a fallback logic executed based on each error message.

[0062] In this way, according to the designed adapter, according to the type of micro-frontend architecture represented in the characteristic parameters of the sub-application, the corresponding adapter is determined, and operations are performed based on the adapter. Taking the qiankun feature as an example, when the qiankun object is detected in the characteristic parameters of the sub-application, the sub-application is defined as a sub-application of the qiankun micro-frontend framework. Through the preset adapter matching algorithm, according to the identified qiankun feature, the adapter designed specifically for the qiankun feature is retrieved and matched in the adapter library as the adapter of the sub-application, and the processing and transformation of the adapter is used to achieve seamless integration of the sub-application with the base system.

[0063] According to the newly created adapter, the adapter is stored in a created preset adapter library, and the preset adapter library is a data storage space provided in the micro-front-end framework, which can call the adapter in the preset adapter library.

[0064] Furthermore, when the adapter is stored in the preset adapter library, it can be stored as an identifier based on information such as the technology stack type of the adapter, so that when the sub-application of the corresponding technology stack is loaded in the base system through the identifier, the corresponding adapter can be selected through the relevant identifier of the sub-application.

[0065] In this embodiment, the micro-frontend framework is designed to communicate with the base system through the sub-application type to be applied, and a plurality of adapters suitable for various technology stack types are newly created to provide an adaptive requester to handle differences such as gateway authentication and request headers, thereby increasing the flexibility and scalability of the sub-application when loading the application.

[0066] According to the above, the communication of the sub-application integrated with the base system is realized based on the micro-frontend architecture. In response to the sub-application integration of the base station system, a plurality of different page frames are provided to mount the sub-application. Based on the mounting of the sub-application, data type conversion is performed through the adapter shown above so that the base system can integrate sub-applications of multiple different data stacks. According to the application of the adapter, the corresponding adapter needs to be selected based on the currently enabled sub-application. Optionally, an environmental monitoring mechanism is provided in the micro-frontend framework to monitor the sub-application loading event of the base system, so as to select a matching adapter by reading the characteristic parameters of the sub-application according to the detected sub-application loading event.

[0067] Optionally, based on the detection of the sub-application loading event of the base system by the environment monitoring mechanism, characteristic parameters of the sub-application can be obtained according to the specific loading state, that is, the step of determining the sub-application to be loaded currently and obtaining the characteristic parameters of the sub-application includes: Reading a loading event of the sub-application to determine a loading status of the sub-application; If the sub-application is not loaded, obtaining the static resources of the sub-application, and extracting the characteristic parameters from the static resources; If the sub-application has been loaded, the behavior characteristic data of the sub-application is detected, and the characteristic parameters are extracted through the behavior characteristic data.

[0068] According to the set environment monitoring mechanism, the sub-application loading event of the base system is monitored. The sub-application loading event is the registration and loading process of the sub-application. In the base system, the sub-application is registered to the base system through the API provided by the micro-frontend framework (such as Single-SPA, qiankun, etc.). It usually includes the entry file (such as JavaScript file) of the specified sub-application, activity conditions (such as routing matching rules), etc. Loading event detection, the micro-frontend framework provides the ability to detect sub-application loading events, that is, the environment monitoring mechanism. Optionally, it can also be detected by registering a sub-application loading event detector. The base system can obtain the loading status of the sub-application by detecting the event.

[0069] Among them, in the judgment based on the loading status of the sub-application and the acquisition of characteristic parameters, the loading status is limited to the pre-loading state and the loading state, and the loading state is during the loading process. Based on this pre-loading state and the loading state, the characteristic parameters of the sub-application are extracted by reading static resources and behavioral characteristic data respectively.

[0070] Before the sub-application is loaded, the base system pre-acquires the sub-application's static resources (such as HTML, CSS, JavaScript files, etc.) through HTTP requests based on the sub-application's configuration information. The static resources are usually stored on a remote server. The acquired static resources are used for subsequent feature parameter extraction, or for optimization when the sub-application is loaded (such as caching, preloading, etc.). Before loading, the base system can also prepare corresponding behavioral feature data, which comes from the base system's configuration, the user's historical behavior records, or other sources, and can be used for subsequent comparison and analysis with the sub-application's behavioral feature data.

[0071] When the sub-application is loaded, the base system will dynamically load the resources of the sub-application and parse the loaded resources to obtain the characteristic parameters. The loaded resources include JavaScript files and HTML and CSS files; based on the JavaScript file, the base system executes the JavaScript file to obtain the characteristic parameters (such as through global variables, function return values, etc.). Based on the HTML and CSS files, the base system extracts the characteristic parameters (such as HTML structure, CSS style rules, etc.) by parsing the file content.

[0072] Optionally, the feature parameter extraction for static resources is specifically: extracting feature parameters from the static resources of the sub-application, such as specific tags, attributes or content fragments in HTML files; style rules, selectors or media queries in CSS files, etc. The feature parameters are used to describe the appearance, layout or style of the sub-application.

[0073] Optionally, feature parameter extraction for behavioral feature data is as follows: during the sub-application loading process, the base system collects data related to the sub-application behavior, such as page loading time, number of resource requests, user interaction events, etc. as the feature parameters, which are used to describe the performance, user experience or behavior pattern of the sub-application.

[0074] In addition, when acquiring the static resources of the sub-application, the base system needs to ensure that the resources of the sub-application allow cross-domain access, or solve the cross-domain problem through a proxy server, etc. When extracting feature parameters, it is necessary to avoid excessive calculations or resource requests during the sub-application loading process, which will affect the sub-application loading speed and user experience.

[0075] According to the above, the adapter is matched based on the characteristic parameters obtained based on the loading state of the sub-application, that is, the characteristic parameters are calculated by a preset adapter matching algorithm, and the adapter matching the sub-application is determined according to the calculation result, including: Determine a weight allocation algorithm according to the business requirements of the sub-application; Allocating weight values ​​corresponding to the feature parameters by means of the weight allocation algorithm, and calculating the comprehensive score of the sub-application using the weight values; An adapter matching the sub-application is determined according to the comprehensive score and the characteristic parameters.

[0076] In this embodiment, according to the detected startup status of the sub-application, the acquired characteristic parameters come from the static resources or behavioral characteristic data of the sub-application respectively. The characteristic data acquired based on this data source includes global variable information, specific API and configuration information. Among them, the front-end framework type used by the sub-application based on micro-front-end technology is determined based on the global variable information. The micro-front-end technology includes complete isolation based on iframe, routing hijacking based on single-spa, micro-app based on WebComponent idea, qiankun and other micro-front-end frameworks. To this end, the specific technology type can be determined by reading the global variable information of the page in the sub-application; optionally, the micro-front-end framework technology of the sub-application can also be determined by the specific API and configuration information.

[0077] According to the identified micro-frontend framework technology of the sub-application, the corresponding adapter is determined by determining the technology type represented by the sub-application through a preset adapter matching algorithm. In this embodiment, the preset adapter matching algorithm is a weight distribution algorithm, wherein a suitable weight distribution algorithm is selected according to business requirements, such as a hierarchical analysis method (AHP), an entropy value method, etc.

[0078] The acquired characteristic parameters of the sub-application are cleaned, denoised and standardized, and a weight allocation algorithm is applied to allocate weight values ​​to the characteristic parameters. The priority of each feature is determined according to business needs, and a weight allocation algorithm that meets the business needs is selected.

[0079] Among them, the business requirements are used to characterize the functionality of the sub-application, including functional requirements, performance requirements, technical requirements and security requirements. Different business requirements will take into account the different functional tendencies of the sub-application. For example, functional requirements are used to determine the core functions of the sub-application, such as data display, user interaction, etc.; performance requirements are used to clarify performance requirements, such as loading speed, response time, etc.; technical requirements are used to determine the technology stack, framework, dependency library, etc.; security requirements are used to consider data security, permission control, etc.

[0080] According to the limitations of the business requirements shown above, when assigning weight values ​​to the characteristic parameters, more weight values ​​need to be assigned to the characteristic parameters represented by each business requirement. For example, in performance requirements, higher weights need to be assigned to characteristic parameters representing performance indicators; in technical requirements, if the compatibility of technology stack is more important, a higher weight should be assigned to the technology stack.

[0081] Optionally, in the weight distribution algorithm, the priority of the feature parameters is determined by means of a hierarchical analysis method, and the weight value of each feature parameter is calculated by a eigenvector method. It is necessary to ensure that the sum of all weights is 1 (or 100%) to ensure the rationality of the weight distribution.

[0082] A weight value is assigned to each characteristic parameter according to business requirements, and the comprehensive score of the sub-application is calculated by the weight value of the characteristic parameter. The calculation formula of the comprehensive score is: Comprehensive score = i = 1∑n (feature parameter i × weight i); The comprehensive score calculated according to the calculation formula of the comprehensive score shown above can be used to characterize the specific usage information of the sub-application, for example, technology stack score: 90, weight: 0.3 → contribution value: 27; performance score: 85, weight: 0.4 → contribution value: 34; security score: 95, weight: 0.2 → contribution value: 19; user experience score: 80, weight: 0.1 → contribution value: 8; comprehensive score: 27 + 34 + 19 + 8 = 88.

[0083] After obtaining the comprehensive score of the sub-application, selecting an adapter matching the sub-application based on the comprehensive score combined with the characteristic parameters, that is, the step of determining the adapter matching the sub-application based on the comprehensive score and the characteristic parameters, includes: Determining whether the comprehensive score and the characteristic parameter satisfy a matching rule of the adapter; When it is determined that the conditions are met, the adapter is used as an adapter matched by the sub-application.

[0084] In actual applications, the adapter is pre-defined with corresponding matching rules, which include comprehensive scoring conditions and feature parameter determination. Therefore, when matching the most suitable adapter according to the comprehensive score of the sub-application and the feature parameters, the adapter whose comprehensive score and feature parameters meet the matching rules can be used as the adapter that matches the sub-application. That is, the matching process based on the matching rules of the adapter is essentially the process of dynamically selecting the adapter according to the feature parameters and comprehensive score of the sub-application. This process can be shown as follows: The comprehensive score is > 80, and the characteristic parameter indicates that the sub-application's technology stack is React, so the WebComponents adapter is selected; If the comprehensive score is greater than 60 and the characteristic parameters indicate that the sub-application requires high isolation, the iframe adapter is selected; If the comprehensive score is > 70 and the characteristic parameters indicate that the sub-application needs to be dynamically loaded, select the ModuleFederation adapter.

[0085] Optionally, the matching rules may be set based on the specific conditions of each adapter. Figure 2 , Figure 2 The specific adaptation process for the general micro front-end adapter. Figure 2 The content indicated in the specific adaptation process of the micro-frontend adapter shown, the adapter modules that can be detected based on the micro-frontend base technology detection module include: iframes adapter module, qiankun adapter module and wujie adapter module, among which the iframes adapter module is suitable for traditional isolation solutions, the qiankun adapter module is suitable for micro-frontend framework based on Single-SPA, and the wujie adapter module is suitable for micro-frontend solutions based on Web Components.

[0086] As shown above, the loading status of the base system is detected by the detector and callback function of the event processing adapter module, and after detecting that the loading of the base system is completed, the activation status of the sub-application is detected, so as to configure the functional parameters of the adapter according to the acquired demand data of the sub-application, that is, the step of setting the configuration items of the adapter according to the characteristic parameters of the sub-application includes: Obtaining demand data of the sub-application; Setting the routing path of the adapter according to the URL data extracted from the demand data; The flag parameter and the decoration parameter set carried in the demand data are embedded into the routing path.

[0087] After the sub-application loaded by the base system selects an adapter, the routing path of the adapter is configured with the demand data of the sub-application, wherein the routing path of the adapter is used to define the process of loading and rendering the corresponding sub-application when accessing a certain URL, and the demand data includes the basic information of the sub-application (name, ID, version), routing configuration information (path, mode, default route, dynamic route), entry file information (URL, loading method), dependency information (dependency library, shared dependency), permission and security information (permission requirements, security configuration), performance and loading strategy (preloading, lazy loading), life cycle hooks (life cycle methods, routing switching hooks), environment and configuration (environment variables, global configuration), communication mechanism (communication method, protocol), error handling configuration, and logging and monitoring.

[0088] The configuration method based on the adapter routing path includes configuration based on the front-end routing library and configuration based on the back-end gateway, wherein the configuration of the front-end routing library defines routing rules by using the front-end routing library (such as react-router, vue-router, etc.). According to one or more routing paths corresponding to the sub-application, the routing path of the adapter is configured; and based on the back-end gateway configuration, the back-end gateway (such as Spring Cloud Gateway, Nginx, etc.) associates the request routing to the sub-application according to the URL pattern of the user request. The loading page of the sub-application is defined by the configuration of the routing path, thereby achieving more fine-grained routing control and load balancing. At the same time, since the routing configuration is performed on the back-end, cross-domain requests and security control can be more easily implemented.

[0089] In addition, considering the application page loaded by the sub-application, the identification parameters and decoration parameter sets carried in the demand data of the sub-application are embedded in the routing path. The identification parameters usually refer to the key attributes or information used to identify or distinguish the sub-application, and the identification parameters include the application name, version number, developer information, application icon and application description, etc. The decoration parameter set is used to beautify or enhance the appearance and function of the application. Additional parameters or setting items, including theme settings, layout settings, animation effects, custom styles and international settings, are used to improve the availability, accessibility and user experience of the sub-application. After the identification parameters and decoration parameter sets are embedded in the routing path of the adapter, the page features of the sub-application can be obtained by reading the routing path and loaded and displayed.

[0090] Optionally, when embedding the flag parameter and the decoration parameter set into the routing path of the adapter, the flag parameter and the decoration parameter set may be encoded to ensure that they can be safely embedded into the routing path, i.e., the URL. The embedding processing logic is: use encodeURIComponent to encode the parameter value to avoid illegal characters in the URL, such as theme=dark→theme=dark (no encoding required); lang=en-US→lang=en%2DUS.

[0091] In addition, the decoration parameter set is a complex parameter, which can also be serialized into a string and then encoded. For example: config={"theme":"dark","lang":"en"}→config=%7B%22theme%22%3A%22dark%22%2C%22lang%22%3A%22en%22%7D.

[0092] When embedding the encoded parameters into the routing path, query parameters are required to append the parameters to the query string of the routing path; path parameters are selected to embed the parameters directly into the routing path; path parameters are appended to the hash part of hash parameters, which is applicable to hash routing mode. The above is the parameter embedding process of the routing path, and the specific embedding process can also select the appropriate embedding method according to specific needs.

[0093] After setting the configuration parameters of the adapter through the demand data of the sub-application, the base system activates the sub-application according to the service name to load the page frame of the sub-application, that is, when the sub-application is activated, the step of mounting the page content of the sub-application to the micro-frontend framework for display through the adapter includes: Reading a decoration parameter set embedded in the routing path of the adapter, and selecting a matching page framework from the micro front-end framework according to the decoration parameter set; When the page frame is not selected, creating the page frame according to the decoration parameter set; The page content of the sub-application is displayed through the created page frame.

[0094] After the base system is started, the currently loaded sub-application is activated so as to view the page content of the sub-application. Wherein, since the base system carries a large number of resources and components, when the sub-application is started, the sub-application is activated through the service name of the sub-application so as to view the page. Since the page content of the sub-application is configured in the routing path of the adapter, after the base system activates the sub-application, the micro-frontend framework detects the activation of the sub-application, and loads the page content of the sub-application into the corresponding page frame through the adapter matched to the sub-application, wherein the micro-frontend framework pre-builds or pre-selects the page frame corresponding to the sub-application based on the routing path configured by the adapter in order to load the sub-application. This limitation is determined by parsing the routing path of the adapter to obtain the flag parameter of the sub-application, that is, based on the flag parameter, a page frame that matches the flag parameter is selected from the page frame of the micro-frontend framework to load the page content of the sub-application; Alternatively, a page frame including the required page sub-parts of the sub-application is constructed in the micro-frontend framework to adapt the sub-application page content, which is specifically determined by the matching of the page content of the sub-page and the page frame in the micro-frontend framework. In actual applications, it can be determined based on the matching of the page frame and the sub-application's flag parameters, that is, the relevant parameters of the page frame in the micro-frontend are compared with the flag parameters of the sub-application, and the page frame with the consistent comparison is used as the page frame for loading the sub-application. When the micro-frontend framework does not have a page frame that is consistent with the flag parameters of the sub-application, the corresponding page frame is reconstructed in the micro-frontend framework based on the flag parameters of the sub-application.

[0095] As shown above, after the base system activates the sub-application, the page content of the sub-application is loaded through the page frame of the micro-front-end framework, and based on the real-time communication connection between the base system and the micro-front-end framework, the sub-application page content loaded by the page frame is displayed in the base system. Due to the real-time communication between the micro-front-end framework and the base system, when displaying the page content loaded by the page frame, considering the security of the use of the sub-application integrated by the base system, the page frame needs to be integrated with the base system based on the general information of the base information, so that the user can view the sub-application page consistent with the style of the system page in the base system.

[0096] According to the real-time communication between the base system and the micro-frontend framework, after the sub-application is loaded into the page frame in the micro-frontend framework, the general data of the base system to activate the sub-application is obtained. The general data is the general information of the sub-application integrated by the base system, including permission item data, user login token and base view information. In this embodiment, a general information acquisition module can be set to obtain. Specifically, a corresponding acquisition method is provided in the general information acquisition module, including getAuthority(), getToken() and getView(). The following content is a targeted functional description of the acquisition method: getAuthority() is used to obtain permission item data of a set of strings, such as ["Permission Item 1", "Permission Item 2"]. A permission management system can be designed, which contains all permission items and corresponding data. By calling the corresponding interface or querying the database, the corresponding permission item data can be obtained according to the input set of strings.

[0097] getToken() is used to obtain the user login token in the base system. token is defined as a string. In the base system, a token is generated after the user logs in for identity authentication and authorization. To this end, the token is obtained by calling the authentication interface provided by the base system or using a suitable authentication mechanism.

[0098] getView() is used to obtain the view information of the base system, including the view ID, view code and view name. A view management system can be designed using JSON encoding, which contains all the view information. By calling the corresponding interface or querying the database, the corresponding view information is obtained according to the current state or identification of the base.

[0099] As shown above, the general data of the sub-application integrated into the base system is obtained through the acquisition method set in the general system acquisition module, and the page frame of the sub-application is loaded and processed based on the general data so as to merge the page style of the page frame with the base system, so that the user can view the sub-application page consistent with the base system page style in the base system, thereby realizing seamless integration of the base system and the sub-page.

[0100] In this embodiment, the universal micro-frontend adapter can automatically adapt the front-end framework according to the framework of the sub-application, and determine the micro-frontend technology and base implementation to be adopted according to the operating environment, thereby solving the adaptation problem of different micro-frontend technology frameworks and base implementations. By providing an adapted requester to handle differences such as gateway authentication and request headers, the technical effect of increasing the flexibility and scalability of micro-frontend framework integration is achieved.

[0101] Further, in another embodiment of the general basic capability adaptation method for micro front-ends of the present invention, the initialization method of the adapter is called to initialize the adapter, and an event detector is registered; Before the step of mounting the page content of the sub-application to the micro-frontend framework for display through the adapter when the sub-application is activated, the method further includes: After it is detected that the base system has been loaded, the activation state of the sub-application is detected.

[0102] In this embodiment, a suitable adapter is selected according to the sub-application technology stack (such as React, Vue, Angular, etc.). In the micro-frontend framework, the selected adapter module is dynamically loaded to ensure that the adapter is fully compatible with the sub-application technology stack.

[0103] The initialization method of the adapter is called based on the instance provided when the adapter is created. The initialization method usually includes processing contents such as setting the basic configuration of the adapter and initializing the internal state. When calling the initialization method, necessary parameters are passed, such as the entry URL of the sub-application, resource path, life cycle hook, etc.

[0104] In addition, the event types that need to be detected are clearly defined, and detection events based on the event types are defined, especially activation events of sub-applications, which usually indicate that the sub-application changes from an inactive state to an active state, such as when a user switches to the view of the sub-application. The triggering conditions of the activation event are determined, such as route changes, user interactions, etc.

[0105] Register the detector according to the determined event type and trigger condition, register the event detector on the adapter instance, and bind the detector function to the activation event to implement event detector binding. The detector function is responsible for processing the activation event, such as updating the UI, loading resources, triggering other business logic, etc.

[0106] To ensure that the event can be correctly propagated within the micro-frontend framework, optionally, the propagation can be defined as the detected event being passed from the sub-application layer to the framework layer, or broadcasted by the framework layer to all sub-applications. In addition, in the detector function, the default behavior of the event is blocked as needed, such as blocking event bubbling, blocking default event processing, etc.

[0107] As shown above, the event detector detects the activation status changes of the sub-application in real time, and records and updates the activation status of the sub-application based on the maintained storage status (such as the global state manager). According to the activation status of the sub-application, corresponding operations are performed, such as loading sub-application resources, updating routes, triggering animation effects, etc.

[0108] Optionally, in a micro-frontend framework, in order to detect route changes to determine the activation status of a sub-application, it is usually chosen to detect the browser's route change events, including popstate and hashchange.

[0109] Popstate event: mainly used to detect changes in browser history, usually triggered when using the HTML5History API (i.e. history mode). This event is triggered when the user clicks the forward or back button of the browser, or calls the history.pushState or history.replaceState method through JavaScript.

[0110] hashchange event: mainly used to detect changes in the hash part of the URL, usually triggered when using hash mode. This event is triggered when the hash part of the URL changes.

[0111] During the initialization of the adapter or main application of the micro frontend framework, register the detector of the above route change event. The detector function will be called when the route change event occurs. In the detector function, get the path or hash part of the current route through window.location.pathname or window.location.hash. Optionally, define activation rules (activeRule) for each sub-application in advance. The activation rule can be a path prefix, regular expression or other matching logic.

[0112] In the detector function, the current routing path is matched with the activation rule of the sub-application. Optionally, the match is determined to be successful when the URL path in the routing is determined to be consistent with the URL data of the sub-application. If the match is successful, the sub-application is determined to be activated. When it is determined that the sub-application is activated, the loading logic of the sub-application is triggered. This may include loading the entry file of the sub-application (such as JavaScript, CSS, etc.), rendering the view of the sub-application, etc.

[0113] In a micro-frontend framework, a sub-application usually has a series of lifecycle hooks, such as bootstrap, mount, and unmount. When a sub-application is activated, its bootstrap and mount hooks are called for initialization and mounting operations. When a sub-application is uninstalled, its unmount hook is called for cleanup. In a micro-frontend framework, in order to avoid repeated registration of event detectors, deduplication can be performed during the initialization process. At the same time, in order to improve performance, event detector functions can be reused to reduce unnecessary memory consumption.

[0114] In this implementation, the micro-frontend framework can detect route change events through event detectors, determine the activation status of sub-applications, and then perform corresponding resource loading and lifecycle hook call operations. This process ensures that sub-applications can be correctly activated and uninstalled according to route changes, improving the flexibility of the system and user experience.

[0115] It should be noted that the above examples are only used to understand the present application and do not constitute a limitation on the general basic capability adaptation method for micro-frontends of the present application. More forms of simple transformations based on this technical concept are all within the scope of protection of the present application.

[0116] The present application provides a general basic capability adaptation device for micro front-ends, and the general basic capability adaptation device for micro front-ends includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the general basic capability adaptation method for micro front-ends in the above-mentioned embodiment one.

[0117] Reference below Figure 3 , which shows a schematic diagram of the structure of a general basic capability adaptation device for micro-frontends suitable for implementing the embodiment of the present application. The general basic capability adaptation device for micro-frontends in the embodiment of the present application may include but is not limited to mobile terminals such as mobile phones, laptops, digital broadcast receivers, PDAs (Personal Digital Assistants), PADs (Portable Application Descriptions), PMPs (Portable Media Players), etc., and fixed terminals such as digital TVs and desktop computers. Figure 3 The general basic capability adaptation device for micro-frontends shown is merely an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.

[0118] like Figure 3As shown, the general basic capability adaptation device for micro front-ends may include a processing device 1001 (such as a central processing unit, a graphics processing unit, etc.), which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM: Read Only Memory) 1002 or a program loaded from a storage device 1003 to a random access memory (RAM: Random Access Memory) 1004. In RAM1004, various programs and data required for the operation of the general basic capability adaptation device for micro front-ends are also stored. The processing device 1001, ROM1002 and RAM1004 are connected to each other via a bus 1005. An input / output (I / O) interface 1006 is also connected to the bus. Typically, the following systems can be connected to the I / O interface 1006: input devices 1007 including, for example, a touch screen, a touchpad, a keyboard, a mouse, an image sensor, a microphone, an accelerometer, a gyroscope, etc.; output devices 1008 including, for example, a liquid crystal display (LCD), a speaker, a vibrator, etc.; storage devices 1003 including, for example, a tape, a hard disk, etc.; and communication devices 1009. The communication device 1009 can allow the general basic capability adapter device for micro-frontends to communicate wirelessly or wired with other devices to exchange data. Although the figure shows a general basic capability adapter device for micro-frontends with various systems, it should be understood that it is not required to implement or have all the systems shown. More or fewer systems may be implemented or have instead.

[0119] In particular, according to the embodiments disclosed in the present application, the process described above with reference to the flowchart can be implemented as a computer software program. For example, the embodiments disclosed in the present application include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication device, or installed from a storage device 1003, or installed from a ROM 1002. When the computer program is executed by the processing device 1001, the above-mentioned functions defined in the method of the embodiment disclosed in the present application are executed.

[0120] The general basic capability adaptation device for micro-frontends provided by the present application adopts the general basic capability adaptation method for micro-frontends in the above-mentioned embodiment, which can solve the technical problem that the existing micro-frontend integration cannot adapt to front-end frameworks of various technical types, resulting in the inability of the base system to seamlessly integrate multiple sub-applications. Compared with the prior art, the beneficial effects of the general basic capability adaptation device for micro-frontends provided by the present application are the same as the beneficial effects of the general basic capability adaptation method for micro-frontends provided by the above-mentioned embodiment, and the other technical features in the general basic capability adaptation device for micro-frontends are the same as the features disclosed in the method of the previous embodiment, which will not be repeated here.

[0121] It should be understood that the various parts disclosed in this application can be implemented by hardware, software, firmware or a combination thereof. In the description of the above embodiments, specific features, structures, materials or characteristics can be combined in any one or more embodiments or examples in a suitable manner.

[0122] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art who is familiar with the present technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

[0123] The present application provides a storage medium, which is a computer-readable storage medium having computer-readable program instructions (i.e., a computer program) stored thereon, and the computer-readable program instructions are used to execute the general basic capability adaptation method for micro-frontends in the above-mentioned embodiment.

[0124] The computer-readable storage medium provided in the present application may be, for example, a USB flash drive, but is not limited to electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, systems or devices, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM: Random Access Memory), a read-only memory (ROM: Read Only Memory), an erasable programmable read-only memory (EPROM: Erasable Programmable Read Only Memory or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM: CD-Read Only Memory), an optical storage device, a magnetic storage device, or any suitable combination of the above. In this embodiment, the computer-readable storage medium may be any tangible medium containing or storing a program, which may be used by or in combination with an instruction execution system, system or device. The program code contained on the computer-readable storage medium may be transmitted using any appropriate medium, including but not limited to: wires, optical cables, RF (Radio Frequency: Radio Frequency), etc., or any suitable combination of the above.

[0125] The above-mentioned computer-readable storage medium may be included in the general basic capability adapter device for micro front-ends; or it may exist independently without being assembled into the general basic capability adapter device for micro front-ends.

[0126] The above-mentioned computer-readable storage medium carries one or more programs. When the above-mentioned one or more programs are executed by the general basic capability adaptation device for micro-frontends, the general basic capability adaptation device for micro-frontends implements the technical content of the embodiment of the general basic capability adaptation method for micro-frontends as shown above.

[0127] Computer program code for performing the operations of the present application may be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, C++, and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a separate software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0128] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present application. In this regard, each square box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the module, the program segment or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the square box can also occur in a sequence different from that marked in the accompanying drawings. For example, two square boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each square box in the block diagram and / or flow chart, and the combination of the square boxes in the block diagram and / or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0129] The modules involved in the embodiments described in this application may be implemented by software or hardware, wherein the name of the module does not constitute a limitation on the unit itself in some cases.

[0130] The readable storage medium provided by the present application is a computer-readable storage medium, which stores computer-readable program instructions (i.e., computer programs) for executing the above-mentioned general basic capability adaptation method for micro-frontends, and can solve the technical problem that the existing micro-frontend integration cannot adapt to front-end frameworks of various technical types, resulting in the inability of the base system to seamlessly integrate multiple sub-applications. Compared with the prior art, the beneficial effects of the computer-readable storage medium provided by the present application are the same as the beneficial effects of the general basic capability adaptation method for micro-frontends provided by the above-mentioned embodiments, and will not be repeated here.

Claims

1. A general basic capability adaptation method for micro front-ends, characterized in that: The method includes: Determine the sub-application that needs to be loaded currently, and obtain characteristic parameters of the sub-application; Calculating the characteristic parameters by using a preset adapter matching algorithm, and determining an adapter matching the sub-application according to the calculation result; Setting configuration items of the adapter according to characteristic parameters of the sub-application; When the sub-application is activated, the page content of the sub-application is mounted to the micro-frontend framework for display through the adapter.

2. The general basic capability adaptation method for micro front-ends according to claim 1, characterized in that: The step of determining the sub-application currently to be loaded and obtaining the characteristic parameters of the sub-application includes: Reading a loading event of the sub-application to determine a loading status of the sub-application; If the sub-application is not loaded, obtaining the static resources of the sub-application, and extracting the characteristic parameters from the static resources; If the sub-application has been loaded, the behavior characteristic data of the sub-application is detected, and the characteristic parameters are extracted through the behavior characteristic data.

3. The general basic capability adaptation method for micro front-ends according to claim 1, characterized in that: The step of calculating the characteristic parameters by using a preset adapter matching algorithm and determining an adapter matching the sub-application according to the calculation result includes: Determine a weight allocation algorithm according to the business requirements of the sub-application; Allocating weight values ​​corresponding to the feature parameters by means of the weight allocation algorithm, and calculating the comprehensive score of the sub-application using the weight values; An adapter matching the sub-application is determined according to the comprehensive score and the characteristic parameters.

4. The general basic capability adaptation method for micro front-ends according to claim 3 is characterized in that: The step of determining an adapter matching the sub-application according to the comprehensive score and the characteristic parameters comprises: Determining whether the comprehensive score and the characteristic parameter satisfy a matching rule of the adapter; When it is determined that the conditions are met, the adapter is used as an adapter matched by the sub-application.

5. The general basic capability adaptation method for micro front-ends according to claim 1, characterized in that: The step of setting the configuration items of the adapter according to the characteristic parameters of the sub-application includes: Obtaining demand data of the sub-application; Setting the routing path of the adapter according to the URL data extracted from the demand data; The flag parameter and the decoration parameter set carried in the demand data are embedded into the routing path.

6. The general basic capability adaptation method for micro front-ends according to claim 1, characterized in that: When the sub-application is activated, the step of mounting the page content of the sub-application to the micro-frontend framework for display through the adapter includes: Reading a decoration parameter set embedded in the routing path of the adapter, and selecting a matching page framework from the micro front-end framework according to the decoration parameter set; When the page frame is not selected, creating the page frame according to the decoration parameter set; The page content of the sub-application is displayed through the created page frame.

7. The general basic capability adaptation method for micro front-ends according to claim 1, characterized in that: After the step of calculating the characteristic parameters by a preset adapter matching algorithm and determining the adapter matching the sub-application according to the calculation result, the method further includes: Calling the initialization method of the adapter to initialize the adapter and registering the event detector; Before the step of mounting the page content of the sub-application to the micro-frontend framework for display through the adapter when the sub-application is activated, the method further includes: After it is detected that the base system has been loaded, the activation state of the sub-application is detected.

8. The general basic capability adaptation method for micro front-ends according to claim 1, characterized in that: Before the step of calculating the characteristic parameters by a preset adapter matching algorithm and determining the adapter matching the sub-application according to the calculation result, the method further includes: Create a new adapter and store the adapter in the micro front-end framework; According to the sub-application integration requirements of the base system, real-time communication with the micro-front-end framework is carried out through the base system communication interface.

9. A general basic capability adaptation device for micro front-ends, characterized in that: The device includes: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the computer program is configured to implement the steps of the general basic capability adaptation method for micro-frontends as described in any one of claims 1 to 8.

10. A storage medium, characterized in that: The storage medium is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by the processor, the steps of the general basic capability adaptation method for micro-frontends as described in any one of claims 1 to 8 are implemented.

Images