Micro-application page data caching method and device based on micro-front-end architecture

Abstract

The invention discloses a micro-application page data caching method and device based on a micro-front-end architecture, and belongs to the technical field of computers. The method comprises the following steps: loading a target page of a target micro-application; in response to a closing request of the target page, closing the target page, and caching target data in the target page based on a full path in a uniform resource locator of the target page under the condition that the cache attribute of the target page is caching; the target data comprises data input based on an input component in the target page. According to the micro-application page data caching method based on the micro-front-end architecture, the problem that the user experience is poor due to the fact that the user needs to input data again when the closed micro-application page is reloaded can be solved.

Description

Technical Field

[0001] The present application belongs to the field of computer technology, and in particular, relates to a micro-application page data caching method and device based on a micro-front-end architecture. Background Art

[0002] In the existing micro-frontend architecture, multiple micro-applications are independently deployed in the main application, so that multiple micro-applications can be independently developed and run. Micro-applications can implement different functions through multiple pages.

[0003] With the development of different micro-applications, when switching between different pages of different micro-applications, it is inevitable to trigger the closing of the page, so that the data on the closed page is cleared. When reloading the closed page, since the data on the page has been cleared, the user has to re-enter the data, resulting in a poor user experience. Summary of the invention

[0004] The present application aims to solve at least one of the technical problems existing in the prior art. To this end, the present application proposes a micro-application page data caching method and device based on a micro-frontend architecture to solve the problem that the user needs to re-enter data when reloading a closed micro-application page, resulting in a poor user experience.

[0005] In a first aspect, the present application provides a micro-application page data caching method based on a micro-frontend architecture, the method comprising:

[0006] Load the target page of the target micro-application;

[0007] In response to a closing request of the target page, the target page is closed, and when the cache attribute of the target page is to cache, the target data in the target page is cached based on the full path in the uniform resource locator of the target page; the target data includes data input based on the input component in the target page.

[0008] According to the micro-application page data caching method based on the micro-front-end architecture of the present application, when the target page of the target micro-application is closed, when the cache attribute of the target page is to be cached, the target data such as the data input by the input component in the target page is cached based on the full path in the uniform resource locator of the target page. This makes it unnecessary to re-enter data through the input component on the target page when the closed target page is opened again, thereby improving the user experience.

[0009] According to one embodiment of the present application, before loading the target page of the target micro-application, the method further includes:

[0010] In response to a user input for a target micro-application, configuration information of the target micro-application is obtained; the configuration information includes cache attributes of each page of the target micro-application; each page includes a target page;

[0011] Based on the configuration information, mount the target micro application to the base.

[0012] According to one embodiment of the present application, mounting a target micro application to a base based on configuration information includes:

[0013] Call the encapsulated target method and mount the target micro-application to the base based on the configuration information; the target method is encapsulated based on the virtual DOM.

[0014] According to an embodiment of the present application, when the cache attribute of the target page is to cache, based on the full path in the uniform resource locator of the target page, the target data in the target page is cached, including:

[0015] When the cache menu from the base includes the identifier of the target page, the target data is cached and the full path in the uniform resource locator of the target page is used as the identifier of the target data; the cache menu stores the identifiers of each page to be cached with cache attributes; the identifier of each page is the full path in the uniform resource locator of the page.

[0016] According to one embodiment of the present application, loading a target page of a target micro-application includes:

[0017] When the routing information of the target page is monitored, the target micro application has been mounted to the base, and the cache attribute of the target page is cached, the cache data of the cached target page is obtained;

[0018] Render the page based on the cached data to load the target page.

[0019] According to an embodiment of the present application, obtaining cache data of a cached target page includes:

[0020] The cached data is matched based on the identifier to obtain the cached data of the target page.

[0021] In a second aspect, the present application provides a micro-application page data caching device based on a micro-frontend architecture, the device comprising:

[0022] Loading module, used to load the target page of the target micro application;

[0023] A cache module is used to close the target page in response to a target page closing request, and when the cache attribute of the target page is to cache, cache the target data in the target page based on the full path in the uniform resource locator of the target page; the target data includes data input based on the input component in the target page.

[0024] According to the micro-application page data caching device based on the micro-front-end architecture of the present application, when the target page of the target micro-application is closed, when the cache attribute of the target page is to be cached, the target data such as the data input by the input component in the target page is cached based on the full path in the uniform resource locator of the target page. This makes it unnecessary for the user to re-enter the data in the input component on the target page when the closed target page is opened again, thereby improving the user experience.

[0025] In a third aspect, the present application provides an electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the micro-application page data caching method based on the micro-front-end architecture as described in the first aspect above is implemented.

[0026] In a fourth aspect, the present application provides a non-transitory computer-readable storage medium having a computer program stored thereon. When the computer program is executed by a processor, the micro-application page data caching method based on a micro-front-end architecture as described in the first aspect above is implemented.

[0027] In a fifth aspect, the present application provides a computer program product, including a computer program, which, when executed by a processor, implements the micro-application page data caching method based on a micro-front-end architecture as described in the first aspect above.

[0028] Additional aspects and advantages of the present application will be given in part in the description below, and in part will become apparent from the description below, or will be learned through the practice of the present application. BRIEF DESCRIPTION OF THE DRAWINGS

[0029] The above and / or additional aspects and advantages of the present application will become apparent and easily understood from the description of the embodiments in conjunction with the following drawings, in which:

[0030] Figure 1 It is a flow chart of a micro-application page data caching method based on a micro-front-end architecture provided in an embodiment of the present application;

[0031] Figure 2 It is a flowchart of another micro-application page data caching method based on a micro-frontend architecture provided in an embodiment of the present application;

[0032] Figure 3It is a structural diagram of a micro-application page data caching device based on a micro-front-end architecture provided in an embodiment of the present application;

[0033] Figure 4 It is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0034] The following will be combined with the drawings in the embodiments of the present application to clearly describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, rather than all the embodiments. All other embodiments obtained by ordinary technicians in this field based on the embodiments in the present application belong to the scope of protection of this application.

[0035] The terms "first", "second", etc. in the specification and claims of the present application are used to distinguish similar objects, and are not used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable under appropriate circumstances, so that the embodiments of the present application can be implemented in an order other than those illustrated or described here, and the objects distinguished by "first", "second", etc. are generally of one type, and the number of objects is not limited. For example, the first object can be one or more. In addition, "and / or" in the specification and claims represents at least one of the connected objects, and the character " / " generally indicates that the objects associated with each other are in an "or" relationship.

[0036] In the related art, in order to facilitate the independent development of multiple micro-applications, multiple micro-applications are deployed under the main application in the micro-front-end framework, so that the micro-applications can call some functional components that have been implemented in the main application. Micro-applications can implement different functions through multiple pages. In the process of developing different micro-applications, when switching between different pages of different micro-applications, it is inevitable to trigger the closure of the page, causing the data entered by the user in the input component of the page to be cleared due to the closure of the page. When reloading the closed page, since the data on the page has been cleared, the user has to re-enter the data, resulting in a poor user experience.

[0037] In combination with the accompanying drawings, the micro-application page data caching method based on the micro-front-end architecture, the micro-application page data caching device based on the micro-front-end architecture, the electronic device and the readable storage medium provided in the embodiments of the present application are described in detail through specific embodiments and their application scenarios.

[0038] Among them, the micro-application page data caching method based on the micro-front-end architecture can be applied to the terminal, and can be specifically executed by hardware or software in the terminal.

[0039] The terminal includes, but is not limited to, a portable communication device such as a mobile phone or tablet computer with a touch-sensitive surface (e.g., a touch screen display and / or a touch pad). It should also be understood that in some embodiments, the terminal may not be a portable communication device, but a desktop computer with a touch-sensitive surface (e.g., a touch screen display and / or a touch pad).

[0040] In the following various embodiments, a terminal including a display and a touch-sensitive surface is described. However, it should be understood that the terminal may include one or more other physical user interface devices such as a physical keyboard, a mouse and a joystick.

[0041] The micro-application page data caching method based on the micro-front-end architecture provided in the embodiment of the present application may be executed by an electronic device or a functional module or functional entity in the electronic device that can implement the micro-application page data caching method based on the micro-front-end architecture. The electronic devices mentioned in the embodiment of the present application include but are not limited to mobile phones, tablet computers, computers, cameras, and wearable devices. The micro-application page data caching method based on the micro-front-end architecture provided in the embodiment of the present application is described below using an electronic device as an example of the execution subject.

[0042] like Figure 1 As shown, the micro-application page data caching method based on the micro-frontend architecture includes: step 110 and step 120.

[0043] Step 110: Load the target page of the target micro-application.

[0044] In actual execution, the target micro-application can be any micro-application mounted on the base, and the base can be the main application mentioned above. Multiple target micro-applications can be mounted on the base, and multiple target micro-applications can be kept isolated based on the target isolation method, so that the styles do not interfere with each other and the running status is not shared, but the target micro-applications can communicate with each other. The base can include the configuration information of the target page of each target micro-application in the multiple target micro-applications, and the configuration information can include the cache properties of the target page.

[0045] In actual execution, the technical framework of the base and the target micro-application can be based on vue. In some embodiments, the base and the target micro-application front-end project can be built using vue-cli scaffolding, and the package construction can use the webpack tool, and the qiankun library dependency package can be introduced using the npm command.

[0046] In actual implementation, the qiankun library can be based on the micro-frontend implementation library of single-spa. The single-spa framework is easier to use and encapsulates more practical functions. In essence, it still calls single-spa to implement micro-frontends. The qiankun library can work by calling a main application, which acts as the entry point for all micro-frontends' micro-applications. Each micro-frontend is developed as an independent application, which can be deployed independently and communicate with the main application through a defined API. Micro-applications can communicate with the main application according to the API interface provided by qiankun, sharing the main application's style, public functions, components, etc. Each micro-application is an independent front-end application platform, with its own routing, state management, and UI component library, etc.

[0047] In actual execution, the target micro-application may include multiple target pages, and each of the multiple target pages of the target micro-application may include an input component, and the input component may be used to receive data input by a user.

[0048] In some embodiments, the routing information of the target page of the target micro-application can be monitored. After monitoring the routing information of the target page, when it is determined that the target micro-application to which the target page belongs has been mounted on the base and the cache attribute of the target page is to be cached, the cache data of the cached target page is obtained and the cached data is rendered to load the target page.

[0049] Step 120, in response to a closing request of the target page, close the target page, and when the cache attribute of the target page is to cache, cache the target data in the target page based on the full path in the uniform resource locator of the target page; the target data includes data input based on the input component in the target page.

[0050] In actual execution, a closing request for the target page may be obtained for a target component of the target page, such as a close button component. When a user clicks the close button component on the target page, a closing request for the target page is sent.

[0051] In some embodiments, after receiving a close request with a target page, the configuration information of the target page can be obtained through the base, and the cache attribute of the target page can be determined based on the configuration information. When the cache attribute of the target page is to cache, the target data in the target page is cached based on the full path in the uniform resource locator of the target page.

[0052] In actual execution, the target data may be data input by an input component in the target page, and the input component may include an input box, a list, a cell box, a check box, and the like.

[0053] In actual execution, when the cache attribute of the target page is to cache, the target data in the target page can be cached based on the full path in the uniform resource locator of the target page. The target data in the target page can be cached to a target database, which can be a database corresponding to the target micro application.

[0054] According to the micro-application page data caching method based on the micro-front-end architecture provided in the embodiment of the present application, when the target page of the target micro-application is closed, when the cache attribute of the target page is to be cached, the target data such as the data input by the input component in the target page is cached based on the full path in the uniform resource locator of the target page. This makes it unnecessary for the user to re-enter the data in the input component on the target page when the closed target page is opened again, thereby improving the user experience.

[0055] In some embodiments, in response to user input for a target micro-application, configuration information of the target micro-application can be obtained; the configuration information includes cache properties of each page of the target micro-application; each page includes a target page; based on the configuration information, the target micro-application is mounted to a base.

[0056] In actual execution, the user input for the target micro application can be obtained based on the base. The user input for the target micro application may include input for each page in the target micro application. The user input content may include configuration information of each page of the target micro application. The configuration information may include cache properties of the page.

[0057] In actual execution, after obtaining the configuration information of the target micro-application, the target micro-application can be mounted to the base based on the configuration information. The target micro-application mounted to the base can communicate with the base according to the API interface provided by Qiankun, and share the style, public functions, components, etc. of the main application in the base.

[0058] According to the micro-application page data caching method based on the micro-front-end architecture provided in the embodiment of the present application, by obtaining the configuration information of the target micro-application and mounting the target micro-application to the base based on the configuration information, the target micro-application can share the universal, configurable, shareable, and checkable functional modules in the base, thereby avoiding the developers' repeated development of some shareable functional modules and improving development efficiency.

[0059] In some embodiments, after obtaining the configuration information of the target micro-application, the encapsulated target method can be called, and the target micro-application can be mounted to the base based on the configuration information; the target method is encapsulated based on the virtual DOM.

[0060] In actual execution, the encapsulated target method may be a method provided by the qiankun library that is encapsulated based on the virtual DOM, such as the start method.

[0061] In some embodiments, in the process of calling the encapsulated target method to mount the target micro-application to the base, the routing information can be monitored, and based on the monitored routing information, it can be determined whether the target micro-application is monitored, whether the target micro-application has been mounted to the base, whether the target page in the target micro-application already exists, and the cache properties of the target page, etc., and based on the determination result, the target micro-application is mounted to the base.

[0062] According to the micro-application page data caching method based on the micro-front-end architecture provided in the embodiment of the present application, by obtaining the configuration information of the target micro-application and calling the encapsulated target method, the target micro-application is mounted to the base based on the configuration information. This makes it unnecessary to re-enter data in the input component on the target page when the closed target page is opened again, thereby reducing the cost of use.

[0063] In some embodiments, after obtaining a close request for a target page, the target page is closed in response to the close request for the target page, and the target data can be cached when a cache menu from the base includes an identifier of the target page, and the full path in the uniform resource locator of the target page is used as the identifier of the target data; the cache menu stores identifiers of each page to be cached with cache attributes; the identifier of each page is the full path in the uniform resource locator of the page.

[0064] In actual execution, a cache menu may be obtained from the base based on the target component. The cache menu may store cache properties of each page, including whether to cache or not to cache.

[0065] In some embodiments, based on the cache menu obtained from the base by the target component, the identifiers of each page whose cache attribute is to be cached can be stored, and the identifier of each page is the full path in the uniform resource locator of the page. After obtaining a close request for the target page, in response to the close request of the target page, the target page is closed, and a search can be performed in the cache menu to determine whether the cache menu includes the identifier of the target page, and the cache attribute of the target page is determined based on the judgment result. In the case where the cache menu includes the identifier of the target page, the cache attribute of the target page is determined to be cached, the target data is cached, and the full path in the uniform resource locator of the target page is used as the identifier of the target data. Conversely, in the case where the cache menu does not include the identifier of the target page, the cache attribute of the target page is determined to be not cached, and the target page is directly closed.

[0066] According to the micro-application page data caching method based on the micro-front-end architecture provided in the embodiment of the present application, when the target page of the target micro-application is closed, the cache attribute of the target page is determined by obtaining a cache menu based on the target component from the base. When the cache attribute of the target page is to cache, the target data such as the data input by the input component in the target page is cached based on the full path in the uniform resource locator of the target page. This makes it unnecessary for the user to re-enter the data in the input component on the target page when the closed target page is opened again, thereby reducing development costs and improving user experience.

[0067] In some embodiments, when the routing information of the target page is monitored, the target micro-application has been mounted to the base, and the cache attribute of the target page is to be cached, the cache data of the cached target page can be obtained, and the page can be rendered based on the cache data to load the target page.

[0068] In actual execution, when the user sends a request to open the target page through a target operation, the routing information of the target page can be monitored. When the routing information of the target page is monitored, it can be determined whether the target micro application to which the target page belongs has been mounted on the base and whether the cache attribute of the target page is cached. If the target micro application has been mounted on the base and the cache attribute of the target page is cached, the cache data of the cached target page is obtained, and the page is rendered based on the cache data to load the target page.

[0069] In some embodiments, when the routing information of the target page is monitored and the target micro-application has been mounted to the base, the static resources of the target page can be loaded based on the target event, and the target event can be the single-spa:first-mount event provided by single-spa.

[0070] In some embodiments, when the routing information of the target page is monitored, it can be determined whether the target micro-application to which the target page belongs has been mounted to the base. If the target micro-application is not mounted to the base, the target micro-application can be mounted to the base based on the method in any of the above embodiments.

[0071] According to the micro-application page data caching method based on the micro-front-end architecture provided in the embodiment of the present application, by monitoring the routing information of the target page, the target micro-application has been mounted to the base, and the cache attribute of the target page is for caching, the cache data of the cached target page is obtained, and the page is rendered based on the cached data to load the target page. This makes it unnecessary for the user to re-enter data in the input component on the target page when the closed target page is opened again, thereby improving the user experience.

[0072] In some embodiments, when the routing information of the target page is monitored, the target micro-application has been mounted to the base, and the cache attribute of the target page is to be cached, the cached data can be matched based on the identifier, the cached data of the target page can be obtained, and the page can be rendered based on the cached data to load the target page.

[0073] In actual execution, the identifier can be the full path in the uniform resource locator of the target page. When the routing information of the target page is monitored, the target micro application has been mounted to the base, and the cache attribute of the target page is cached, the cached data can be matched based on the full path in the uniform resource locator of the target page, the cached data of the target page can be obtained, and the page can be rendered based on the cached data to load the target page.

[0074] According to the micro-application page data caching method based on the micro-front-end architecture provided in the embodiment of the present application, when the routing information of the target page is monitored, the target micro-application has been mounted to the base, and the cache attribute of the target page is to be cached, the cached data of the target page is matched based on the identifier, the cached data of the target page is obtained, and the page is rendered based on the cached data to load the target page. This makes it unnecessary for the user to re-enter data in the input component on the target page when the closed target page is opened again, thereby improving the user experience.

[0075] In order to better understand the micro-application page data caching method based on the micro-front-end architecture provided in the embodiment of the present application, further explanation is given below. It should be understood that the following discussion is only exemplary.

[0076] This application provides a micro-application page data caching method based on a micro-frontend architecture. The specific steps can be as follows: Figure 2 As shown:

[0077] Step 210: Build the base.

[0078] In actual implementation, the technical framework of the base and the target micro-application can be implemented by vue and built using the webpack tool. In some embodiments, the vue-cli scaffolding can be used to build the base and the target micro-application front-end project, the webpack tool is used for packaging and building, and the qiankun library dependency package is introduced using the npm command.

[0079] In actual implementation, the qiankun library is a micro-frontend 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 micro-frontends. The qiankun library works by using a main application, which acts as the entry point for all micro-frontend micro-applications. Each micro-frontend is developed as an independent application, which can be deployed independently and communicate with the main application through a defined API. Micro-applications can communicate with the main application according to the API interface provided by qiankun, sharing the main application's style, public functions, components, etc. Each micro-application is an independent front-end application platform with its own routing, state management, and UI component library.

[0080] Step 220: Based on the base, obtain the configuration information of the target micro-application, and based on the configuration information, mount the target micro-application to the base.

[0081] In some embodiments, in response to user input for a target micro-application, configuration information of the target micro-application can be obtained; the configuration information includes cache properties of each page of the target micro-application; each page includes a target page; based on the configuration information, the target micro-application is mounted to a base.

[0082] In actual execution, the user input for the target micro application can be obtained based on the base. The user input for the target micro application may include input for each page in the target micro application. The user input content may include configuration information of each page of the target micro application. The configuration information may include cache properties of the page.

[0083] In actual execution, after obtaining the configuration information of the target micro-application, the target micro-application can be mounted to the base based on the configuration information. The target micro-application mounted to the base can communicate with the base according to the API interface provided by Qiankun, and share the style, public functions, components, etc. of the main application in the base.

[0084] In some embodiments, after obtaining the configuration information of the target micro-application, the encapsulated target method can be called, and the target micro-application can be mounted to the base based on the configuration information; the target method is encapsulated based on the virtual DOM.

[0085] In actual execution, the encapsulated target method may be a method provided by the qiankun library that is encapsulated based on the virtual DOM, such as the start method.

[0086] In some embodiments, in the process of calling the encapsulated target method to mount the target micro-application to the base, the routing information can be monitored, and based on the monitored routing information, it can be determined whether the target micro-application is monitored, whether the target micro-application has been mounted to the base, whether the target page in the target micro-application already exists, and the cache properties of the target page, etc., and based on the determination result, the target micro-application is mounted to the base.

[0087] In actual execution, the target micro-application can be any micro-application mounted on the base, and the base can be the main application mentioned above. Multiple target micro-applications can be mounted on the base. Multiple target micro-applications can be kept isolated based on the target isolation method to achieve non-interference in style and non-sharing of running status, but the target micro-applications can communicate with each other.

[0088] In some embodiments, the base can be built based on the qiankun library. Qiankun implements two style isolations. One is the style isolation mode, which wraps a shadow dom node for the container of each micro-application to ensure that the style of the micro-application will not affect the global situation; the other is achieved by dynamically rewriting the css selector, which can be understood as a css scoped method. The qiankun library implements style isolation through the JS sandbox and the style sandbox during runtime. The JS sandbox generates a separate window proxy object for each micro-application, and cooperates with the JS script executor (such as execScripts) provided by HTML Entry to implement JS isolation; the style sandbox hijacks the addition of dynamic styles and JS scripts by rewriting the DOM operation method, so that the styles and scripts are added to the correct place, that is, the main application is inserted into the main application template, and the micro-application is inserted into the micro-application template.

[0089] In some embodiments, after the target micro-application is mounted to the base, the data broadcast by the main application can be received through the hook function. For example, the bootstrap function can be called when the target micro-application is initialized, and the mount function can be called when the target micro-application is closed and opened again.

[0090] Step 230: In response to a close request of the target page, close the target page, and when the cache attribute of the target page is to cache, cache the target data in the target page based on the full path in the uniform resource locator of the target page; the target data includes data input based on the input component in the target page.

[0091] In actual execution, a closing request for the target page may be obtained for a target component of the target page, such as a close button component. When a user clicks the close button component on the target page, a closing request for the target page is sent.

[0092] In some embodiments, after receiving a close request with a target page, the configuration information of the target page can be obtained through the base, and the cache attribute of the target page can be determined based on the configuration information. When the cache attribute of the target page is to cache, the target data in the target page is cached based on the full path in the uniform resource locator of the target page.

[0093] In actual execution, the target data may be data input by an input component in the target page, and the input component may include an input box, a list, a cell box, a check box, and the like.

[0094] In actual execution, when the cache attribute of the target page is to cache, the target data in the target page can be cached based on the full path in the uniform resource locator of the target page. The target data in the target page can be cached to a target database, which can be a database corresponding to the target micro application.

[0095] In some embodiments, after obtaining a close request for a target page, the target page is closed in response to the close request for the target page, and the target data can be cached when a cache menu from the base includes an identifier of the target page, and the full path in the uniform resource locator of the target page is used as the identifier of the target data; the cache menu stores identifiers of each page to be cached with cache attributes; the identifier of each page is the full path in the uniform resource locator of the page.

[0096] In actual execution, a cache menu may be obtained from the base based on the target component. The cache menu may store cache properties of each page, including whether to cache or not to cache.

[0097] In some embodiments, based on the cache menu obtained from the base by the target component, the identifiers of each page whose cache attribute is to be cached can be stored, and the identifier of each page is the full path in the uniform resource locator of the page. After obtaining a close request for the target page, in response to the close request of the target page, the target page is closed, and a search can be performed in the cache menu to determine whether the cache menu includes the identifier of the target page, and the cache attribute of the target page is determined based on the judgment result. In the case where the cache menu includes the identifier of the target page, the cache attribute of the target page is determined to be cached, the target data is cached, and the full path in the uniform resource locator of the target page is used as the identifier of the target data. Conversely, in the case where the cache menu does not include the identifier of the target page, the cache attribute of the target page is determined to be not cached, and the target page is directly closed.

[0098] In some embodiments, when the cache menu from the base includes an identifier of the target page, based on the target component, the full path in the uniform resource locator of the target page can be used as the identifier of the target data, the target data can be encapsulated into a VNode node, and the encapsulated node can be cached under the target address. The target component can be a custom-keep-alive component, and the target address can be this.cache.

[0099] Step 240: Load the target page of the target micro-application.

[0100] In some embodiments, the routing information of the target page of the target micro-application can be monitored. After monitoring the routing information of the target page, when it is determined that the target micro-application to which the target page belongs has been mounted on the base and the cache attribute of the target page is to be cached, the cache data of the cached target page is obtained and the cached data is rendered to load the target page.

[0101] In some embodiments, when the routing information of the target page is monitored, the target micro-application has been mounted to the base, and the cache attribute of the target page is to be cached, the cache data of the cached target page can be obtained, and the page can be rendered based on the cache data to load the target page.

[0102] In actual execution, when the user sends a request to open the target page through a target operation, the routing information of the target page can be monitored. When the routing information of the target page is monitored, it can be determined whether the target micro application to which the target page belongs has been mounted on the base and whether the cache attribute of the target page is cached. If the target micro application has been mounted on the base and the cache attribute of the target page is cached, the cache data of the cached target page is obtained, and the page is rendered based on the cache data to load the target page.

[0103] In some embodiments, when the routing information of the target page is monitored and the target micro-application has been mounted to the base, the static resources of the target page can be loaded based on the target event, and the target event can be the single-spa:first-mount event provided by single-spa.

[0104] In some embodiments, when the routing information of the target page is monitored, it can be determined whether the target micro-application to which the target page belongs has been mounted to the base. If the target micro-application is not mounted to the base, the target micro-application can be mounted to the base based on the method in any of the above embodiments.

[0105] In some embodiments, when the routing information of the target page is monitored, the target micro-application has been mounted to the base, and the cache attribute of the target page is to be cached, the cached data can be matched based on the identifier, the cached data of the target page can be obtained, and the page can be rendered based on the cached data to load the target page.

[0106] In actual execution, the identifier can be the full path in the uniform resource locator of the target page. When the routing information of the target page is monitored, the target micro application has been mounted to the base, and the cache attribute of the target page is cached, the cached data can be matched based on the full path in the uniform resource locator of the target page, the cached data of the target page can be obtained, and the page can be rendered based on the cached data to load the target page.

[0107] In some embodiments, after monitoring the routing information of the target page, when it is determined that the target micro-application to which the target page belongs has been mounted on the base and the cache attribute of the target page is to be cached, the target data encapsulated as a VNode node can be obtained from the target address based on the target component and the full path in the uniform resource locator of the target page. The target component can be a custom-keep-alive component and the target address can be this.cache.

[0108] In the embodiment of the present application, the micro-application page data caching method based on the micro-frontend architecture provided by the embodiment of the present application can be executed by a micro-application page data caching device based on the micro-frontend architecture. In the embodiment of the present application, the micro-application page data caching method based on the micro-frontend architecture is executed by a micro-application page data caching device based on the micro-frontend architecture as an example to illustrate the micro-application page data caching device based on the micro-frontend architecture provided by the embodiment of the present application.

[0109] like Figure 3 As shown, the micro-application page data cache device 300 based on the micro-frontend architecture includes: a first acquisition module 310 and a second acquisition module 320, wherein:

[0110] A loading module 310 is used to load a target page of a target micro-application;

[0111] The cache module 320 is used to close the target page in response to a closing request of the target page, and when the cache attribute of the target page is to cache, cache the target data in the target page based on the full path in the uniform resource locator of the target page; the target data includes data input based on the input component in the target page.

[0112] According to the micro-application page data caching device based on the micro-front-end architecture of the present application, when the target page of the target micro-application is closed, when the cache attribute of the target page is to be cached, the target data such as the data input by the input component in the target page is cached based on the full path in the uniform resource locator of the target page. This makes it unnecessary for the user to re-enter the data in the input component on the target page when the closed target page is opened again, thereby improving the user experience.

[0113] In some embodiments, the micro-application page data caching device based on the micro-frontend architecture further includes:

[0114] An acquisition module, for acquiring configuration information of a target micro-application in response to a user input for the target micro-application; the configuration information includes cache attributes of each page of the target micro-application; each page includes a target page;

[0115] The mounting module is used to mount the target micro application to the base based on the configuration information.

[0116] In some embodiments, the mounting module includes:

[0117] The mounting unit is used to call the encapsulated target method and mount the target micro application to the base based on the configuration information; the target method is encapsulated based on the virtual DOM.

[0118] In some embodiments, the cache module includes:

[0119] A cache unit is used to cache target data when a cache menu from a base includes an identifier of a target page, and to use the full path in the uniform resource locator of the target page as the identifier of the target data; the cache menu stores identifiers of each page to be cached with cache attributes; the identifier of each page is the full path in the uniform resource locator of the page.

[0120] In some embodiments, the loading module includes:

[0121] An acquisition unit is used to acquire cache data of a cached target page when the routing information of the target page is monitored, the target micro application has been mounted to the base, and the cache attribute of the target page is to be cached;

[0122] The rendering unit is used to render the page based on the cached data to load the target page.

[0123] In some embodiments, the acquisition unit is specifically used to:

[0124] The cached data is matched based on the identifier to obtain the cached data of the target page.

[0125] The micro-application page data caching device based on the micro-front-end architecture in the embodiment of the present application can be an electronic device, or a component in an electronic device, such as an integrated circuit or a chip. The electronic device can be a terminal, or it can be other devices other than a terminal. Exemplarily, the electronic device can be a mobile phone, a tablet computer, a laptop computer, a palmtop computer, a vehicle-mounted electronic device, a mobile Internet device (Mobile Internet Device, MID), an augmented reality (augmentedreality, AR) / virtual reality (virtual reality, VR) device, a robot, a wearable device, an ultra-mobile personal computer (ultra-mobile personal computer, UMPC), a netbook or a personal digital assistant (personaldigital assistant, PDA), etc., and can also be a server, a network attached storage (Network AttachedStorage, NAS), a personal computer (personal computer, PC), a television (television, TV), a teller machine or a self-service machine, etc., and the embodiment of the present application is not specifically limited.

[0126] The micro-application page data caching device based on the micro-front-end architecture in the embodiment of the present application can be a device with an operating system. The operating system can be a Microsoft (Windows) operating system, an Android (Android) operating system, an IOS operating system, or other possible operating systems, which are not specifically limited in the embodiment of the present application.

[0127] The micro-application page data caching device based on the micro-frontend architecture provided in the embodiment of the present application can achieve Figure 1-2 To avoid repetition, the various processes implemented by the method embodiment are not described here.

[0128] In some embodiments, Figure 4 As shown, an embodiment of the present application also provides an electronic device 400, including a processor 401, a memory 402, and a computer program stored in the memory 402 and executable on the processor 401. When the program is executed by the processor 401, each process of the above-mentioned micro-application page data caching method embodiment based on the micro-front-end architecture is implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

[0129] It should be noted that the electronic devices in the embodiments of the present application include the mobile electronic devices and non-mobile electronic devices mentioned above.

[0130] The embodiment of the present application also provides a non-transitory computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the various processes of the above-mentioned micro-application page data caching method embodiment based on the micro-front-end architecture are implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

[0131] The processor is the processor in the electronic device described in the above embodiment. The readable storage medium includes a computer readable storage medium, such as a computer read-only memory ROM, a random access memory RAM, a magnetic disk or an optical disk.

[0132] An embodiment of the present application also provides a computer program product, including a computer program, which, when executed by a processor, implements the above-mentioned micro-application page data caching method based on a micro-front-end architecture.

[0133] The processor is the processor in the electronic device described in the above embodiment. The readable storage medium includes a computer readable storage medium, such as a computer read-only memory ROM, a random access memory RAM, a magnetic disk or an optical disk.

[0134] An embodiment of the present application further provides a chip, which includes a processor and a communication interface, wherein the communication interface is coupled to the processor, and the processor is used to run programs or instructions to implement the various processes of the above-mentioned micro-application page data caching method embodiment based on the micro-front-end architecture, and can achieve the same technical effect. To avoid repetition, it will not be repeated here.

[0135] It should be understood that the chip mentioned in the embodiments of the present application can also be called a system-level chip, a system chip, a chip system or a system-on-chip chip, etc.

[0136] It should be noted that, in this article, the terms "comprise", "include" or any other variant thereof are intended to cover non-exclusive inclusion, so that the process, method, article or device including a series of elements includes not only those elements, but also includes other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise one..." do not exclude the presence of other identical elements in the process, method, article or device including the element. In addition, it should be pointed out that the scope of the methods and devices in the embodiments of the present application is not limited to performing functions in the order shown or discussed, and may also include performing functions in a substantially simultaneous manner or in reverse order according to the functions involved, for example, the described method may be performed in an order different from that described, and various steps may also be added, omitted, or combined. In addition, the features described with reference to certain examples may be combined in other examples.

[0137] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a computer software product, which is stored in a storage medium (such as ROM / RAM, a disk, or an optical disk), and includes a number of instructions for a terminal (which can be a mobile phone, a computer, a server, or a network device, etc.) to execute the methods described in each embodiment of the present application.

[0138] The embodiments of the present application are described above in conjunction with the accompanying drawings, but the present application is not limited to the above-mentioned specific implementation methods. The above-mentioned specific implementation methods are merely illustrative and not restrictive. Under the guidance of the present application, ordinary technicians in this field can also make many forms without departing from the purpose of the present application and the scope of protection of the claims, all of which are within the protection of the present application.

[0139] In the description of this specification, the description with reference to the terms "one embodiment", "some embodiments", "illustrative embodiments", "examples", "specific examples", or "some examples" means that the specific features, structures, materials, or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present application. In this specification, the schematic representation of the above terms does not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials, or characteristics described may be combined in any one or more embodiments or examples in a suitable manner.

[0140] Although the embodiments of the present application have been shown and described, those skilled in the art will appreciate that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present application, and that the scope of the present application is defined by the claims and their equivalents.

Claims

1. A micro-application page data caching method based on a micro-frontend architecture, characterized in that: include: Load the target page of the target micro-application; In response to a closing request of the target page, closing the target page, and caching the target data in the target page based on the full path in the uniform resource locator of the target page when the cache attribute of the target page is to cache; The target data includes data input based on an input component in the target page.

2. The micro-application page data caching method based on micro-frontend architecture according to claim 1 is characterized in that: Before loading the target page of the target micro-application, the method further includes: In response to a user input for the target micro-application, obtaining configuration information of the target micro-application; the configuration information includes cache attributes of each page of the target micro-application; the each page includes the target page; Based on the configuration information, the target micro-application is mounted to a base.

3. The micro-application page data caching method based on micro-front-end architecture according to claim 2 is characterized in that: The step of mounting the target micro application to a base based on the configuration information includes: The encapsulated target method is called, and based on the configuration information, the target micro-application is mounted to the base; the target method is encapsulated based on the virtual DOM.

4. The micro-application page data caching method based on micro-frontend architecture according to claim 1 is characterized in that: When the cache attribute of the target page is to cache, caching the target data in the target page based on the full path in the uniform resource locator of the target page includes: In the case where the cache menu from the base includes the identifier of the target page, the target data is cached, and the full path in the uniform resource locator of the target page is used as the identifier of the target data; the cache menu stores the identifiers of each page to be cached with the cache attribute; the identifier of each of the pages is the full path in the uniform resource locator of the page.

5. The micro-application page data caching method based on micro-frontend architecture according to claim 1 is characterized in that: The target page of the loaded target micro-application includes: When the routing information of the target page is monitored, the target micro-application has been mounted to the base, and the cache attribute of the target page is to be cached, the cache data of the cached target page is obtained; Page rendering is performed based on the cached data to load the target page.

6. The micro-application page data caching method based on micro-frontend architecture according to claim 5 is characterized in that: The obtaining cached data of the target page that has been cached includes: The cached data is matched based on the identifier to obtain the cached data of the target page.

7. A micro-application page data caching device based on a micro-frontend architecture, characterized in that: include: Loading module, used to load the target page of the target micro application; a cache module, configured to close the target page in response to a closing request of the target page, and cache the target data in the target page based on the full path in the uniform resource locator of the target page when the cache attribute of the target page is to cache; The target data includes data input based on an input component in the target page.

8. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the program, the micro-application page data caching method based on the micro-front-end architecture is implemented as described in any one of claims 1-6.

9. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the micro-application page data caching method based on the micro-front-end architecture as described in any one of claims 1 to 6 is implemented.

10. A computer program product, comprising a computer program, characterized in that When the computer program is executed by the processor, the micro-application page data caching method based on the micro-front-end architecture as described in any one of claims 1 to 6 is implemented.

Images