[go: up one dir, main page]

CN120010913A - A general basic capability adaptation method, device and storage medium for micro front-ends - Google Patents

A general basic capability adaptation method, device and storage medium for micro front-ends Download PDF

Info

Publication number
CN120010913A
CN120010913A CN202510473468.0A CN202510473468A CN120010913A CN 120010913 A CN120010913 A CN 120010913A CN 202510473468 A CN202510473468 A CN 202510473468A CN 120010913 A CN120010913 A CN 120010913A
Authority
CN
China
Prior art keywords
application
sub
adapter
micro
micro front
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202510473468.0A
Other languages
Chinese (zh)
Other versions
CN120010913B (en
Inventor
刘林鹏
李冠霖
滕一帆
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shenzhen Smart City Technology Development Group Co ltd
Original Assignee
Shenzhen Smart City Technology Development Group Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shenzhen Smart City Technology Development Group Co ltd filed Critical Shenzhen Smart City Technology Development Group Co ltd
Priority to CN202510473468.0A priority Critical patent/CN120010913B/en
Publication of CN120010913A publication Critical patent/CN120010913A/en
Application granted granted Critical
Publication of CN120010913B publication Critical patent/CN120010913B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04LTRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L41/00Arrangements for maintenance, administration or management of data switching networks, e.g. of packet switching networks
    • H04L41/08Configuration management of networks or network elements
    • H04L41/0803Configuration setting
    • H04L41/0813Configuration setting characterised by the conditions triggering a change of settings
    • H04L41/0816Configuration setting characterised by the conditions triggering a change of settings the condition being an adaptation, e.g. in response to network events
    • GPHYSICS
    • G06COMPUTING OR CALCULATING; COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F18/00Pattern recognition
    • G06F18/20Analysing
    • G06F18/21Design or setup of recognition systems or techniques; Extraction of features in feature space; Blind source separation
    • G06F18/213Feature extraction, e.g. by transforming the feature space; Summarisation; Mappings, e.g. subspace methods
    • GPHYSICS
    • G06COMPUTING OR CALCULATING; COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F18/00Pattern recognition
    • G06F18/20Analysing
    • G06F18/22Matching criteria, e.g. proximity measures
    • GPHYSICS
    • G06COMPUTING OR CALCULATING; COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING OR CALCULATING; COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/70Software maintenance or management
    • G06F8/71Version control; Configuration management
    • GPHYSICS
    • G06COMPUTING OR CALCULATING; COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/70Software maintenance or management
    • G06F8/76Adapting program code to run in a different environment; Porting
    • GPHYSICS
    • G06COMPUTING OR CALCULATING; COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/445Program loading or initiating
    • G06F9/44521Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04LTRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L41/00Arrangements for maintenance, administration or management of data switching networks, e.g. of packet switching networks
    • H04L41/08Configuration management of networks or network elements
    • H04L41/0803Configuration setting
    • H04L41/0813Configuration setting characterised by the conditions triggering a change of settings
    • H04L41/082Configuration setting characterised by the conditions triggering a change of settings the condition being updates or upgrades of network functionality
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04LTRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L41/00Arrangements for maintenance, administration or management of data switching networks, e.g. of packet switching networks
    • H04L41/08Configuration management of networks or network elements
    • H04L41/085Retrieval of network configuration; Tracking network configuration history
    • H04L41/0853Retrieval of network configuration; Tracking network configuration history by actively collecting configuration information or by backing up configuration information
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04LTRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L41/00Arrangements for maintenance, administration or management of data switching networks, e.g. of packet switching networks
    • H04L41/08Configuration management of networks or network elements
    • H04L41/0876Aspects of the degree of configuration automation
    • YGENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02DCLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Signal Processing (AREA)
  • Computer Networks & Wireless Communication (AREA)
  • Computer Vision & Pattern Recognition (AREA)
  • Bioinformatics & Computational Biology (AREA)
  • Evolutionary Computation (AREA)
  • Evolutionary Biology (AREA)
  • Bioinformatics & Cheminformatics (AREA)
  • Artificial Intelligence (AREA)
  • Life Sciences & Earth Sciences (AREA)
  • Human Computer Interaction (AREA)
  • Computer Security & Cryptography (AREA)
  • Automation & Control Theory (AREA)
  • Information Transfer Between Computers (AREA)
  • Stored Programmes (AREA)

Abstract

本申请公开了一种面向微前端的通用基础能力适配方法、设备及存储介质,包括:确定当前需加载的子应用,并获取所述子应用的特征参数;通过预设的适配器匹配算法计算所述特征参数,并根据计算结果确定与所述子应用匹配的适配器;根据所述子应用的特征参数设置所述适配器的配置项;在所述子应用被激活时,通过所述适配器将所述子应用的页面内容挂载至微前端框架显示。本申请提出的通用微前端适配器,可根据子应用框架自动进行前端框架适配,并根据运行环境判断采用的微前端技术和底座实现,解决了不同微前端技术框架和底座实现的适配问题,通过适配的请求器处理网关鉴权和请求头等差异,实现了增加微前端框架集成的灵活性和可拓展性。

The present application discloses a general basic capability adaptation method, device and storage medium for micro-frontends, including: determining the sub-application that needs to be loaded currently, and obtaining the characteristic parameters of the sub-application; calculating the characteristic parameters through a preset adapter matching algorithm, and determining the adapter that matches the sub-application according to the calculation result; setting the configuration items of the adapter according to the characteristic parameters of the sub-application; when the sub-application is activated, mounting the page content of the sub-application to the micro-frontend framework for display through the adapter. The general micro-frontend adapter proposed in the present application can automatically adapt the front-end framework according to the sub-application framework, and judge the adopted micro-frontend technology and base implementation according to the operating environment, which solves the adaptation problem of different micro-frontend technology frameworks and base implementations, and increases the flexibility and scalability of micro-frontend framework integration by processing differences such as gateway authentication and request headers through the adapted requester.

Description

General basic capability adaptation method, device and storage medium for micro front end
Technical Field
The present application relates to the technical field of micro front end frames, and in particular, to a method, an apparatus, and a storage medium for adapting universal basic capabilities for micro front ends.
Background
When the base system integrates a plurality of sub-applications in a main station, if the sub-applications use different front-end frameworks, when the sub-applications are integrated, the micro front-end adopting a front-end framework mode is used for integrating the sub-applications. Such as practice, vue and Angular, etc.
Because the technology stacks used are different between different technology frameworks, the related micro-front-end integration can only adapt to one technology framework, but does not support adapting to multiple technology frameworks. If the base system has a need to integrate different technology stack sub-applications, specific configuration and code modification are required according to different technologies and bases, which results in greater complexity of the system.
The foregoing is provided merely for the purpose of facilitating understanding of the technical solutions of the present application and is not intended to represent an admission that the foregoing is prior art.
Disclosure of Invention
The application mainly aims to provide a general basic capability adapting method, equipment and a storage medium for a micro front end, and aims to solve the technical problem that a base system cannot seamlessly integrate a plurality of sub-application works due to the fact that the existing micro front end cannot adapt to a front end frame of a plurality of technical types.
In order to achieve the above object, the present application provides a general basic capability adaptation method for micro front end, which includes:
determining a sub-application to be loaded currently, and acquiring characteristic 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-application;
And when the sub-application is activated, the page content of the sub-application is mounted to a micro-front-end framework for display through the adapter.
In an embodiment, the step of determining the sub-application to be loaded currently and obtaining the feature parameters of the sub-application includes:
Reading a loading event of the sub-application to determine a loading state of the sub-application;
If the sub-application is not loaded, acquiring a static resource of the sub-application, and extracting the characteristic parameters from the static resource;
and if the sub-application is loaded, detecting behavior characteristic data of the sub-application, and extracting the characteristic parameters through the behavior characteristic data.
In an embodiment, the step of calculating the characteristic parameter through a preset adapter matching algorithm and determining an adapter matched with the sub-application according to a calculation result includes:
determining a weight distribution algorithm according to the business requirements of the sub-application;
Distributing weight values corresponding to the characteristic parameters through the weight distribution algorithm, and calculating comprehensive scores of the sub-applications according to the weight values;
and determining an adapter matched with the sub-application according to the comprehensive score and the characteristic parameters.
In one embodiment, the step of determining an adapter matching the sub-application based on the composite score and the feature parameter comprises:
determining whether the composite score and the characteristic parameter satisfy a matching rule of the adapter;
And when the sub-application is determined to be satisfied, the adapter is used as an adapter matched with the sub-application.
In an embodiment, the step of setting the configuration item of the adapter according to the feature parameter of the sub-application includes:
acquiring the demand data of the sub-application;
setting a routing path of the adapter according to the URL data extracted from the demand data;
And embedding the mark parameter and the decoration parameter set carried in the demand data into the routing path.
In one embodiment, when the sub-application is activated, the step of mounting, by the adapter, the page content of the sub-application to a micro-front-end frame display includes:
reading a decoration parameter set embedded in a routing path of the adapter, and selecting a matched page frame from the micro front end frames according to the decoration parameter set;
when the page frame is not selected, creating the page frame according to the decoration parameter set;
And displaying the page content of the sub-application through the created page frame.
In an embodiment, after the step of calculating the characteristic parameter through a preset adapter matching algorithm and determining the adapter matching the sub-application according to the calculation result, the method further includes:
calling an initialization method of the adapter to initialize the adapter and registering an event detector;
the step of mounting, by the adapter, the page content of the sub-application to the micro front end frame for display when the sub-application is activated, further comprises:
and after the completion of the loading of the base system is detected, detecting the activation state of the sub-application.
In an embodiment, before the step of calculating the characteristic parameter through a preset adapter matching algorithm and determining the adapter matched with the sub-application according to the calculation result, the method further includes:
Newly building an adapter and storing the adapter in the micro front end frame;
And according to the sub-application integration requirement of the base system, communicating with the micro front end framework in real time through the base system communication interface.
In addition, in order to achieve the above object, the present application also proposes a micro front end oriented general purpose basic capability adaptation device, 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 micro front end oriented general purpose basic capability adaptation method as described above.
In addition, to achieve the above object, the present application further proposes a storage medium, which is a computer readable storage medium, on which a computer program is stored, which when being executed by a processor, implements the steps of the general basic capability adaptation method for micro front ends as described above.
One or more technical schemes provided by the application have at least the following technical effects:
The technical scheme includes that a sub-application to be loaded currently is determined, characteristic parameters of the sub-application are obtained, the characteristic parameters are calculated through a preset adapter matching algorithm, an adapter matched with the sub-application is determined according to a calculation result, configuration items of the adapter are set according to the characteristic parameters of the sub-application, and when the sub-application is activated, page content of the sub-application is mounted to a micro front end frame through the adapter to be displayed. The application provides a universal micro front-end adapter, which can automatically adapt to a front-end framework according to a framework of a sub-application, judge the adopted micro front-end technology and a base according to an operation environment, solve the adaptation problem realized by different micro front-end technology frameworks and bases, and realize the technical effects of increasing the flexibility and the expansibility of the integration of the micro front-end framework by providing an adaptive requester to process gateway authentication, request heads and other differences.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the application and together with the description, serve to explain the principles of the application.
In order to more clearly illustrate the embodiments of the application or the technical solutions of the prior art, the drawings which are used in the description of the embodiments or the prior art will be briefly described, and it will be obvious to a person skilled in the art that other drawings can be obtained from these drawings without inventive effort.
FIG. 1 is a schematic flow chart of a general basic capability adaptation method for micro front end according to an embodiment of the present application;
FIG. 2 is a schematic diagram of a multi-modal large model architecture;
Fig. 3 is a schematic device structure diagram of a hardware running environment related to a general basic capability adaptation method facing to a micro front end in an embodiment of the present application.
The achievement of the objects, functional features and advantages of the present application will be further described with reference to the accompanying drawings, in conjunction with the embodiments.
Detailed Description
It should be understood that the specific embodiments described herein are merely illustrative of the technical solution of the present application and are not intended to limit the present application.
For a better understanding of the technical solution of the present application, the following detailed description will be given with reference to the drawings and the specific embodiments.
The main solution of the embodiment of the application is that the sub-application to be loaded currently is determined, the characteristic parameters of the sub-application are obtained, the characteristic parameters are calculated through a preset adapter matching algorithm, an adapter matched with the sub-application is determined according to the calculation result, the configuration items of the adapter are set according to the characteristic parameters of the sub-application, and when the sub-application is activated, the page content of the sub-application is mounted to a micro front end frame through the adapter for display.
Because the existing micro front-end integration can only be generally adapted to one technical framework and cannot support to be adapted to multiple frameworks, the base system needs to be manually adapted when the application of integrating different micro front-ends is required, and specific configuration and code modification are performed according to different technologies and base implementations, so that the complexity and development time of integration are increased, and the base system cannot seamlessly integrate multiple sub-applications to work.
The application provides a solution, provides a general micro front-end adapter, can automatically adapt to a front-end framework according to a framework of a sub-application, judges the adopted micro front-end technology and a base according to an operation environment, solves the adaptation problem of different micro front-end technology frameworks and base, and achieves the technical effect of increasing the flexibility and expansibility of micro front-end framework integration by providing an adapted requester to process gateway authentication, request head and other differences.
Based on this, the embodiment of the present application provides a micro front end-oriented general basic capability adaptation method, referring to fig. 1, fig. 1 is a schematic flow chart of a first embodiment of the micro front end-oriented general basic capability adaptation method of the present application. In this embodiment, the general basic capability adaptation method for the micro front end includes steps S10 to S40:
step S10, determining a sub-application to be loaded currently, and acquiring characteristic parameters of the sub-application;
Step S20, calculating the characteristic parameters through a preset adapter matching algorithm, and determining an adapter matched with the sub-application according to a calculation result;
step S30, setting configuration items of the adapter according to the characteristic parameters of the sub-application;
And step S40, when the sub-application is activated, the page content of the sub-application is mounted to a micro front end frame for display through the adapter.
In this embodiment, the application data platform is normally operated through a base system, and the base system is a basic setting and system architecture for supporting the normal operation of the application data platform. The application data platform may include an enterprise data platform, a financial data platform, a medical health data platform, a unit data platform, an educational data platform, a social media data platform, an industrial data platform, a traffic data platform, an energy data platform, and the like.
In practical application, the base system can realize the cooperative work of the application data platform by loading the third party sub-application besides the function setting of the base system. Thus, the base system may also include its own system functionality and third party developed application functionality. The application functions developed by the third party can comprise related functions of a user comment system, a commodity recommendation module, an order management interface and the like which can assist in using the application data platform. In a base system, for example, system functionality including aspects of data processing, storage, analysis, and user interaction may be implemented through integration of third party applications.
For this purpose, based on the application of the base system, a micro front end architecture connected to the base system is created in advance for the integrated use of the third party application.
Alternatively, the base system based application may be connected to the created micro front end architecture, thereby enabling the base system to perform integrated use of third party applications.
When the micro front-end architecture is connected with the base station system and enables the base station system to realize the integrated use of the third party application, the stored adapters are used for realizing the isolation and the mounting of the third party application to realize the integrated use of the third party application, so that the steps of calculating the characteristic parameters through a preset adapter matching algorithm and determining the adapter matched with the sub-application according to the calculation result are preceded by the steps of:
Newly building an adapter and storing the adapter in the micro front end frame;
And according to the sub-application integration requirement of the base system, communicating with the micro front end framework in real time through the base system communication interface.
In this embodiment, based on the integrated use requirement of the third-party sub-application of the current base system, a micro front end framework is created for seamlessly integrating the third-party sub-application of the base system. When the micro front end frame is constructed, a proper frame is customized, and the micro front end frame in practical application comprises Single-SPA, qiankun and Module Federation (Webpack), wherein qiankun is a Single-SPA-based micro front end frame.
The Single-SPA supports the mixed use of a plurality of front end frameworks (such as React, vue, angular and the like), can provide a powerful life cycle management function, and has active communities and detailed documents. Qiankun, which is an improved framework based on Single-SPA;
Module Federation (Webpack 5) may allow different applications to share modules and may be configured directly using Webpack without additional framework.
Specifically, the frame may be selected based on the type of technical stack of the third party sub-application to be integrated in the base system and based on the loading mode of the sub-application, and a best matching frame is selected from the micro-front-end frames to create the micro-front-end frame.
In creating the micro front end framework, the environment configuration is performed according to the selected framework shown above, and the essence is related to the specific framework based on the specific process of the environment configuration.
Optionally, taking qiankun frames as examples to perform the environment configuration process, firstly using npm or yarn to install qiankun frames, creating a new Vue item as a main application, introducing qiankun the frames into main.js to configure registration and starting of the main application, then creating sub-applications, adding the life cycle hooks of qiankun into main.js, wherein the life cycle hooks comprise bootstrap, mount, unmount and other contents, and then setting publicPath as a packaging path of the sub-applications in the vue.config.js of the sub-applications. The main application indicated here may be defined as a base system connected to the micro front end frame, i.e. after the base system is connected to the frame to implement real-time communication, the base system is used as the main application of the micro front end frame, and the sub-application is defined as a third party application to be integrated with the base system. Optionally, an application can be customized as the main application according to the use requirement of the current micro front end framework, and related sub-applications can be created on the basis of the main application.
The integration of the third-party sub-application into the main application based on the created micro front end framework is realized through configuration routing and layout, in this embodiment, the integration of the third-party sub-application into the base system is realized through configuration routing and layout, and the specific process of the configuration routing and layout includes the steps of configuring routing in the base system to load the sub-application, creating a container in a view of the base system to load the sub-application, and processing routing prefix problems in the sub-application to enable the sub-application to independently run.
Furthermore, considering the service life of the micro front end framework, the large application program can be split into small modules aiming at the framework of the micro front end framework, so that each module can be independently developed, tested and deployed, the development efficiency is improved, and the code complexity is reduced. In the micro front-end framework, a small module obtained by splitting a large application program is used as a micro application, independent deployment and maintenance in different micro applications are set, communication is carried out among the micro applications through interfaces or events, corresponding technical stacks are selected according to the requirements of the micro applications, and loading time of main applications and sub applications is reduced by using lazy loading, code splitting and other technologies. And, a unified CSS framework or design system is used to create the main application and the sub-application, and the log system and the monitoring tool are integrated to discover and solve the problems in time.
And in the micro front-end framework, communication between the base system and the third party sub-application is realized through WebSocket. According to the above, in the micro front end framework, the base system is used as a main application to communicate with a third party sub-application to be integrated through a WebSocket server, so that, based on the communication, the WebSocket server needs to be determined first, and a WebSocket server provided by the base system detects and processes connection requests and data transmission from the sub-application. And configuring the address and port of the WebSocket server to ensure that the sub-application can be correctly connected to the WebSocket server.
In the above-mentioned embodiment, when the communication application integrated by the base system and the third party application is implemented based on the WebSocket server, a specific configuration flow based on the communication application specifically includes the following contents:
1) The WebSocket server configures the flow;
And selecting a WebSocket server frame, namely selecting a proper WebSocket server frame, such as a ws module of node. Js, a Spring WebSocket of Java and the like, according to the technical stack and project requirements.
Setting up a WebSocket server, setting up the WebSocket server by using the selected frame, configuring basic information such as a detection port, a domain name and the like of the server, and writing core codes of the WebSocket server, wherein the core codes comprise logic for processing connection and message receiving and sending.
And (3) configuring security setting, namely configuring SSL/TLS encryption for the WebSocket server, and ensuring the security of communication data. Proper firewall rules and access control strategies are set to limit illegal access.
Testing and deployment, namely testing the WebSocket server in a local or testing environment to ensure the normal function of the WebSocket server. After the test is passed, the server is deployed to the production environment, and the corresponding domain name and port are configured.
2) WebSocket client configuration flow (in the base system);
Initializing the WebSocket connection, namely initializing a WebSocket client in the code of the base system, and designating the address and the port of a WebSocket server. And establishing connection by using a WebSocket API, and setting processing logic of events such as connection establishment, message reception, connection closing and the like.
Processing message reception, when the base system receives the message from the WebSocket server, deciding how to process according to the content of the message. If the message is data required by a sub-application, the message may be forwarded to the corresponding sub-application.
Send message to server when the base system needs to communicate with the server or other sub-application, send message through WebSocket connection. Different types of messages, such as text messages, binary messages, etc., may be sent as desired.
And realizing a heartbeat mechanism in order to keep the stability of WebSocket connection. And sending heartbeat packets to the server periodically, and updating the connection state when a heartbeat response of the server is received.
Optionally, according to the specific configuration flow of the communication application, the implementation method includes the following processing logic:
And (3) connection management, namely maintaining a WebSocket connection pool in the base system, and managing all connections with the WebSocket server. When a new connection is established, it is added to the connection pool and when the connection is closed, it is removed from the connection pool.
Message routing, namely realizing a message routing mechanism and forwarding the message to a corresponding sub-application or server according to the information such as the type, the target address and the like of the message. Message routing may be implemented using middleware or proxy mode.
Error processing, namely, in a base system, an error processing mechanism is realized, and possible errors in the WebSocket communication process are captured and processed. When an error occurs, corresponding processing measures such as retrying the connection, logging, etc. may be taken depending on the type of error.
And the cross-domain processing is carried out by locating the base system and the WebSocket server in different domains. Fields such as Access-Control-alloy-Origin and the like can be added in a response header of the WebSocket server, so that the base system is allowed to make a cross-domain request.
Through the configuration flow and the processing logic, a base system can be used as a main application in the micro front-end framework, a plurality of third party sub-applications are integrated, and the WebSocket server is used for efficient and real-time communication. The implementation process relates to the establishment and configuration of a WebSocket server, the initialization and message processing of a WebSocket client in a base system, connection management, message routing, error processing, cross-domain processing and other aspects. Ensuring the correct configuration and implementation of each link is the key for realizing stable and reliable WebSocket communication.
Further, according to the configuration and implementation process shown above, the testing and verification needs to be performed based on the communication, which specifically includes:
1) And a functional test, which is used for ensuring that the base system can be successfully connected to the WebSocket server and can send and receive data.
2) Performance testing, namely testing performance indexes such as delay, throughput and the like of the WebSocket connection, and can meet application requirements.
3) And testing stability of the WebSocket connection under the condition of long-time operation, and avoiding the problems of frequent disconnection or data loss and the like.
4) And (3) security testing, namely determining the security of the WebSocket connection, and carrying out encryption transmission in a WSS (WebSocket Secure) protocol mode and the like based on the security testing to prevent data leakage and illegal access.
In practical applications, the WebSocket server needs to be implemented by specific software, including but not limited to a ws module of node. Js, a WebSocket library of Python, a Spring WebSocket of Java, and the like. The requirements of communication connection between the micro front end frame and the base system in different application scenes can be met through rich functions and configuration options provided by the micro front end frame.
Further, based on the technical stack supported by the micro front end framework, an adapter capable of normal running in the micro front end framework is newly built based on the sub-application of the technical stack, wherein the technical stack includes, but is not limited to React, vue, angular, etc., and specifically can be determined based on the sub-application applied by the base system, that is, the sub-application is substantially determined based on the functional use of the base system connected by the micro front end framework. Therefore, when the adapter is newly built, it is necessary to determine the technology stacks used by the sub-applications applied in the micro front-end framework respectively, and determine relevant information based on the sub-applications when applied in the micro front-end framework, including technology stack differences, state management, style isolation, communication mechanisms, and the like. The functional and performance requirements of the adapter are then determined based on the information according to the correlation.
Then, according to the determined function and performance requirements of the adapter, a corresponding technical stack and tool chain are selected, wherein the technical stack and tool chain comprises front-end frameworks such as React, vue, angular and creating tools such as Webpack and Vite, and the function library and framework types to be used by the adapter are determined to be realized in the micro-front-end frameworks based on the micro-front-end frameworks and the building tools, and the framework types comprise, but are not limited to, qiankun, micro-app and the like. And carrying out functional design of the adapter according to the selected framework type and function library, wherein the functional design comprises a technology stack adaptation design, a router adaptation design, a state management adaptation design, a style isolation adaptation design and a communication mechanism adaptation design. And forming a design document according to the functional design content, writing codes of the adapter based on the design document, and generating an adapter meeting the requirements based on code coding operation of the adapter so as to ensure that the function of the adapter is correct and the performance meets the use requirements when the adapter is applied.
Further, based on the design of the adapter, an interface definition of a target micro-application and a source micro-application needs to be defined, wherein the target micro-application is a micro-application desiring to receive data, and the source micro-application is a micro-application providing data. When the interface of the target micro-application is realized, a method of the source micro-application is called or the attribute of the source micro-application is accessed in the interface to acquire the required data. Thus, based on the data transformation between the target micro-application and the source micro-application, the data provided by the source micro-application is transformed into a format expected by the target micro-application through a design adapter, and this data transformation action involves operations such as data type transformation, data structure adjustment or data filtering and mapping.
And when the data conversion among the micro applications is realized in the micro front-end architecture, the data can be correctly transferred among the micro applications through an integrated communication protocol mechanism. In addition, the adapter is also provided with an error capturing mechanism and rollback logic executed based on each error message.
And determining a corresponding adapter according to the designed adapter and the micro front end architecture type characterized in the characteristic parameters of the sub application, and performing operation based on the adapter. Taking qiankun features as an example, if qiankun objects exist in the feature parameters of the sub-application, the sub-application is defined as a sub-application of a qiankun micro front-end framework. And according to the identified qiankun features, searching and matching an adapter specially designed for the qiankun features in an adapter library through a preset adapter matching algorithm to serve as an adapter of the sub-application, and realizing seamless integration of the sub-application and the base system through processing transformation of the adapter.
And storing the adapters according to the newly built adapters by using a created preset adapter library, wherein the preset adapter library is a data storage space arranged on the micro front end frame, and can call the adapters in the preset adapter library.
And when the adapter is stored in the preset adapter library, the adapter can be stored for an identifier based on information such as the technical stack type of the adapter, so that when the sub-application of the corresponding technical stack is loaded on the base system through the identifier, the corresponding adapter can be selected through the related identifier of the sub-application.
In this embodiment, the micro front end framework is designed to communicate with the base system through the sub application type to be applied, and the newly built multiple adapters adapted to multiple technology stack types provide the difference of the adapted requester to handle gateway authentication, request header and the like, so that flexibility and expansibility of the sub application in application loading are increased.
According to the above description, communication of the sub-application integrated by the base station system is realized based on the micro front end architecture, and a plurality of different page frame mounting sub-applications are further provided for responding to the sub-application integration of the base station system. And based on the mounting of the sub-application, the data type conversion is performed through the adapter shown above so that the base system can integrate the sub-applications of a plurality of different data stacks. And according to the application of the adapter, a corresponding adapter is required to be selected based on the currently-started sub-application, and optionally, an environment monitoring mechanism is arranged in the micro front-end framework so as to monitor the sub-application loading event of the base system, so that according to the detected sub-application loading event, the adapter matched with the sub-application is selected by reading the characteristic parameters of the sub-application.
Optionally, based on the detection of the sub-application loading event of the base system by the environment monitoring mechanism, the characteristic parameters of the sub-application can be obtained according to a 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 state of the sub-application;
If the sub-application is not loaded, acquiring a static resource of the sub-application, and extracting the characteristic parameters from the static resource;
and if the sub-application is loaded, detecting behavior characteristic data of the sub-application, and extracting the characteristic parameters through the behavior characteristic data.
And monitoring a sub-application loading event of the base system according to the set environment monitoring mechanism, wherein the sub-application loading event is the registering and loading process of the sub-application, and registering the sub-application into the base system through an API (application program interface) provided by a micro front end framework (such as Single-SPA, qankun and the like) in the base system. Typically including an entry file (e.g., javaScript file) specifying the sub-application, an activity condition (e.g., a route matching rule), etc. The micro front end framework provides the capability of detecting the sub-application loading event, namely the environment monitoring mechanism, optionally, the sub-application loading event detector can be registered for detection, and the base system can acquire the loading state of the sub-application through detecting the event.
In the judging of the loading state of the sub-application and the obtaining of the characteristic parameters, the loading state is defined as a pre-loading state and a loading time, the loading time is the loading process, and the characteristic parameters of the sub-application are respectively extracted by reading static resources and behavior characteristic data based on the pre-loading state and the loading time.
Before the sub-application is loaded, the base system pre-acquires the static resources (such as HTML, CSS, javaScript files) of the sub-application through an HTTP request according to the configuration information of the sub-application. The static resources are typically stored at a remote server. The obtained static resources are used for subsequent feature parameter extraction or are used for optimization (such as caching, preloading and the like) during sub-application loading. The base system may also be prepared for corresponding behavioral characteristic data from configuration of the base system, historical behavioral records of the user, or other sources, prior to loading, which may be used for subsequent comparison and analysis with the behavioral characteristic data of the sub-application.
When the sub-application is loaded, the base system dynamically loads the resources of the sub-application and analyzes the loaded resources to acquire the characteristic parameters. The base system executes the JavaScript file to acquire the characteristic parameters (such as by means of global variables, function return values and the like) based on the JavaScript file. Based on the HTML and CSS files, the base system extracts the feature parameters (e.g., HTML structure, CSS style rules, etc.) by parsing the file content.
Optionally, the feature parameters for the static resources are extracted, specifically, feature parameters such as specific tags, attributes or content segments in the HTML file, style rules, selectors or media queries in the CSS file, etc. are extracted from the static resources of the sub-application. The feature parameters are used to describe the appearance, layout or style of the sub-application.
Optionally, feature parameter extraction for behavior feature data, specifically, in the sub-application loading process, the base system collects data related to sub-application behaviors, such as page loading time, resource request times, user interaction events, and the like, as the feature parameter, where the feature parameter is used for describing performance, user experience or behavior mode of the sub-application.
In addition, when the static resources of the sub-application are acquired, 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 and other modes. When extracting the characteristic parameters, excessive calculation or resource requests are required to be avoided in the sub-application loading process, and the loading speed and the user experience of the sub-application are influenced.
According to the above-mentioned embodiment, the step of matching the adapters based on the feature parameters obtained from the loading state of the sub-application, that is, calculating the feature parameters by a preset adapter matching algorithm, and determining the adapter matched with the sub-application according to the calculation result includes:
determining a weight distribution algorithm according to the business requirements of the sub-application;
Distributing weight values corresponding to the characteristic parameters through the weight distribution algorithm, and calculating comprehensive scores of the sub-applications according to the weight values;
and determining an adapter matched with the sub-application according to the comprehensive score and the characteristic parameters.
In this embodiment, according to the detected starting state of the sub-application, the obtained feature parameters are respectively from static resources or behavior feature data of the sub-application, and the feature data obtained based on the data source includes global variable information, specific APIs and configuration information, where the front end frame type used by the sub-application based on the micro front end technology is determined based on the global variable information, and the micro front end technology includes micro-app based on the single-spa routing hijacking based on the iframe, micro-app based on the WebComponent idea, qiankun and other micro front end frames, and for this purpose, a specific technology type may be determined by reading the global variable information of the page in the sub-application, and optionally, the micro front end frame technology of the sub-application may also be determined through the specific APIs and the configuration information.
And determining the technical type represented by the sub application through a preset adapter matching algorithm according to the identified micro front end framework technology of the sub application, and determining a corresponding adapter. In this embodiment, the preset adapter matching algorithm is a weight distribution algorithm, where an appropriate weight distribution algorithm, such as an Analytic Hierarchy Process (AHP) and an entropy method, is selected according to service requirements.
And cleaning, denoising and standardizing the obtained characteristic parameters of the sub-application, distributing weight values for the characteristic parameters by applying a weight distribution algorithm, determining the priority of each characteristic according to service requirements, and selecting the weight distribution algorithm meeting the service requirements.
The service requirements are used for representing the functionality of the sub-application, including functional requirements, performance requirements, technical requirements and security requirements, different service requirements can consider different functional trends of the sub-application, for example, the functional requirements are used for determining core functions of the sub-application, such as data display, user interaction and the like, the performance requirements are used for defining performance requirements, such as loading speed, response time and the like, the technical requirements are used for determining a technical stack, a framework, a dependency library and the like, and the security requirements are used for considering data security, authority control and the like.
According to the limitation of the service requirements, when the weight value is allocated to the feature parameter, more weight values are allocated to the feature parameter represented by each service requirement, for example, higher weight is allocated to the feature parameter representing the performance index in the performance requirement, and higher weight is allocated to the technical stack if the compatibility of the technical stack is more important in the technical requirement.
Optionally, in the weight allocation algorithm, the priority of the feature parameter is determined by means of a hierarchical analysis method, and the weight value of each feature parameter is calculated by means of a feature vector method, so that the sum of all weights is required to be 1 (or 100%), and the rationality of weight allocation is ensured.
Assigning weight values to the characteristic parameters according to service requirements, and calculating comprehensive scores of the sub-applications according to the weight values of the characteristic parameters, wherein the calculation formula of the comprehensive scores is as follows:
Composite score = i = 1 Σn (feature parameter i x weight i);
The composite score calculated according to the above-indicated composite score calculation formula may be used to characterize specific usage information of the sub-applications, for example, a technical stack score of 90, a weight of 0.3→a contribution value of 27, a performance score of 85, a weight of 0.4→a contribution value of 34, a security score of 95, a weight of 0.2→a contribution value of 19, a user experience score of 80, a weight of 0.1→a contribution value of 8, and a composite score of 27+34+19+8=88.
After the comprehensive score of the sub-application is obtained, selecting an adapter matched with the sub-application by combining the comprehensive score with the characteristic parameter, namely determining the adapter matched with the sub-application according to the comprehensive score and the characteristic parameter, wherein the step comprises the following steps of:
determining whether the composite score and the characteristic parameter satisfy a matching rule of the adapter;
And when the sub-application is determined to be satisfied, the adapter is used as an adapter matched with the sub-application.
In practical application, the adapter is predefined with a corresponding matching rule, and the matching rule includes a determination of a comprehensive scoring condition and a characteristic parameter, so that when the most suitable adapter is matched according to the comprehensive scoring of the sub-application and the characteristic parameter, the adapter with the comprehensive scoring and the characteristic parameter meeting the matching rule can be used as the adapter matched with the sub-application. I.e. a matching process based on the matching rules of the adapters, is essentially a process of dynamically selecting an adapter according to the feature parameters and the composite score of the sub-application, which may be as follows:
a comprehensive score >80, and the characteristic parameter characterizes the technical stack of the sub-application as act, and a Web Components adapter is selected;
The comprehensive score is greater than 60, the characteristic parameters characterize the sub-application and require high isolation, and an iframe adapter is selected;
the composite score is >70 and the characteristic parameters characterize the sub-applications that need to be dynamically loaded, select Module Federation adapters.
Alternatively, the matching rule may be set based on the specific situation of each adapter. Specifically, the matching process of the adapter can be seen in fig. 2, and fig. 2 is a specific adapting process of a general micro front end adapter. Based on what is indicated in the specific adapting process of the micro front end adapter shown in fig. 2, the adapter modules that can be detected by the micro front end base technology detection module include iframes adapter modules, qiankun adapter modules and wujie adapter modules, wherein the iframes adapter modules are applicable to a conventional isolation scheme, the qiankun adapter modules are applicable to a Single-SPA-based micro front end framework, and the wujie adapter modules are applicable to Web Components-based micro front end schemes.
The above-mentioned steps of detecting the loading condition of the base system by using the detector and callback function of the event processing adapter module, and detecting the activation state of the sub-application after detecting that the loading of the base system is completed, so as to configure the functional parameters of the adapter by using the acquired requirement 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, include:
acquiring the demand data of the sub-application;
setting a routing path of the adapter according to the URL data extracted from the demand data;
And embedding the mark parameter and the decoration parameter set carried in the demand data into the routing path.
After the sub-application loaded by the base system selects an adapter, the routing path of the adapter is configured according to the requirement data of the sub-application, wherein the routing path of the adapter is used for defining a process of loading and rendering a corresponding sub-application when accessing a certain URL, and the requirement data comprises basic information (name, ID, version), routing configuration information (path, mode, default route, dynamic route), entry file information (URL, loading mode), dependency information (dependency library, sharing dependency), authority and security information (authority requirement, security configuration), performance and loading strategy (preloading, lazy loading), lifecycle hook (lifecycle method, routing switching hook), environment and configuration (environment variable, global configuration), communication mechanism (communication mode, protocol), error processing configuration and log and monitoring of the sub-application.
The configuration mode based on the adapter routing path comprises front-end routing library-based configuration and back-end gateway-based configuration, wherein the front-end routing library-based configuration defines the routing rule by using the front-end routing library (such as a act-router, a vue-router and the like). And based on the configuration of the back-end gateway, the back-end gateway (such as Spring Cloud Gateway, nginx and the like) associates the request route to the sub-application according to the URL mode of the user request. The configuration of the routing path defines the loading page of the sub-application, so that finer-granularity routing control and load balancing are realized. Meanwhile, since the routing configuration is performed at the back end, the cross-domain request and the security control can be more easily realized.
In addition, considering that the sub-application is loaded on an application page, the mark parameter and the decoration parameter set are embedded into the routing path according to the mark parameter and the decoration parameter set carried in the requirement data of the sub-application, wherein the mark parameter generally refers to key attributes or information for identifying or distinguishing the sub-application, the mark parameter comprises an application name, a version number, developer information, an application icon, an application description and the like, and the decoration parameter set is added into additional parameters or setting items for beautifying or enhancing the appearance and the function of the application, and the additional parameters or setting items comprise theme setting, layout setting, animation effect, custom style, internationalization setting and the like, so as to improve the usability, accessibility, user experience and the like of the sub-application. After the marking parameters and the decoration parameter sets are embedded into the routing path of the adapter, the page characteristics of the sub-application can be obtained by reading the routing path and loaded and displayed.
Alternatively, when the logo parameters and the decoration parameters are embedded in the routing path of the adapter, the logo parameters and the decoration parameters can be encoded so as to ensure that the logo parameters and the decoration parameters can be safely embedded in the routing path, namely the URL. The embedded processing logic is that the parameter value is encoded by encodeURIComponent to avoid illegal characters in the URL, such as theme =dark→ theme =dark (no encoding is needed), lang=en-us→lang=en% 2DUS.
In addition, the decoration parameter set belongs to complex parameters, and can be serialized into character strings and then encoded. For example:
config={"theme":"dark","lang":"en"}→config=%7B%22theme%22%3A%22dark%22%2C%22lang%22%3A%22en%22%7D。
When the encoded Parameters are embedded in the routing path, the Parameters (Query Parameters) are required to be queried, the Parameters are added to the Query string of the routing path, the path Parameters (PATH PARAMETERS) are selected, the Parameters are directly embedded in the routing path, the path Parameters are added to the hash part of the hash Parameters (HASH PARAMETERS), and the step is suitable for the hash routing mode. The above-mentioned parameter embedding process for the routing path, the specific embedding process can also select a proper embedding mode according to specific requirements.
After setting the configuration parameters of the adapter through the requirement data of the sub-application, the base system activates the sub-application according to the service name so as to load the page framework of the sub-application, namely when the sub-application is activated, the step of mounting the page content of the sub-application to the micro front end framework for display through the adapter comprises the following steps:
reading a decoration parameter set embedded in a routing path of the adapter, and selecting a matched page frame from the micro front end frames according to the decoration parameter set;
when the page frame is not selected, creating the page frame according to the decoration parameter set;
And displaying the page content of the sub-application through the created page frame.
The base system activates the currently loaded sub-application after being started so as to view the page content of the sub-application. And 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 because more resources and components are carried by the base system. After the base system activates the sub-application, the micro front end frame detects the activation of the sub-application, and loads the page content of the sub-application into a corresponding page frame through an adapter matched with the sub-application, wherein the micro front end frame pre-builds or pre-selects the page frame corresponding to the sub-application based on the route path configured by the adapter so as to load the sub-application, and the limitation is determined by analyzing the route path of the adapter to obtain the mark parameters of the sub-application, namely selecting the page frame conforming to the mark parameters from the page frames of the micro front end frame based on the mark parameters so as to load the page content of the sub-application;
Or constructing a page frame containing the required page subsection in the sub-application in the micro-front-end frame so as to adapt to the page content of the sub-application, wherein the specific situation is determined by matching the page content of the sub-page with the page frame in the micro-front-end frame. In practical application, the adaptation condition of the marking parameters of the page frame and the sub-application can be determined, namely, the relevant parameters of the page frame in the micro front end are compared with the marking parameters of the sub-application, the page frame with the same comparison is used as the page frame for loading the sub-application, and when the page frame with the same comparison with the marking parameters of the sub-application is not arranged in the micro front end, the corresponding page frame is reconstructed in the micro front end frame based on the marking parameters of the sub-application.
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 frame, and the sub-application page content loaded by the page frame is displayed in the base system based on the real-time communication connection between the base system and the micro-front-end frame, because of the real-time communication between the micro-front-end frame and the base system, when the page content loaded by the page frame is displayed, the fusion processing of the page frame and the base system is required based on the general information of the base information in consideration of the safety of the base system integrated sub-application, so that a user can view a sub-application page consistent with the page style of the base system in the base system.
According to the real-time communication between the base system and the micro front end frame, after loading the sub-application and the page frame in the micro front end frame, general data of the sub-application is obtained, wherein the general data is general information of the base system integrated with the sub-application, and includes permission item data, a user login token and base view information, in this embodiment, a general information obtaining module may be set to obtain the general information, and specifically, a corresponding obtaining method including getAuthority (), getToken () and getView (), is set in the general information obtaining module, and the following is a targeted functional description for the obtaining method:
getAuthority () for obtaining rights item data of a set of strings, such as [ "rights item 1", "rights item 2" ]. A rights management system may be designed to include all rights items and corresponding data. And acquiring corresponding rights item data according to the input group of character strings by calling a corresponding interface or inquiring a database.
GetToken (), which are used to obtain the user login token in the base system, toke are defined as a string. In the base system, a token is generated after the user logs in for authentication and authorization, and for this purpose, the token is obtained by invoking an authentication interface provided by the base system or using a suitable authentication mechanism.
GetView (), for acquiring view information of the base system, including view ID, view code, and view name, a view management system can be designed by using JSON code, which contains all view information. And acquiring corresponding view information according to the current state or the identifier of the base by calling a corresponding interface or inquiring a database.
And the general data of the sub-application integrated by the base system is obtained through the acquisition method set in the general system acquisition module, so that the page frame loaded with the sub-application is processed based on the general data, the page style of the page frame is fused with the base system, and a user can see the sub-application page consistent with the page style of the base system in the base system, thereby realizing seamless integration of the base system and the sub-page.
In this embodiment, the universal micro front-end adapter can automatically adapt to the front-end framework according to the framework of the sub-application, and judge the adopted micro front-end technology and base implementation according to the running environment, so as to solve the adapting problem of different micro front-end technology frameworks and base implementation, and by providing an adapted requester to handle the differences of gateway authentication, request head and the like, the technical effect of increasing the flexibility and expansibility of the micro front-end framework integration is realized.
Further, in another embodiment of the micro front end oriented universal basic capability adaptation method of the present invention, an initialization method of the adapter is invoked to initialize the adapter and register an event detector;
the step of mounting, by the adapter, the page content of the sub-application to the micro front end frame for display when the sub-application is activated, further comprises:
and after the completion of the loading of the base system is detected, detecting the activation state of the sub-application.
In this embodiment, the appropriate adapter is selected according to the technology stack (e.g., react, vue, angular, etc.) of the sub-application. In the micro front end framework, selected adapter modules are dynamically loaded to ensure that the adapters are fully compatible with the technology stack of the sub-application.
And calling an initialization method of the adapter based on an instance provided by the adapter when the adapter is created. Initialization methods typically include setting up the basic configuration of the adapter, initializing internal states, etc. of the process. When the initialization method is invoked, necessary parameters such as the sub-application's entry URL, resource path, lifecycle hook, etc. are passed.
And, the type of event to be detected is specified and an activation event based on the event type, in particular a sub-application, is defined, which activation event generally indicates a change of the sub-application from an inactive state to an active state, e.g. a user switches to a view of the sub-application, etc. Trigger conditions for the activation event, such as route changes, user interactions, etc., are determined.
Registering a detector according to the determined event type and the trigger condition, and binding a detector function to the activation event by registering the event detector on the adapter instance, wherein the detector function is responsible for processing the activation event, such as updating UI, loading resources, triggering other business logic, and the like.
To ensure that events can properly propagate within the micro front end framework, the propagation may alternatively be defined as the detected event passing from the sub-application layer to the framework layer, or being broadcast by the framework layer to all sub-applications. In addition, in the detector function, default behavior of events is blocked as needed, such as blocking event bubbling, blocking default event handling, etc.
As indicated above, the change in activation state of the sub-application is detected in real-time by the event detector and the activation state of the sub-application is recorded and updated based on the maintained storage state (e.g., global state manager). And according to the activation state of the sub-application, performing corresponding operations such as loading sub-application resources, updating routes, triggering animation effects and the like.
Optionally, in the micro front end framework, to detect a route change to determine the activation state of a sub-application, a route change event for the detection browser is typically selected, including popstate and hashchange.
Popstate event, which is mainly used to detect changes in browser History, is typically triggered when the HTML5 History API (i.e. History mode) is used. This event is triggered when the user clicks the forward or backward button of the browser, or invokes the history.
Hashchange event-mainly used to detect changes in the hash portion of the URL, typically triggered when the hash mode is used. This event is triggered when the hash portion of the URL changes.
The detector of the route change event is registered during the initialization of the adapter or the host application of the micro front end framework. The detector function may be invoked when a route change event occurs. In the detector function, the path or hash part of the current route is obtained through window. Location. Pathname or window. Location. Hash. Alternatively, an activation rule (activeRule) is predefined for each sub-application, which may be a path prefix, regular expression, or other matching logic.
In the detector function, the current route path is matched with the activating rule of the sub-application, and optionally, the matching is judged to be successful when the URL path in the route is determined to be consistent with the URL data of the sub-application. And if the matching is successful, determining that the sub-application is activated. When it is determined that the sub-application is activated, the loading logic of the sub-application is triggered. This may include loading an entry file for the sub-application (e.g., javaScript, CSS, etc.), rendering a view of the sub-application, etc.
In the micro front end framework, the sub-applications typically have a series of lifecycle hooks, such as bootstrap, mount and unmount. When the sub-application is activated, its bootstrap and mount hooks are invoked for initialization and mount operations. When a child application is uninstalled, its un hook is invoked to do a cleaning job. In the micro front end framework, in order to avoid repeated registration of event detectors, deduplication processing may be performed during initialization. Meanwhile, in order to improve the performance, the event detector function can be reused, so that unnecessary memory consumption is reduced.
In the implementation, the micro front end framework can detect the route change event through the event detector, determine the activation state of the sub-application, and further perform corresponding resource loading and life cycle hook calling operations. This process ensures that sub-applications can be properly activated and uninstalled according to route changes, improving the flexibility and user experience of the system.
It should be noted that the foregoing examples are only for understanding the present application, and do not constitute a limitation of the general basic capability adaptation method of the present application for micro front end, and it is within the scope of the present application to make more simple changes based on this technical concept.
The application provides micro front end-oriented universal basic capability adapting equipment, which comprises at least one processor and a memory in communication connection with the at least one processor, wherein the memory stores instructions which can be executed 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 micro front end-oriented universal basic capability adapting method in the first embodiment.
Referring now to fig. 3, a schematic diagram of a generic basic capability adaptation device for use in implementing embodiments of the present application is shown. The micro front end oriented universal basic capability adapting device in the embodiments of the present application may include, but is not limited to, mobile terminals such as mobile phones, notebook computers, digital broadcast receivers, PDAs (Personal DIGITAL ASSISTANT: personal digital assistants), PADs (Portable Application Description: tablet computers), PMPs (Portable MEDIA PLAYER: portable multimedia players), and fixed terminals such as digital TVs, desktop computers, and the like. The general basic capability adaptation device shown in fig. 3, which is directed to a micro front end, is only an example and should not be construed as limiting the functionality and scope of use of the embodiments of the present application.
As shown in fig. 3, the micro front end oriented general basic capability adaptation device may include a processing means 1001 (e.g., a central processor, a graphic processor, etc.), which may perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM) 1002 or a program loaded from a storage means 1003 into a random access Memory (RAM: random Access Memory) 1004. In the RAM1004, various programs and data required for the operation of the micro front end oriented general-purpose basic capability adaptation device are also stored. The processing device 1001, the ROM1002, and the RAM1004 are connected to each other by a bus 1005. An input/output (I/O) interface 1006 is also connected to the bus. In general, a system including an input device 1007 such as a touch screen, a touch pad, a keyboard, a mouse, an image sensor, a microphone, an accelerometer, a gyroscope, etc., an output device 1008 including a Liquid crystal display (LCD: liquid CRYSTAL DISPLAY), a speaker, a vibrator, etc., a storage device 1003 including a magnetic tape, a hard disk, etc., and a communication device 1009 may be connected to the I/O interface 1006. The communication means 1009 may allow the micro front end oriented generic basic capability adaptation device to communicate wirelessly or wiredly with other devices to exchange data. While the figures illustrate a generic basic capability adaptation device facing the micro front end with various systems, it should be understood that not all illustrated systems are required to be implemented or provided. More or fewer systems may alternatively be implemented or provided.
In particular, according to embodiments of the present disclosure, the processes described above with reference to flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method shown in the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network through a communication device, or installed from the storage device 1003, or installed from the ROM 1002. The above-described functions defined in the method of the disclosed embodiment of the application are performed when the computer program is executed by the processing device 1001.
The micro-front-end-oriented universal basic capability adapting device provided by the application adopts the micro-front-end-oriented universal basic capability adapting method in the embodiment, and can solve the technical problem that the base system cannot seamlessly integrate a plurality of sub-application works due to the fact that the existing micro-front-end integration cannot adapt to a front-end frame with a plurality of technical types. Compared with the prior art, the beneficial effects of the micro-front-end-oriented universal basic capability adapting device provided by the application are the same as those of the micro-front-end-oriented universal basic capability adapting method provided by the embodiment, and other technical features of the micro-front-end-oriented universal basic capability adapting device are the same as those disclosed by the method of the previous embodiment, and are not repeated herein.
It is to be understood that portions of the present disclosure may be implemented in hardware, software, firmware, or a combination thereof. In the description of the above embodiments, particular features, structures, materials, or characteristics may be combined in any suitable manner in any one or more embodiments or examples.
The foregoing is merely illustrative of the present application, and the present application is not limited thereto, and any person skilled in the art will readily recognize that variations or substitutions are within the scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.
The present application provides a storage medium that is a computer readable storage medium having computer readable program instructions (i.e., a computer program) stored thereon for performing the micro front end oriented general purpose basic capability adaptation method of the above embodiments.
The computer readable storage medium provided by the present application may be, for example, a U disk, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, or device, or a combination of any of the foregoing. More specific examples of a computer-readable storage medium may include, but are not limited to, an electrical connection having one or more wires, a portable computer diskette, 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 disc Read-Only Memory (CD-ROM: CD-Read Only Memory), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In this embodiment, a computer-readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, or device. Program code embodied on a computer readable storage medium may be transmitted using any appropriate medium, including but not limited to electrical wiring, fiber optic cable, RF (Radio Frequency) and the like, or any suitable combination of the foregoing.
The computer readable storage medium may be included in the micro front end oriented universal base capability adapter device or may exist alone without being assembled into the micro front end oriented universal base capability adapter device.
The computer-readable storage medium carries one or more programs that, when executed by the micro front end oriented universal basic capability adaptation device, cause the micro front end oriented universal basic capability adaptation device to implement the technical content of the micro front end oriented universal basic capability adaptation method embodiment as shown above.
Computer program code for carrying out operations of the present application may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, smalltalk, C ++ and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of remote computers, the remote computer may be connected to the user's computer through any kind of network, including a local area network (LAN: local Area Network) or a wide area network (WAN: wide Area Network), or may be connected to an external computer (for example, through the Internet using an Internet service provider).
The flowcharts and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present application. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The modules involved in the embodiments of the present application may be implemented in software or in hardware. Wherein the name of the module does not constitute a limitation of the unit itself in some cases.
The readable storage medium provided by the application is a computer readable storage medium, and the computer readable storage medium stores computer readable program instructions (namely computer program) for executing the general basic capability adaptation method facing the micro front end, so that the technical problem that the base system cannot seamlessly integrate a plurality of sub-application works due to the fact that the existing micro front end integration cannot adapt to a front end framework of a plurality of technical types can be solved. Compared with the prior art, the beneficial effects of the computer readable storage medium provided by the application are the same as the beneficial effects of the general basic capability adaptation method for micro front end provided by the above embodiment, and are not described in detail herein.

Claims (10)

1. A method for adapting micro-front-end oriented universal basic capability, the method comprising:
determining a sub-application to be loaded currently, and acquiring characteristic 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-application;
And when the sub-application is activated, the page content of the sub-application is mounted to a micro-front-end framework for display through the adapter.
2. The method for adapting micro front-end oriented universal basic capability according to claim 1, wherein the step of determining a sub-application to be loaded currently and obtaining characteristic parameters of the sub-application comprises:
Reading a loading event of the sub-application to determine a loading state of the sub-application;
If the sub-application is not loaded, acquiring a static resource of the sub-application, and extracting the characteristic parameters from the static resource;
and if the sub-application is loaded, detecting behavior characteristic data of the sub-application, and extracting the characteristic parameters through the behavior characteristic data.
3. The micro front end oriented universal basic capability adaptation method according to claim 1, wherein the step of calculating the characteristic parameter through a preset adapter matching algorithm and determining an adapter matching the sub-application according to the calculation result comprises the steps of:
determining a weight distribution algorithm according to the business requirements of the sub-application;
Distributing weight values corresponding to the characteristic parameters through the weight distribution algorithm, and calculating comprehensive scores of the sub-applications according to the weight values;
and determining an adapter matched with the sub-application according to the comprehensive score and the characteristic parameters.
4. The micro front-end oriented generic basic capability adaptation method according to claim 3, wherein the step of determining an adapter matching the sub-application according to the composite score and the feature parameter comprises:
determining whether the composite score and the characteristic parameter satisfy a matching rule of the adapter;
And when the sub-application is determined to be satisfied, the adapter is used as an adapter matched with the sub-application.
5. The micro front end oriented universal basic capability adaptation method according to claim 1, wherein the step of setting configuration items of the adapter according to feature parameters of the sub-application comprises:
acquiring the demand data of the sub-application;
setting a routing path of the adapter according to the URL data extracted from the demand data;
And embedding the mark parameter and the decoration parameter set carried in the demand data into the routing path.
6. The micro front end oriented universal basic capability adaptation method according to claim 1, wherein when the sub-application is activated, the step of mounting the page content of the sub-application to the micro front end framework display through the adapter comprises:
reading a decoration parameter set embedded in a routing path of the adapter, and selecting a matched page frame from the micro front end frames according to the decoration parameter set;
when the page frame is not selected, creating the page frame according to the decoration parameter set;
And displaying the page content of the sub-application through the created page frame.
7. The micro front end oriented universal basic capability adapting method according to claim 1, wherein after the step of calculating the characteristic parameter by a preset adapter matching algorithm and determining an adapter matching the sub-application according to the calculation result, the method further comprises:
calling an initialization method of the adapter to initialize the adapter and registering an event detector;
the step of mounting, by the adapter, the page content of the sub-application to the micro front end frame for display when the sub-application is activated, further comprises:
and after the completion of the loading of the base system is detected, detecting the activation state of the sub-application.
8. The micro front end oriented universal basic capability adapting method according to claim 1, wherein the step of calculating the characteristic parameter by a preset adapter matching algorithm and determining an adapter matching the sub-application according to the calculation result further comprises:
Newly building an adapter and storing the adapter in the micro front end frame;
And according to the sub-application integration requirement of the base system, communicating with the micro front end framework in real time through the base system communication interface.
9. A micro front end oriented universal basic capability adaptation device, characterized in that the device comprises 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 micro front end oriented universal basic capability adaptation method according to any of the claims 1 to 8.
10. A storage medium, characterized in that the storage medium is a computer readable storage medium, on which a computer program is stored, which computer program, when being executed by a processor, carries out the steps of the micro front end oriented generic basic capability adaptation method according to any of claims 1 to 8.
CN202510473468.0A 2025-04-16 2025-04-16 General basic capability adaptation method, device and storage medium for micro front end Active CN120010913B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202510473468.0A CN120010913B (en) 2025-04-16 2025-04-16 General basic capability adaptation method, device and storage medium for micro front end

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202510473468.0A CN120010913B (en) 2025-04-16 2025-04-16 General basic capability adaptation method, device and storage medium for micro front end

Publications (2)

Publication Number Publication Date
CN120010913A true CN120010913A (en) 2025-05-16
CN120010913B CN120010913B (en) 2025-08-12

Family

ID=95661028

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202510473468.0A Active CN120010913B (en) 2025-04-16 2025-04-16 General basic capability adaptation method, device and storage medium for micro front end

Country Status (1)

Country Link
CN (1) CN120010913B (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN120416233A (en) * 2025-07-02 2025-08-01 杭州政云数据技术有限公司 Front-end application preloading rule construction method, device, equipment and storage medium

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115269215A (en) * 2022-04-22 2022-11-01 济南浪潮数据技术有限公司 A method, device and storage medium for expanding the application scenario of a base in a micro front-end
US20230036980A1 (en) * 2020-12-21 2023-02-02 Tencent Technology (Shenzhen) Company Limited Micro-frontend system, sub-application loading method, electronic device, computer program product, and computer-readable storage medium
CN116560752A (en) * 2023-05-15 2023-08-08 中国银联股份有限公司 Front-end application combination architecture, method, device and computer-readable storage medium
CN116820612A (en) * 2023-06-28 2023-09-29 中国联合网络通信集团有限公司 Micro front-end integration method, device, equipment and storage medium of front-end system
CN119645484A (en) * 2024-11-27 2025-03-18 广东亿迅科技有限公司 Method, device, equipment and storage medium for compatibly loading micro front end frame application

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20230036980A1 (en) * 2020-12-21 2023-02-02 Tencent Technology (Shenzhen) Company Limited Micro-frontend system, sub-application loading method, electronic device, computer program product, and computer-readable storage medium
CN115269215A (en) * 2022-04-22 2022-11-01 济南浪潮数据技术有限公司 A method, device and storage medium for expanding the application scenario of a base in a micro front-end
CN116560752A (en) * 2023-05-15 2023-08-08 中国银联股份有限公司 Front-end application combination architecture, method, device and computer-readable storage medium
CN116820612A (en) * 2023-06-28 2023-09-29 中国联合网络通信集团有限公司 Micro front-end integration method, device, equipment and storage medium of front-end system
CN119645484A (en) * 2024-11-27 2025-03-18 广东亿迅科技有限公司 Method, device, equipment and storage medium for compatibly loading micro front end frame application

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN120416233A (en) * 2025-07-02 2025-08-01 杭州政云数据技术有限公司 Front-end application preloading rule construction method, device, equipment and storage medium

Also Published As

Publication number Publication date
CN120010913B (en) 2025-08-12

Similar Documents

Publication Publication Date Title
US10827008B2 (en) Integrated user interface for consuming services across different distributed networks
CN105940654B (en) Franchise static web application in trust
US9043864B2 (en) Constraint definition for conditional policy attachments
US10579442B2 (en) Inversion-of-control component service models for virtual environments
CN120010913B (en) General basic capability adaptation method, device and storage medium for micro front end
US11882154B2 (en) Template representation of security resources
US11503070B2 (en) Techniques for classifying a web page based upon functions used to render the web page
US8775554B2 (en) Cloud-based web page applications for extending functionality
TW201441829A (en) Client side page processing
EP2954452B1 (en) Resilient portals through sandboxing
CN111666567A (en) Detection method, device, computer program and medium for malicious modification of application program
CN115600023A (en) Client page skipping method, device and equipment and storage medium
US20220342742A1 (en) Graphical management of big data pipelines
CN112583891B (en) Interface document acquisition method and device and server
US20160378982A1 (en) Local environment protection method and protection system of terminal responding to malicious code in link information
US11475122B1 (en) Mitigating malicious client-side scripts
US8214499B2 (en) System and method for enabling software applications as a service in a non-intrusive manner
CN119148896A (en) Page processing method, device, electronic equipment and storage medium
Selvaraj Building RESTful APIs with Ruby on Rails
CN120743252A (en) A visual arrangement method for model tool calls based on MCP
CN116070042A (en) Path determination method, device, equipment and storage medium

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant