Front-end data caching method, device and equipment based on Vue framework and medium
By defining and managing data cache status in Vue projects, the problem of cumbersome and inefficient data cache in front-end development is solved, and efficient data reuse and server load reduction are achieved.
Patent Information
- Application Number
- CN202411877564.3
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-19
- Publication Date
- 2025-03-28
AI Technical Summary
In front-end development, data caching methods are cumbersome and inefficient, resulting in low data reuse rate and increasing the pressure on servers to process data.
Create a target file in the Vue project, define the data cache status, and define the data cache update and reading method based on this, and implement persistent storage of data through the Vuex plug-in to reduce duplicate requests on the server.
It improves data reuse rate, reduces the pressure on servers to process data, reduces development complexity, and improves user experience and system performance.
Smart Images
Figure CN119719168A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of front-end technology, and in particular to a front-end data caching method, device, equipment and medium based on a Vue framework. Background Art
[0002] Vue is one of the most mainstream frameworks in China's front-end development field. It occupies an important position in enterprise-level development, especially in building single-page applications for backend management systems. Its popularity and application are particularly significant. Its powerful componentization, data-driven and responsive features enable developers to efficiently and flexibly build enterprise-level applications with rich functions and excellent interactive experience.
[0003] In recent years, with the widespread application of big data technology, enterprise-level applications have faced unprecedented challenges in processing data, and the amount of data transmission has exploded. At the same time, website front-end technology is also developing rapidly, and the front-end business volume is increasing, which puts higher requirements on the front-end data processing capabilities. Current browsers mainly support the storage of string type data. For other types of data such as objects and arrays, browsers cannot directly store them. Therefore, when developing the front-end, website developers need to serialize the non-string type data received from the server, that is, convert it into a string format, and then save it to the browser cache. When these data are needed, developers need to deserialize the string data in the cache into the original data type to meet the needs of the front-end application. This data type conversion process requires developers to operate manually, which increases the complexity and workload of development. At the same time, the data caching method of the front-end website is cumbersome and inefficient. Due to frequent jumps between web pages, users often need to directly and repeatedly query the back-end interface to obtain data when browsing different pages, which leads to low reuse efficiency of the same data. Such frequent data requests not only delay the loading speed of data, reduce user experience, and affect user retention, but also increase the burden on the server and the pressure of data processing.
[0004] From the above, it can be seen that how to avoid cumbersome and inefficient data caching in front-end development, improve data reuse rate, and reduce the pressure on the server to process data is an urgent problem to be solved. Summary of the invention
[0005] In view of this, the purpose of the present invention is to provide a front-end data caching method, device, equipment and medium based on the Vue framework, which can avoid the cumbersome and inefficient data caching in front-end development, improve the data reuse rate, and reduce the pressure on the server to process data. The specific scheme is as follows:
[0006] In a first aspect, the present application provides a front-end data caching method based on the Vue framework, comprising:
[0007] Create a target file in the Vue project, and define a data cache state based on the target file; the data cache state is used to store data that is currently being edited or needs to be cached;
[0008] defining a data cache update method for updating the value of the data cache state and a data cache read method for reading the value of the data cache state based on the target file;
[0009] If a data editing instruction for the data to be edited is triggered, the data cache update method is called to update the data cache state with the data to be edited as the value of the data cache state to obtain the value of the current data cache state; the data to be edited is the data stored in the database;
[0010] Calling the data cache read method to read the value of the current data cache state, and binding the value of the current data cache state to a data editing page, so as to edit the value of the current data cache state through the data editing page to obtain the value of the edited data cache state;
[0011] The value of the edited data cache state is saved in the database to complete the data editing operation on the data to be edited.
[0012] Optionally, after defining the data cache state based on the target file, the method further includes:
[0013] A Vuex plug-in is configured in the target file to ensure that the data cache state can be persisted.
[0014] Optionally, before triggering the data editing instruction for the data to be edited, the method further includes:
[0015] A data list containing several target data is obtained from the database, and the data list is displayed through a data display page using the data binding mechanism of Vue, so as to determine the data to be edited from the several target data.
[0016] Optionally, before calling the data cache reading method to read the value of the current data cache state, the method further includes:
[0017] Retrieving the data cache status, and determining the cache status of the data to be edited according to the retrieval result;
[0018] If the cache status of the data to be edited is cached, triggering the step of calling the data cache reading method to read the value of the current data cache status;
[0019] If the cache status of the data to be edited is not cached, then a step is triggered to call the data cache update method to update the data cache status by using the data to be edited as the value of the data cache status.
[0020] Optionally, editing the value of the current data cache state through the data editing page to obtain the value of the edited data cache state includes:
[0021] Acquiring target input data for editing the value of the current data cache state through the data editing page;
[0022] The target input data is used as the value of the current data cache state by utilizing the two-way data binding mechanism of Vue, so as to update the current data cache state in real time and obtain the value of the edited data cache state.
[0023] Optionally, before the value of the edited data cache state is saved in the database to complete the data editing operation on the data to be edited, the method further includes:
[0024] The value of the edited data cache state is verified, and according to the verification result, it is determined whether to execute the step of saving the value of the edited data cache state into the database.
[0025] Optionally, after calling the data cache update method to update the data cache state using the to-be-edited data as the value of the data cache state, the method further includes:
[0026] The preset jump method in Vue is called to jump to the data editing page so as to edit the value of the current data cache state through the data editing page.
[0027] In a second aspect, the present application provides a front-end data caching device based on a Vue framework, comprising:
[0028] A data cache state creation module is used to create a target file in a Vue project and define a data cache state based on the target file; the data cache state is used to store data that is currently being edited or needs to be cached;
[0029] a data cache state management module, configured to define, based on the target file, a data cache update method for updating the value of the data cache state and a data cache read method for reading the value of the data cache state;
[0030] A data cache module, for, if a data editing instruction for the data to be edited is triggered, calling the data cache update method to update the data cache state with the data to be edited as the value of the data cache state, so as to obtain the value of the current data cache state; the data to be edited is the data stored in the database;
[0031] A data editing module, used for calling the data cache reading method to read the value of the current data cache state, and binding the value of the current data cache state to a data editing page, so as to edit the value of the current data cache state through the data editing page to obtain the value of the edited data cache state;
[0032] The data saving module is used to save the value of the edited data cache state into the database to complete the data editing operation on the data to be edited.
[0033] In a third aspect, the present application provides an electronic device, including:
[0034] Memory, used to store computer programs;
[0035] The processor is used to execute the computer program to implement the aforementioned front-end data caching method based on the Vue framework.
[0036] In a fourth aspect, the present application provides a computer-readable storage medium for storing a computer program, wherein the computer program, when executed by a processor, implements the aforementioned front-end data caching method based on the Vue framework.
[0037] The present application provides a front-end data caching method based on the Vue framework. First, a target file is created in a Vue project, and a data cache state is defined based on the target file; the data cache state is used to store data that is currently being edited or needs to be cached; then a data cache update method for updating the value of the data cache state and a data cache reading method for reading the value of the data cache state are defined based on the target file; if a data editing instruction for data to be edited is triggered, the data cache update method is called to update the data cache state with the data to be edited as the value of the data cache state to obtain the value of the current data cache state; the data to be edited is data stored in a database; then the data cache reading method is called to read the value of the current data cache state, and the value of the current data cache state is bound to a data editing page, so that the value of the current data cache state can be edited through the data editing page to obtain the value of the edited data cache state; finally, the value of the edited data cache state is saved in the database to complete the data editing operation on the data to be edited.
[0038] As can be seen from the above, this application achieves the purpose of caching data by creating a target file in the Vue project to define the data cache state for storing the data currently being edited or to be cached; the data cache state is managed by the data cache update method and the data cache reading method, and the data can be edited and called directly from the data cache state, reducing the number of times the server handles repeated requests; and based on the Vue framework, the serialization and deserialization of non-string type data can be automatically processed, reducing the manual operations of developers and reducing the complexity of development. This can avoid the cumbersome and inefficient data caching in front-end development, improve the data reuse rate, and reduce the pressure on the server to process data. BRIEF DESCRIPTION OF THE DRAWINGS
[0039] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying creative work.
[0040] Figure 1 A flow chart of a front-end data caching method based on the Vue framework disclosed in this application;
[0041] Figure 2 A flow chart of a specific front-end data caching method based on the Vue framework disclosed in this application;
[0042] Figure 3 A schematic diagram of a front-end data caching device based on a Vue framework disclosed in this application;
[0043] Figure 4 This is a structural diagram of an electronic device disclosed in this application. DETAILED DESCRIPTION
[0044] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.
[0045] At present, the data caching method of the front-end website is cumbersome and inefficient. Due to frequent jumps between web pages, users often need to directly and repeatedly query the back-end interface to obtain data when browsing different pages, which leads to low reuse efficiency of the same data. This frequent data request not only delays the loading speed of data, reduces the user experience, but also may affect the user retention rate. At the same time, the server needs to continuously process these repeated requests, which increases the burden on the server and the pressure of data processing. Therefore, the present application provides a front-end data caching solution based on the Vue framework, which can avoid the cumbersome and inefficient data caching in front-end development, improve the reuse rate of data, and reduce the pressure on the server to process data.
[0046] See also Figure 1 As shown, the embodiment of the present application discloses a front-end data caching method based on the Vue framework, including:
[0047] Step S11: Create a target file in the Vue project, and define a data cache state based on the target file.
[0048] In this embodiment, a public method class file is created in the Vue project, and a data cache state is defined based on the target file. The data cache state is used to store data that is currently being edited or needs to be cached, and when no data is selected or edited, the value of the data cache state is null.
[0049] It is worth mentioning that the data stored in the data cache state can be persisted by configuring the Vuex plug-in. Among them, the specific type of the Vuex plug-in can be determined according to the actual application situation. For example, in a specific implementation, the cache data can be persisted by introducing vuex-persistedstate (a Vuex plug-in). Specifically, after defining the data cache state based on the target file, it can also include: configuring a vuex-persistedstate plug-in in the target file to ensure that the data cache state can be persisted. That is, the data stored in the data cache state is persisted through the vuex-persistedstate plug-in, so that the data can still be restored after the page is refreshed or closed, which can improve the data reuse rate.
[0050] Step S12: defining a data cache update method for updating the value of the data cache state and a data cache read method for reading the value of the data cache state based on the target file.
[0051] In this embodiment, a data cache update method for updating the value of the data cache state and a data cache reading method for reading the value of the data cache state are defined based on the public method class file. Among them, the data cache update method takes the data cache state as the first parameter and the input value as the second parameter. When the data cache update method is called, the value of the data cache state can be set to the input value, thereby completing the update of the data cache state; the data cache reading method allows external code to read the value of the data cache state from the public method class file without directly accessing the state object. That is, through the data cache update method and the data cache reading method, different parts of the application can share and update the cache data stored in the data cache state with the public method class file.
[0052] Step S13: if a data editing instruction for the data to be edited is triggered, the data cache update method is called to update the data cache state using the data to be edited as the value of the data cache state to obtain the value of the current data cache state.
[0053] In this embodiment, if a data editing instruction for the data to be edited is triggered, the data cache update method is called, and the data to be edited is used as the input value, and the value of the data cache state is set to the input value to obtain the value of the current data cache state. Among them, the data editing instruction trigger type can be determined according to the actual application situation, for example, the data editing instruction for the data to be edited can be triggered by clicking a preset edit button or connection, which is not specifically limited here.
[0054] In this embodiment, before triggering the data editing instruction for the data to be edited, it is also necessary to use Vue's data binding mechanism to extract and display the corresponding data list from the database so that relevant personnel can determine the data to be edited through the data list. Specifically, before triggering the data editing instruction for the data to be edited, it can also include: obtaining a data list containing several target data from the database, and using Vue's data binding mechanism to display the data list through a data display page, so as to determine the data to be edited from the several target data.
[0055] In this embodiment, after calling the data cache update method to update the data cache state with the data to be edited as the value of the data cache state, the jump of the editing page is realized by calling the push method of Vue Router. Specifically, after calling the data cache update method to update the data cache state with the data to be edited as the value of the data cache state, it can also include: calling the push method of Vue Router to jump to the data editing page, so as to edit the value of the current data cache state through the data editing page. That is, by calling the push method of Vue Router, the jump of the editing page can be realized in the first time, which can improve the page response speed, reduce the data loading time, enhance the user experience, and increase the user retention rate.
[0056] Step S14, calling the data cache reading method to read the value of the current data cache state, and binding the value of the current data cache state to the data editing page, so as to edit the value of the current data cache state through the data editing page to obtain the value of the edited data cache state.
[0057] In this embodiment, the data cache reading method is called to read the value of the current data cache state, and the value of the current data cache state is bound to the corresponding form field in the data editing page, so that the value of the current data cache state can be edited through the data editing page. Specifically, the editing of the value of the current data cache state through the data editing page to obtain the value of the edited data cache state can include: obtaining the target input data for editing the value of the current data cache state through the data editing page; using the two-way data binding mechanism of Vue to use the target input data as the value of the current data cache state to update the current data cache state in real time and obtain the value of the edited data cache state. That is, real-time updating of the current data cache state through the two-way data binding mechanism of Vue can reduce the time required for data interaction and improve the efficiency of data interaction.
[0058] It should be noted that before calling the data cache reading method to read the value of the current data cache state, the data cache state needs to be retrieved. Specifically, after triggering the data editing instruction for the data to be edited, it may also include: retrieving the data cache state, and judging the cache state of the data to be edited based on the retrieval result; if the cache state of the data to be edited is cached, then triggering the step of calling the data cache reading method to read the value of the current data cache state; if the cache state of the data to be edited is not cached, then triggering the step of calling the data cache update method to update the data cache state with the data to be edited as the value of the data cache state. That is, by retrieving the cache state of the data to be edited, it is possible to avoid the loss of cached data in the data cache state due to program exceptions, thereby enhancing the stability of the data cache.
[0059] Step S15: Save the value of the edited data cache state into the database to complete the data editing operation on the data to be edited.
[0060] In this embodiment, the step of saving the value of the edited data cache state to the database is triggered by a preset save operation. The specific type of the preset save operation can be determined according to the data application situation. For example, the step of saving the value of the edited data cache state to the database can be triggered by clicking a preset save button or connection, which is not specifically limited here. And the corresponding save status prompt is displayed after the save step is successfully executed.
[0061] Furthermore, before the saving step is performed, in order to ensure that the input data meets the preset format requirements, the input data needs to be verified. Specifically, before the value of the edited data cache state is saved in the database to complete the data editing operation on the data to be edited, it can also include: verifying the value of the edited data cache state, and judging whether to execute the step of saving the value of the edited data cache state in the database according to the verification result.
[0062] As can be seen from the above, the embodiment of the present application achieves the purpose of caching data by creating a target file definition in the Vue project for storing the data cache state that is currently being edited or needs to be cached; the data cache state is managed by the data cache update method and the data cache read method, and the data can be edited and called directly from the data cache state, reducing the number of repeated requests processed by the server; the data stored in the data cache state is persisted by the vuex-persistedstate plug-in, so that the data can still be restored after the page is refreshed or closed, which can improve the data reuse rate; based on the Vue framework The framework can automatically handle the serialization and deserialization of non-string type data, reduce the manual operations of developers, and reduce the complexity of development; by calling the push method of the VueRouter, the edit page can be redirected in the first time, which can improve the page response speed, reduce the data loading time, improve the user experience, and increase the user retention rate; through the two-way data binding mechanism of the Vue, the current data cache status is updated in real time, which can reduce the time required for data interaction and improve the efficiency of data interaction; thereby avoiding the cumbersome and inefficient data caching in front-end development, improving the data reuse rate, and reducing the pressure on the server to process data.
[0063] See also Figure 2 As shown, the embodiment of the present application discloses a specific front-end data caching method based on the Vue framework, including:
[0064] In this embodiment, a store.js public method class file is created based on the Vue project, and a property currentEditProduct is defined in the state object of the Store. The currentEditProduct state in the application is managed through the Store; the currentEditProduct property is used to store data, and its value is null when no data is selected or edited. In the mutations object of the Store, a method named SET_PRODUCT_CACHE is defined. The SET_PRODUCT_CACHE method receives two parameters: state (the current Vuex state) and product (the data to be cached). When the SET_PRODUCT_CACHE method is called, it sets the value of state.currentEditProduct to the passed product, thereby updating the currentEditProduct state in the Store. In the getters object of the Store, a method named getProductCache is defined. The getProductCache method receives state as a parameter and returns the value of state.currentEditProduct. The getProductCache method allows external code to read the value of the currentEditProduct from the Store without directly accessing the state object.
[0065] In this embodiment, a Vuex plug-in (such as vuex-persistedstate) is configured in store.js to persist cached data and ensure that the currentEditProduct state can be persisted so that the data can be restored after the page is refreshed or closed.
[0066] In this embodiment, the product list is obtained through the preset port, and the details of all data list items are obtained from the back-end server. The data binding mechanism of Vue is used to display the data list on the preset data display page. Among them, the operation column of each list has a corresponding edit button. The user can click the edit button corresponding to any data in the list to trigger the editProduct method; the editProduct method is defined in the methods object of the list page. When the user triggers the above event, the method will be called and a parameter product will be passed in. This parameter represents the data that the user wants to edit. The front end obtains the data, calls the mutation method SET_PRODUCT_CACHE of Vuex, passes the data in as a parameter, and caches the data in the state of Vuex. In the editProduct method, first get the selected information, then call this.$store.commit('SET_PRODUCT_CACHE', selectedProduct) to cache it, and use the push method of Vue Router to jump to the edit page.
[0067] In this embodiment, when the user selects a piece of data from the list and clicks the edit button, the system will first try to retrieve the data from the cache. If the corresponding data exists in the cache, the system will directly use the data and fill it into the corresponding input box of the edit page so that the user can view and modify it. In the mounted object of the edit page, the cached data is obtained through this.$store.getters.getProductCache and bound to the form field.
[0068] In this embodiment, the form in the edit input box is edited, and the user can freely modify the content in the form; and use Vue's two-way data binding mechanism to ensure that the data in the input box is synchronized with the currentEditProduct in the Vuex state in real time; that is, when the user modifies the data in the input box, the value of currentEditProduct will also be updated accordingly.
[0069] In this embodiment, when the user completes editing and clicks the Save button, the data is updated in the database by obtaining the form data and sending it to the preset interface through a POST request. It is worth mentioning that when the user clicks the Save button, the save status prompt is displayed, and the prompt is hidden after the data is successfully saved to the database. Before saving the data, necessary data verification is performed; for example, required field check, format verification, etc.; if the verification fails, the corresponding error prompt is displayed and the data saving operation is blocked; if the verification succeeds, the save operation continues, and a success prompt is given after the data is successfully saved.
[0070] As can be seen from the above, the embodiment of the present application implements an efficient data caching mechanism based on the Vue.js front-end framework through a componentized architecture and a Vuex state management library. Combining the singleton characteristics of Vuex and the persistence of the local cache, a data cache container is constructed to achieve seamless sharing of data between different components and pages, avoiding the overhead of repeatedly obtaining data from the server. By optimizing the use of data cache, the communication frequency between the client and the server is reduced, and efficient reuse of data is achieved, thereby effectively saving network bandwidth resources, reducing the data processing burden of the server, and reducing operating costs for the enterprise. And because the cached data is stored locally, users can quickly access the required information without waiting for the response of the remote interface, thereby improving the overall user experience.
[0071] Accordingly, see Figure 3 As shown, the embodiment of the present application discloses a front-end data caching device based on the Vue framework, including:
[0072] The data cache state creation module 11 is used to create a target file in the Vue project and define a data cache state based on the target file; the data cache state is used to store data that is currently being edited or needs to be cached;
[0073] A data cache state management module 12, configured to define a data cache update method for updating the value of the data cache state and a data cache read method for reading the value of the data cache state based on the target file;
[0074] The data cache module 13 is used for, if a data editing instruction for the data to be edited is triggered, calling the data cache update method to update the data cache state with the data to be edited as the value of the data cache state, so as to obtain the value of the current data cache state; the data to be edited is the data stored in the database;
[0075] The data editing module 14 is used to call the data cache reading method to read the value of the current data cache state, and bind the value of the current data cache state to the data editing page, so as to edit the value of the current data cache state through the data editing page to obtain the value of the edited data cache state;
[0076] The data saving module 15 is used to save the value of the edited data cache state into the database to complete the data editing operation on the data to be edited.
[0077] As can be seen from the above, the embodiment of the present application achieves the purpose of caching data by creating a target file definition in the Vue project to store the data cache status that is currently being edited or needs to be cached; the data cache status is managed by the data cache update method and the data cache reading method, and the data can be edited and called directly from the data cache status, reducing the number of times the server handles repeated requests; and based on the Vue framework, the serialization and deserialization of non-string type data can be automatically processed, reducing the manual operations of developers and reducing the complexity of development. This can avoid the cumbersome and inefficient data caching in front-end development, improve the data reuse rate, and reduce the pressure on the server to process data.
[0078] In some specific implementations, the data editing module 14 may specifically include:
[0079] a target input data acquisition unit, configured to acquire, through the data editing page, target input data for editing the value of the current data cache state;
[0080] The data cache state real-time updating unit is used to use the two-way data binding mechanism of Vue to take the target input data as the value of the current data cache state, so as to update the current data cache state in real time and obtain the value of the edited data cache state.
[0081] In some specific implementations, the front-end data caching device based on the Vue framework may further include:
[0082] A data cache state persistence module is used to configure a Vuex plug-in in the target file to ensure that the data cache state can be persisted;
[0083] A module for determining data to be edited, used for obtaining a data list containing a plurality of target data from the database, and displaying the data list through a data display page using a data binding mechanism of Vue, so as to determine the data to be edited from the plurality of target data;
[0084] A data cache status retrieval module, used to retrieve the data cache status and determine the cache status of the data to be edited according to the retrieval result; if the cache status of the data to be edited is cached, triggering the step of calling the data cache reading method to read the value of the current data cache status; if the cache status of the data to be edited is not cached, triggering the step of calling the data cache updating method to update the data cache status by taking the data to be edited as the value of the data cache status;
[0085] A data cache status verification module, used to verify the value of the edited data cache status, and determine whether to execute the step of saving the value of the edited data cache status into the database according to the verification result;
[0086] The editing page jump module is used to call the preset jump method in Vue to jump to the data editing page so as to edit the value of the current data cache state through the data editing page.
[0087] Furthermore, the present application also discloses an electronic device. Figure 4 It is a structural diagram of an electronic device 20 shown according to an exemplary embodiment, and the content in the figure cannot be regarded as any limitation on the scope of use of this application. The electronic device 20 may specifically include: at least one processor 21, at least one memory 22, a power supply 23, a communication interface 24, an input and output interface 25 and a communication bus 26. Among them, the memory 22 is used to store a computer program, and the computer program is loaded and executed by the processor 21 to implement the relevant steps in the front-end data caching method based on the Vue framework disclosed in any of the aforementioned embodiments. In addition, the electronic device 20 in this embodiment can specifically be an electronic computer.
[0088] In this embodiment, the power supply 23 is used to provide working voltage for each hardware device on the electronic device 20; the communication interface 24 can create a data transmission channel between the electronic device 20 and the external device, and the communication protocol it follows is any communication protocol that can be applied to the technical solution of the present application, and is not specifically limited here; the input and output interface 25 is used to obtain external input data or output data to the outside world, and its specific interface type can be selected according to specific application needs and is not specifically limited here.
[0089] In addition, the memory 22, as a carrier for storing resources, can be a read-only memory, a random access memory, a disk or an optical disk, etc. The resources stored thereon can include an operating system 221, a computer program 222, etc., and the storage method can be temporary storage or permanent storage.
[0090] The operating system 221 is used to manage and control the hardware devices and computer program 222 on the electronic device 20, which can be Windows Server, Netware, Unix, Linux, etc. In addition to including a computer program that can be used to complete the front-end data caching method based on the Vue framework executed by the electronic device 20 disclosed in any of the aforementioned embodiments, the computer program 222 can further include a computer program that can be used to complete other specific tasks.
[0091] Furthermore, the present application also discloses a computer-readable storage medium for storing a computer program; wherein, when the computer program is executed by a processor, the front-end data caching method based on the Vue framework disclosed above is implemented. The specific steps of the method can refer to the corresponding contents disclosed in the above embodiments, and will not be repeated here.
[0092] In this specification, each embodiment is described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the embodiments can be referred to each other. For the device disclosed in the embodiment, since it corresponds to the method disclosed in the embodiment, the description is relatively simple, and the relevant parts can be referred to the method part.
[0093] Professionals may further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in the above description according to function. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professionals and technicians may use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.
[0094] The steps of the method or algorithm described in conjunction with the embodiments disclosed herein may be implemented directly using hardware, a software module executed by a processor, or a combination of the two. The software module may be placed in a random access memory (RAM), a memory, a read-only memory (ROM), an electrically programmable ROM, an electrically erasable programmable ROM, a register, a hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art.
[0095] Finally, it should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also 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 a ..." do not exclude the presence of other identical elements in the process, method, article or device including the elements.
[0096] The technical solution provided by the present application is introduced in detail above. Specific examples are used in this article to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method of the present application and its core idea. At the same time, for general technicians in this field, according to the idea of the present application, there will be changes in the specific implementation methods and application scope. In summary, the content of this specification should not be understood as a limitation on the present application.
Claims
1. A front-end data caching method based on the Vue framework, characterized in that: include: Create a target file in the Vue project and define the data cache state based on the target file; The data cache state is used to store data that is currently being edited or needs to be cached; defining a data cache update method for updating the value of the data cache state and a data cache read method for reading the value of the data cache state based on the target file; If a data editing instruction for the data to be edited is triggered, the data cache update method is called to update the data cache state using the data to be edited as the value of the data cache state to obtain the value of the current data cache state; The data to be edited is data stored in a database; Calling the data cache read method to read the value of the current data cache state, and binding the value of the current data cache state to a data editing page, so as to edit the value of the current data cache state through the data editing page to obtain the value of the edited data cache state; The value of the edited data cache state is saved in the database to complete the data editing operation on the data to be edited.
2. According to the front-end data caching method based on the Vue framework according to claim 1, it is characterized in that: After defining the data cache state based on the target file, the method further includes: A Vuex plug-in is configured in the target file to ensure that the data cache state can be persisted.
3. According to the front-end data caching method based on the Vue framework according to claim 1, it is characterized in that: Before triggering the data editing instruction for the data to be edited, the method further includes: A data list containing several target data is obtained from the database, and the data list is displayed through a data display page using the data binding mechanism of Vue, so as to determine the data to be edited from the several target data.
4. According to the front-end data caching method based on the Vue framework according to claim 1, it is characterized in that: Before calling the data cache reading method to read the value of the current data cache state, the method further includes: Retrieving the data cache status, and determining the cache status of the data to be edited according to the retrieval result; If the cache status of the data to be edited is cached, triggering the step of calling the data cache reading method to read the value of the current data cache status; If the cache status of the data to be edited is not cached, then a step is triggered to call the data cache update method to update the data cache status by using the data to be edited as the value of the data cache status.
5. According to the front-end data caching method based on the Vue framework according to claim 1, it is characterized in that: The editing the value of the current data cache state through the data editing page to obtain the value of the edited data cache state includes: Acquiring target input data for editing the value of the current data cache state through the data editing page; The target input data is used as the value of the current data cache state by utilizing the two-way data binding mechanism of Vue, so as to update the current data cache state in real time and obtain the value of the edited data cache state.
6. The front-end data caching method based on the Vue framework according to claim 1 is characterized in that: Before the value of the edited data cache state is saved in the database to complete the data editing operation on the data to be edited, the method further includes: The value of the edited data cache state is verified, and according to the verification result, it is determined whether to execute the step of saving the value of the edited data cache state into the database.
7. The front-end data caching method based on the Vue framework according to any one of claims 1 to 6, characterized in that: After calling the data cache update method to update the data cache state by using the to-be-edited data as the value of the data cache state, the method further includes: The preset jump method in Vue is called to jump to the data editing page so as to edit the value of the current data cache state through the data editing page.
8. A front-end data caching device based on the Vue framework, characterized in that: include: A data cache state creation module, used to create a target file in a Vue project and define a data cache state based on the target file; The data cache state is used to store data that is currently being edited or needs to be cached; a data cache state management module, used to define a data cache update method for updating the value of the data cache state and a data cache read method for reading the value of the data cache state based on the target file; A data cache module, for, if a data editing instruction for the data to be edited is triggered, calling the data cache update method to update the data cache state with the data to be edited as the value of the data cache state, so as to obtain the value of the current data cache state; The data to be edited is data stored in a database; A data editing module, used for calling the data cache reading method to read the value of the current data cache state, and binding the value of the current data cache state to a data editing page, so as to edit the value of the current data cache state through the data editing page to obtain the value of the edited data cache state; The data saving module is used to save the value of the edited data cache state into the database to complete the data editing operation on the data to be edited.
9. An electronic device, characterized in that: include: Memory, used to store computer programs; A processor is used to execute the computer program to implement the front-end data caching method based on the Vue framework as described in any one of claims 1 to 7.
10. A computer-readable storage medium, characterized in that: Used to save a computer program, wherein when the computer program is executed by a processor, the front-end data caching method based on the Vue framework as described in any one of claims 1 to 7 is implemented.