CN117216435A - Cache method, equipment and storage medium based on micro front-end architecture - Google Patents

Abstract

This application provides a caching method, device and storage medium based on micro front-end architecture, which relates to the field of micro front-end, including: when receiving a loading request for a sub-application sent by the user, determining whether the sub-application is loaded for the first time; Assume that the routing data and user information call the sub-application to obtain the first instantiated sub-application; obtain the first cache information when it is not loaded for the first time, and call the sub-application according to the first cache information to obtain the second instantiated sub-application; where, the first cache information Including the first routing data, virtual DOM node and marquee data of the last sub-page that was run when the last sub-application was uninstalled; when obtaining the sub-application's sub-page closing request, determine whether the sub-page is the last sub-page that the sub-application runs. ; If it is determined that the subpage is the last subpage that the subapplication runs, update the first cache information and uninstall the subapplication. This application is used to solve the problem of inconvenient loading and caching of existing micro front-end systems and the inability to cache across applications.

Description

Caching methods, equipment and storage media based on micro front-end architecture

Technical field

This application relates to the field of micro-front-end, and in particular to a caching method, device and storage medium based on micro-front-end architecture.

Background technique

In the existing micro front-end architecture, the main application can independently deploy multiple sub-applications. Multiple sub-applications are independent and flexible, and can be developed, deployed and run independently.

The existing micro front-end system is implemented based on qiankun microservices. The default loading method provided by the framework is registerMicroApps, which is the automatic registration method of micro applications. This method manages application switching depending on the routing path: each routing switch will automatically trigger the unloading and loading of the application. , may not only cause unnecessary performance loss, but also trigger application reloading when internal routing jumps. The caching method in the existing technology is component-level caching, and there are many restrictions on using component-level caching in micro-front-end frameworks. Cross-application caching is not possible.

In view of the above defects, there is an urgent need for a caching method, device and storage medium based on micro-front-end architecture, which can better manage and control the loading and caching of pages and improve user experience.

Contents of the invention

This application provides a caching method, device and storage medium based on micro-front-end architecture to solve the problem of inconvenient loading and caching of existing micro-front-end systems and the inability to cache across applications.

In a first aspect, this application provides a caching method based on a micro front-end architecture for a micro front-end system. The micro front-end system includes a main application and multiple sub-applications registered on the main application. The sub-applications include a or multiple subpages; the method includes:

When receiving the loading request of the sub-application sent by the user, determine whether the sub-application is loaded for the first time;

If it is loaded for the first time, the sub-application is called according to the preset routing data and user information, and the sub-application is rendered to obtain the first instantiated sub-application;

If it is not loaded for the first time, the first cache information is obtained, the sub-application is called according to the first cache information, and the sub-application is rendered to obtain the second instantiated sub-application; wherein the first cache information includes the last time the sub-application was instantiated. Describes the first routing data, virtual DOM node and marquee data of the last subpage that was run when the sub-application was uninstalled;

When obtaining the sub-page closing request of the sub-application, determine whether the sub-page is the last sub-page running by the sub-application; if it is determined that the sub-page is the last sub-page running by the sub-application, update the First cache the information and uninstall the sub-application.

In one possible design, the routing prefixes of the subpages included in the same subapplication are the same; determining whether the subpage is the last subpage run by the subapplication includes:

Obtain the first routing prefix of the subpage and the second routing prefix of other running subpages. If the second routing prefix is the same as the first routing prefix, it is determined that the subpage is not the subpage. The last subpage that the application runs; if the second routing prefix is not the same as the first routing prefix, it is determined that the subpage is the last subpage that the subapplication runs.

In a possible design, before obtaining the subpage closing request, the method further includes:

The sub-application calls the keep-alive component to obtain the virtual DOM node of the sub-application based on the page information of the running sub-page, and caches the virtual DOM node to the sub-application database;

The sub-application uses the form form as a filter to filter the content in the sub-page including input boxes and drop-down boxes as the marquee data; cache the marquee data to a local database;

The updating of the first cache information includes:

The main application sends an uninstall cache request to the sub-application, and obtains the first routing data sent by the sub-application, the virtual DOM node and the box data as the first cache information.

In one possible design, caching the marquee data to a local database includes:

The uninstall process hook function of the sub-page is called to read the box data in the form and cache it in the local database.

In a possible design, after obtaining the box data sent by the sub-application, the method further includes:

The sub-application deletes the marquee data in the local database.

In a possible design, after obtaining the virtual DOM node sent by the sub-application, the method further includes:

The sub-application deletes the virtual DOM node in the sub-application database.

In a possible design, before receiving the loading request of the sub-application sent by the user, the method further includes:

The main application obtains the login request information and user information sent by the user, completes the user login according to the login request information and user information, and sends the request information and user information to the sub-application to share with the sub-application .

In the second aspect, this application provides a caching device based on a micro front-end architecture for use in a micro front-end system. The micro front-end system includes a main application and multiple sub-applications registered on the main application. The sub-applications include a or multiple sub-pages; the equipment includes:

A judgment module, configured to judge whether the sub-application is loaded for the first time when receiving a loading request of the sub-application sent by the user;

The first instantiation module is used to call the sub-application according to the preset routing data and user information if it is loaded for the first time, and render the sub-application to obtain the first instantiated sub-application;

The second instantiation module is used to obtain the first cache information if it is not loaded for the first time, call the sub-application according to the first cache information, render the sub-application and obtain the second instantiated sub-application; wherein, the The first cache information includes the first routing data, virtual DOM node and marquee data of the subpage that was last run when the sub-application was uninstalled last time;

A caching module, configured to determine whether the sub-page is the last sub-page running by the sub-application when obtaining the sub-page closing request of the sub-application; if it is determined that the sub-page is the last sub-page running by the sub-application page, update the first cache information and uninstall the sub-application.

In a third aspect, this application provides an electronic device, including: a processor, and a memory communicatively connected to the processor;

The memory stores computer execution instructions;

The processor executes computer execution instructions stored in the memory to implement the above caching method based on a micro front-end architecture.

In a fourth aspect, the present application provides a computer-readable storage medium. The computer-readable storage medium stores computer-executable instructions. When the computer-executable instructions are executed by a processor, they are used to implement the above-mentioned micro-front-end architecture-based system. caching methods.

This application provides a caching method, device and storage medium based on a micro-front-end architecture, including: when obtaining a closing request of a sub-page, determining whether to uninstall the sub-application, and when determining to uninstall the sub-application, saving the sub-page of the sub-application The virtual DOM node and marquee data are used as the first cache information. The first cache information includes the routing data, virtual DOM node and marquee data cached when the sub-application was last uninstalled; when the sub-application obtains the loading request, it is determined that the Whether the sub-application is loaded for the first time. If it is determined that the sub-application is not loaded for the first time, the sub-application is instantiated according to the first cache information. The following technical effects can be achieved:

This application obtains the first cache information when determining to uninstall the sub-application. The first cache information includes the first routing data, virtual DOM node and marquee data; when receiving the sub-application loading request, the sub-application is instantiated according to the first cache information to obtain The second instantiated sub-application can display the page content of the last sub-page and the content in the selection box when it was last uninstalled; while avoiding reloading, the loading efficiency is improved and the user experience is improved.

Description of drawings

In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following will briefly introduce the drawings that need to be used in the description of the embodiments or the prior art. Obviously, the drawings in the following description These are some embodiments of the present invention. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without exerting creative efforts.

Figure 1 is an application scenario diagram of the caching method based on the micro front-end architecture provided by the embodiment of the present application;

Figure 2 is a flowchart 1 of the caching method based on the micro front-end architecture provided by the embodiment of the present application;

Figure 3 is a flow chart 2 of the caching method based on the micro front-end architecture provided by the embodiment of the present application;

Figure 4 is a structural diagram of a cache device based on a micro front-end architecture provided by an embodiment of the present application;

FIG. 5 is a schematic diagram of the hardware structure of an electronic device provided by an embodiment of the present application.

Detailed ways

Exemplary embodiments will be described in detail herein, examples of which are illustrated in the accompanying drawings. When the following description refers to the drawings, the same numbers in different drawings refer to the same or similar elements unless otherwise indicated. The implementations described in the following exemplary embodiments do not represent all implementations consistent with this application. Rather, they are merely examples, and not exhaustive embodiments, of apparatus and methods consistent with certain aspects of the application as detailed in the appended claims. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without making creative efforts fall within the scope of protection of the present invention.

It should be noted that the user information (including but not limited to user equipment information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all It is information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data need to comply with relevant laws, regulations and standards, and a corresponding operation entrance is provided for the user to choose to authorize or refuse.

It should be noted that in the embodiments of this application, words such as “exemplary” or “for example” are used to express examples, illustrations or illustrations. Any embodiment or design described herein as "exemplary" or "such as" is not intended to be construed as preferred or advantageous over other embodiments or designs. Rather, use of the words "exemplary" or "such as" is intended to present the concept in a concrete manner.

It should be noted that the terms “first”, “second”, “third”, “fourth”, etc. (if present) in the description and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects and not necessarily used to describe a specific order or sequence. It is to be understood that the figures so used are interchangeable under appropriate circumstances so that the embodiments of the invention described herein, for example, can be practiced in sequences other than those illustrated or described herein.

It should be noted that "at..." in the embodiments of the present application can be the instant when a certain situation occurs, or it can be a period of time after a certain situation occurs. The embodiments of the present application do not specify this. limited.

First, the terms used in this application will be explained:

nginx server: It is a lightweight web server/reverse proxy server and email (IMAP/POP3) proxy server, released under the BSD-like protocol. Its characteristics are that it occupies less memory and has strong concurrency capabilities, and nginx's concurrency capabilities perform better among web servers of the same type.

qiankun framework: It is a micro front-end implementation library based on single-spa. The single-spa framework is easier to use and encapsulates more practical functions. In essence, it still calls single-spa to implement the micro front-end. The qiankun framework works by using a main container application that acts as the entry point for all sub-applications of micro frontends. Each microfrontend is developed as a standalone application, can be deployed independently, and communicates with the container application through a defined API.

Figure 1 is an application scenario diagram of the caching method based on the micro-front-end architecture provided by the embodiment of the present application; as shown in Figure 1, the method of this embodiment is used in the micro-front-end system 100. The micro-front-end system 100 includes a main application 110 and a system registered on the main application. Multiple sub-applications 120, each sub-application 120 includes one or more sub-pages; different sub-applications have their own permissions and function lists;

Specifically, the main application 110 is responsible for maintaining the display of menus, data, and page elements, while other sub-applications 120 are responsible for maintaining the loading of other data and page elements across the entire network according to their own permissions. The sub-application 120 first needs to be registered in the main application 110. When registering, the corresponding entry address, container node and routing information need to be configured; the sub-application 120 is registered, enabled, stopped and uninstalled through the API provided by qiankun, and the sub-application is monitored at the same time. In the life cycle, the corresponding sub-application is loaded through URL regular matching, and the menu permissions, element permissions and token information of the sub-application are passed.

Specifically, the sub-application 120 uses the token information to log in to the system through single sign-in, reloads the routes and elements, and passes the menu and element permissions from the main application. After the loading is completed, the sub-application 120 renders the page to the corresponding element node of the main application. At the same time, the sub-application 120 can also communicate with the main application according to the API interface provided by qiankun and share the main application's styles, public functions, components, etc. Each sub-application is an independent front-end application platform with its own routing, state management, UI component library, etc.

Specifically, during the specific deployment of the micro front-end system 100, each sub-application 120 needs to be packaged into a static resource and placed on the corresponding nginx server, configured under the same nginx port; the qiankun framework is introduced into the main application 110, and the qiankun framework is introduced into the main application 110. The name, entry address, container node and routing information corresponding to the sub-application 120 are configured in the application 110.

In some embodiments, the micro front-end system is a 5G private network management platform for telecom operators, and the connection management platform, resource management platform, product self-service platform, and terminal-network collaboration platform are registered as sub-applications on the main application. None of the existing five platforms are developed for 5G functions. The telecom operator's 5G private network management platform can be used to combine the five subsystems into a whole and filter the 5G functions of the five sub-applications to realize a 5G private network system. modularity and componentization.

Connection management platform: Provides management services for 2/3G, 4G, 5G, and NB connection equipment, including 5G equipment management, communication tariff management, bill management and other functional services.

Resource management platform: Provides resource management, performance monitoring, and alarm monitoring functions.

Product self-service platform: Provides cross-regional roaming, 5G LAN, business dashboard and other functions.

Terminal-network collaboration platform: Provides display and management of terminal-network collaboration capabilities including equipment management, electronic fences, high-precision positioning, etc.

Digital twin platform: Based on technologies such as AI and big data, it provides digital twin functions including large-screen display, scene-based customization, and digital analysis.

The caching method based on the micro front-end architecture provided by the embodiment of the present application will be introduced in detail below with reference to the accompanying drawings.

Figure 2 is a flowchart 1 of a caching method based on micro-front-end architecture provided by the embodiment of the present application; as shown in Figure 2, it is used in a micro-front-end system. The micro-front-end system includes a main application and multiple sub-applications registered on the main application. The sub-applications Include one or more subpages; the method includes:

S210. When receiving the loading request of the sub-application sent by the user, determine whether the sub-application is loaded for the first time; if it is loaded for the first time, execute step S220; if it is not loaded for the first time, execute step 230;

Specifically, when switching pages, the user needs to manually load the sub-application. The user can choose to load the page of the current sub-application or the page of other sub-applications; when receiving the loading request of the user's sub-application, no The uninstall process will be triggered. First, it will be determined whether the sub-application is loaded for the first time.

S220. Call the sub-application according to the preset routing data and user information, render the sub-application and obtain the first instantiated sub-application;

Specifically, the user information is shared with the sub-application when the main application logs in; the preset routing data is the sub-application initialization preset routing information set when the sub-application registers; it is directly instantiated according to the preset routing data and user information Sub-application, the first instantiated sub-application obtained is the instantiated sub-application that is loaded for the first time and does not have cache information.

S230. Obtain the first cache information, call the sub-application according to the first cache information of the sub-application, render the sub-application and obtain the second instantiated sub-application; wherein the first cache information includes the sub-application that was last run when the sub-application was last uninstalled. The first routing data, virtual DOM node and marquee data of the page;

Specifically; instantiate the sub-application according to the first routing data, virtual DOM node and marquee data to obtain the second instantiated sub-application, and the obtained second instantiated sub-application can display the last sub-page that was run when the last sub-application was uninstalled. and the content in the check box on the page;

S240. When obtaining the sub-page closing request of the sub-application, determine whether the sub-page is the last sub-page running by the sub-application; if it is determined that the sub-page is the last sub-page running by the sub-application, update the first cache information and uninstall the sub-application .

Specifically, when the last sub-page of the sub-application obtains a closing request sent by the user, the uninstall process is triggered and the first cache information is updated.

Embodiments of the present application provide a method to determine whether to uninstall the sub-application when obtaining a closing request of a sub-page, and to save the virtual DOM node and marquee data of the sub-application's sub-page as the first cache information when determining to uninstall the sub-application. The first cache information includes the first routing data, virtual DOM node and marquee data cached when the sub-application was last uninstalled; when obtaining the loading request of the sub-application, it is determined whether the sub-application is loaded for the first time. If it is determined that the sub-application is not the first load, Once loaded, the sub-application is instantiated based on the first cache information, which can achieve the following technical effects:

This embodiment obtains the first cache information when determining to uninstall the sub-application. The first cache information includes the first routing data, virtual DOM node and marquee data; when receiving the sub-application loading request, the sub-application is instantiated according to the first cache information. Obtain the second instantiated sub-application. The obtained second instantiated sub-application can display the page content of the last sub-page and the content in the selection box when it was last uninstalled; while avoiding reloading, it improves loading efficiency and improves user experience.

Figure 3 is a flowchart 2 of the caching method based on the micro front-end architecture provided by the embodiment of the present application; as shown in Figure 3, the method includes:

S310. The main application obtains the login request information and user information sent by the user, completes the user login according to the login request information and user information, and sends the request information and user information to the sub-application to share with the sub-application;

In some specific implementation methods, S310 is implemented in the following ways:

S311. The main application obtains the login request information and user information sent by the user, obtains the token information according to the user request information and performs user login; the backend saves the token information in browser cookies and uses the backend redis (sub-application database). Caching login information.

S312. Call the user information query interface and cache it in redis. The front end caches user information into the vue state manager vuex (memory). When the browser is refreshed, the vuex cache information will be invalid, and the user information query interface needs to be called again to update the latest cache information.

S313. The main application defines the global state and monitors the cache changes of token information and user information; when the token information and user information change, the updated token information and user information are passed to the sub-application through the qiankun props method, and the sub-application is updated. Token information and user information.

Specifically, this step is used to synchronize the front-end and back-end of user information and login information and monitor their cache changes for real-time updates and synchronization to ensure the stability of system operation.

S320. When receiving the loading request of the sub-application sent by the user, determine whether the sub-application is loaded for the first time; if it is loaded for the first time, execute step S330; if it is not loaded for the first time, execute step 340;

Specifically, it is determined according to the cache variable of the first cache information whether the sub-application is loaded for the first time. If the sub-application is loaded for the first time, there is no cache variable in the first cache information, that is, there is no first routing data or marquee data. and virtual DOM nodes. Specifically, if there is no cache variable in the first cache information, it is determined that the sub-application is loaded for the first time. If there is a cache variable in the first cache information, it is determined that the sub-application is not loaded for the first time.

S330: Call the sub-application according to the preset routing data and user information, render the sub-application and obtain the first instantiated sub-application; jump to S350;

Specifically, user information is used to obtain the user's permissions in the sub-application and filter user information. The preset routing data is the sub-application initialization preset routing information set when the sub-application is registered; the preset routing data includes routing addresses and routing parameters. etc., used to instantiate a sub-application. The obtained first instantiated sub-application is an instantiated sub-application that is loaded for the first time and does not have cache information.

In some embodiments, the first instantiated sub-application is obtained through the render method according to routing data and user information;

S340. Obtain the first cache information, call the sub-application according to the first cache information of the sub-application, render the sub-application and obtain the second instantiated sub-application; wherein the first cache information includes the sub-application that was last run when the sub-application was last uninstalled. For the first routing data, virtual DOM node and marquee data of the page, continue to execute S350;

Specifically; instantiate the sub-application according to the first routing data, virtual DOM node and marquee data to obtain the second instantiated sub-application, and the obtained second instantiated sub-application can display the last sub-page that was run when the last sub-application was uninstalled. and the content in the check box on the page;

In some embodiments, after obtaining the first cache information, the sub-application deletes the marquee data in the local database and deletes the virtual DOM node in the sub-application database to release memory.

S350. When the sub-page is running, obtain the virtual DOM node of the sub-application based on the page information of the sub-page and save it in the sub-application cache; filter the contents of the input box and drop-down box in the sub-page and save them in the local cache as marquee data;

Specifically, the sub-application uses the keep-alive component to obtain the virtual DOM node of the sub-application and saves it in the sub-application cache;

Specifically, uninstalling a sub-application will call the page's destruction process hook function destroyed. During this life cycle, the data of the filter form is read and stored in the cache. In order to distinguish the cache of different pages, the cached key value is the name of the defined component of the page. The drop-down box not only caches the key value, but also caches the selected name.

Specifically, the session-level local cache sessionStorage is introduced to store the marquee data, and the cache in the local cache sessionStorage is first read. If the page cache is hit, the cache is loaded and the query condition variable of the form is updated. The cache is based on sessions and can be read when the main application calls different sub-applications. It can use the life cycle of VUE to implement application-level caching when reloading. It can display the content of the input box selection box in the page through instantiation.

S360. When obtaining the sub-application's sub-page closing request, determine whether the sub-page is the last sub-page that the sub-application runs; if it is determined that the sub-page is the last sub-page that the sub-application runs, uninstall the sub-application and obtain the first routing data , the virtual DOM node and the marquee data are updated as the first cache information.

Specifically, the main application uses multiple tabs to monitor routing changes. When switching sub-pages of the same sub-application, the main application will not reload the sub-application, nor will it trigger the uninstall process; when switching pages of different sub-applications, You need to manually load the sub-application. Manual loading will not trigger the unloading process of the subframe.

Specifically, the routing prefixes of subpages included in the same sub-application are the same; the first routing prefix of the subpage and the second routing prefix of other running subpages are obtained. If there is a second routing prefix that is the same as the first routing prefix, then It is determined that the subpage is not the last subpage that the subapplication runs; if there is no second route prefix that is the same as the first route prefix, it is determined that the subpage is the last subpage that the subapplication runs.

Specifically, when determining that the subpage is the last subpage running in the subapplication, the virtual DOM node is obtained from the subapplication cache, the marquee data is obtained from the local cache, and the routing data of the last subpage is obtained as the first routing data. , will be used to update the first cache information.

In some embodiments, when the application is uninstalled, global variables are defined to be saved, that is, "Router=this.instance.$router; Vnode=this.instance.vnode" is defined as a virtual DOM node, where $router and _vnode are VUE frameworks. Instance variable, _vnode is an object, including node name, node text, child nodes, data and keepalive attributes of data, etc.

Embodiments of the present application provide a method to share login information and user information when the main application completes user login, and obtain first cache information when determining to uninstall the sub-application. The first cache information includes first routing data, virtual DOM nodes and marquee data. ; When obtaining the loading request of the sub-application, determine whether the sub-application is loaded for the first time. If it is determined that the sub-application is not loaded for the first time, the sub-application is instantiated according to the first cache information. The embodiments of this application can achieve the following technical effects:

This embodiment performs front-end and back-end synchronization of user information and login information and monitors cache changes for real-time updates and synchronization to ensure the stability of system operation.

Use manual registration of micro-applications to manage sub-application cache. When obtaining the sub-application's sub-page closing request and determining that the sub-page is the last sub-page running for the sub-application, obtain the first cache information and uninstall the sub-application. , the first routing data and virtual DOM node in the first cache information; the virtual DOM node on the cached instance for sub-application rendering replaces the sub-application instantiation, thereby realizing micro-front-end application-level caching, thus improving the maintainability of the system It can reduce the creation and uninstallation process of applications, thereby reducing performance overhead and improving application response speed and performance.

This embodiment also stores the marquee data through local cache and cooperates with the virtual DOM node. The second instantiated sub-application obtained by instantiating the sub-application based on the first cache information can not only display the last sub-page when it was uninstalled last time, but also display the content in the check box on the last sub-page; avoiding browser refresh or restart The inconvenience caused to users due to the inability to display search conditions after downloading.

Embodiments of the present invention can divide the electronic device or the main control device into functional modules according to the above method examples. For example, each functional module can be divided corresponding to each function, or two or more functions can be integrated into one processing unit. . The above integrated units can be implemented in the form of hardware or software function modules. It should be noted that the division of modules in the embodiment of the present invention is schematic and is only a logical function division. In actual implementation, there may be other division methods.

Figure 4 is a schematic structural diagram of a caching device based on a micro front-end architecture provided by an embodiment of the present application. As shown in Figure 4, the device 40 includes:

The judgment module 401 is used to judge whether the sub-application is loaded for the first time when receiving a loading request of the sub-application sent by the user;

The first instantiation module 402 is used to call the sub-application according to the preset routing data and user information if it is loaded for the first time, and render the sub-application to obtain the first instantiated sub-application;

The second instantiation module 403 is used to obtain the first cache information if it is not loaded for the first time, call the sub-application according to the first cache information, render the sub-application and obtain the second instantiated sub-application; wherein the first cache information includes the last time The first routing data, virtual DOM node and marquee data of the last subpage that was run when the sub-application was uninstalled;

The cache module 404 is used to determine whether the sub-page is the last sub-page that the sub-application runs when obtaining the sub-page closing request of the sub-application; if it is determined that the sub-page is the last sub-page that the sub-application runs, update the first cache information and uninstall the sub-application.

Further, the routing prefixes of subpages included in the same sub-application are the same; the cache module 404 is also used to:

Obtain the first routing prefix of the subpage and the second routing prefix of other running subpages. If there is a second routing prefix that is the same as the first routing prefix, it is determined that the subpage is not the last subpage running by the subapplication; if not If the second route prefix is the same as the first route prefix, it is determined that the subpage is the last subpage that the subapplication runs.

Further, before obtaining the sub-page closing request, the cache module 404 is also specifically used for:

The sub-application calls the keep-alive component to obtain the virtual DOM node of the sub-application based on the page information of the running sub-page, and caches the virtual DOM node to the sub-application database;

The sub-application uses the form form as a filter to filter the content in the input box and drop-down box in the sub-page as marquee data; cache the marquee data to the local database;

Cache module 404, specifically also used for:

The main application sends an uninstall cache request to the sub-application, and obtains the first routing data, virtual DOM node and marquee data sent by the sub-application as the first cache information.

Further, the cache module 404 is specifically used for:

Call the subpage's uninstall process hook function to read the check box data in the form and cache it.

Further, the cache module 404 is specifically used for:

After obtaining the marquee data sent by the sub-application, the sub-application deletes the marquee data in the local database.

Further, the cache module 404 is specifically used for:

After obtaining the virtual DOM node sent by the sub-application, the sub-application deletes the virtual DOM node in the sub-application database.

Further, the judgment module 401 is also used to:

Before receiving the loading request of the sub-application sent by the user, the main application obtains the login request information and user information sent by the user, completes the user login based on the login request information and user information, and sends the request information and user information to the sub-application to share with the sub-application .

The caching device based on the micro-front-end architecture provided in this embodiment can execute the above-mentioned caching method based on the micro-front-end architecture. Its implementation principles and technical effects are similar, and will not be described again in this embodiment.

In the specific implementation of the aforementioned caching device based on micro-front-end architecture, each module can be implemented as a processor, and the processor can execute computer execution instructions stored in the memory, so that the processor executes the above-mentioned caching method based on micro-front-end architecture. .

FIG. 5 is a schematic structural diagram of an electronic device provided by an embodiment of the present application. As shown in FIG. 5 , the electronic device 50 includes: at least one processor 501 and a memory 502 . The electronic device 50 also includes communication components 503 . Among them, the processor 501, the memory 502 and the communication component 503 are connected through the bus 504.

In a specific implementation process, at least one processor 501 executes the computer execution instructions stored in the memory 502, so that the at least one processor 501 executes the caching method based on the micro front-end architecture as executed on the electronic device side.

The specific implementation process of the processor 501 can be found in the above-mentioned method embodiments. The implementation principles and technical effects are similar and will not be described again in this embodiment.

In the above embodiments, it should be understood that the processor may be a central processing unit (English: Central Processing Unit, referred to as: CPU), or other general-purpose processor, digital signal processor (English: Digital Signal Processor, referred to as: DSP), Application Specific Integrated Circuit (English: Application Specific Integrated Circuit, abbreviation: ASIC), etc. A general-purpose processor may be a microprocessor or the processor may be any conventional processor, etc. The steps of the method disclosed in conjunction with the invention can be directly embodied and executed by a hardware processor, or executed by a combination of hardware and software modules in the processor.

The memory may include high-speed RAM memory and may also include non-volatile storage NVM, such as at least one disk memory.

The bus may be an Industry Standard Architecture (Industry Standard Architecture, ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Architecture (Extended Industry Standard Architecture, EISA) bus, etc. The bus can be divided into address bus, data bus, control bus, etc. For ease of presentation, the bus in the drawings of this application is not limited to only one bus or one type of bus.

The above describes the solution provided by the embodiment of the present invention with respect to the functions implemented by the electronic device and the main control device. It can be understood that, in order to implement the above functions, the electronic device or the main control device includes corresponding hardware structures and/or software modules for executing each function. With reference to the units and algorithm steps of each example described in the embodiments disclosed in the embodiments of the present invention, the embodiments of the present invention can be implemented in the form of hardware or a combination of hardware and computer software. Whether a function is performed by hardware or computer software driving the hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered to go beyond the scope of the technical solutions of the embodiments of the present invention.

This application also provides a computer-readable storage medium. Computer-executable instructions are stored in the computer-readable storage medium. When the processor executes the computer-executed instructions, the above caching method based on the micro front-end architecture is implemented.

The above-mentioned computer-readable storage medium, the above-mentioned readable storage medium can be implemented by any type of volatile or non-volatile storage device or their combination, such as static random access memory (SRAM), electrically erasable memory. Programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic or optical disk. Readable storage media can be any available media that can be accessed by a general purpose or special purpose computer.

An exemplary readable storage medium is coupled to the processor such that the processor can read information from the readable storage medium and write information to the readable storage medium. Of course, the readable storage medium may also be an integral part of the processor. The processor and the readable storage medium may be located in Application Specific Integrated Circuits (ASIC). Of course, the processor and the readable storage medium may also exist as discrete components in the electronic device or the host control device.

This application also provides a computer program product. The computer program product includes: a computer program. The computer program is stored in a readable storage medium. At least one processor of the electronic device can read the computer program from the readable storage medium. At least one processor The computer program is executed by the computer so that the electronic device executes the solution provided by any of the above embodiments.

Persons of ordinary skill in the art can understand that all or part of the steps to implement the above method embodiments can be completed by hardware related to program instructions. The aforementioned program can be stored in a computer-readable storage medium. When the program is executed, the steps including the above-mentioned method embodiments are executed; and the aforementioned storage media include: ROM, RAM, magnetic disks, optical disks and other media that can store program codes.

Finally, it should be noted that the above embodiments are only used to illustrate the technical solution of the present invention, but not to limit it. Although the present invention has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that: The technical solutions described in the foregoing embodiments can still be modified, or some or all of the technical features can be equivalently replaced; and these modifications or substitutions do not deviate from the essence of the corresponding technical solutions from the technical solutions of the embodiments of the present invention. scope.

Claims (10)

1. A caching method based on micro front-end architecture, characterized in that it is used in a micro front-end system. The micro front-end system includes a main application and multiple sub-applications registered on the main application. The sub-applications include one or Multiple subpages; the method includes: When receiving the loading request of the sub-application sent by the user, determine whether the sub-application is loaded for the first time; If it is loaded for the first time, the sub-application is called according to the preset routing data and user information, and the sub-application is rendered to obtain the first instantiated sub-application; If it is not loaded for the first time, the first cache information is obtained, the sub-application is called according to the first cache information, and the sub-application is rendered to obtain the second instantiated sub-application; wherein the first cache information includes the last time the sub-application was instantiated. Describes the first routing data, virtual DOM node and marquee data of the last subpage that was run when the sub-application was uninstalled; When obtaining the sub-page closing request of the sub-application, determine whether the sub-page is the last sub-page running by the sub-application; if it is determined that the sub-page is the last sub-page running by the sub-application, update the First cache the information and uninstall the sub-application. 2. The method according to claim 1, characterized in that the routing prefixes of the sub-pages included in the same sub-application are the same; and the determination of whether the sub-page is the last sub-page run by the sub-application ,include: Obtain the first routing prefix of the subpage and the second routing prefix of other running subpages. If the second routing prefix is the same as the first routing prefix, it is determined that the subpage is not the subpage. The last subpage that the application runs; if the second routing prefix is not the same as the first routing prefix, it is determined that the subpage is the last subpage that the subapplication runs. 3. The method according to claim 1, characterized in that, before obtaining the sub-page closing request, the method further includes: The sub-application calls the keep-alive component to obtain the virtual DOM node of the sub-application based on the page information of the running sub-page, and caches the virtual DOM node to the sub-application database; The sub-application uses the form form as a filter to filter the content in the sub-page including input boxes and drop-down boxes as the marquee data; cache the marquee data to a local database; The updating of the first cache information includes: The main application sends an uninstall cache request to the sub-application, and obtains the first routing data sent by the sub-application, the virtual DOM node and the box data as the first cache information. 4. The method according to claim 3, characterized in that caching the marquee data to a local database includes: The uninstall process hook function of the sub-page is called to read the box data in the form and cache it in the local database. 5. The method according to claim 4, wherein after obtaining the box data sent by the sub-application, the method further includes: The sub-application deletes the marquee data in the local database. 6. The method according to claim 4, wherein after obtaining the virtual DOM node sent by the sub-application, the method further includes: The sub-application deletes the virtual DOM node in the sub-application database. 7. The method according to claim 1, characterized in that, before receiving the loading request of the sub-application sent by the user, the method further includes: The main application obtains the login request information and user information sent by the user, completes the user login according to the login request information and user information, and sends the request information and user information to the sub-application to share with the sub-application . 8. A caching device based on micro-front-end architecture, characterized in that it is used in a micro-front-end system. The micro-front-end system includes a main application and multiple sub-applications registered on the main application. The sub-applications include one or Multiple sub-pages; the equipment includes: A judgment module, configured to judge whether the sub-application is loaded for the first time when receiving a loading request of the sub-application sent by the user; The first instantiation module is used to call the sub-application according to the preset routing data and user information if it is loaded for the first time, and render the sub-application to obtain the first instantiated sub-application; The second instantiation module is used to obtain the first cache information if it is not loaded for the first time, call the sub-application according to the first cache information, render the sub-application and obtain the second instantiated sub-application; wherein, the The first cache information includes the first routing data, virtual DOM node and marquee data of the subpage that was last run when the sub-application was uninstalled last time; A caching module, configured to determine whether the sub-page is the last sub-page running by the sub-application when obtaining the sub-page closing request of the sub-application; if it is determined that the sub-page is the last sub-page running by the sub-application page, update the first cache information and uninstall the sub-application. 9. An electronic device, characterized by comprising: a processor, and a memory communicatively connected to the processor; The memory stores computer execution instructions; The processor executes computer-executable instructions stored in the memory to implement the method according to any one of claims 1 to 7. 10. A computer-readable storage medium, characterized in that computer-executable instructions are stored in the computer-readable storage medium, and when executed by a processor, the computer-executable instructions are used to implement any one of claims 1 to 7 the method described.