CN116821549A - Page view processing method of React application and related equipment - Google Patents
Page view processing method of React application and related equipment Download PDFInfo
- Publication number
- CN116821549A CN116821549A CN202310781337.XA CN202310781337A CN116821549A CN 116821549 A CN116821549 A CN 116821549A CN 202310781337 A CN202310781337 A CN 202310781337A CN 116821549 A CN116821549 A CN 116821549A
- Authority
- CN
- China
- Prior art keywords
- data
- view
- local cache
- view data
- application
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000003672 processing method Methods 0.000 title abstract description 11
- 238000012545 processing Methods 0.000 claims abstract description 51
- 238000000034 method Methods 0.000 claims abstract description 35
- 238000009877 rendering Methods 0.000 claims abstract description 29
- 238000004590 computer program Methods 0.000 claims description 13
- DBGIVFWFUFKIQN-UHFFFAOYSA-N (+-)-Fenfluramine Chemical compound CCNC(C)CC1=CC=CC(C(F)(F)F)=C1 DBGIVFWFUFKIQN-UHFFFAOYSA-N 0.000 claims description 6
- 238000013500 data storage Methods 0.000 claims description 4
- 230000004044 response Effects 0.000 abstract description 6
- 238000007726 management method Methods 0.000 description 9
- 238000004891 communication Methods 0.000 description 5
- 238000010586 diagram Methods 0.000 description 5
- 238000012216 screening Methods 0.000 description 4
- 230000009286 beneficial effect Effects 0.000 description 3
- 238000012423 maintenance Methods 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 230000000694 effects Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 238000001914 filtration Methods 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 235000019800 disodium phosphate Nutrition 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 230000010365 information processing Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/10—File systems; File servers
- G06F16/11—File system administration, e.g. details of archiving or snapshots
- G06F16/128—Details of file system snapshots on the file-level, e.g. snapshot creation, administration, deletion
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The application belongs to the technical field of computers, and relates to a page view processing method and related equipment for a reaction application, wherein the method comprises the following steps: responding to a page view processing request of the React application, acquiring service end view data according to a view ID in the page view processing request, and acquiring local cache view data corresponding to the view ID from an IndexdDB database connected with the React application; reading target field information of the local cache view data, and judging whether the local cache view data is updated or not according to the target field information; if the update exists, combining the service end view data and the local cache view data and creating snapshot data, otherwise, creating the snapshot data according to the service end view data; and updating the snapshot data to the reduced data node and the local cache view data, updating the state of the component of the React application based on the updated reduced data node, and performing page view rendering based on the updated component state. The scheme of the application has the advantages of high response speed to view processing, easy expansion and high data security.
Description
Technical Field
The present application relates to the field of computer technologies, and in particular, to a method, a system, a computer device, and a storage medium for processing a page view of a reaction application.
Background
With the continuous development of internet technology, more and more applications with a front end framework, such as a list view, a table view, a map view, and the like, need to support multiple different views, and in order to improve user experience, the views generally need to store personalized settings of users, such as a sorting mode, a grouping mode, a layout mode, screening conditions, and header settings, and the like, so that the existing view management has the problems of slow response speed, inconvenient expansion and poor data security, and a new view management method and system are needed to meet the requirements.
Disclosure of Invention
The embodiment of the application aims to provide a page view processing method, a system, computer equipment and a storage medium for a React application, which are used for solving the problems of low response speed, inconvenient expansion and poor data security in the view management process in the prior art.
In order to solve the above technical problems, an embodiment of the present application provides a method for processing a page view of a reaction application, where the method includes:
responding to a page view processing request of a reaction application, acquiring service end view data according to a view ID in the page view processing request, and acquiring local cache view data corresponding to the view ID from an IndexdDB database connected with the reaction application;
reading target field information of the local cache view data, and judging whether the local cache view data is updated or not according to the target field information;
if the local cache view data is updated, combining the service end view data and the local cache view data and creating snapshot data;
if the local cache view data is not updated, creating snapshot data according to the service end view data;
and updating the snapshot data to the reduce data node and the local cache view data, updating the state of a component of the React application based on the updated reduce data node, and performing page view rendering based on the updated component state.
Further, the step of merging the service end view data and the locally cached view data comprises:
determining a plurality of data items to be combined, and judging whether the data items are target data items or not;
if the data item is the target data item, judging whether the data of the target data item exists in the local cache view data, if so, acquiring corresponding data from the local cache view data, otherwise, acquiring corresponding data from the service end view data;
if the service end view data is the non-target data item, corresponding data is directly obtained from the service end view data;
and merging the data of each data item acquired from the local cache data and the service end view data.
Further, after the step of rendering the page view, the method further comprises:
receiving a view operation instruction, and updating field data of a corresponding component according to the view operation instruction;
and re-creating snapshot data based on the updated field data, and updating the newly created snapshot data to the Redux data node and the local cache view data so as to re-perform page view rendering.
Further, after re-rendering the page view, the method further comprises:
receiving a view configuration storage instruction, and judging the authority of a current user according to the view configuration storage instruction;
storing current view data to a server in view types matched with the authority according to the authority of the user, wherein the view types comprise public view types and private view types;
and when receiving a view restoration request after view adjustment, acquiring selected view data from the server according to the view restoration request to perform view restoration.
Further, after the step of receiving the view configuration store instruction, the method further comprises:
when a plurality of receiving view configuration storage instructions are received, judging whether the receiving view configuration storage instructions aim at the same piece of view data, if so, carrying out view data storage or updating sequence based on the view configuration storage instructions, and carrying out coverage storage of the view data at the server.
Further, after the step of storing the current view data to the server in the view type matching the rights, the method further includes:
receiving a view copying request, and acquiring view data to be copied and the authority of a current user according to the view copying request;
judging whether the view to be copied is matched with the authority of the current user, if so, creating new view data at the server, associating the newly created view data with the current user, and otherwise, terminating the view copy request.
In order to solve the above technical problem, an embodiment of the present application further provides a page view processing system for a reaction application, including:
the data acquisition module is used for responding to a page view processing request of the reaction application, acquiring service end view data according to a view ID in the page view processing request, and acquiring local cache view data corresponding to the view ID from an IndexdDB database connected with the reaction application;
the judging module is used for reading target field information of the local cache view data and judging whether the local cache view data is updated or not according to the target field information;
the snapshot creation module is used for merging the service end view data and the local cache view data and creating snapshot data when the local cache view data is updated, and creating the snapshot data according to the service end view data when the local cache view data is not updated;
and the view processing module is used for updating the snapshot data to the reduce data node and the local cache view data, updating the state of a component of the React application based on the updated reduce data node, and performing page view rendering based on the updated component state.
Further, the snapshot creation module is specifically configured to, when merging the service end view data and the local cache view data:
determining a plurality of data items to be combined, and judging whether the data items are target data items or not;
if the data item is the target data item, judging whether the data of the target data item exists in the local cache view data, if so, acquiring corresponding data from the local cache view data, otherwise, acquiring corresponding data from the service end view data;
if the service end view data is the non-target data item, corresponding data is directly obtained from the service end view data;
and merging the data of each data item acquired from the local cache data and the service end view data.
In order to solve the above technical problems, an embodiment of the present application further provides a computer device, including a memory and a processor, where the memory stores a computer program, and the processor implements the page view processing method of the reaction application described above when executing the computer program.
In order to solve the above technical problem, an embodiment of the present application further provides a computer readable storage medium, where a computer program is stored, and when the computer program is executed by a processor, the page view processing method of the exact application is implemented.
Compared with the prior art, the application has the following main beneficial effects:
the application uses the IndexdDB as a local database aiming at the React application, can improve the data reading and writing speed, so that the response of view processing is quicker, and meanwhile, on the premise of using the React as a front end frame, each component of the React application is subjected to state management by adopting the Redux, the expansion and the maintenance are easy, and the IndexdDB is used as the local database, so that the safety and the stability of view data can be ensured.
Drawings
In order to more clearly illustrate the solution of the present application, a brief description will be given below of the drawings required for the description of the embodiments of the present application, it being apparent that the drawings in the following description are some embodiments of the present application, and that other drawings may be obtained from these drawings without the exercise of inventive effort for a person of ordinary skill in the art.
FIG. 1 is an exemplary system architecture diagram in which the present application may be applied;
FIG. 2 is a flow chart of one embodiment of a page view processing method of a React application in accordance with the present application;
FIG. 3 is a block diagram of one embodiment of a page view processing system for a React application in accordance with the present application;
FIG. 4 is a schematic structural diagram of one embodiment of a computer device in accordance with the present application.
Detailed Description
Unless defined otherwise, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs; the terminology used in the description of the applications herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the application; the terms "comprising" and "having" and any variations thereof in the description of the application and the claims and the description of the drawings above are intended to cover a non-exclusive inclusion. The terms first, second and the like in the description and in the claims or in the above-described figures, are used for distinguishing between different objects and not necessarily for describing a sequential or chronological order.
Reference herein to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment may be included in at least one embodiment of the application. The appearances of such phrases in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. Those of skill in the art will explicitly and implicitly appreciate that the embodiments described herein may be combined with other embodiments.
In order to make the person skilled in the art better understand the solution of the present application, the technical solution of the embodiment of the present application will be clearly and completely described below with reference to the accompanying drawings.
As shown in fig. 1, a system architecture 100 may include terminal devices 101, 102, 103, a network 104, and a server 105. The network 104 is used as a medium to provide communication links between the terminal devices 101, 102, 103 and the server 105. The network 104 may include various connection types, such as wired, wireless communication links, or fiber optic cables, among others.
The user may interact with the server 105 via the network 104 using the terminal devices 101, 102, 103 to receive or send messages or the like. Various client applications, such as web browser applications, shopping class applications, search class applications, instant messaging tools, mailbox clients, social platform software, etc., may be installed on the terminal devices 101, 102, 103, which may be developed based on compact and accessible through a browser.
The terminal devices 101, 102, 103 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smartphones, tablets, laptops, desktops, etc., and in the embodiments described below, the terminal devices 101, 102, 103 are primarily used to provide access to the exact application for the user to operate the view and receive view data returned by the server 105.
The server 105 may be a server that provides various services, such as a server that provides end-of-service data hereinafter.
It should be noted that, the method for processing the page view of the reaction application provided in the embodiment of the present application is generally executed by the terminal devices 101, 102, 103 in cooperation, and accordingly, the page view processing system of the reaction application is generally set in the terminal devices 101, 102, 103.
It should be understood that the number of terminal devices, networks and servers in fig. 1 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.
With continued reference to FIG. 2, a flow diagram of one embodiment of a method of page view processing for a React application in accordance with the present application is shown. The method for processing the page view of the reaction application comprises the following steps S201 to S205:
step S201, responding to a page view processing request of a reaction application, acquiring service end view data according to a view ID in the page view processing request, and acquiring local cache view data corresponding to the view ID from an IndexdDB database connected with the reaction application;
in this embodiment, the reaction application is an application built by taking the reaction as a front end framework, and loads a page view through a browser to provide a user operation interface.
Further, taking loading of a page view through a browser as an example, when a page of a reaction application is initialized, a page view processing request is initiated, and the page view processing request contains a view ID of a view to be processed. Communication between different software systems can be achieved by using a RESTful API to communicate with a server to obtain service end view data matching the view ID, where the RESTful API is an architectural style for developing Web services. And when the service end view data is acquired, the local cache view data corresponding to the view ID is acquired by using an index. Js connection browser IndexdDB database, wherein the index DB database is a NoSQL database native to the browser, and the index. Js is an open-source JavaScript database, so that interaction with the index DB database can be conveniently performed.
In other embodiments, the service end view data may be obtained by communicating with the server using a WebSocket API or a Jsonp, where WebSocket is a protocol that enables full duplex communication over a single TCP connection, which makes the exchange of data between the client and the server simpler, while JSONP (JSON with Padding) is a "usage mode" of JSON, available for cross-domain data access by the browser.
Step S202, reading target field information of the local cache view data, judging whether the local cache view data is updated according to the target field information, if so, executing step S203, and if not, executing step S204;
specifically, the information of the isUpdate field in the local cache view data, that is, the target field information is read, so as to determine whether the local cache view data corresponding to the current view ID is updated, and when the information of the isUpdate field is true, the update of the local cache view data is indicated, and the update is from the view operation of the user.
Step S203, combining the service end view data and the local cache view data and creating snapshot data, and then executing step S205;
in this embodiment, when the local cache view data is updated, service end view data and local cache view data need to be merged, and then groupFetchOptions snapshot data is created based on the merged view data, where the generated groupFetchOptions snapshot data is a data base when the view is operated, and where a priority exists in a data acquisition source when each data item to be merged is merged, and accordingly, the step of merging the service end view data and the local cache view data includes:
determining a plurality of data items to be combined, and judging whether the data items are target data items or not; if the data item is the target data item, judging whether the data of the target data item exists in the local cache view data, if so, acquiring corresponding data from the local cache view data, otherwise, acquiring corresponding data from the service end view data; if the service end view data is the non-target data item, corresponding data is directly obtained from the service end view data; and merging the data of each data item acquired from the local cache data and the service end view data.
Specifically, when the data items to be merged are data items such as layout (layout), grouping (grouping), sorting (sorting), filtering conditions (conditions), header setting (tableform setting), and the like, the data items are target data items, preferably use local cache view data, and when the data items do not have local cache view data, service end view data is used.
Step S204, creating the snapshot data according to the service end view data, and then executing step S206; if the local cache view data is not updated, the service end view data is directly used for generating groupFetchOptions snapshot data, namely, the data sources of all the data items are service ends.
Step S205, updating the snapshot data to the reduce data node and the local cache view data, updating the state of the component of the reaction application based on the updated reduce data node, and performing page view rendering based on the updated component state.
Updating the groupfenchloctions snapshot data to the reduce node is to trigger the updating of the corresponding component, perform page rendering, and update the groupfenchloctions snapshot data to the index db database can update the local cache view data. Specifically, after updating the reduce data node, the update of the state of the component of the reacti application is triggered, which at least includes:
triggering the updating of a layout mode component, and acquiring the latest layout data by the layout mode component; triggering the updating of a grouping mode component, and acquiring the latest groupBy data by the grouping mode component; triggering an ordering mode component to update, and acquiring the latest sort data by the ordering mode component; triggering the updating of the screening condition component, and acquiring the latest conditions data by the screening condition component; triggering the updating of the header setting component, and obtaining the latest tableeFieldsetting data by the header setting component.
And then sending a graphql request to acquire related data and rendering a page according to the groufpwall operation snapshot data, specifically acquiring updated layout data to determine a rendering table or card style, acquiring the latest groupBy data rendering grouping mode data, acquiring the latest sort data rendering ordering mode data, acquiring the latest conditions data rendering screening condition data, and acquiring the latest tablefeldsetting data rendering header setting data to complete view rendering.
In an alternative embodiment, after the step of rendering the page view, the method further comprises:
receiving a view operation instruction, and updating field data of a corresponding component according to the view operation instruction; and re-creating snapshot data based on the updated field data, and updating the newly created snapshot data to the Redux data node and the local cache view data so as to re-perform page view rendering.
In an alternative embodiment, when any one of layout (layout), grouping (grouping), sorting (sort), filtering (conditions), header setting (tab setting) in the view is modified while the user operates the view on the browser interface, the data of the corresponding field is modified, and the groupfenchloptions snapshot data is generated and updated to the local cache view data of the corresponding view ID of the reduce data node and the index db database, and page view rendering is performed again according to the updated data.
In an alternative embodiment, after the page view rendering is performed again, the method further includes:
receiving a view configuration storage instruction, and judging the authority of a current user according to the view configuration storage instruction; storing current view data to a server in view types matched with the authority according to the authority of the user, wherein the view types comprise public view types and private view types; and when receiving a view restoration request after view adjustment, acquiring selected view data from the server according to the view restoration request to perform view restoration.
When a user operates a view on a browser interface, the user can save or save the adjusted view, specifically, the user saves the adjusted view data to a server and covers original service end view data corresponding to the view ID when saving the view, and newly-built view data is saved to the server when saving or saving the view, wherein when saving or saving the view, different types of view storage can be performed based on the authority of the user, the authority of storing view data of private view type can be allocated to a common user, only the authority of storing view data of private view type can be operated, and an administrator or a temporarily authorized common user can be allocated to store the authority of storing view data of public view type and private view type.
For view data of a user saved or additionally existing service side, view restoration can be performed according to user operation, specifically, when a view restoration request of the user is received, service end view data is acquired, server view data is directly used for generating groupFetchOptions snapshot data, view restoration can be performed according to groupFetchOptions snapshot data, and specifically, the service end view data is acquiredgroupFetchOptionsThe snapshot data is updated to the reduce data node to conduct view rendering, and meanwhile, the groupFetchOptions snapshot data can be sent to the index db database to generate local cache view data, so that the view configuration can be restored quickly when a user enters a page next time.
In an alternative embodiment, after the step of receiving the view configuration store instruction, the method further comprises:
when a plurality of receiving view configuration storage instructions are received, judging whether the receiving view configuration storage instructions aim at the same piece of view data, if so, carrying out view data storage or updating sequence based on the view configuration storage instructions, and carrying out coverage storage of the view data at the server.
Specifically, when the page performs data synchronization under multi-terminal view operation, only an administrator has authority to create and store a common view, and when a plurality of administrators operate one piece of view data, the overlay write operation is performed according to the sequence of updating the view data.
In an alternative embodiment, after the step of storing the current view data to the server in a view type matching the rights, the method further includes:
receiving a view copying request, and acquiring view data to be copied and the authority of a current user according to the view copying request; judging whether the view to be copied is matched with the authority of the current user, if so, creating new view data at the server, associating the newly created view data with the current user, and otherwise, terminating the view copy request. This step can also enable rights management of the view.
Compared with the prior art, the embodiment of the application has the following main beneficial effects:
the application uses the IndexdDB as a local database aiming at the React application, can improve the data reading and writing speed, so that the response of view processing is quicker, and meanwhile, on the premise of using the React as a front end frame, each component of the React application is subjected to state management by adopting the Redux, the expansion and the maintenance are easy, and the IndexdDB is used as the local database, so that the safety and the stability of view data can be ensured. In addition, the embodiment provides various view management functions, and different requirements of users are met.
Those skilled in the art will appreciate that implementing all or part of the above-described methods in accordance with the embodiments may be accomplished by way of a computer program stored in a computer-readable storage medium, which when executed, may comprise the steps of the embodiments of the methods described above. The storage medium may be a nonvolatile storage medium such as a magnetic disk, an optical disk, a Read-only memory (ROM), or a random access memory (RandomAccessMemory, RAM).
It should be understood that, although the steps in the flowcharts of the figures are shown in order as indicated by the arrows, these steps are not necessarily performed in order as indicated by the arrows. The steps are not strictly limited in order and may be performed in other orders, unless explicitly stated herein. Moreover, at least some of the steps in the flowcharts of the figures may include a plurality of sub-steps or stages that are not necessarily performed at the same time, but may be performed at different times, the order of their execution not necessarily being sequential, but may be performed in turn or alternately with other steps or at least a portion of the other steps or stages.
With further reference to fig. 3, as an implementation of the method shown in fig. 2, the present application provides an embodiment of a page view processing system for a reaction application, where the system embodiment corresponds to the method embodiment shown in fig. 2, and the system may be specifically applied to various servers.
As shown in fig. 3, the page view processing system of the exact application according to the present embodiment includes: a data acquisition module 301, a judgment module 302, a snapshot creation module 303, and a view processing module 304.
Wherein:
the data acquisition module 301 is configured to respond to a page view processing request of a reaction application, acquire service end view data according to a view ID in the page view processing request, and acquire local cache view data corresponding to the view ID from an index db database connected to the reaction application;
the judging module 302 is configured to read target field information of the local cache view data, and judge whether the local cache view data is updated according to the target field information;
the snapshot creation module 303 is configured to combine the service end view data and the local cache view data and create snapshot data when there is an update of the local cache view data, and create the snapshot data according to the service end view data when there is no update of the local cache view data;
the view processing module 304 is configured to update the snapshot data to a reduce data node and the locally cached view data, update a state of a component of the reaction application based on the updated reduce data node, and perform page view rendering based on the updated component state.
In an alternative embodiment, the snapshot creation module 303 is specifically configured to, when merging the service end view data and the local cache view data:
determining a plurality of data items to be combined, and judging whether the data items are target data items or not; if the data item is the target data item, judging whether the data of the target data item exists in the local cache view data, if so, acquiring corresponding data from the local cache view data, otherwise, acquiring corresponding data from the service end view data; if the service end view data is the non-target data item, corresponding data is directly obtained from the service end view data; and merging the data of each data item acquired from the local cache data and the service end view data.
In an alternative embodiment, the data obtaining module 301 is further configured to receive a view operation instruction after the view processing module 304 performs page view rendering, and update field data of a corresponding component according to the view operation instruction; accordingly, the snapshot creation module 303 is further configured to re-create snapshot data based on the updated field data, and update the newly created snapshot data to the reduce data node and the local cache view data, so as to re-perform page view rendering.
In an alternative embodiment, the view processing module 304 is further configured to, after re-rendering the page view:
receiving a view configuration storage instruction, and judging the authority of a current user according to the view configuration storage instruction; storing current view data to a server in view types matched with the authority according to the authority of the user, wherein the view types comprise public view types and private view types; and when receiving a view restoration request after view adjustment, acquiring selected view data from the server according to the view restoration request to perform view restoration.
In an alternative embodiment, the view processing module 304, upon receiving the view configuration store instruction, is further configured to: when a plurality of receiving view configuration storage instructions are received, judging whether the receiving view configuration storage instructions aim at the same piece of view data, if so, carrying out view data storage or updating sequence based on the view configuration storage instructions, and carrying out coverage storage of the view data at the server.
In an alternative embodiment, the view processing module 304 is further configured to, after storing the current view data to the server with the view type matching the authority: receiving a view copying request, and acquiring view data to be copied and the authority of a current user according to the view copying request; judging whether the view to be copied is matched with the authority of the current user, if so, creating new view data at the server, associating the newly created view data with the current user, and otherwise, terminating the view copy request.
The technical content specifically related to each operation in performing the related operation by each module may refer to the related content in the method embodiment, which is not expanded herein.
Compared with the prior art, the embodiment of the application has the following main beneficial effects:
the application uses the IndexdDB as a local database aiming at the React application, can improve the data reading and writing speed, so that the response of view processing is quicker, and meanwhile, on the premise of using the React as a front end frame, each component of the React application is subjected to state management by adopting the Redux, the expansion and the maintenance are easy, and the IndexdDB is used as the local database, so that the safety and the stability of view data can be ensured. In addition, the embodiment provides various view management functions, and different requirements of users are met.
In order to solve the above technical problems, an embodiment of the present application further provides a computer device, including a memory and a processor, where the memory stores a computer program, and the processor implements the steps of the page view processing method of the React application described above when executing the computer program, and has corresponding technical effects.
Referring specifically to fig. 4, fig. 4 is a basic structural block diagram of a computer device according to the present embodiment. The computer device 4 comprises a memory 41, a processor 42, a network interface 43 communicatively connected to each other via a system bus. It should be noted that only computer device 4 having components 41-43 is shown in the figures, but it should be understood that not all of the illustrated components are required to be implemented and that more or fewer components may be implemented instead. It will be appreciated by those skilled in the art that the computer device herein is a device capable of automatically performing numerical calculations and/or information processing in accordance with predetermined or stored instructions, the hardware of which includes, but is not limited to, microprocessors, application specific integrated circuits (Application Specific Integrated Circuit, ASICs), programmable gate arrays (fields-Programmable Gate Array, FPGAs), digital processors (Digital Signal Processor, DSPs), embedded devices, etc.
The computer equipment can be a desktop computer, a notebook computer, a palm computer, a cloud server and other computing equipment. The computer equipment can perform man-machine interaction with a user through a keyboard, a mouse, a remote controller, a touch pad or voice control equipment and the like.
The memory 41 includes at least one type of readable storage medium including flash memory, hard disk, multimedia card, card memory (e.g., SD or DX memory, etc.), random Access Memory (RAM), static Random Access Memory (SRAM), read Only Memory (ROM), electrically Erasable Programmable Read Only Memory (EEPROM), programmable Read Only Memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the storage 41 may be an internal storage unit of the computer device 4, such as a hard disk or a memory of the computer device 4. In other embodiments, the memory 41 may also be an external storage device of the computer device 4, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash Card (Flash Card) or the like, which are provided on the computer device 4. Of course, the memory 41 may also comprise both an internal memory unit of the computer device 4 and an external memory device. In this embodiment, the memory 41 is generally used to store an operating system installed in the computer device 4 and various application software, such as program codes of a page view processing method of a reaction application. Further, the memory 41 may be used to temporarily store various types of data that have been output or are to be output.
The processor 42 may be a central processing unit (Central Processing Unit, CPU), controller, microcontroller, microprocessor, or other data processing chip in some embodiments. The processor 42 is typically used to control the overall operation of the computer device 4. In this embodiment, the processor 42 is configured to execute a program code stored in the memory 41 or process data, for example, a program code for executing a page view processing method of the React application.
The network interface 43 may comprise a wireless network interface or a wired network interface, which network interface 43 is typically used for establishing a communication connection between the computer device 4 and other electronic devices.
In order to solve the above technical problem, an embodiment of the present application further provides a computer readable storage medium, where a computer program is stored, where the computer program may be executed by at least one processor, so that the at least one processor performs the steps of the page view processing method of the exact application described above, and has corresponding technical effects.
From the above description of the embodiments, it will be clear to those skilled in the art that the above-described embodiment method may be implemented by means of software plus a necessary general hardware platform, but of course may also be implemented by means of hardware, but in many cases the former is a preferred embodiment. Based on such understanding, the technical solution of the present application may be embodied essentially or in a part contributing to the prior art in the form of a software product stored in a storage medium (e.g. ROM/RAM, magnetic disk, optical disk) comprising instructions for causing a terminal device (which may be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to perform the method according to the embodiments of the present application.
It is apparent that the above-described embodiments are only some embodiments of the present application, but not all embodiments, and the preferred embodiments of the present application are shown in the drawings, which do not limit the scope of the patent claims. This application may be embodied in many different forms, but rather, embodiments are provided in order to provide a thorough and complete understanding of the present disclosure. Although the application has been described in detail with reference to the foregoing embodiments, it will be apparent to those skilled in the art that modifications may be made to the embodiments described in the foregoing description, or equivalents may be substituted for elements thereof. All equivalent structures made by the content of the specification and the drawings of the application are directly or indirectly applied to other related technical fields, and are also within the scope of the application.
Claims (10)
1. A method for processing a page view of a practice application, the method comprising:
responding to a page view processing request of a reaction application, acquiring service end view data according to a view ID in the page view processing request, and acquiring local cache view data corresponding to the view ID from an IndexdDB database connected with the reaction application;
reading target field information of the local cache view data, and judging whether the local cache view data is updated or not according to the target field information;
if the local cache view data is updated, combining the service end view data and the local cache view data and creating snapshot data;
if the local cache view data is not updated, creating snapshot data according to the service end view data;
and updating the snapshot data to the reduce data node and the local cache view data, updating the state of a component of the React application based on the updated reduce data node, and performing page view rendering based on the updated component state.
2. The method of page view processing for a compact application of claim 1, wherein the step of merging the service end view data and the locally cached view data comprises:
determining a plurality of data items to be combined, and judging whether the data items are target data items or not;
if the data item is the target data item, judging whether the data of the target data item exists in the local cache view data, if so, acquiring corresponding data from the local cache view data, otherwise, acquiring corresponding data from the service end view data;
if the service end view data is the non-target data item, corresponding data is directly obtained from the service end view data;
and merging the data of each data item acquired from the local cache data and the service end view data.
3. The method for page view processing of a exact application according to claim 1 or 2, further comprising, after the step of rendering the page view:
receiving a view operation instruction, and updating field data of a corresponding component according to the view operation instruction;
and re-creating snapshot data based on the updated field data, and updating the newly created snapshot data to the Redux data node and the local cache view data so as to re-perform page view rendering.
4. The method for page view processing of a exact application according to claim 3, further comprising, after re-rendering the page view:
receiving a view configuration storage instruction, and judging the authority of a current user according to the view configuration storage instruction;
storing current view data to a server in view types matched with the authority according to the authority of the user, wherein the view types comprise public view types and private view types;
and when receiving a view restoration request after view adjustment, acquiring selected view data from the server according to the view restoration request to perform view restoration.
5. The method of page view processing for a compact application of claim 4, wherein after the step of receiving view configuration store instructions, the method further comprises:
when a plurality of receiving view configuration storage instructions are received, judging whether the receiving view configuration storage instructions aim at the same piece of view data, if so, carrying out view data storage or updating sequence based on the view configuration storage instructions, and carrying out coverage storage of the view data at the server.
6. The method for page view processing of a compact application of claim 4, wherein after the step of storing the current view data to the server in a view type matching the authority, the method further comprises:
receiving a view copying request, and acquiring view data to be copied and the authority of a current user according to the view copying request;
judging whether the view to be copied is matched with the authority of the current user, if so, creating new view data at the server, associating the newly created view data with the current user, and otherwise, terminating the view copy request.
7. A page view processing system for a practice application, comprising:
the data acquisition module is used for responding to a page view processing request of the reaction application, acquiring service end view data according to a view ID in the page view processing request, and acquiring local cache view data corresponding to the view ID from an IndexdDB database connected with the reaction application;
the judging module is used for reading target field information of the local cache view data and judging whether the local cache view data is updated or not according to the target field information;
the snapshot creation module is used for merging the service end view data and the local cache view data and creating snapshot data when the local cache view data is updated, and creating the snapshot data according to the service end view data when the local cache view data is not updated;
and the view processing module is used for updating the snapshot data to the reduce data node and the local cache view data, updating the state of a component of the React application based on the updated reduce data node, and performing page view rendering based on the updated component state.
8. The exact application page view processing system as claimed in claim 7, wherein the snapshot creation module is configured to, when merging the service end view data and the locally cached view data:
determining a plurality of data items to be combined, and judging whether the data items are target data items or not;
if the data item is the target data item, judging whether the data of the target data item exists in the local cache view data, if so, acquiring corresponding data from the local cache view data, otherwise, acquiring corresponding data from the service end view data;
if the service end view data is the non-target data item, corresponding data is directly obtained from the service end view data;
and merging the data of each data item acquired from the local cache data and the service end view data.
9. A computer device comprising a memory and a processor, the memory having stored therein a computer program, the processor implementing the method of page view processing of the exact application of any of claims 1 to 6 when the computer program is executed.
10. A computer-readable storage medium, on which a computer program is stored, which computer program, when being executed by a processor, implements the method for page view processing of a practice application according to any one of claims 1 to 6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310781337.XA CN116821549A (en) | 2023-06-28 | 2023-06-28 | Page view processing method of React application and related equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310781337.XA CN116821549A (en) | 2023-06-28 | 2023-06-28 | Page view processing method of React application and related equipment |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116821549A true CN116821549A (en) | 2023-09-29 |
Family
ID=88116291
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310781337.XA Pending CN116821549A (en) | 2023-06-28 | 2023-06-28 | Page view processing method of React application and related equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116821549A (en) |
-
2023
- 2023-06-28 CN CN202310781337.XA patent/CN116821549A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108287708B (en) | Data processing method and device, server and computer readable storage medium | |
| CN109522751B (en) | Access right control method and device, electronic equipment and computer readable medium | |
| CN111782304B (en) | Paging loading data logic control method, device, computer equipment and medium | |
| CN112199442B (en) | Method, device, computer equipment and storage medium for distributed batch downloading files | |
| CN114095567A (en) | Data access request processing method and device, computer equipment and medium | |
| JP7369229B2 (en) | How to change the skin of the mini program page, devices and electronic devices | |
| CN104679824A (en) | Webpage generating method and webpage generating system of network platform | |
| CN109391658B (en) | Account data synchronization method and equipment, storage medium and terminal thereof | |
| CN112860662A (en) | Data blood relationship establishing method and device, computer equipment and storage medium | |
| CN111767481A (en) | Access processing method, device, equipment and storage medium | |
| CN113590447B (en) | Buried point processing method and device | |
| CN116821549A (en) | Page view processing method of React application and related equipment | |
| CN115330396A (en) | Payment state acquisition method and device, computer equipment and storage medium | |
| CN115309491A (en) | Logic algorithm of platform system | |
| CN107644043B (en) | Internet bank quick navigation setting method and system | |
| CN113434069A (en) | Menu configuration method, device, equipment and storage medium | |
| CN112632192A (en) | Node maintenance method and device, computer equipment and medium | |
| CN112966201A (en) | Object processing method, device, electronic equipment and storage medium | |
| CN111367898A (en) | Data processing method, device, system, electronic equipment and storage medium | |
| CN113468109B (en) | File management method and device, electronic equipment and storage medium | |
| CN114218191A (en) | System function migration method and device, computer equipment and storage medium | |
| US20240031434A1 (en) | Marking information processing method and device, and storage medium | |
| CN116467145A (en) | Page performance data acquisition method and device, computer equipment and storage medium | |
| CN116996292A (en) | Interface configuration method, device, computer equipment and storage medium | |
| CN116842541A (en) | Data encryption and decryption processing method and device, computer equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |