Caching Method, Device, and Storage Medium Based on Micro Front-End Architecture

Abstract

The present application provides a caching method, device, and storage medium based on a micro-frontend architecture, relating to the field of micro-frontends, including: when receiving a loading request for a sub-application sent by a user, determining whether the sub-application is loaded for the first time; when loaded for the first time, calling the sub-application according to preset routing data and user information to obtain a first instantiated sub-application; when not loaded for the first time, obtaining first caching information and calling the sub-application according to the first caching information to obtain a second instantiated sub-application; wherein, the first caching information includes first routing data, virtual DOM nodes, and checkbox data of the last-running sub-page when the sub-application was unloaded last time; when receiving a sub-page closing request of the sub-application, determining 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, updating the first caching information and unloading the sub-application. The present application is used to solve the problems of inconvenient loading and caching in the existing micro-frontend system and the inability to cache across applications.

Description

Technical Field

[0001] This application relates to the field of micro frontends, and in particular, to a caching method, device, and storage medium based on a micro frontend architecture. Background Art

[0002] In the existing micro frontend architecture, multiple sub-applications can be independently deployed in the main application. The multiple sub-applications are independent and flexible, and can be independently developed, deployed, and run.

[0003] The existing micro frontend system is implemented based on qiankun microservices. The default loading method provided by the framework is registerMicroApps, that is, the automatic registration of micro applications. This method manages the application switching depending on the routing path: each routing switch will automatically trigger the unloading and loading of the application, which may cause unnecessary performance loss and also cause the reloading of the application when navigating within the internal routes. The existing caching method is component-level caching, and there are many limitations in using component-level caching in the micro frontend framework and cross-application caching cannot be achieved.

[0004] In view of the above defects, there is an urgent need for a caching method, device, and storage medium based on a micro frontend architecture, which can better manage and control the loading and caching of pages and improve the user experience. Summary of the Invention

[0005] This application provides a caching method, device, and storage medium based on a micro frontend architecture to solve the problems of inconvenient loading and caching in the existing micro frontend system and inability to perform cross-application caching.

[0006] In a first aspect, this application provides a caching method based on a micro frontend architecture for a micro frontend system. The micro frontend system includes a main application and multiple sub-applications registered on the main application. The sub-applications include one or more sub-pages. The method includes:

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

[0008] If it is the first time to load, call the sub-application according to the preset routing data and user information, and render the sub-application to obtain the first instantiated sub-application;

[0009] If it is not the first time to load, obtain the first cache information, call the sub-application according to the first cache information, and render the sub-application to obtain the second instantiated sub-application; wherein, the first cache information includes the first routing data, virtual DOM nodes, and checkbox data of the last-running sub-page when the sub-application was unloaded last time;

[0010] When obtaining a sub-page close request of the sub-application, determine whether the sub-page is the last sub-page running of the sub-application; if it is determined that the sub-page is the last sub-page running of the sub-application, update the first cache information and uninstall the sub-application.

[0011] In a possible design, the routing prefixes of the sub-pages included in the same sub-application are the same; the determination of whether the sub-page is the last sub-page running of the sub-application includes:

[0012] Obtain the first routing prefix of the sub-page and the second routing prefixes of other running sub-pages. If there is a second routing prefix that is the same as the first routing prefix, it is determined that the sub-page is not the last sub-page running of the sub-application; if there is no second routing prefix that is the same as the first routing prefix, it is determined that the sub-page is the last sub-page running of the sub-application.

[0013] In a possible design, before obtaining the sub-page close request, the method further includes:

[0014] The sub-application calls the keep-alive component to obtain the virtual DOM node of the sub-application according to the page information of the running sub-page, and caches the virtual DOM node in the sub-application database;

[0015] The sub-application uses a form form as a filter to filter the content in the input box and dropdown box in the sub-page as the checkbox data; cache the checkbox data in the local database;

[0016] The update of the first cache information includes:

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

[0018] In a possible design, the caching of the checkbox data in the local database includes:

[0019] Call the uninstall process hook function of the sub-page to read the checkbox data in the form form and cache it in the local database.

[0020] In a possible design, after obtaining the checkbox data sent by the sub-application, the method further includes:

[0021] The sub-application deletes the checkbox data in the local database.

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

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

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

[0025] The main application obtains the login request information and user information sent by the user, completes user login according to the login request information and user information, and sends the request information and user information to the sub-application for sharing with the sub-application.

[0026] In a second aspect, the present application provides a caching device based on a micro-frontend architecture for a micro-frontend system. The micro-frontend system includes a main application and multiple sub-applications registered on the main application. The sub-applications include one or more sub-pages. The device includes:

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

[0028] A first instantiation module, configured to, if it is the first load, call the sub-application according to preset routing data and user information, and render the sub-application to obtain a first instantiated sub-application;

[0029] A second instantiation module, configured to, if it is not the first load, obtain first cache information, call the sub-application according to the first cache information, and render the sub-application to obtain a second instantiated sub-application; wherein, the first cache information includes the first routing data, virtual DOM node, and marquee data of the last sub-page that ran when the sub-application was unloaded last time;

[0030] A cache module, configured to, when receiving the close request of the sub-page of the sub-application, judge 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, update the first cache information and unload the sub-application.

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

[0032] The memory stores computer execution instructions;

[0033] The processor executes the computer execution instructions stored in the memory to implement the above-mentioned caching method based on a micro-frontend architecture.

[0034] Fourthly, the present application provides a computer-readable storage medium, in which computer-executable instructions are stored. When the computer-executable instructions are executed by a processor, they are used to implement the above-mentioned caching method based on the micro-frontend architecture.

[0035] A caching method, device and storage medium based on the micro-frontend architecture provided by the present application include: when obtaining a close request for a sub-page, determining whether to unload the sub-application. When it is determined to unload the sub-application, saving the virtual DOM nodes and marquee data of the sub-page of the sub-application as first caching information, where the first caching information includes the routing data, virtual DOM nodes and marquee data cached during the last unloading of the sub-application; when obtaining a loading request for the sub-application, determining 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, instantiating the sub-application according to the first caching information. The following technical effects can be achieved:

[0036] In the present application, when it is determined to unload the sub-application, the first caching information is obtained, and the first caching information includes the first routing data, virtual DOM nodes and marquee data; when receiving a loading request for the sub-application, instantiating the sub-application according to the first caching information to obtain a 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 marquee during the last unloading. While avoiding reloading, the loading efficiency is improved and the user experience is enhanced. Description of the Drawings

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

[0038] Figure 1 It is an application scenario diagram of the caching method based on the micro-frontend architecture provided by the embodiments of the present application;

[0039] Figure 2 It is the flow of the caching method based on the micro-frontend architecture provided by the embodiments of the present application Figure 1 ;

[0040] Figure 3 It is the flow of the caching method based on the micro-frontend architecture provided by the embodiments of the present application Figure 2 ;

[0041] Figure 4 It is the structure diagram of the caching device based on the micro-frontend architecture provided by the embodiments of the present application;

[0042] Figure 5Schematic diagram of the hardware structure of the electronic device provided by the embodiments of the present application. Detailed implementation manners

[0043] Here, the exemplary embodiments will be described in detail, and the examples are shown in the accompanying drawings. When the following description refers to the accompanying drawings, unless otherwise indicated, the same numbers in different drawings represent the same or similar elements. The implementation manners described in the following exemplary embodiments do not represent all implementation manners consistent with the present application. On the contrary, they are merely examples of devices and methods consistent with some aspects of the present application as detailed in the appended claims, rather than all embodiments. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present invention without creative efforts shall fall within the protection scope of the present invention.

[0044] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data for analysis, stored data, displayed data, etc.) involved in the present application are all information and data authorized by the user or fully authorized by all parties. Moreover, the collection, use, and processing of relevant data need to comply with relevant laws, regulations, and standards, and corresponding operation entrances are provided for users to select authorization or rejection.

[0045] It should be noted that in the embodiments of the present application, words such as "exemplary" or "for example" are used to represent examples, illustrations, or explanations. Any embodiment or design solution described as "exemplary" or "for example" in the present application should not be construed as being more preferred or having more advantages than other embodiments or design solutions. Exactly speaking, using words such as "exemplary" or "for example" is intended to present relevant concepts in a specific manner.

[0046] It should be noted that the terms "first", "second", "third", "fourth", etc. (if any) in the description and claims of the present invention and the above-mentioned accompanying drawings are used to distinguish similar objects and do not necessarily need to describe a specific order or sequence. It should be understood that such used data can be interchanged under appropriate circumstances so that the embodiments of the present invention described herein can be implemented in an order other than those illustrated or described herein, for example.

[0047] It should be noted that "when... " in the embodiments of the present application can be at the instant when a certain situation occurs or within a period of time after a certain situation occurs. The embodiments of the present application do not make specific limitations on this.

[0048] First, the nouns in the present application are explained:

[0049] Nginx server: It is a lightweight web server / reverse proxy server and email (IMAP / POP3) proxy server, distributed under the BSD-like license. Its characteristics are low memory occupancy and strong concurrency ability, and Nginx's concurrency ability performs well among web servers of the same type.

[0050] Qiankun framework: It is a micro-frontend implementation library based on single-spa. The single-spa framework is easier to use and encapsulates more practical functions. Essentially, it still calls single-spa to implement micro-frontends. The Qiankun framework works by using a main container application, which serves as the entry point for all micro-frontend sub-applications. Each micro-frontend is developed as an independent application, can be independently deployed, and communicates with the container application through defined APIs.

[0051] Figure 1 This is the application scenario diagram of the caching method based on the micro-frontend architecture provided by the embodiments of this application; as Figure 1 , the method of this embodiment is used for the micro-frontend system 100. The micro-frontend system 100 includes a main application 110 and multiple sub-applications 120 registered on the main application. Each sub-application 120 includes one or more sub-pages; different sub-applications have their own permissions and function lists;

[0052] 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 other data and page element loading across the network according to their own permissions. The sub-application 120 needs to be registered in the main application 110 first. When registering, it is necessary to configure the corresponding entry address, container node, routing information, etc.; use the APIs provided by Qiankun to register, enable, stop, and unload the sub-application 120, and at the same time monitor the life cycle of the sub-application, load the corresponding sub-application through URL regular expression matching, and pass the menu permissions, element permissions, and token information of the sub-application.

[0053] Specifically, the sub-application 120 single-signs into the system according to the token information, and reloads the routing and elements and passes the menu and element permissions passed from the main application. After 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 to share the styles, common functions, components, etc. of the main application. Each sub-application is an independent front-end application platform, and has its own routing, state management, and UI component library, etc.

[0054] Specifically, when the micro-frontend system 100 is specifically deployed, each sub-application 120 needs to be packaged into static resources and placed on the corresponding nginx server, configured under the same nginx port; introduce the qiankun framework in the main application 110, and configure the corresponding name, entry address, container node, and routing information of the sub-application 120 in the main application 110.

[0055] In some embodiments, the micro-frontend system is a 5G private network management platform for telecommunications operators. The connection management platform, resource management platform, product self-service platform, and end-network coordination platform are registered as sub-applications on the main application. None of the existing five platforms are developed for 5G functions. The 5G private network management platform of the telecommunications operator can combine the five subsystems into a whole and filter the 5G functions of the five sub-applications to achieve modularization and componentization of the 5G private network system.

[0056] Connection management platform: Provides management services for 2 / 3G, 4G, 5G, and NB connected devices, including 5G device management, communication tariff management, bill management, and other functional services.

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

[0058] Product self-service platform: Provides functions such as cross-regional roaming, 5G LAN, and service dashboards.

[0059] End-network coordination platform: Provides the display and management of end-network coordination capabilities including device management, electronic fences, and high-precision positioning.

[0060] Digital twin platform: Based on technologies such as AI and big data, provides digital twin functions including large-screen display, scenario customization, and digital analysis.

[0061] The following introduces the cache method based on the micro-frontend architecture provided by the embodiments of the present application in detail with reference to the accompanying drawings.

[0062] Figure 2 The flow of the cache method based on the micro-frontend architecture provided by the embodiments of the present application Figure 1 ; as Figure 2 shown, for a micro-frontend system, the micro-frontend system includes a main application and multiple sub-applications registered on the main application, and the sub-applications include one or more sub-pages; the method includes:

[0063] S210. When receiving a loading request for a sub-application sent by a 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;

[0064] Specifically, when switching pages, it needs to be loaded by the user manually loading 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, the unloading process will not be triggered. First, it is judged whether the sub - application is loaded for the first time.

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

[0066] Specifically, among them, the user information is the information shared between the main application and the sub - application when logging in to the main application; the preset routing data is the preset routing information for sub - application initialization set when the sub - application is registered; directly instantiate the sub - application according to the preset routing data and user information, and the obtained first instantiated sub - application is the one that is loaded for the first time and has no cached information.

[0067] S230. Obtain the first cache information, call the sub - application according to the first cache information of the sub - application, and render the sub - application to obtain the second instantiated sub - application; among them, the first cache information includes the first routing data, virtual DOM nodes, and checkbox data of the last - run sub - page of the sub - application when it was unloaded last time;

[0068] Specifically; instantiate the sub - application according to the first routing data, virtual DOM nodes, and checkbox data to obtain the second instantiated sub - application, and the obtained second instantiated sub - application can display the last sub - page that was running when the sub - application was unloaded last time and the content in the checkbox on the page;

[0069] S240. When receiving the close request of the sub - page of the sub - application, judge whether the sub - page is the last sub - page of the sub - application running; if it is determined that the sub - page is the last sub - page of the sub - application running, update the first cache information and unload the sub - application.

[0070] Specifically, when receiving the close request sent by the user on the last sub - page of the sub - application, trigger the unloading process and update the first cache information.

[0071] The method provided by the embodiment of the present application, when receiving the close request of the sub - page, determines whether to unload the sub - application. When it is determined to unload the sub - application, save the virtual DOM nodes and checkbox data of the sub - page of the sub - application as the first cache information. The first cache information includes the first routing data, virtual DOM nodes, and checkbox data cached when the sub - application was unloaded last time; when receiving the loading request of the sub - application, judge 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, instantiate the sub - application according to the first cache information, and can achieve the following technical effects:

[0072] In this embodiment, when determining the uninstallation of a sub-application, the first cache information is obtained. The first cache information includes first routing data, virtual DOM nodes, and checkbox data. When receiving a sub-application loading request, the sub-application is instantiated according to the first cache information to obtain a 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 checkbox at the time of the last uninstallation. While avoiding reloading, the loading efficiency is improved and the user experience is enhanced.

[0073] Figure 3 It is the flow of the cache method based on the micro-frontend architecture provided by the embodiments of this application. Figure 2 ; As Figure 3 shown, the method includes:

[0074] S310. The main application obtains the login request information and user information sent by the user, completes user login according to the login request information and user information, and sends the request information and user information to the sub-application for sharing with the sub-application.

[0075] In some specific implementation manners, S310 is implemented in the following manner:

[0076] 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 the browser cookies and uses the backend redis (sub-application database) to cache the login information.

[0077] S312. Call the user information query interface and cache it in redis. The frontend caches the user information in the vue state manager vuex (memory). When the browser is refreshed, the vuex cache information will become invalid, and it is necessary to call the user information query interface again to update the latest cache information.

[0078] S313. The main application defines the global state and listens for changes in the cache of the 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 to update the token information and user information of the sub-application.

[0079] Specifically, this step is used to synchronize the user information and login information between the front end and the back end and listen for changes in their caches for real-time update and synchronization to ensure the stability of the system operation.

[0080] S320. When receiving a loading request for a sub-application sent by the user, determine whether the sub-application is loaded for the first time. If it is the first time to load, execute step S330. If it is not the first time to load, execute step 340.

[0081] Specifically, it is determined whether the sub-application is loaded for the first time according to the cache variables of the first cache information. If the sub-application is loaded for the first time, there are no cache variables in the first cache information, that is, there is no first routing data, checkbox data, and virtual DOM nodes. Specifically, if there are no cache variables in the first cache information, it is determined that the sub-application is loaded for the first time. If there are cache variables in the first cache information, it is determined that the sub-application is not loaded for the first time.

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

[0083] Specifically, the user information is used to obtain the user's permissions in the sub-application and filter the user information. The preset routing data is the preset routing information for sub-application initialization set when the sub-application is registered; the preset routing data includes the routing address and routing parameters, etc., and is used to instantiate the sub-application. The obtained first instantiated sub-application is an instantiated sub-application that is loaded for the first time and has no cache information.

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

[0085] S340. Obtain the first cache information, call the sub-application according to the first cache information of the sub-application, and render the sub-application to obtain the second instantiated sub-application; wherein, the first cache information includes the first routing data, virtual DOM nodes, and checkbox data of the last sub-page that the sub-application ran when it was unloaded last time, and continue to execute S350;

[0086] Specifically; the second instantiated sub-application is instantiated according to the first routing data, virtual DOM nodes, and checkbox data to obtain the second instantiated sub-application. The obtained second instantiated sub-application can display the last sub-page that ran when the sub-application was unloaded last time and the content in the checkbox on the page;

[0087] In some embodiments, after obtaining the first cache information, the sub-application deletes the checkbox data in the local database and deletes the virtual DOM nodes in the sub-application database; to release memory.

[0088] S350. When the sub-page is running, obtain the virtual DOM nodes of the sub-application according to the page information of the sub-page and save them in the sub-application cache; filter the content in the input box and dropdown box in the sub-page as checkbox data and save it in the local cache;

[0089] Specifically, use the keep-alive component of the sub-application to obtain the virtual DOM nodes of the sub-application and save them in the sub-application cache;

[0090] Specifically, uninstalling a sub-application will call the page destruction process hook function `destroyed`. During this lifecycle, the data of the filter form is read and stored in the cache. To distinguish the caches of different pages, the cache key value is the name of the defined component of the page. For the dropdown box, not only the key value but also the selected name is cached.

[0091] Specifically, session-level local cache `sessionStorage` is introduced to store the checkbox data. First, the cache in the local cache `sessionStorage` is read. If the page cache is hit, the cache is loaded and the query condition variables of the form are updated. This cache is session-based and can be read when the main application calls different sub-applications. It can utilize the lifecycle of VUE to implement application-level caching during reloading, and the content of the input box and checkbox in the page can be displayed through instantiation.

[0092] S360. When obtaining the sub-page close request of the sub-application, determine whether the sub-page is the last sub-page of the sub-application running; if it is determined that the sub-page is the last sub-page of the sub-application running, uninstall the sub-application and obtain the first routing data, virtual DOM nodes, and checkbox data as the first cache information for update.

[0093] Specifically, the main application listens for route changes in the form of multiple tabs. When switching sub-pages of the same sub-application, the main application does not reload the sub-application and does not trigger the uninstall process; while when switching pages of different sub-applications, it needs to be loaded by manually loading the sub-application. Manual loading does not trigger the uninstall process of the sub-framework.

[0094] Specifically, the route prefixes of the sub-pages included in the same sub-application are the same; obtain the first route prefix of the sub-page and the second route prefix of other running sub-pages. If there is a second route prefix that is the same as the first route prefix, it is determined that the sub-page is not the last sub-page of the sub-application running; if there is no second route prefix that is the same as the first route prefix, it is determined that the sub-page is the last sub-page of the sub-application running.

[0095] Specifically, when it is determined that the sub-page is the last sub-page of the sub-application running, obtain the virtual DOM nodes from the sub-application cache, obtain the checkbox data from the local cache, and obtain the route data of the last sub-page as the first routing data, which will be used to update the first cache information.

[0096] In some embodiments, when an application is uninstalled, global variables are defined and saved, that is, "Router=this.instance.$router; Vnode=this.instance.vnode" is defined as the virtual DOM node, where $router and _vnode are instance variables of the VUE framework, and _vnode is an object that includes the node name, the text of the node, child nodes, data, and the keepalive attribute of the data, etc.

[0097] The embodiments of the present application provide a method. When the main application completes user login, login information and user information are shared. When it is determined that a sub-application is uninstalled, first cache information is obtained. The first cache information includes first routing data, a virtual DOM node, and checkbox data. When a loading request for the sub-application is obtained, it is determined 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 the present application can achieve the following technical effects:

[0098] In this embodiment, the front-end and back-end synchronization of user information and login information is performed, and the cache changes are monitored for real-time update and synchronization to ensure the stability of the system operation.

[0099] The method of manually registering micro-applications is adopted to manage the sub-application cache. When a request for closing a sub-page of the sub-application is obtained, when it is determined that the sub-page is the last sub-page running for the sub-application, the first cache information is obtained and the sub-application is uninstalled, including the first routing data and the virtual DOM node in the first cache information. When the sub-application is rendered, the virtual DOM node on the cached instance is used to replace the instantiation of the sub-application, thereby realizing micro-frontend application-level caching, which improves the maintainability and scalability of the system, can reduce the application creation and uninstallation processes, thereby reducing performance overhead, and improving the response speed and performance of the application.

[0100] This embodiment also locally caches checkbox data and cooperates with the virtual DOM node. The second instantiated sub-application obtained by instantiating the sub-application according to the first cache information can display the content in the checkbox on the last sub-page while being able to display the last sub-page at the time of the previous uninstallation, avoiding the inconvenience caused to users that the search conditions cannot be displayed after the browser is refreshed or reloaded.

[0101] The embodiments of the present invention can divide the functional modules of an electronic device or a main control device 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 unit can be implemented in the form of hardware or in the form of a software functional module. It should be noted that the division of modules in the embodiments of the present invention is illustrative, only a logical function division, and there may be other division methods in actual implementation.

[0102] Figure 4 The structural schematic diagram of the cache device based on the micro-frontend architecture provided by the embodiments of the present application Figure 1 ; As Figure 4 shown, the device 40 includes:

[0103] A judgment module 401, 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;

[0104] A first instantiation module 402, configured to, if it is the first load, call the sub-application according to the preset routing data and user information, and render the sub-application to obtain a first instantiated sub-application;

[0105] A second instantiation module 403, configured to, if it is not the first load, obtain first cache information, call the sub-application according to the first cache information, and render the sub-application to obtain a second instantiated sub-application; wherein, the first cache information includes the first routing data, virtual DOM nodes, and marquee data of the last running sub-page when the sub-application was unloaded last time;

[0106] A cache module 404, configured to, when receiving a close request for a sub-page of the sub-application, judge 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, update the first cache information and unload the sub-application.

[0107] Furthermore, the routing prefixes of the sub-pages included in the same sub-application are the same; the cache module 404 is further configured to:

[0108] Obtain the first routing prefix of the sub-page and the second routing prefixes of other running sub-pages. If there is a second routing prefix that is the same as the first routing prefix, it is determined that the sub-page is not the last sub-page that the sub-application runs; if there is no second routing prefix that is the same as the first routing prefix, it is determined that the sub-page is the last sub-page that the sub-application runs.

[0109] Furthermore, before receiving the close request for the sub-page, the cache module 404 is specifically further configured to:

[0110] The sub-application calls the keep-alive component to obtain the virtual DOM nodes of the sub-application according to the page information of the running sub-pages, and caches the virtual DOM nodes to the sub-application database;

[0111] The sub-application uses a form form as a filter to filter the content in the input box and dropdown box in the sub-page as marquee data; and caches the marquee data to the local database;

[0112] The cache module 404 is specifically further configured to:

[0113] 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 nodes and checkbox data as the first cache information.

[0114] Further, the cache module 404 is specifically further used for:

[0115] Call the uninstall process hook function of the sub - page, read the checkbox data in the form and cache it.

[0116] Further, the cache module 404 is specifically further used for:

[0117] After obtaining the checkbox data sent by the sub - application, the sub - application deletes the checkbox data in the local database.

[0118] Further, the cache module 404 is specifically further used for:

[0119] After obtaining the virtual DOM nodes sent by the sub - application, the sub - application deletes the virtual DOM nodes in the sub - application database.

[0120] Further, the judgment module 401 is further used for:

[0121] 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 user login according to the login request information and user information, and sends the request information and user information to the sub - application for sharing with the sub - application.

[0122] The cache device based on the micro - front - end architecture provided in this embodiment can execute the above - mentioned cache method based on the micro - front - end architecture, and its implementation principle and technical effects are similar, so they will not be elaborated here in this embodiment.

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

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

[0125] In the specific implementation process, at least one processor 501 executes the computer - executable instructions stored in the memory 502, so that at least one processor 501 executes the cache method based on the micro - front - end architecture executed on the electronic device side as above.

[0126] For the specific implementation process of the processor 501, reference may be made to the foregoing method embodiments. Their implementation principles and technical effects are similar, and will not be elaborated herein.

[0127] In the foregoing embodiments, it should be understood that the processor may be a central processing unit (CPU for short), or may also be other general-purpose processors, digital signal processors (DSP for short), application specific integrated circuits (ASIC for short), etc. The general-purpose processor may be a microprocessor or any conventional processor, etc. The steps of the method disclosed in combination with the invention can be directly implemented by a hardware processor, or implemented by a combination of hardware and software modules in the processor.

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

[0129] The bus may be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, an Extended Industry Standard Architecture (EISA) bus, etc. The bus may be divided into an address bus, a data bus, a control bus, etc. For the convenience of representation, the buses in the drawings of this application are not limited to only one bus or one type of bus.

[0130] The functions implemented for the electronic device and the main control device are introduced for the solution provided by the embodiments of the present invention. It can be understood that in order for the electronic device or the main control device to implement the above functions, it includes the corresponding hardware structures and / or software modules for executing each function. Combining 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 certain function is executed in the form of hardware or computer software driving 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 exceed the scope of the technical solution of the embodiments of the present invention.

[0131] The present application also provides a computer-readable storage medium storing computer-executable instructions, which, when executed by a processor, implement the above cache method based on the micro-frontend architecture.

[0132] The above computer-readable storage medium can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, a magnetic disk, or an optical disk. The readable storage medium can be any available medium accessible by a general-purpose or special-purpose computer.

[0133] An exemplary readable storage medium is coupled to the processor, enabling the processor to read information from and write information to the readable storage medium. Of course, the readable storage medium can also be part of the processor. The processor and the readable storage medium can be located in an application specific integrated circuit (ASIC). Of course, the processor and the readable storage medium can also exist as discrete components in an electronic device or a main control device.

[0134] The present application also provides a computer program product, which includes a computer program stored in a readable storage medium. At least one processor of an electronic device can read the computer program from the readable storage medium, and the execution of the computer program by at least one processor causes the electronic device to execute the solution provided in any of the above embodiments.

[0135] Those of ordinary skill in the art can understand that all or part of the steps for implementing the above method embodiments can be completed by hardware related to program instructions. The foregoing program can be stored in a computer-readable storage medium. When the program is executed, it performs the steps included in the above method embodiments; and the foregoing storage medium includes various media that can store program codes, such as ROM, RAM, magnetic disks, or optical disks.

[0136] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention and are not intended to limit them; 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 they can still modify the technical solutions described in the foregoing embodiments, or perform equivalent replacements on some or all of the technical features; and these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present invention.

Claims

1. A caching method based on the micro-frontend architecture, characterized in that, For a micro front-end system, the micro front-end system includes a main application and a plurality of sub-applications registered on the main application, and the sub-applications include one or more sub-pages; the method includes: When receiving a loading request for the sub-application sent by the user, determine whether the sub-application is loaded for the first time; If it is the first time to load, call the sub-application according to the preset routing data and user information, and render the sub-application to obtain a first instantiated sub-application; If it is not the first time to load, obtain first cache information, call the sub-application according to the first cache information, and render the sub-application to obtain a second instantiated sub-application; wherein, the first cache information includes first routing data, virtual DOM nodes and marquee data of the last running sub-page when the sub-application was unloaded last time; When receiving a close request for a sub-page of the sub-application, determine whether the sub-page is the last sub-page running in the sub-application; if it is determined that the sub-page is the last sub-page running in the sub-application, update the first cache information and unload the sub-application.

2. The method according to claim 1, wherein The routing prefixes of the sub-pages included in the same sub-application are the same; the determining whether the sub-page is the last sub-page running in the sub-application includes: Obtain the first routing prefix of the sub-page and the second routing prefixes of other running sub-pages. If there is a second routing prefix that is the same as the first routing prefix, determine that the sub-page is not the last sub-page running in the sub-application; if there is no second routing prefix that is the same as the first routing prefix, determine that the sub-page is the last sub-page running in the sub-application.

3. The method according to claim 1, characterized in that Before receiving the close request for the sub-page, the method further includes: The sub-application calls the keep-alive component to obtain the virtual DOM node of the sub-application according to the page information of the running sub-page, and caches the virtual DOM node to the sub-application database; The sub-application uses a form form as a filter to filter the content in the input box and dropdown box in the sub-page as the marquee data; and caches the marquee data to the local database; The updating the first cache information includes: The main application sends an unloading cache request to the sub-application, and obtains the first routing data, the virtual DOM node and the marquee data sent by the sub-application as the first cache information.

4. The method according to claim 3, wherein The caching the marquee data to the local database includes: Call the unloading process hook function of the sub-page, read the marquee data in the form form and cache it to the local database.

5. The method according to claim 4, characterized in that After obtaining the marquee 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, characterized in that, 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 for 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 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 a micro-frontend architecture, characterized in that, For a micro-frontend system, the micro-frontend system includes a main application and multiple sub-applications registered on the main application, and the sub-applications include one or more sub-pages; the device 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; A first instantiation module, configured to, if it is the first loading, call the sub-application according to preset routing data and user information, and render the sub-application to obtain a first instantiated sub-application; A second instantiation module, configured to, if it is not the first loading, obtain first cache information, call the sub-application according to the first cache information, and render the sub-application to obtain a second instantiated sub-application; wherein, the first cache information includes first routing data, virtual DOM nodes and marquee data of the last sub-page that ran when the sub-application was unloaded last time; A cache module, configured to, when obtaining a sub-page close request of the sub-application, judge 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, update the first cache information and unload the sub-application.

9. An electronic device, characterized in that, Includes: A processor and a memory communicatively connected to the processor; The memory stores computer-executable instructions; The processor executes the 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 the computer-executable instructions are executed by a processor, they are used to implement the method according to any one of claims 1 to 7.

Images