Method, device and equipment for compatibly loading micro-front-end framework sub-applications and storage medium

Abstract

The invention provides a method, device and equipment for compatibly loading sub-applications of a micro-front-end framework and a storage medium, and the method for compatibly loading the sub-applications of the micro-front-end framework comprises the steps: configuring a plurality of micro-front-end frameworks of different framework types, correspondingly registering the sub-applications in the micro-front-end frameworks, and configuring access information and a sub-application menu of each sub-application. An identification prefix of a corresponding micro-front-end framework is added to an original menu route in the access information to obtain menu information, a target micro-front-end framework is determined according to the menu information of a target sub-application menu, and corresponding target sub-applications are loaded through the target micro-front-end framework and the access information. According to the method and the device, the page of the original menu routing of the corresponding target sub-application is displayed, the micro-front-end frames of different frame types and the corresponding sub-applications are uniformly integrated through configuration, loading and page display of the target sub-application are automatically identified and determined based on selection of a user, the operation is simple, and the fusion difficulty and development cost of different applications are reduced.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a method, device, equipment and storage medium for compatible loading of micro-front-end framework sub-applications. Background Art

[0002] At present, in terms of data technology integration, such as application integration, single sign-on is usually used for integration. Users need to switch between different systems under cross-system business processes, which is extremely inconvenient. Based on a certain micro-frontend framework for front-end application integration, the current system can only integrate applications with the same micro-frontend framework, and cannot integrate existing non-micro-frontend applications and applications with different micro-frontend frameworks. It is necessary to configure systems corresponding to different micro-frontend frameworks, which is very inconvenient. If the front-end application of the existing system is modified to overcome the above problems, the cost and time investment of the enterprise's digital transformation will be increased, which is costly. Summary of the invention

[0003] The embodiment of the present application provides a method, apparatus, device and storage medium for loading a micro-frontend framework sub-application in a compatible manner to solve at least one problem existing in the related art. The technical solution is as follows:

[0004] In a first aspect, an embodiment of the present application provides a method for compatibly loading a micro-frontend framework sub-application, including:

[0005] In response to the first configuration instruction, configure a plurality of micro-frontend frameworks of different framework types, and register sub-applications in the micro-frontend frameworks accordingly;

[0006] In response to the second configuration instruction, configure the access information and sub-application menu of each sub-application, add the corresponding identification prefix of the micro-frontend framework to the original menu route in the access information, and obtain menu information;

[0007] In response to the selection instruction, determine the target sub-application menu, and determine the target micro-frontend framework according to the menu information of the target sub-application menu;

[0008] The corresponding target sub-application is loaded through the target micro-frontend framework and the access information, and the page of the original menu route of the corresponding target sub-application is displayed.

[0009] In one embodiment, in response to the first configuration instruction, configuring a plurality of micro-frontend frameworks of different framework types, and correspondingly registering sub-applications in the micro-frontend frameworks includes:

[0010] In response to the first configuration instruction, configure micro-frontend frameworks qiankun, micro-app and iframe of different framework types;

[0011] Register the corresponding sub-application in the qiankun through loadMicroApp;

[0012] pass <micro-app>The component tag loadMicroApp registers the corresponding sub-application in the micro-app;

[0013] pass <iframe>Tag, register the corresponding sub-application in the iframe.

[0014] In one embodiment, in response to the second configuration instruction, configuring the access information and the sub-application menu of each sub-application includes:

[0015] In response to the second configuration instruction, configure the access IP, port and original menu route of each sub-application to obtain access information of each sub-application;

[0016] Configure a sub-application menu for each of the sub-applications.

[0017] In one embodiment, the method further comprises:

[0018] In response to the third configuration instruction, configure the user's access rights to the sub-application;

[0019] When a user logs in, the accessible sub-applications are determined based on the user's access rights, and a sub-application menu of all the accessible sub-applications is displayed for the user to select.

[0020] In one embodiment, determining the target micro front-end framework according to the menu information of the target sub-application menu includes:

[0021] Identifying an identification prefix in menu information of the target sub-application menu;

[0022] When the identifier prefix is ​​qbox, the target micro front-end framework is determined to be qiankun;

[0023] When the identification prefix is ​​mbox, the target micro-front-end framework is determined to be micro-app;

[0024] When the identifier prefix is ​​iframe, it is determined that the target micro-front-end framework is iframe.

[0025] In one embodiment, the loading of the corresponding target sub-application through the target micro-front-end framework and the access information, and the page displaying the original menu route include:

[0026] When the target micro-front-end framework is qiankun, jump to the first container page corresponding to qiankun, load the target sub-application based on the access information through the first container page, and load the page of the original menu route corresponding to the target sub-application;

[0027] When the target micro-front-end framework is micro-app, jump to the second container page corresponding to micro-app, load the target sub-application based on the access information through the second container page, and load the page of the original menu route corresponding to the target sub-application;

[0028] When the target micro-front-end framework is an iframe, jump to the third container page corresponding to the iframe, load the target sub-application based on the access information through the third container page, and load the page of the original menu route corresponding to the target sub-application;

[0029] Wherein, the access information also includes access IP and port.

[0030] In a second aspect, an embodiment of the present application provides a device compatible with loading a micro-front-end framework sub-application, comprising:

[0031] A first configuration module, configured to configure a plurality of micro-frontend frameworks of different framework types in response to a first configuration instruction, and to register corresponding sub-applications in the micro-frontend frameworks;

[0032] a second configuration module, configured to configure the access information and sub-application menu of each of the sub-applications in response to the second configuration instruction, and to add the corresponding identification prefix of the micro-frontend framework to the original menu route in the access information to obtain menu information;

[0033] a determination module, for determining a target sub-application menu in response to a selection instruction, and determining a target micro-front-end framework according to menu information of the target sub-application menu;

[0034] A loading module is used to load the corresponding target sub-application through the target micro-front-end framework and the access information, and display the page of the original menu route of the corresponding target sub-application.

[0035] In one embodiment, the first configuration module includes a configuration unit and a registration unit;

[0036] The configuration unit is used to configure micro-front-end frameworks qiankun, micro-app and iframe of different framework types in response to a first configuration instruction; The registration unit is used for:

[0038] Register the corresponding sub-application in the qiankun through loadMicroApp; By<micro-app> The component tag loadMicroApp registers the corresponding sub-application in the micro-app; By<iframe> Tag, register the corresponding sub-application in the iframe.

[0041] In a third aspect, an embodiment of the present application provides an electronic device, comprising: a processor and a memory, wherein instructions are stored in the memory, and the instructions are loaded and executed by the processor to implement a method in any one of the above-mentioned embodiments.

[0042] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, which stores a computer program. When the computer program is executed, it implements the method in any one of the above-mentioned aspects. The beneficial effects of the above technical solution include at least:

[0044] By responding to the first configuration instruction, configuring several micro-frontend frameworks of different framework types, and correspondingly registering sub-applications in the micro-frontend frameworks, responding to the second configuration instruction, configuring the access information and sub-application menu of each sub-application, adding the identification prefix of the corresponding micro-frontend framework to the original menu route in the access information, obtaining menu information, responding to the selection instruction, determining the target sub-application menu, and determining the target micro-frontend framework according to the menu information of the target sub-application menu, loading the corresponding target sub-application through the target micro-frontend framework and the access information, and displaying the page of the original menu route of the corresponding target sub-application, the micro-frontend frameworks of different framework types and the corresponding sub-applications are unified and integrated through configuration, and the loading and page display of the target sub-application are automatically identified and determined based on the user's selection, the operation is simple, the difficulty of integrating different applications is reduced, and it is beneficial to reduce development costs.

[0045] The above summary is only for the purpose of the specification and is not intended to be limiting in any way. In addition to the illustrative aspects, embodiments, and features described above, further aspects, embodiments, and features of the present application will be readily apparent by reference to the drawings and the following detailed description.BRIEF DESCRIPTION OF THE DRAWINGS

[0046] In the drawings, unless otherwise specified, the same reference numerals throughout the several views denote the same or similar components or elements. These drawings are not necessarily drawn to scale. It should be understood that these drawings only depict some embodiments disclosed in accordance with the present application and should not be regarded as limiting the scope of the present application.

[0047] Figure 1 is a schematic flow chart of the steps of a method for compatibly loading a micro front-end framework sub-application according to an embodiment of the present application;

[0048] Figure 2 is a block diagram of the structure of a device for compatibly loading a micro front-end framework sub-application according to an embodiment of the present application;

[0049] Figure 3 is a block diagram of the structure of an electronic device according to an embodiment of the present application.DETAILED DESCRIPTION

[0050] In the following, only some exemplary embodiments are briefly described. As those skilled in the art will recognize, the described embodiments can be modified in various different ways without departing from the spirit or scope of the present application. Therefore, the drawings and the description are to be regarded as illustrative in nature and not restrictive.

[0051] Glossary of terms:

[0052] Micro front-end framework (architecture): It is used to build a front-end application architecture based on microservices. The idea is to split a front-end application into a series of loosely coupled applications that can be deployed independently, and then assemble these applications to create a single user-facing application.

[0053] qiankun: A micro front-end implementation library based on Single-SPA, aiming to help people build a production-ready micro front-end architecture system more simply;

[0054] micro-app: A micro front-end framework that draws on the idea of WebComponent. It simulates the isolation characteristics of ShadowDom through js sandbox, style isolation, element isolation, and routing isolation, and combines CustomElement to encapsulate the micro front-end into a WebComponent-like component, thus realizing the componentized rendering of the micro front-end.

[0055] Referring to Figure 1, a flowchart of a method for compatibly loading a micro front-end framework sub-application according to an embodiment of the present application is shown. The method for compatibly loading a micro front-end framework sub-application may at least include steps S100-S400:

[0056] S100. In response to a first configuration instruction, configure several micro front-end frameworks of different framework types, and register sub-applications correspondingly in the micro front-end frameworks.

[0057] S200. In response to a second configuration instruction, configure the access information of each sub-application and the sub-application menu, and add the identification prefix of the corresponding micro front-end framework to the original menu route in the access information to obtain menu information.

[0058] S300. In response to a selection instruction, determine the target sub-application menu, and determine the target micro front-end framework according to the menu information of the target sub-application menu.

[0059] S400. Load the corresponding target sub-application through the target micro front-end framework and the access information, and display the page of the original menu route of the corresponding target sub-application.

[0060] The technical solution of the embodiment of the present application configures several micro-front-end frameworks of different framework types in response to a first configuration instruction, and registers corresponding sub-applications in the micro-front-end frameworks; configures the access information and sub-application menu of each sub-application in response to a second configuration instruction, adds the identification prefix of the corresponding micro-front-end framework to the original menu route in the access information, obtains menu information, determines the target sub-application menu in response to a selection instruction, and determines the target micro-front-end framework according to the menu information of the target sub-application menu; loads the corresponding target sub-application through the target micro-front-end framework and the access information, and displays the page of the original menu route of the corresponding target sub-application; integrates the micro-front-end frameworks of different framework types and the corresponding sub-applications through configuration, automatically identifies and determines the loading of the target sub-application and the page display based on the user's selection; the operation is simple, reduces the difficulty of integrating different applications, and is conducive to reducing development costs.

[0061] It should be noted that the various instructions involved in the embodiments of the present application can be generated by mouse, keyboard, touch, voice, etc., without specific limitation.

[0062] In one embodiment, step S100 includes steps S110-S120:

[0063] S110, in response to the first configuration instruction, configure micro-front-end frameworks qiankun, micro-app and iframe of different framework types.

[0064] Optionally, the management personnel can perform configuration operations based on actual needs and generate a first configuration instruction. The application management background responds to the first configuration instruction to configure micro-front-end frameworks of different frame types, such as qiankun, micro-app and iframe. At the same time, the first container page corresponding to qiankun, the second container page of micro-app and the third container page of iframe will be generated. The container page can display the registered sub-applications and manage the sub-applications such as registration and deletion. Address information such as IP and port will be used during registration.

[0065] S120, register the corresponding sub-application in qiankun through loadMicroApp;<micro-app> The component tag loadMicroApp registers the corresponding sub-application in micro-app; through<iframe> Tag, register the corresponding sub-application in the iframe.

[0066] Optionally, through loadMicroApp, dynamically register the corresponding sub-application in the container of the micro front-end framework qiankun; through<micro-app> The component tag loadMicroApp dynamically registers the corresponding sub-application in the container of the micro-frontend framework micro-app; through<iframe> Tag, dynamically register the corresponding sub-application in the container of the micro-frontend framework iframe. For sub-applications loaded using iframe, there is no need to introduce third-party dependencies. After creating a new third container page, directly use<iframe> Tags are registered.

[0067] In one embodiment, in response to the second configuration instruction in step S200, the access information and the sub-application menu of each sub-application are configured, including steps S210-S220:

[0068] S210, in response to the second configuration instruction, configure the access ip, port and original menu route of each sub-application to obtain the access information of each sub-application.

[0069] Optionally, the management personnel can perform configuration operations based on actual needs to generate a second configuration instruction, and the application management background responds to the second configuration instruction to configure the access IP, port and original menu route (menu URL) of each sub-application, thereby obtaining access information of each sub-application. It should be noted that the application management background is a management center for registering and managing sub-applications and non-micro-frontend applications, for marking the type of micro-frontend framework, maintaining access information, and managing the aggregation assembly of sub-applications.

[0070] S220. Configure a sub-application menu for each sub-application.

[0071] Optionally, the application management background can also configure the sub-application menu of each sub-application based on access information, micro-front-end framework, etc. in response to the second configuration instruction. The sub-application menu can display the original menu information such as the access information of the sub-application, the corresponding micro-front-end framework type, etc.

[0072] In one embodiment, the application management background is pre-set with identification prefixes corresponding to different micro-front-end frameworks. After obtaining the access information, the application management background will add the identification prefix of the corresponding micro-front-end framework to the original menu route of its access information based on the micro-front-end framework corresponding to the sub-application, update the original menu information, and obtain the final menu information.For example, the original menu route of the sub-application belonging to the qiankun micro-frontend framework is: " / subApp / index", which becomes " / qbox / subApp1 / index" after adding; the original menu route of the sub-application belonging to the micro-app micro-frontend framework is " / subApp2 / index", which becomes " / mbox / subApp2 / index" after adding; if it is a sub-application belonging to the iframe micro-frontend framework, for example, the original menu route is " / subApp3 / index", then it becomes " / iframe / subApp3 / index" after adding.

[0073] In one embodiment, an authentication center is also provided for authentication services based on the OAuth2 authentication model. The authentication center manages and controls sub-application tokens and user permission configurations. Management personnel can perform configuration operations based on actual needs and generate a third configuration instruction. The authentication center responds to the third configuration instruction and configures the user's access rights to the sub-application. When the user logs in later, the accessible sub-application is determined based on the user's access rights. Then, the heterogeneous front-end sub-applications (i.e., the sub-applications of various micro-front-end frameworks) are loaded through the main application base. The front-end sub-applications are loaded in different isolation areas according to the properties of different micro-front-end frameworks, and the front-end display is unified for the user and the front-end interface access rights are controlled. Therefore, the main application base can display the sub-application menus of all accessible sub-applications for the user to select; specifically, the user can generate a selection instruction based on the selection operation, select the corresponding sub-application menu, and thus determine the target sub-application menu.

[0074] In the embodiment of the present application, a unified application gateway and a front-end application Nginx proxy are also provided. The unified application gateway is used to route the network request initiated by the front-end sub-application menu after the user determines the target sub-application menu, and forward it to the application back-end service of the application management background according to the configuration, while carrying the load balancing of the non-front-end and back-end separation monomer application access. In the embodiment of the present application, the business request of the container page of the sub-application front-end is directed to the target back-end service, configured in the unified application gateway, and unified proxy is performed and forwarded to the corresponding sub-application back-end server; the front-end application Nginx proxy is used to deploy the static resource files compiled by the front-end main application base, and the proxy front and back end unified access address, only one port needs to be opened for the user to view the sub-application menu, and select the target sub-application menu request determined by the instruction, and the Nginx reverse proxy transmission can ensure the normal interaction of the sub-application menu page and interface request, and reduce the risk of internal service interface exposure.

[0075] Among them, the front-end main application base is developed based on the Vue framework. After the compilation and construction are completed, it is deployed to the server of the Nginx proxy and started to run. The main application base, application management background, and unified authentication center "Location" proxy address are configured in Nginx. The "Location" of the main application base is a unified port accessed by users; the front-end main application base adopts a multi-page component method for loading heterogeneous sub-applications: multiple independent front-end page components are created in the front-end main application base project, and the dependencies of qiankun and micro-app are introduced respectively, which are responsible for assuming the role of the main application container of qiankun, micro-app and iframe.

[0076] In one embodiment, in step S300, the target micro front-end framework is determined according to the menu information of the target sub-application menu, including steps S310-S320:

[0077] S310. Identify the identification prefix in the menu information of the target sub-application menu.

[0078] Optionally, the application management background queries the menu information of the target sub-application menu to determine the identification prefix in the menu information, for example, querying / qbox / subApp1 / index, / mbox / subApp2 / index or / iframe / subApp3 / index.

[0079] S320. When the identification prefix is ​​qbox, the target micro-front-end framework is determined to be qiankun; when the identification prefix is ​​mbox, the target micro-front-end framework is determined to be micro-app; when the identification prefix is ​​iframe, the target micro-front-end framework is determined to be iframe.

[0080] Specifically, when the identification prefix is ​​qbox, the target micro-front-end framework can be determined as qiankun. If the identification prefix is ​​mbox, the target micro-front-end framework can be determined as micro-app. When the identification prefix is ​​iframe, the target micro-front-end framework can be determined as iframe, which allows the type of the target micro-front-end framework to be determined conveniently and quickly.

[0081] In one embodiment, step S400 includes one of steps S410-S430:

[0082] S410, when the target micro front-end framework is qiankun, jump to the first container page corresponding to qiankun, through the first container page, load the target sub-application based on the access information, and load the page of the original menu route corresponding to the target sub-application.

[0083] Optionally, when the target micro-frontend framework is qiankun, the application management backend jumps to the first container page corresponding to qiankun. Then, the loading logic of the first container page dynamically loads the target sub-application based on the access IP and port of the target sub-application in the access information, and loads the page of the original menu route corresponding to the target sub-application, i.e., the " / subApp1 / index" page, based on the / qbox / subApp1 / index in the access information.

[0084] S420. When the target micro-front-end framework is micro-app, jump to the second container page corresponding to the micro-app, load the target sub-application based on the access information through the second container page, and load the page of the original menu route corresponding to the target sub-application.

[0085] Similarly, when the target micro-frontend framework is micro-app, the application management backend jumps to the second container page corresponding to micro-app. Then, the loading logic of the second container page dynamically loads the target sub-application based on the access IP and port of the target sub-application in the access information, and loads the page of the original menu route corresponding to the target sub-application, i.e., the " / subApp2 / index" page, based on / mbox / subApp2 / index in the access information.

[0086] S430. When the target micro-front-end framework is an iframe, jump to the third container page corresponding to the iframe, load the target sub-application based on the access information through the third container page, and load the page of the original menu route corresponding to the target sub-application.

[0087] Similarly, when the target micro-frontend framework is an iframe, the application management backend jumps to the third container page corresponding to the iframe. Then, the loading logic of the third container page dynamically loads the target sub-application based on the access IP and port of the target sub-application in the access information, and based on / iframe / subApp3 / index in the access information, loads the page of the original menu route corresponding to the target sub-application, that is, the " / subApp3 / index" page.

[0088] Embodiments of this application are compatible with isolated loading of sub-applications (referred to as micro-applications) of the micro-frontend framework, solving framework, script, and style conflicts. The micro-application only needs to be registered in the application integration management system of this application, which includes a main application base, an authentication center, a unified application gateway, an application management background, and a front-end application Nginx proxy, greatly reducing the difficulty of integrating sub-applications of different types of micro-frontend frameworks, that is, heterogeneous micro-applications, improving the implementation efficiency of enterprise digital transformation application integration, and reducing the cost investment of enterprise digital transformation.

[0089] In the embodiments of this application, the processing logic for dynamically integrating and loading heterogeneous sub-applications based on the routing identifier prefix in the front-end main application base; through the logic of multi-container components and dynamic routing prefixes, the integrated loading of sub-applications of heterogeneous micro-frontends is realized, providing a unified integration and display approach for business applications with different technical architectures. Compared with the existing single-architecture micro-frontend main application, the boundary of application loading is expanded, the development workload of application integration access is reduced, and the difficulty of integrating heterogeneous front-end micro-applications is greatly reduced.

[0090] Referring to Figure 2, a structural block diagram of a device for compatibly loading sub-applications of a micro-frontend framework according to an embodiment of this application is shown. The device may include:

[0091] A first configuration module, configured to, in response to a first configuration instruction, configure several micro-frontend frameworks of different framework types and register sub-applications correspondingly in the micro-frontend frameworks;

[0092] A second configuration module, configured to, in response to a second configuration instruction, configure the access information of each sub-application and the sub-application menu, and add the identifier prefix of the corresponding micro-frontend framework to the original menu route in the access information to obtain menu information;

[0093] A determination module, configured to, in response to a selection instruction, determine a target sub-application menu, and determine a target micro-frontend framework according to the menu information of the target sub-application menu;

[0094] A loading module, configured to load the corresponding target sub-application through the target micro-frontend framework and the access information, and display the page of the original menu route of the corresponding target sub-application.

[0095] In one embodiment, the first configuration module includes a configuration unit and a registration unit;

[0096] The configuration unit is configured to configure micro front-end frameworks qiankun, micro-app, and iframe of different framework types in response to a first configuration instruction;

[0097] The registration unit is configured to:

[0098] Register a corresponding sub-application in qiankun through loadMicroApp;

[0099] Register a corresponding sub-application in micro-app through the <micro-app> component tag loadMicroApp;

[0100] Register a corresponding sub-application in iframe through the <iframe> tag.

[0101] The functions of the modules in each device of the embodiments of the present application can be referred to the corresponding descriptions in the above method, which will not be elaborated here.

[0102] Referring to Figure 3, a structural block diagram of an electronic device according to an embodiment of the present application is shown. The electronic device includes: a memory 310 and a processor 320. Instructions that can run on the processor 320 are stored in the memory 310. The processor 320 loads and executes the instructions to implement the method for compatibly loading sub-applications of a micro front-end framework in the above embodiment. Among them, the number of the memory 310 and the processor 320 can be one or more.

[0103] In one embodiment, the electronic device further includes a communication interface 330 for communicating with external devices and performing data interaction and transmission. If the memory 310, the processor 320, and the communication interface 330 are implemented independently, the memory 310, the processor 320, and the communication interface 330 can be connected to each other through a bus and complete communication with each other.The bus can be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, an Extended Industry Standard Architecture (EISA) bus, etc. The bus can be divided into an address bus, a data bus, a control bus, etc. For the sake of convenience of representation, only a thick line is used to represent it in Figure 3, but it does not mean that there is only one bus or one type of bus.

[0104] Optionally, in specific implementation, if the memory 310, the processor 320, and the communication interface 330 are integrated on a chip, the memory 310, the processor 320, and the communication interface 330 can complete the communication with each other through an internal interface.

[0105] The embodiment of the present application provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, the method for compatibly loading a micro front-end framework sub-application provided in the above embodiment is implemented.

[0106] The embodiment of the present application further provides a chip, which includes a processor for calling and running instructions stored in the memory from the memory, so that a communication device installed with the chip executes the method provided in the embodiment of the present application.

[0107] The embodiment of the present application further provides a chip, including: an input interface, an output interface, a processor, and a memory. The input interface, the output interface, the processor, and the memory are connected through an internal connection path. The processor is used to execute the code in the memory. When the code is executed, the processor is used to execute the method provided in the embodiment of the application.

[0108] It should be understood that the processor may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application specific integrated circuits (ASIC), field programmable gate arrays (FPGA) or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components, etc. The general-purpose processor may be a microprocessor or any conventional processor, etc. It should be noted that the processor may be a processor supporting an advanced RISC machines (ARM) architecture.

[0109] Further, optionally, the above-mentioned memory may include a read-only memory and a random access memory, and may also include a non-volatile random access memory. The memory may be a volatile memory or a non-volatile memory, or may include both volatile and non-volatile memory. Wherein, the non-volatile memory may include a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), or a flash memory. The volatile memory may include a random access memory (RAM), which is used as an external cache. By way of example but not limitation, many forms of RAM are available. For example, static RAM (SRAM), dynamic random access memory (DRAM), synchronous DRAM (SDRAM), double data rate synchronous dynamic random access memory (DDR SDRAM), enhanced synchronous dynamic random access memory (ESDRAM), synchronous link dynamic random access memory (SLDRAM) and direct rambus RAM (DR RAM).In the above- described embodiments, it can be realized in whole or in part by software, hardware, firmware or any combination thereof. When using software to realize, it can be realized in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When loading and executing the computer program instruction on a computer, the flow or function according to the application is produced in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instruction can be stored in a computer-readable storage medium, or transmitted from a computer-readable storage medium to another computer-readable storage medium. In the description of this specification sheet , the description of reference term "one embodiment", "some embodiments", "example", "specific example" or "some examples" etc. means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present application. Moreover, the specific features, structures, materials or characteristics described can be combined in a suitable manner in any one or more embodiments or examples. In addition, those skilled in the art can combine and combine the different embodiments or examples described in this specification sheet and the features of the different embodiments or examples without contradicting each other.

[0112] In addition, the terms "first" and "second" are only used for descriptive purposes and should not be understood as indicating or suggesting relative importance or implicitly indicating the number of the indicated technical features. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one of the features. In the description of this application, "multiple" means two or more, unless otherwise clearly and specifically defined. Any process or method description in flow chart or otherwise described herein can be understood as, represents and comprises the module, fragment or the part of the code of the executable instruction of one or more steps for realizing specific logic function or process.And the scope of preferred embodiment of the application comprises other realization, wherein can not press the order shown or discussed, comprise according to involved function by substantially simultaneous mode or press opposite order, carry out execution function.

[0114] The logic and / or steps represented in the flowchart or otherwise described herein, for example, can be considered as an ordered list of executable instructions for implementing logical functions, and can be specifically implemented in any computer-readable medium for use by an instruction execution system, device or apparatus (such as a computer-based system, a system including a processor, or other system that can fetch instructions from an instruction execution system, device or apparatus and execute instructions), or used in combination with these instruction execution systems, devices or apparatuses.It should be understood that the various parts of the application can be implemented with hardware, software, firmware or their combination. In the above- mentioned embodiment, a plurality of steps or methods can be implemented with software or firmware stored in a memory and executed by a suitable instruction execution system. All or part of the steps of the above-mentioned embodiment method can be completed by instructing the relevant hardware through a program, and the program can be stored in a kind of computer-readable storage medium, and the program, when executed, comprises one of the steps of the method embodiment or its combination.

[0116] In addition, each functional unit in each embodiment of the present application can be integrated in a processing module, or each unit can exist physically alone, or two or more units can be integrated in one module. The above-mentioned integrated module can be implemented in the form of hardware or in the form of a software functional module. If the above-mentioned integrated module is implemented in the form of a software functional module and sold or used as an independent product, it can also be stored in a computer-readable storage medium. The storage medium can be a read-only memory, a disk or an optical disk, etc.

[0117] The above is only a specific embodiment of the present application, but the protection scope of the present application is not limited thereto. Any technician familiar with the technical field can easily think of various changes or replacements within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.< / iframe>

Claims

1. A method for loading a micro-frontend framework sub-application compatibly, characterized in that: include: In response to the first configuration instruction, configure a plurality of micro-frontend frameworks of different framework types, and register sub-applications in the micro-frontend frameworks accordingly; In response to the second configuration instruction, configure the access information and sub-application menu of each sub-application, add the corresponding identification prefix of the micro-frontend framework to the original menu route in the access information, and obtain menu information; In response to the selection instruction, determine the target sub-application menu, and determine the target micro-frontend framework according to the menu information of the target sub-application menu; The corresponding target sub-application is loaded through the target micro-frontend framework and the access information, and the page of the original menu route of the corresponding target sub-application is displayed.

2. The method for compatible loading of micro-frontend framework sub-applications according to claim 1 is characterized in that: The configuring, in response to the first configuration instruction, a plurality of micro-frontend frameworks of different framework types and correspondingly registering sub-applications in the micro-frontend frameworks includes: In response to the first configuration instruction, configure micro-frontend frameworks qiankun, micro-app and iframe of different framework types; Register the corresponding sub-application in the qiankun through loadMicroApp; pass <micro-app> The component tag loadMicroApp registers the corresponding sub-application in the micro-app;< / micro-app> pass <iframe>Tag, register the corresponding sub-application in the iframe.

3. According to the method for compatible loading of micro-frontend framework sub-applications according to claim 1, it is characterized in that: The configuring the access information and the sub-application menu of each sub-application in response to the second configuration instruction includes: In response to the second configuration instruction, configure the access IP, port and original menu route of each sub-application to obtain access information of each sub-application; A sub-application menu is configured for each of the sub-applications.

4. According to the method for compatible loading of micro-frontend framework sub-applications according to claim 1, it is characterized in that: The method further comprises: In response to the third configuration instruction, configuring the user's access rights to the sub-application; When a user logs in, accessible sub-applications are determined based on the user's access rights, and a sub-application menu of all the accessible sub-applications is displayed for the user to select.

5. According to the method for compatible loading of micro-frontend framework sub-applications according to claim 2, it is characterized in that: Determining the target micro front-end framework according to the menu information of the target sub-application menu includes: Identify the identification prefix in the menu information of the target sub-application menu; When the identifier prefix is ​​qbox, the target micro front-end framework is determined to be qiankun; When the identifier prefix is ​​mbox, the target micro-frontend framework is determined to be micro-app; When the identifier prefix is ​​iframe, it is determined that the target micro-frontend framework is iframe.

6. The method for compatible loading of micro-frontend framework sub-applications according to claim 5 is characterized in that: The loading of the corresponding target sub-application through the target micro-frontend framework and the access information, and the page displaying the original menu route includes: When the target micro-frontend framework is qiankun, jump to the first container page corresponding to qiankun, load the target sub-application based on the access information through the first container page, and load the page of the original menu route corresponding to the target sub-application; When the target micro-frontend framework is micro-app, jump to the second container page corresponding to micro-app, load the target sub-application based on the access information through the second container page, and load the page of the original menu route corresponding to the target sub-application; When the target micro-frontend framework is an iframe, jump to the third container page corresponding to the iframe, load the target sub-application based on the access information through the third container page, and load the page of the original menu route corresponding to the target sub-application; The access information also includes the access IP and port.

7. A device compatible with loading micro-frontend framework sub-applications, characterized in that: include: A first configuration module, configured to configure a plurality of micro-frontend frameworks of different framework types in response to a first configuration instruction, and to register corresponding sub-applications in the micro-frontend frameworks; A second configuration module is used to configure the access information and sub-application menu of each sub-application in response to the second configuration instruction, and add the corresponding identification prefix of the micro-frontend framework to the original menu route in the access information to obtain menu information; A determination module, configured to determine a target sub-application menu in response to a selection instruction, and determine a target micro-frontend framework according to menu information of the target sub-application menu; The loading module is used to load the corresponding target sub-application through the target micro-frontend framework and the access information, and display the page of the original menu route of the corresponding target sub-application.

8. The device for loading micro-frontend framework sub-applications compatible with claim 7, characterized in that: The first configuration module includes a configuration unit and a registration unit; The configuration unit is used to configure micro-frontend frameworks qiankun, micro-app and iframe of different framework types in response to the first configuration instruction; The registration unit is used to: Register the corresponding sub-application in the qiankun through loadMicroApp; pass<micro-app> The component tag loadMicroApp registers the corresponding sub-application in the micro-app; pass<iframe> Tag, register the corresponding sub-application in the iframe.

9. An electronic device, characterized in that: include: A processor and a memory, wherein the memory stores instructions, and the instructions are loaded and executed by the processor to implement the method according to any one of claims 1 to 6.

10. A computer-readable storage medium, wherein a computer program is stored in the computer-readable storage medium, and when the computer program is executed, the method according to any one of claims 1 to 6 is implemented. .< / iframe>

Images