A page cache method, device, equipment and storage medium

Abstract

Embodiments of the present application disclose a page caching method, device and equipment and a storage medium. The method comprises: when a page jump request is received, determining a to-be-cached page associated with the page jump request; updating a global page array according to a page identifier of the to-be-cached page, wherein the global page array is created in a storage instance of an interface construction framework project; and caching page information corresponding to the page identifier into a memory according to the page identifier contained in the global page array. By using the method, the page identifier of the to-be-cached page is dynamically maintained in the global page array, and the page corresponding to the page identifier contained in the global page array is dynamically cached into the memory according to the page identifier, thereby realizing unified management of the cached pages, solving the problem of manually updating the page cache, reducing the amount of code writing for the cached pages, and improving system performance and user experience.

Description

Technical Field

[0001] This invention relates to the field of data storage technology, and in particular to a page caching method, apparatus, device, and storage medium. Background Technology

[0002] With the widespread adoption of mobile devices and the development of technology, conducting business through mobile applications (APPs) is becoming increasingly common. Due to the limitations of mobile screen size, when there is a lot of content to display, it is necessary to split the content into multiple pages for presentation.

[0003] When a user switches between multiple data entry pages during the data entry process on a mobile device, if the entered information is not stored, the user will have to re-enter the entered information before submitting the entry. Alternatively, when navigating back to the list page from the details page, a new data request needs to be initiated to retrieve the list data, which increases the system's response time. If the list page has pagination for querying, the user will have to flip through multiple pages to initiate pagination query requests to restore the original list page data state, which undoubtedly reduces the system's performance.

[0004] In existing technologies, only the state management tool Vuex is used as the state management library to achieve page caching by storing page data in a data source pool. Each page requiring caching maintains a separate Store instance, and the data to be cached is stored in the data source pool according to business needs. Because the amount of code increases linearly, each page requires writing a Store instance and corresponding methods, inevitably increasing the amount of code and page maintenance costs. Summary of the Invention

[0005] This invention provides a page caching method, apparatus, device, and storage medium, which realizes unified management of cached pages, solves the problem of manually updating page cache, reduces the amount of code to write cached pages, and improves system performance and user experience.

[0006] Firstly, this embodiment provides a page caching method, including:

[0007] When a page redirection request is received, the page to be cached associated with the page redirection request is determined;

[0008] Update the global page array based on the page identifier of the page to be cached, wherein the global page array is created in the storage instance of the interface building framework project;

[0009] Based on the page identifiers contained in the global page array, the page information corresponding to the page identifiers is cached in memory.

[0010] Secondly, this embodiment provides a page caching device, including:

[0011] The page determination module is used to determine the page to be cached associated with the page redirection request when a page redirection request is received.

[0012] An array update module is used to update a global page array based on the page identifier of the page to be cached, wherein the global page array is created in a storage instance of the interface building framework project;

[0013] The caching module is used to cache the page information corresponding to the page identifier in memory based on the page identifier contained in the global page array.

[0014] Thirdly, embodiments of the present invention also provide an electronic device, comprising:

[0015] One or more processors;

[0016] Memory, used to store one or more programs;

[0017] The one or more programs are executed by the one or more processors, causing the one or more processors to implement the page caching method as provided in the first aspect embodiment.

[0018] Fourthly, embodiments of the present invention also provide a storage medium containing computer-executable instructions, which, when executed by a computer processor, are used to perform the page caching method based on the delivery pipeline as described in the first aspect embodiment.

[0019] This invention discloses a page caching method, apparatus, device, and storage medium. The method includes: upon receiving a page redirection request, determining the page to be cached associated with the page redirection request; updating a global page array based on the page identifier of the page to be cached, wherein the global page array is created in a storage instance of an interface building framework project; and caching the page information corresponding to the page identifier contained in the global page array into memory. This technical solution first creates a global page array to store the page identifiers of the pages to be cached. By dynamically maintaining the page identifiers of the pages to be cached in the global page array, and caching the pages corresponding to the page identifiers in memory based on the page identifiers contained in the global page array, unified management of cached pages is achieved, solving the problem of manually updating page caches, reducing the amount of code to write cached pages, and improving system performance and user experience.

[0020] It should be understood that the description in this section is not intended to identify key or essential features of the embodiments of the present invention, nor is it intended to limit the scope of the invention. Other features of the invention will become readily apparent from the following description. Attached Figure Description

[0021] To more clearly illustrate the technical solutions in the embodiments of the present invention, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0022] Figure 1 This is a flowchart illustrating a page caching method provided in Embodiment 1 of the present invention;

[0023] Figure 2 This is a flowchart illustrating a page caching method provided in Embodiment 2 of the present invention;

[0024] Figure 3 This is an example diagram illustrating the page caching steps for a business scenario provided in Embodiment 2 of the present invention;

[0025] Figure 4 This is a schematic diagram of a page caching device provided in Embodiment 3 of the present invention;

[0026] Figure 5 This is a schematic diagram of the structure of an electronic device provided in Embodiment 4 of the present invention. Detailed Implementation

[0027] To enable those skilled in the art to better understand the present invention, the technical solutions of the present invention will be clearly and completely described below with reference to the accompanying drawings of the embodiments of the present invention. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of the present invention.

[0028] It should be noted that the terms "target," "original," etc., used in the specification, claims, and accompanying drawings of this invention are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that embodiments of the invention described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0029] Currently, with the widespread adoption of mobile devices and technological advancements, some business scenarios on apps involve multiple pages. For example, consider the following two scenarios: Scenario 1: When a business requires the input of numerous business elements, due to the limitations of mobile screen size, these elements are split into multiple pages for input. When a user needs to confirm or modify business elements on a previous page, the already entered elements must be cached; otherwise, the user would have to repeatedly enter the same elements (i.e., page information), severely impacting the user experience.

[0030] Scenario 2: A list page needs to display all transactions a user has completed, with the option to navigate to a details page for more comprehensive data. Since the number of transactions may be large, the list page uses a paginated approach, displaying only 10 transactions at a time. Users can pull up to load the list, triggering a new HTTP request from the client to the server, which returns the 10 new transactions. However, a problem arises: after multiple pulls to access a transaction's details page and then returning to the list page, if the list page isn't cached, the user must pull up the same number of times to return to the previous state. This undoubtedly degrades the user experience, and the repeated HTTP requests also slow down system performance.

[0031] In existing technologies, only Vuex is used as the state management library, and page caching is achieved by storing page data in the state data source. For business scenario one and business scenario two, the basic process includes:

[0032] 1) Vuex provides State as a data source pool to store page data.

[0033] 2) For pages that need to be cached, create a Store instance for each page, and have a State instance for each cached page to store page data.

[0034] Regarding the above business scenario one:

[0035] 3) When navigating to the next data entry page, store the business elements already entered on the current page in the current page's State.

[0036] 4) When the user returns to the previous input page, the page first retrieves the data stored in the State of the previous input page and renders it.

[0037] 5) When a user modifies an entered business element and is redirected to the next entry page, the State of the current page is updated.

[0038] 6) After the user has finished entering the data, clear all data in the State field of the entry page.

[0039] For the second business scenario mentioned above:

[0040] 7) When navigating from the list page to the details page, store all transaction data that has been retrieved from the list page through the request in the State of the list page.

[0041] 8) When the user returns to the list page from the details page, the list page first retrieves the data stored in the State and renders it.

[0042] 9) Clear the data stored in the corresponding State of the list page when the user exits the list page.

[0043] As can be seen, existing technologies maintain a Store instance for each page that needs caching, and store the data to be cached in the State according to business requirements. Because the amount of code increases linearly, each page requires writing a Store instance and its corresponding methods. That is, writing one page takes time t, and writing n (n>0, and is a positive integer) pages takes time (n*t), inevitably increasing the amount of code and page maintenance costs. Therefore, a page caching method is needed to solve the above problems.

[0044] Example 1

[0045] Figure 1 This is a flowchart illustrating a page caching method provided in Embodiment 1 of the present invention. This embodiment is applicable to the case of caching pages. The method can be executed by a page caching device, which can be implemented by hardware and / or software and is generally integrated into an electronic device.

[0046] like Figure 1 As shown, the page caching method provided in this embodiment can specifically include the following steps:

[0047] S110. When a page redirection request is received, determine the page to be cached associated with the page redirection request.

[0048] To more clearly describe the embodiments of the present invention, the relevant terms mentioned in this embodiment will be explained first. Mobile terminal: A terminal device that accesses the Internet via wireless network technology. Single-page application: An application with only one main page, i.e., a single Hypertext Markup Language (HTML) page. Initially, it only needs to load the interpreted programming language (JavaScript, JS) and Cascading Style Sheets resources once. All content is contained within the main page, and each functional module is componentized. The page switching perceived by the user is actually a component switching. Main page: The main page for rendering the content of the single-page application. All content is rendered on one page. Every change in data will cause the page to partially refresh, presenting different display effects. Array: An ordered sequence of elements.

[0049] Vue.js: Refers to a progressive framework for building user interfaces, offering better organization and simplification for World Wide Web (Web) development. Built-in components: These are pre-packaged components in Vue.js that can be used directly in templates without registration. keep-alive: A built-in component of Vue.js. <keep-alive>When wrapping dynamic components, inactive component instances are cached instead of destroyed. During component transitions, component state is maintained in memory so that upon re-accessing the component, it retains the state it was in before leaving, rather than being re-rendered. Vue.js plugins: used to add global functionality to Vue.js, enhancing and supplementing its features. Vuex: a state management pattern and library specifically designed for developing Vue.js applications. It uses centralized storage to manage the state of all components in the application and ensures that state changes in a predictable manner according to appropriate rules.

[0050] VueRouter: This is the official routing plugin for Vue.js, deeply integrated with Vue.js, and suitable for building single-page applications. <router-view / > `keep-alive` is the core route management component of VueRouter, used to render components mapped via routes. When the path changes, the rendered content will also change accordingly. The `include` property is provided by the built-in component `keep-alive`, allowing conditional caching of components. It can be represented by a comma-separated string, a regular expression, or an array.

[0051] Computed Properties: Automatically listen for changes in dependency values ​​and dynamically return content. Caching: To conserve network resources and speed up browsing, browsers store page data and resources. Pagination: Divides excessive data into multiple pages for display on a limited screen. HTTP Requests: Clients send requests to servers to retrieve information or data. Store: The core of Vuex; essentially, it's a container holding most of the application's state. State: The basic data in Vuex, a component of the Store, serving as a data source pool. Action: A component of Vuex, a collection of methods that process methods in a Mutation into asynchronously callable methods. Mutation: A component of Vuex, a collection of methods that process State data. beforeRouteEnter: A global before-entry guard provided by VueRouter, intercepting and performing specified processing during page transitions.

[0052] In this embodiment, before receiving a page redirection request, the underlying architecture for page caching needs to be configured using a state management tool. Specifically, a Store instance is created in the relevant program based on Vuex to maintain a global page array, which stores the identifiers of pages to be cached. Based on the storage parameters of this global page array, it is determined which pages need to be cached in memory. Before maintaining the global page array, the pages to be cached need to be identified. This embodiment preferably uses Vuex to maintain the global array, but browser storage mechanisms such as sessionStorage and localStorage can also be used to replace Vuex for unified management and achieve dynamic page caching.

[0053] It should be noted that the page caching method provided in this embodiment is for single-page applications. The page jump request refers to the generation of a page jump request when a user needs to jump to a different page, triggered by a page jump operation. In this embodiment, there can be multiple ways to trigger the page jump operation. The page jump trigger operation can include, but is not limited to: operations on a page jump trigger control, where the page jump trigger control can be a virtual control element set on the application interface, such as at least one of a next page or previous page trigger button, a page jump trigger selection menu, and a page jump trigger slider; or, receiving sound information collected by a sound acquisition device for page jump triggering, etc., without specific limitations.

[0054] It is clear that page caching methods can be integrated into electronic devices such as mobile terminals and personal computers (PCs). When a page redirection request is received, the electronic device can execute the corresponding page redirection. The user's page redirection behavior can be determined by the relevant hardware or software of this execution entity through analysis of the relevant data information of the page redirection operation. In this step, different business scenarios correspond to different pages to be cached for their respective page redirection requests. The page to be cached can be determined based on the page redirection request.

[0055] In this embodiment, multiple apps can be installed on the electronic device, each involving different business scenarios. During the system development phase, the associated page for each business scenario is determined, and a unique identifier can be set for each page, such as a unique number or a unique name. When a page redirection request is received, the business scenario contained in the request is parsed. The page associated with this business scenario has already been designed in advance during the page design phase. In other words, once the business scenario is determined based on the page redirection request, the page associated with that business scenario can be identified, and this identified page is the page to be cached. Each page to be cached corresponds to a page identifier.

[0056] For example, if the business scenario involves inputting business elements across multiple pages, it's necessary to determine which pages require input. These determined pages are referred to as the pages to be cached. If the business scenario involves displaying a list of user-completed transactions on a list page, using pagination for querying transactions and allowing further navigation to a details page for more comprehensive transaction data, then when a business operation request is received to navigate from the menu page to the list page, the specific list page to be viewed can be determined. These determined list pages are referred to as the pages to be cached.

[0057] S120. Update the global page array based on the page identifier of the page to be cached.

[0058] The global page array is created within the storage instance of the UI framework project. A Store instance based on Vuex is created in the relevant program to maintain a global page array, which stores identifiers of pages to be cached. Based on the parameters stored in this global page array, it is determined which pages need to be cached in memory. Before maintaining the global page array, the pages to be cached must first be identified.

[0059] Specifically, once the page to be cached is determined, its page identifier can be added to the global page array. The pages corresponding to the page identifiers in the global page array need to be cached in memory. The timing for adding the page identifier to the global page array can be as follows: when a page redirection request is received, the request is first intercepted, and then the page identifier is added to the global page array. In this embodiment, the page redirection request is intercepted at the start of the transaction process using the global beforeRouteEnter guard provided by VueRouter.

[0060] In this step, after intercepting page redirection requests, the built-in Vue.js component `keep-alive` adds the page identifier to the global page array. When `keep-alive` wraps a dynamic component, it caches inactive component instances instead of destroying them. During component switching, the component state is saved in memory, so that when accessed again, it retains the state it was in before leaving, instead of re-rendering. The page identifier can be added to the global page array by calling the `addKeepLive()` method defined in the Mutation. It's understandable that this embodiment uses the built-in components `keep-alive` and `VueRouter` based on Vuex, using `keep-alive` to avoid a large amount of manual storage operations.

[0061] S130. Based on the page identifier contained in the global page array, cache the page information corresponding to the page identifier in memory.

[0062] In this step, after all the page identifiers of the pages to be cached have been added to the global page array, page redirection requests need to be allowed to redirect to the pages to be cached. For example, if the business scenario involves entering information on multiple pages, the user is redirected to entry page 1, where they can input information. At this time, the page information generated by the user's input on entry page 1 can be cached in memory. It can be understood that the user can sequentially enter information on entry page 1, entry page 2, entry page 3, etc., and the entered content is cached in memory as page information, with each page identifier corresponding to the page information of one entry page.

[0063] This can be understood as follows: when a page identifier is stored in the global page array, the page information corresponding to that page identifier is stored in memory. When a page identifier is deleted from the global page array, the page information corresponding to that page identifier is also deleted from memory. Alternatively, it can be understood as a one-to-one correspondence between page identifiers in the global page array and page information in memory. By maintaining the global page array, the page information stored in memory can be controlled.

[0064] It's important to understand that, compared to existing technologies where the preceding page needs to be re-rendered when navigating from a subsequent page to a previous page before content can be displayed, this embodiment, based on the page caching method provided, allows for better handling of business scenarios involving page entry. For example, when a user navigates from page 4 to page 3 during the entry process, the business information already entered on page 3 is retained and can be directly retrieved from the cached memory for display on the front-end page.

[0065] Given that current technology cannot preserve the scroll position on list pages using pagination, users must scroll again to return to their original position when returning from a details page to the list page, degrading the user experience. Furthermore, explicit calls to Action methods to update data in the State are required during page transitions, and these method calls take time to process, further extending page loading time.

[0066] In this embodiment, if the business scenario involves displaying a user's completed transactions in a paginated list format on a list page, with further clicks to jump to a details page for more detailed transaction data, when a business operation request is received to jump from the menu page to the list page, the list page to be viewed can be determined. This determined list page is called the page to be cached. The page identifier of the list page is stored in a global page array, and the corresponding list page is also cached in memory. Based on the keep-alive feature, the screen swipe position can be recorded. When returning to the list page after jumping to the details page, the original data is saved, and the screen swipe position is positioned as before the jump. For example, when a user enters the list page and initially loads 10 data items, a swipe up request is made to load the next 10 data items. After viewing the data details page at the 15th data item position and returning to the list page, the original 20 data items are cached, and the scroll bar position is at the 15th data item position. No further data initialization or swipe up operations are required, reducing the number of HTTP requests.

[0067] Understandably, the process involves intercepting the transaction at the beginning, adding the names of the pages that need to be cached to the page array, and updating the include property of the built-in component keep-alive in real time through computed properties. The built-in component keep-alive will then automatically save the data state of the cached pages in memory to achieve page caching.

[0068] This invention discloses a page caching method, which includes: upon receiving a page redirection request, determining the page to be cached associated with the page redirection request; updating a global page array based on the page identifier of the page to be cached, wherein the global page array is created in a storage instance of an interface building framework project; and caching the page information corresponding to the page identifier in memory based on the page identifier contained in the global page array. Using this method, a globally created page array is used to store the page identifiers of the pages to be cached. By dynamically maintaining the page identifiers of the pages to be cached in the global page array, and caching the pages corresponding to the page identifiers in memory based on the page identifiers contained in the global page array, unified management of cached pages is achieved, solving the problem of manually updating page caches, reducing the amount of code to write cached pages, and improving system performance and user experience.

[0069] As an optional embodiment of the present invention, based on the above embodiment, the method is further defined to include, before updating the global page array according to the page identifier of the page to be cached, deleting the page identifier of the page to be cached from the global page array and deleting the page information corresponding to the page identifier from memory.

[0070] Specifically, upon receiving a page caching request, before updating the global page array based on the page identifier of the page to be cached, it is necessary to first remove the page identifier of the page to be cached from the global page array and delete the page information corresponding to the page identifier from memory. The purpose of this deletion step is to prevent page information related to this business that has already been entered in the previous data entry process from remaining in memory. This can be achieved by calling the delKeepLive() method defined in Mutation, which removes the page identifier from the global page array.

[0071] For example, in a multi-page data entry scenario, assume that the data entry pages 1-4 that need to be cached are named "remitInsert", "receiving", "declaration", and "remitFileUpload" respectively. When navigating to page 1 from the menu page entry, the delKeepLive() method is called to clear the data entry pages 1-4 from the global page array, preventing the page information already entered in the previous data entry process from remaining in memory. Specifically, this can be represented as:

[0072] this.$store.dispatch("keepAlive / delKeepLive","remitInsert");

[0073] this.$store.dispatch("keepAlive / delKeepLive","receiving");

[0074] this.$store.dispatch("keepAlive / delKeepLive","declaration");

[0075] this.$store.dispatch("keepAlive / delKeepLive","remitFileUpload").

[0076] For example, in a business scenario where paginated list data is displayed and users can navigate to a specific data detail page, the list page can be given a unique name: outRemitQryList.

[0077] When navigating from the menu page to the list page, the delKeepLive() method is called to clear the list pages in the page array, preventing business elements entered in the previous data entry process from remaining in memory.

[0078] this.$store.dispatch("keepAlive / delKeepLive","outRemitQryList").

[0079] As an optional embodiment of the present invention, based on the above embodiments, the method is further defined to include: when an operation end instruction is received, the page identifier of the page to be cached is deleted from the global page array and the page information corresponding to the page identifier is deleted from memory.

[0080] In this embodiment, pages that no longer need to be cached are cleared from the page array at the end of the transaction process. The operation end instruction can be understood as an instruction indicating the completion of a business operation. For example, in a multi-entry page scenario, when a user completes the relevant page entry and clicks "submit," an operation end instruction is considered received. Similarly, in a multi-page list scenario with access to a details page, when a user returns from the list page to the menu page via a click, an operation end instruction is considered received. Upon receiving an operation end instruction, it can be assumed that the user has completed the relevant operation for that business scenario, and there is no longer a need to navigate back through the pages in the operation process. Therefore, it is no longer necessary to retrieve cached page information from memory. Since the global page array contains page identifiers, the page information corresponding to these identifiers is stored in memory. Therefore, in this step, when an operation end instruction is received, the page identifier of the cached page needs to be removed from the global page array, and the page information corresponding to the page identifier needs to be removed from memory.

[0081] It should be noted that the method for deleting the page identifier in this step is the same as the method in the previous optional embodiment, which involves deleting the page identifier of the page to be cached from the global page array and deleting the page information corresponding to the page identifier from memory before updating the global page array based on the page identifier of the page to be cached. This will not be repeated here.

[0082] As an optional embodiment of the present invention, based on the above embodiments, it is further defined that before receiving the page redirection request, it also includes: configuring the underlying architecture of page caching based on the state management tool.

[0083] Specifically, the page caching method provided in this embodiment is implemented based on the underlying page caching architecture. Therefore, before performing page caching, it is necessary to configure the underlying page caching architecture using a state management tool. It can be understood that for a system, the underlying page caching architecture configuration only needs to be configured once, and page caching can be executed for different business scenarios within the same system. The state management tool refers to Vuex.

[0084] Furthermore, the underlying architecture configuration for page caching is based on a state management tool, including: creating a UI building framework project based on the state management tool; creating a storage instance in the UI building framework project; wrapping the routing component with the built-in component in the storage instance; and binding the properties of the built-in component to a global page array to maintain the global page array.

[0085] Specifically, a Vue.js project is created based on the Vuex tool. A storage instance, store.js, is created within the Vue.js project. The route component is wrapped by the built-in component keep-alive in the storage instance store.js. The include property of the built-in component keep-alive is bound to a global page array to maintain the global page array.

[0086] Among them, a1) maintains a global page array in keepAlive's State, which can be represented as:

[0087] conststate = {

[0088] keepAliveList:[] / / Cache list

[0089] }

[0090] b1) KeepAlive provides the Action methods addKeepLive() and delKeepLive() for adding and clearing page array parameters.

[0091]

[0092] The specific steps of c1) addKeepLive() include:

[0093] Call the method ADD_KEEPALIVE() defined in Mutation.

[0094] Check if the page already exists in the page array; if not, add the page.

[0095] The specific steps of d1)delKeepLive() include:

[0096] Call the method DEL_KEEPALIVE() defined in Mutation.

[0097] Check if the page already exists in the page array; if it does, delete it.

[0098] e1) On the homepage <router-view / > Wrap it with the built-in component keep-alive.

[0099] <keep-alive:include="Arrays">

[0100] <router-viewclass="Router" / >

[0101] .

[0102] f1) The keep-alive component built into the main page is bound to the include property of the array, and the keepAliveList array is monitored through computed properties and updated to the array of arrays on the main page in real time.

[0103]

[0104]

[0105] This optional embodiment details the steps for configuring the underlying architecture of page caching. A Store instance is created based on Vuex to maintain a global array of pages, storing the representations of pages that need to be cached. Based on the page identifiers stored in this array, it determines which pages need to be cached. Action and Mutation methods corresponding to the Store are written to update the page array. The main page is wrapped using the built-in component keep-alive, and its include property is bound to the page array for conditional caching. Real-time updates to the page array are achieved through computed properties, providing underlying support for page caching.

[0106] Example 2

[0107] Figure 2 This is a flowchart illustrating a page caching method provided in Embodiment 2 of the present invention. This embodiment is a further optimization of the above embodiment. In this embodiment, updating the global page array according to the page identifier of the page to be cached is further specified as follows: intercepting the page jump request; adding the page identifier to the global page array.

[0108] Meanwhile, further specifying the caching of page information corresponding to the page identifier in memory based on the page identifier contained in the global page array is as follows: allowing the page jump request to jump to the page to be cached; determining the page information corresponding to the page identifier based on the received business operation on the page to be cached; and caching the page information in memory.

[0109] like Figure 2 As shown, this second embodiment provides a page caching method, which specifically includes the following steps:

[0110] S210. When a page redirection request is received, determine the page to be cached associated with the page redirection request.

[0111] S220. Intercept page redirection requests.

[0112] Specifically, when a page redirection request is received, that is, at the start of the transaction process, it is intercepted by the beforeRouteEnter function in Vue Router.

[0113] S230. Add the page identifier to the global page array.

[0114] For example, in a multi-page data entry scenario, suppose the data entry pages 1-4 that need to be cached are named "remitInsert", "receiving", "declaration", and "remitFileUpload" respectively. When entering data entry page 1, the `beforeRouteEnter` function is used to intercept the entry and add the page identifier to the page array. Specifically, this can be represented as follows:

[0115]

[0116] For example, in a business scenario where paginated list data is displayed and users can navigate to a specific data detail page, the list page can be given a unique name: outRemitQryList.

[0117] Upon entering the list page, intercept the request using beforeRouteEnter and add the list page to the page array.

[0118]

[0119] S240. Allow the page redirection request to redirect to the cached page.

[0120] Specifically, allow page redirection requests to redirect to the cached page, and continue to receive user business operations on the cached page, such as page content entry and page browsing.

[0121] S250. Based on the received business operation for the page to be cached, determine the page information corresponding to the page identifier.

[0122] In this context, "business operations" refers to the actions performed on a page to be cached when the user is redirected, such as entering page content or browsing the page. Specifically, when a user performs a business operation on a page to be cached, the page information within the page to be cached can be determined based on the business operation, thus identifying the page information corresponding to the page identifier.

[0123] S260. Cache page information in memory.

[0124] Specifically, page information is cached in memory. When a user navigates to the previous entry page or from the details page to the list page, the page information corresponding to the page identifier can be directly retrieved from memory and displayed without any issues such as unsaved page information or re-rendering.

[0125] This embodiment maintains a global page array through a state management tool to uniformly manage all cached pages. Page caching is implemented based on the built-in component `keep-alive`. All cached pages only need a unique identifier, and VueRouter intercepts and adds them to the global array when switching pages. Pages no longer needing caching are cleared from the global array when appropriate, eliminating invalid or expired caches. This eliminates the need for manual storage and updates of numerous business elements, reducing code modification and maintenance costs. A dynamic page caching solution is provided for two business scenarios: business element entry and switching between list and detail pages, applicable to most entry and query scenarios. For entry scenarios, users do not need to lose data or repeatedly enter numerous business elements due to page switching. For query scenarios, the original state of the list page is retained after the user returns from the detail page, avoiding duplicate HTTP requests, reducing system response time, and improving user experience. This unified management of cached pages and dynamic caching solves the problem of manual page updates, reducing the amount of code required for cached pages.

[0126] To more clearly illustrate the page caching method provided in the embodiments of the present invention, exemplarily, Figure 3 This is an example diagram illustrating the page caching steps for a business scenario provided in Embodiment 2 of the present invention.

[0127] S1. Create an interface building framework project based on a state management tool;

[0128] S2. Create a storage instance in the interface construction framework project;

[0129] S3. Wrap the routing component with the built-in components in the storage instance;

[0130] S4. Bind the properties of the built-in components to the global page array to maintain the global page array.

[0131] S5. When a page redirection request is received, determine the cached page associated with the page redirection request;

[0132] S6. Remove the page identifier of the page to be cached from the global page array and delete the page information corresponding to the page identifier from memory.

[0133] S7. Update the global page array based on the page identifier of the page to be cached. The global page array is created in the storage instance of the UI building framework project.

[0134] S8. Based on the page identifier contained in the global page array, cache the page information corresponding to the page identifier in memory.

[0135] S9. When an operation end instruction is received, the page identifier of the page to be cached is removed from the global page array and the page information corresponding to the page identifier is removed from memory.

[0136] To more clearly illustrate the steps of the underlying program execution for page caching in this embodiment of the invention, the page caching process is described using two examples: a business scenario with multiple input pages and a business scenario with multiple list pages and access to a details page. For example, regarding business scenario one:

[0137] a2) For pages that need to be cached, set a unique name. Name pages 1-4 as "remitInsert", "receiving", "declaration", and "remitFileUpload" respectively.

[0138] b2) When jumping to page 1 from the menu page entry, call the delKeepLive() method to clear the page array containing pages 1-4, to prevent the page information already entered in the previous entry process from remaining in memory.

[0139] this.$store.dispatch("keepAlive / delKeepLive","remitInsert");

[0140] this.$store.dispatch("keepAlive / delKeepLive","receiving");

[0141] this.$store.dispatch("keepAlive / delKeepLive","declaration");

[0142] this.$store.dispatch("keepAlive / delKeepLive","remitFileUpload");

[0143] c2) Enter the input page 1, intercept it using beforeRouteEnter, and add the page to the page array.

[0144]

[0145] d2) Once data entry is complete, call the delKeepLive() method to clear pages 1-4 from the page array and jump to the result page.

[0146]

[0147] For business scenario two:

[0148] a3) For list pages, set a unique name outRemitQryList.

[0149] b3) When navigating from the menu page to the list page, call the delKeepLive() method to clear the list pages in the page array to prevent business elements entered in the previous entry process from remaining in memory.

[0150] this.$store.dispatch("keepAlive / delKeepLive","outRemitQryList");

[0151] c3) Enter the list page, intercept it using beforeRouteEnter, and add the list page to the page array.

[0152]

[0153] d3) After navigating to the details page, the original data is saved, and the screen swipe position is set to the position before the navigator.

[0154] e3) Return to the menu page from the list page and clear the list page in the page array. The specific steps are the same as b3).

[0155] Example 3

[0156] Figure 4 This is a schematic diagram of a page caching device provided in Embodiment 3 of the present invention, applicable to situations where pages are cached. This device can be implemented in hardware and / or software. Figure 4 As shown, the device includes: a page determination module 31, an array update module 32, and a cache module 33, wherein,

[0157] The page determination module 31 is used to determine the page to be cached associated with the page redirection request when a page redirection request is received;

[0158] The array update module 32 is used to update the global page array according to the page identifier of the page to be cached, wherein the global page array is created in the storage instance of the interface building framework project;

[0159] The caching module 33 is used to cache the page information corresponding to the page identifier in memory based on the page identifier contained in the global page array.

[0160] Optionally, the device further includes a first deletion module, specifically used for:

[0161] Remove the page identifier of the page to be cached from the global page array and delete the page information corresponding to the page identifier from memory.

[0162] Optionally, array update module 32 is specifically used for:

[0163] Intercept page redirection requests;

[0164] Add the page identifier to the global page array.

[0165] Optionally, cache module 33 is specifically used for:

[0166] Allow the page redirection request to redirect to the cached page;

[0167] Based on the received business operations for the page to be cached, determine the page information corresponding to the page identifier;

[0168] Cache page information in memory.

[0169] Optionally, the device further includes a second deletion module, specifically used for:

[0170] When an operation ends, the page identifier of the page to be cached is removed from the global page array, and the page information corresponding to the page identifier is removed from memory.

[0171] Optionally, the device further includes a configuration module for:

[0172] Configure the underlying architecture for page caching based on state management tools.

[0173] Optionally, the configuration module is specifically used for:

[0174] Create a UI / UX framework project based on a state management tool;

[0175] Create a storage instance in the UI building framework project;

[0176] The routing component is wrapped by the built-in component in the storage instance;

[0177] Bind the properties of the built-in components to the global page array to maintain the global page array.

[0178] The page caching device provided in the embodiments of the present invention can execute the page caching method provided in any embodiment of the present invention, and has the corresponding functional modules and beneficial effects of the method execution.

[0179] Example 4

[0180] Figure 5 This is a schematic diagram of an electronic device according to Embodiment 4 of the present invention. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as personal digital processors, cellular phones, smartphones, wearable devices (such as helmets, glasses, watches, etc.), and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely illustrative and are not intended to limit the implementation of the invention described and / or claimed herein.

[0181] like Figure 5As shown, the electronic device 40 includes at least one processor 41 and a memory, such as a read-only memory (ROM) 42 or a random access memory (RAM) 43, communicatively connected to the at least one processor 41. The memory stores computer programs executable by the at least one processor. The processor 41 can perform various appropriate actions and processes based on the computer program stored in the ROM 42 or loaded into the RAM 43 from storage unit 48. The RAM 43 may also store various programs and data required for the operation of the electronic device 40. The processor 41, ROM 42, and RAM 43 are interconnected via a bus 44. An input / output (I / O) interface 45 is also connected to the bus 44.

[0182] Multiple components in electronic device 40 are connected to I / O interface 45, including: input unit 746, such as keyboard, mouse, etc.; output unit 47, such as various types of monitors, speakers, etc.; storage unit 48, such as disk, optical disk, etc.; and communication unit 49, such as network card, modem, wireless transceiver, etc. Communication unit 49 allows electronic device 40 to exchange information / data with other devices through computer networks such as the Internet and / or various telecommunications networks.

[0183] Processor 41 can be a variety of general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of processor 41 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special-purpose artificial intelligence (AI) computing chips, various processors running machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. Processor 41 performs the various methods and processes described above, such as page caching methods.

[0184] In some embodiments, the page caching method may be implemented as a computer program tangibly contained in a computer-readable storage medium, such as storage unit 48. In some embodiments, part or all of the computer program may be loaded and / or mounted on electronic device 40 via ROM 42 and / or communication unit 49. When the computer program is loaded into RAM 43 and executed by processor 41, one or more steps of the page caching method described above may be performed. Alternatively, in other embodiments, processor 41 may be configured to perform the page caching method by any other suitable means (e.g., by means of firmware).

[0185] Various embodiments of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), systems-on-a-chip (SoCs), payload-programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments may include implementations in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which may be a dedicated or general-purpose programmable processor, capable of receiving data and instructions from a storage system, at least one input device, and at least one output device, and transmitting data and instructions to the storage system, the at least one input device, and the at least one output device.

[0186] Computer programs used to implement the methods of the present invention may be written in any combination of one or more programming languages. These computer programs may be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable data processing device, such that when executed by the processor, the computer programs cause the functions / operations specified in the flowcharts and / or block diagrams to be performed. The computer programs may be executed entirely on a machine, partially on a machine, or as a standalone software package, partially on a machine and partially on a remote machine, or entirely on a remote machine or server.

[0187] In the context of this invention, a computer-readable storage medium can be a tangible medium that may contain or store a computer program for use by or in conjunction with an instruction execution system, apparatus, or device. A computer-readable storage medium may include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination thereof. Alternatively, a computer-readable storage medium may be a machine-readable signal medium. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fibers, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof.

[0188] To provide interaction with a user, the systems and techniques described herein can be implemented on an electronic device having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and pointing device (e.g., a mouse or trackball) through which the user provides input to the electronic device. Other types of devices can also be used to provide interaction with the user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including sound input, voice input, or tactile input).

[0189] The systems and technologies described herein can be implemented in computing systems that include backend components (e.g., as data servers), or computing systems that include middleware components (e.g., application servers), or computing systems that include frontend components (e.g., user computers with graphical user interfaces or web browsers through which users can interact with implementations of the systems and technologies described herein), or any combination of such backend, middleware, or frontend components. The components of the system can be interconnected via digital data communication of any form or medium (e.g., communication networks). Examples of communication networks include local area networks (LANs), wide area networks (WANs), blockchain networks, and the Internet.

[0190] A computing system can include clients and servers. Clients and servers are generally located far apart and typically interact through communication networks. The client-server relationship is created by computer programs running on the respective computers and having a client-server relationship with each other. The server can be a cloud server, also known as a cloud computing server or cloud host, which is a hosting product within the cloud computing service system to address the shortcomings of traditional physical hosts and VPS services, such as high management difficulty and weak business scalability.

[0191] It should be understood that the various forms of processes shown above can be used, with steps reordered, added, or deleted. For example, the steps described in this invention can be executed in parallel, sequentially, or in different orders, as long as the desired result of the technical solution of this invention can be achieved, and this is not limited herein.

[0192] The specific embodiments described above do not constitute a limitation on the scope of protection of this invention. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this invention should be included within the scope of protection of this invention.

Claims

1. A page caching method, characterized in that, include: When a page redirection request is received, the page to be cached associated with the page redirection request is determined; Update the global page array based on the page identifier of the page to be cached, wherein the global page array is created in the storage instance of the interface building framework project; Based on the page identifiers contained in the global page array, the page information corresponding to the page identifiers is cached in memory; Before updating the global page array based on the page identifier of the page to be cached, the method further includes: Remove the page identifier of the page to be cached from the global page array and delete the page information corresponding to the page identifier from memory; The step of updating the global page array based on the page identifier of the page to be cached includes: The page redirection request is intercepted; Add the page identifier to the global page array; The step of caching the page information corresponding to the page identifier in memory based on the page identifier contained in the global page array includes: Allow the page redirection request to redirect to the cached page; Based on the received business operations on the page to be cached, determine the page information corresponding to the page identifier; The page information is cached in memory; The method further includes: When an operation end instruction is received, the page identifier of the page to be cached is removed from the global page array and the page information corresponding to the page identifier is removed from memory. The operation end instruction is an instruction indicating that the business operation is completed. This includes, before receiving the page redirection request: The underlying architecture for page caching is configured based on a state management tool, namely Vuex. The configuration of the underlying page caching architecture based on the state management tool includes: Create a UI / UX framework project based on a state management tool; Create a storage instance in the interface building framework project; The routing component is wrapped by the built-in component keep-alive in the storage instance; The include property of the built-in component keep-alive is bound to the global page array in order to maintain the global page array.

2. A page caching device, characterized in that, include: The page determination module is used to determine the page to be cached associated with the page redirection request when a page redirection request is received. An array update module is used to update a global page array based on the page identifier of the page to be cached, wherein the global page array is created in a storage instance of the interface building framework project; The caching module is used to cache the page information corresponding to the page identifier in memory based on the page identifier contained in the global page array; The device further includes a first deletion module, specifically used for: Remove the page identifier of the page to be cached from the global page array and delete the page information corresponding to the page identifier from memory; The array update module is specifically used for: The page redirection request is intercepted; Add the page identifier to the global page array; The cache module is specifically used for: Allow the page redirection request to redirect to the cached page; Based on the received business operations on the page to be cached, determine the page information corresponding to the page identifier; The page information is cached in memory; The device further includes a second deletion module, specifically used for: When an operation end instruction is received, the page identifier of the page to be cached is removed from the global page array and the page information corresponding to the page identifier is removed from memory. The operation end instruction is an instruction indicating that the business operation is completed. The device further includes a configuration module for: The underlying architecture for page caching is configured based on a state management tool, namely Vuex. The configuration module is specifically used for: Create a UI / UX framework project based on a state management tool; Create a storage instance in the interface building framework project; The routing component is wrapped by the built-in component keep-alive in the storage instance; The include property of the built-in component keep-alive is bound to the global page array in order to maintain the global page array.

3. An electronic device, characterized in that, include: One or more processors; Storage device for storing one or more programs; The one or more programs are executed by the one or more processors, such that the one or more processors are used to perform the page caching method of claim 1.

4. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the page caching method as described in claim 1.

Images