Directory tree management method, system and equipment and storage medium

Abstract

The invention relates to the technical field of computers, and discloses a directory tree management method, system and device and a storage medium, and the method comprises the steps: responding to a target hierarchy loading request for a directory tree, and sending a target hierarchy data request to a server side; and if the target hierarchy data returned by the server side is received, calling a JsStore data storage interface by utilizing Web Worker, and storing the target hierarchy data returned by the server side in an IndexedDB database. According to the method and the device, the time-consuming database operation is easily transferred to the background thread to be executed by utilizing the support for the WebWorker and the JsStore, so that the directory tree is efficiently and flexibly cached locally, and the page response speed is improved; according to the method and the device, the use complexity of the IndexedDB is reduced, and the reliability of data management is also improved; according to the method, the user experience is improved on the premise of ensuring the data integrity.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular, to a method, system, device, and storage medium for managing a directory tree. Background Art

[0002] With the increasing complexity of Web applications, the demand for offline data storage and retrieval has also grown. As a common data structure for representing hierarchical relationships, directory trees are widely used in many scenarios.

[0003] In the prior art, to implement the caching of a directory tree, the entire directory tree is usually stored locally in JSON format. Although this method is relatively simple to implement, for addition, deletion, modification, and query operations, it is necessary to first convert the JSON string into an object and finally convert it back to JSON data for storage, resulting in poor read and write performance. For large directory trees, this method also causes problems such as inflexible data management and low efficiency. Summary of the Invention

[0004] The main objective of this application is to provide a method, system, device, and storage medium for managing a directory tree, aiming to solve the technical problems of inflexible caching and low efficiency of directory trees in the prior art.

[0005] In a first aspect of this application, a method for managing a directory tree is provided. The method for managing the directory tree includes:

[0006] Responding to a target level loading request for the directory tree, sending a target level data request to the server side;

[0007] If the target level data returned by the server side is received, using Web Worker to call the JsStore data storage interface, and storing the target level data returned by the server side in the IndexedDB database.

[0008] This application also provides a system for managing a directory tree. The system for managing the directory tree includes: a front-end processing module, Web Worker, JsStore, and an IndexedDB database;

[0009] The front-end processing module is configured to respond to a target level loading request for the directory tree and send a target level data request to the server side;

[0010] The front-end processing module is further configured to, if the target level data returned by the server side is received, send a data caching instruction to Web Worker;

[0011] Web Worker is configured to respond to the data caching instruction and call the JsStore data storage interface;

[0012] JsStore is used to store the target - level data returned by the server in the IndexedDB database in response to a JsStore data storage interface call request.

[0013] The third aspect of this application provides a computer device, including: a memory and at least one processor, where instructions are stored in the memory; the at least one processor invokes the instructions in the memory to enable the computer device to execute the above - mentioned directory tree management method.

[0014] The fourth aspect of this application provides a computer - readable storage medium, in which instructions are stored. When it runs on a computer, it enables the computer to execute the above - mentioned directory tree management method.

[0015] With the support of WebWorker and JsStore in this application, time - consuming database operations are easily moved to the background thread for execution, achieving efficient and flexible local caching of the directory tree and improving the page response speed. This application not only reduces the complexity of using IndexedDB but also improves the reliability of data management; on the premise of ensuring data integrity, it optimizes data reading and writing performance and enhances the user experience. This application also uses a transaction mechanism to ensure the atomicity and data consistency of a set of operations, ensuring the synchronization of the local cache and server - side data and avoiding data inconsistency.

[0016] By caching the directory tree in this application, it is convenient for users to quickly access and operate data in the offline state without waiting for network requests, enhancing the user experience; storing some data on the client reduces the load and pressure on the server; avoiding frequent network requests improves the response speed of the application; even when the network is unstable or offline, the application can continue to provide services, enhancing the reliability of the application. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] Figure 1 It is a schematic flowchart of the first embodiment of the directory tree management method in an embodiment of this application;

[0018] Figure 2 It is a schematic diagram of the directory tree in an embodiment of this application;

[0019] Figure 3 It is a schematic diagram of the storage of the directory tree in the IndexedDB database in an embodiment of this application;

[0020] Figure 4 It is a schematic diagram of the functional modules of an embodiment of the directory tree management system in an embodiment of this application;

[0021] Figure 5 It is a schematic diagram of the interaction between the various modules of the directory tree management system in an embodiment of this application;

[0022] Figure 6 It is an interaction schematic diagram of each module of the directory tree management system in another embodiment of this application;

[0023] Figure 7 It is a schematic diagram of an embodiment of a computer device in an embodiment of this application. Detailed implementation manners

[0024] The terms "first", "second", "third", "fourth", etc. (if any) in the specification, claims and above-mentioned drawings of this application are used to distinguish similar objects, and do not necessarily need to be used to describe a specific order or sequence. It should be understood that such used data can be interchanged under appropriate circumstances so that the embodiments described here can be implemented in an order different from that illustrated or described here. In addition, the term "comprising" or "having" and any variation thereof are intended to cover non-exclusive inclusion. For example, a process, method, system, product or device comprising a series of steps or units does not necessarily need to be limited to those steps or units clearly listed, but may include other steps or units not clearly listed or inherent to these process, method, product or device.

[0025] With the increasing complexity of Web applications, the demand for offline data storage and retrieval has also increased. As a common data structure for representing hierarchical relationships, the directory tree has been widely used in many scenarios.

[0026] The following are the existing ways to implement the caching of the directory tree:

[0027] Way 1: Store the entire directory tree in local storage in JSON format, such as localStorage, sessionStorage, etc.

[0028] The implementation of Way 1 is relatively simple, but there are obvious disadvantages:

[0029] For addition, deletion, modification, and query, it is necessary to first convert the JSON string into an object, and finally convert it back to JSON data for storage. This results in inflexible data management and low efficiency.

[0030] The storage capacity is limited, generally about 5M, the read and write performance is poor, and it will block the execution of the main thread.

[0031] Way 2: Use the IndexedDB API to create an object store for storing each tree node object and maintain the parent-child node relationship by itself. The disadvantages of this way include:

[0032] Data complexity: For large and complex directory trees, it is relatively complex to use the native IndexedDB API to maintain the parent-child relationship and implement various query and modification operations.

[0033] Code complexity: Most of the IndexedDB API is asynchronous, and function callbacks need to be used to handle the asynchronous events of these APIs. Excessive nested callbacks will make the code difficult to maintain, which requires higher underlying encapsulation capabilities for developers.

[0034] Performance optimization is cumbersome: To improve retrieval performance, it is necessary to build and maintain indexes by oneself.

[0035] Based on the above problems, the present application provides a management solution for directory trees.

[0036] Reference Figure 1 , in an embodiment of the present application, a management method for a directory tree is provided. The management method for the directory tree includes:

[0037] S100: In response to a target level loading request for the directory tree, send a target level data request to the server side.

[0038] Specifically, the management method for the directory tree in this embodiment can be applied to the browser side or the client side.

[0039] On the browser or the client, the user can browse the web page. If there is collapsed or data to be displayed on the web page, the user can click to expand and display the collapsed data. Before loading and displaying this data to be expanded, the browser side needs to obtain the corresponding level data from the server side or locally and perform rendering.

[0040] The level data of these collapsed data can be stored in the server side in the form of a directory tree. When the user performs an expansion operation on some collapsed data of the directory tree at the front end, it is equivalent to sending a target level loading request for the directory tree to the browser side. The target level loading request is the page loading request or instruction. The browser side responds to this target level loading request and sends a target level data request to the server side.

[0041] Among them, the browser side can, in response to a target level loading request for the directory tree, send a task of a target level data request to the server side through the main thread.

[0042] As a common data structure for representing hierarchical relationships, the directory tree is widely used in many scenarios. For example, a company's department has sub-departments, and each department has employees, thus forming a relationship tree or directory tree between departments and departments, departments and employees. Specifically, as Figure 2As shown. The directory tree includes Department 1, Department 2, and Department 3. Under Department 1, there is Sub - department 1 - 2. Under Sub - department 1 - 2, there are Employee 1 and Employee 2. Under Department 2, there are Employee 3 and Employee 4. Departments and sub - departments belong to directory nodes, and employees belong to content nodes. Both departments and sub - departments can be expanded.

[0043] Users can expand nodes at each level in sequence and display corresponding data through expansion operations on the page.

[0044] S200: If the target - level data returned by the server - side is received, use Web Worker to call the JsStore data storage interface and store the target - level data returned by the server - side in the IndexedDB database.

[0045] Specifically, when the network is online and the server - side is working properly, the server - side will respond to the target - level data request. If the browser - side or client - side receives the target - level data returned by the server - side, the browser - side or client - side will cache the target - level data returned by the server - side in the local IndexedDB database or update the IndexedDB database according to the target - level data returned by the server - side.

[0046] Among them, JsStore depends on IndexedDB, so it is necessary to ensure that the browser - side version supports the IndexedDB feature.

[0047] More specifically, instantiate a connection object of JsStore, create an IndexedDB database according to the table fields of the directory tree, or open an existing database. Create a script for Web Worker to read and write the database and configure it to the JsStore connection object. Use the JsStore API to define a set of interfaces, such as: JsStore data storage interface (i.e., data saving interface) and JsStore data reading interface (i.e., data query interface), etc.

[0048] The main thread can create a background thread, that is, a Web Worker thread, at a certain moment after or before receiving the target - level data returned by the server - side. The main thread passes the target - level data returned by the server - side to the background thread and notifies the WebWorker thread to cache the target - level data. That is, use Web Worker to call the JsStore data storage interface and store the target - level data returned by the server - side in the IndexedDB database.

[0049] In a specific embodiment, the postMessage function is called for information transmission between the Web Worker thread and the main thread.

[0050] If the target-level data of historical storage or historical cache already exists in the IndexedDB database, the target-level data returned by the server is used to update and replace the target-level data of the historical cache in the IndexedDB database. If the target-level data of the historical cache does not exist in the IndexedDB database, the target-level data returned by the server is stored in the IndexedDB database.

[0051] Among them, the IndexedDB database (IndexedDB front-end database) is a transactional database built into the browser, providing powerful data offline storage and retrieval capabilities.

[0052] JsStore is a JavaScript library encapsulated based on the IndexedDB API and is a wrapper for IndexedDB. It provides a simple SQL-like API and Promise support for managing databases, making it convenient to learn and use, enabling developers to perform database operations more easily. IndexedDB queries can be executed inside web workers, and JsStore maintains this functionality by providing a separate worker file. Therefore, functions such as adding, deleting, modifying, and querying can be implemented using JsStore.

[0053] Web Worker: It can run scripts in a background thread independent of the main thread of the web application, that is, WebWorker runs scripts in the background thread. It is used to handle some time-consuming tasks without blocking the execution of the main thread. Through web worker technology, the main thread can create web worker threads, hand over some tasks to the background thread for execution, and does not affect the page performance.

[0054] In this embodiment, without affecting the execution of the main thread, a Web Worker object is created to manage and control the Web Worker thread to execute tasks such as data caching, manage the communication between the main thread and the worker thread, and control the release of resources.

[0055] In this embodiment, a web worker instance is selected to execute the currently received cache task that needs to be executed, liberating the main thread.

[0056] This application cleverly combines IndexedDB, JsStore, and Web Worker to provide an efficient, flexible, scalable solution for implementing a million-level directory tree cache based on JsStore encapsulated by IndexedDB.

[0057] In this embodiment, the IndexedDB API is not directly used. Instead, the storage and management of the directory tree are implemented through the JsStore library encapsulated based on IndexedDB. JsStore provides more advanced and simple interfaces, such as SQL-like queries, transaction management, etc.

[0058] With the support of WebWorker and JsStore in this embodiment, time-consuming database operations are easily moved to the background thread for execution, achieving efficient and flexible local caching of the directory tree and improving the page response speed. This embodiment not only reduces the complexity of using IndexedDB but also improves the reliability of data management. On the premise of ensuring data integrity, this embodiment optimizes data reading and writing performance and enhances the user experience. This embodiment also uses the transaction mechanism to ensure the atomicity and data consistency of a group of operations, ensuring the synchronization of local cache and server-side data and avoiding data inconsistency.

[0059] By caching the directory tree in this embodiment, it is convenient for users to quickly access and operate data in the offline state without waiting for network requests, enhancing the user experience; storing some data on the client reduces the load and pressure on the server; avoiding frequent network requests improves the response speed of the application; even in the case of unstable or offline network, the application can continue to provide services, enhancing the reliability of the application.

[0060] In one embodiment, the method for managing the directory tree further includes:

[0061] If the target-level data returned by the server-side is not received, or the response to the target-level data request is not received within the preset duration, the JsStore data reading interface is called using Web Worker to retrieve and read the historically cached target-level data from the IndexedDB database.

[0062] Specifically, in the offline case, or in the case of server-side exceptions, or in the case of long delays due to server-side busyness, the browser side or the client may not be able to receive the target-level data or response returned by the server-side. To reduce the waiting time of users and improve the page loading response speed, this embodiment will obtain the historically cached target-level data from the local IndexedDB database when the target-level data cannot be obtained from the server-side in a timely manner.

[0063] More specifically, the main thread creates a background thread, i.e., a Web Worker thread. When the main thread has not received the target level data returned by the server, or has not received a response from the server for the target level data request within a preset duration, it notifies the Web Worker thread to read the historically cached target level data from the IndexedDB database. That is, it uses the Web Worker to call the JsStore data reading interface to query and read the historically cached target level data from the IndexedDB database.

[0064] In this embodiment, when the target level data or response returned by the server cannot be obtained, the background web worker thread can be used to read the historically cached target level data from the local IndexedDB database by calling the JsStore data reading interface. This not only promptly responds to the user's access requirements for the page, reducing user waiting, but also alleviates the access pressure on the server.

[0065] This embodiment caches the directory tree, facilitating users to quickly access and operate data in the offline state without waiting for network requests, thus enhancing the user experience; stores some data on the client side, reducing the load and pressure on the server; avoids frequent network requests, improving the response speed of the application; and enables the application to continue providing services even in the case of unstable or offline networks, enhancing the reliability of the application.

[0066] In one embodiment, each node data stored in the IndexedDB database includes a node identifier, node display data, and an association identifier for indicating the parent-child relationship. Among them, if the corresponding node has no parent node, the association identifier is empty; if the corresponding node has a parent node, the association identifier at least includes the node identifier of the corresponding parent node.

[0067] Specifically, the node data of each node in the IndexedDB database includes 3 fields, namely, the node identifier, node display data, and association identifier, and the corresponding field values.

[0068] The node identifier can be, for example, a node ID; the node display data, i.e., node information, is the display content used for front-end display; the node display data includes, for example, the node name, etc. Refer to Figure 2 , Department 1, Department 1-2, Employee 1 and Employee 2, Department 2, Employee 3, Employee 4, and Department 3 are all node display data.

[0069] The association identifier is used to indicate the parent-child relationship. For example, if a node has a parent node (i.e., a superior node), then the association identifier of this node at least includes the node identifier of the corresponding parent node of this node. If a node has no parent node, its association identifier is empty.

[0070] For example, the associated identifier is the parent node ID, or the associated identifier is the parent node ID -> node ID.

[0071] Figure 3 This is a schematic diagram of the storage of the directory tree in the IndexedDB database in the embodiments of the present application; refer to Figure 3 For each node stored in the IndexedDB database, the node data includes three fields: ID, Pid, and Name. The ID is the node ID corresponding to the node, the Pid is the associated identifier, and the Name is the node name.

[0072] Take Figure 3 the directory tree on the left in [example] as an example. This directory tree includes directory nodes and content nodes. The directory nodes are regions, such as Guangzhou City, Shenzhen City, and Yuexiu District. The content nodes are devices, such as Camera 1, Camera 2, Camera 3, and Camera 4. Among them, Yuexiu District is a sub-region under Guangzhou City, and Yuexiu District includes Camera 1 and Camera 2; Shenzhen City includes Camera 3 and Camera 4.

[0073] Abstract the tree structure of this directory tree into two types of nodes: region nodes (directory nodes) and device nodes (content nodes). The relationship between regions and regions, and regions and cameras is one-to-one or one-to-many. The association relationship between nodes is established according to the Pid field.

[0074] There are two tables in the IndexedDB database, a region table (directory table) and a device table (content table).

[0075] What is stored in the region table is the id, Pid, and name of each region. The id is the unique identifier of the region. The Pid includes the region id corresponding to the parent node, or the Pid includes the id of the region itself and the region id corresponding to its parent node. For example, the Pid of Yuexiu District is: Guangzhou District id + Yuexiu District id. Guangzhou City has no parent node, so the Pid of Guangzhou City is empty.

[0076] The name is the region name such as Guangzhou City or Yuexiu District.

[0077] What is stored in the device table is the id, Pid, and name of each device. The id is the unique identifier of the device. The Pid includes the region id corresponding to the parent node, or the Pid includes the id of the device itself and the region id corresponding to its parent node. For example, the Pid of Camera 1: Yuexiu District id + Camera 1 id; the Pid of Camera 2: Yuexiu District id + Camera 2 id; the Pid of Camera 3: Shenzhen City id + Camera 3 id; the Pid of Camera 4: Shenzhen City id + Camera 4 id. Shenzhen City has no parent node, so the Pid of Shenzhen City is empty.

[0078] The device name is camera 1 or camera 2 or camera 3 or camera 4.

[0079] It should be noted that if the Pid contains the id corresponding to the parent node and its own id, the concatenation method of the two ids can be, for example, the parent node id -> node id, or (parent node id, node id), etc. The present application does not limit the splicing and storage methods.

[0080] In this embodiment, by parsing the hierarchical data obtained from the server side, the parent-child relationship or the upper and lower hierarchical relationships between nodes are obtained, and node data including node identifiers, node display data, and association identifiers are stored in the IndexedDB database. This storage method does not require converting the JSON string to an object and then converting it back to JSON data for storage during addition, deletion, modification, and query. Therefore, the storage method of this embodiment not only effectively improves the query speed and efficiency, but also facilitates data management. In addition, this embodiment does not need to use the native IndexedDB API to maintain the parent-child relationship, avoiding complex data query and modification operations. This embodiment does not need to use the function callback method in the IndexedDB API to handle asynchronous events, avoiding the increase in the code maintenance difficulty caused by excessive nested callbacks and facilitating developers to develop.

[0081] In one embodiment, the method for managing the directory tree further includes:

[0082] If the target hierarchical data is obtained, the obtained target hierarchical data is rendered and then displayed.

[0083] Specifically, on the front-end browser side or the client side, after rendering the obtained target hierarchical data, it can be displayed on the front-end for users to view.

[0084] Among them, the obtained target hierarchical data can be the target layer data returned by the server side, or the obtained target hierarchical data is the target hierarchical data cached historically.

[0085] More specifically, this embodiment realizes asynchronous loading and rendering of each layer of tree nodes.

[0086] Take Figure 3 as an example. When loading for the first time, the top-level regions and cameras are obtained once. For the 2nd, 3rd,..., nth layers, data loading is triggered only when there is an operation to expand the directory in the previous layer.

[0087] Such as Figure 3As shown, first load the nodes of "Guangzhou City" and "Shenzhen City" at the first level. When the user clicks to expand "Guangzhou City", the browser will obtain the target-level data of the child nodes under "Guangzhou City" from the server or locally, that is, trigger the loading of the child nodes of "Yuexiu District" at the second level. When the user continues to click to expand "Yuexiu District", the browser will obtain the target-level data of the child nodes under "Yuexiu District" from the server or locally, that is, trigger the loading of the child nodes of "Camera 1" and "Camera 2" at the third level. For other unexpanded directories, the child nodes are not loaded.

[0088] The advantage of this processing is that regardless of the depth of the tree level and the size of the data volume, only the data required by the user is presented, and other temporarily unnecessary data waits for the appropriate time to be presented, which greatly improves the page performance.

[0089] In this embodiment, by rendering the obtained target-level data, the page access request of the user for the directory tree can be responded to in a timely manner.

[0090] Reference Figure 4 , in the embodiment of the present application, a management system for a directory tree is further provided. The management system for the directory tree includes: a front-end processing module 100, a Web Worker 200, a JsStore 300, and an IndexedDB database 400;

[0091] The front-end processing module 100 is configured to send a target-level data request to the server in response to a target-level loading request for the directory tree;

[0092] The front-end processing module 100 is further configured to send a data caching instruction to the WebWorker 200 if the target-level data returned by the server is received;

[0093] The Web Worker 200 is configured to call the JsStore data storage interface in response to the data caching instruction;

[0094] The JsStore 300 is configured to store the target-level data returned by the server in the IndexedDB database 400 in response to a JsStore data storage interface call request.

[0095] Specifically, for the working principle of the management system of the directory tree in this embodiment, reference can be made to the description of the above-mentioned management method of the directory tree.

[0096] The management system of the directory tree in this embodiment can be applied to the browser side or the client side.

[0097] The front - end processing module 100 can respond to various operations of the user on the browser side. It can, through the main thread, in response to a target - level loading request for the directory tree, send a task of requesting target - level data to the server side.

[0098] When the network is online and the server side is working properly, the server side will respond to the target - level data request. If the front - end processing module 100 on the browser side or the client side receives the target - level data returned by the server side, the front - end processing module 100 will send a data - caching instruction or a data - caching message to the Web Worker 200. After receiving the data - caching instruction or the data - caching message, the Web Worker 200 will respond to the data - caching instruction or the data - caching message, call the JsStore 300 data - storage interface. The JsStore 300 will, in response to the JsStore 300 data - storage interface call request from the Web Worker 200, store the target - level data returned by the server side in the IndexedDB database 400, or update the IndexedDB database 400 according to the target - level data returned by the server side.

[0099] Among them, JsStore 300 depends on IndexedDB, so it is necessary to ensure that the browser - side version supports the IndexedDB feature.

[0100] More specifically, instantiate a connection object of JsStore 300, create an IndexedDB database 400 according to the table fields of the directory tree, or open an existing database. Create a script for the Web Worker 200 to read and write the database, and configure it to the JsStore 300 connection object. Use the JsStore 300 API to define a set of interfaces, such as: the JsStore 300 data - storage interface (i.e., the data - saving interface) and the JsStore 300 data - reading interface (i.e., the data - querying interface), etc.

[0101] The main thread can create a background thread, that is, a Web Worker thread, after receiving the target - level data returned by the front - end processing module 100 of the server side or at a certain moment before that. The main thread passes the target - level data returned by the server side to the background thread, notifying the Web Worker thread to cache the target - level data. That is, use the Web Worker 200 to call the JsStore 300 data - storage interface to store the target - level data returned by the server side in the IndexedDB database 400.

[0102] In a specific embodiment, the postMessage function is called for information transmission between the Web Worker thread and the main thread.

[0103] If the target level data of historical storage or historical cache already exists in the IndexedDB database 400, the target level data returned by the server side is used to update and replace the target level data of the historical cache in the IndexedDB database 400. If the target level data of the historical cache does not exist in the IndexedDB database 400, the target level data returned by the server side is stored in the IndexedDB database 400.

[0104] Among them, the IndexedDB database 400 (IndexedDB front-end database) is a transactional database built into the browser, providing powerful data offline storage and retrieval capabilities.

[0105] JsStore 300 is a JavaScript library encapsulated based on the IndexedDB API. It is a wrapper for IndexedDB, providing a simple SQL-like API and Promise support for managing databases, facilitating learning and use, enabling developers to perform database operations more easily. IndexedDB queries can be executed inside the Web Worker 200. JsStore 300 maintains this functionality by providing a separate worker file. Therefore, using JsStore 300 can implement functions such as adding, deleting, modifying, and querying.

[0106] Web Worker 200: It can run scripts in a background thread independent of the main thread of the Web application. That is, Web Worker 200 runs scripts in the background thread. It is used to handle some time-consuming tasks without blocking the execution of the main thread. Through the web worker technology, the main thread can create a web worker thread, hand over some tasks to the background thread to run, and does not affect the page performance.

[0107] In this embodiment, without affecting the execution of the main thread, a Web Worker 200 object is created to manage and control the Web Worker thread to execute tasks such as data caching, manage the communication between the main thread and the worker thread, and control the release of resources.

[0108] This embodiment selects a web worker instance to execute the currently received cache tasks that need to be executed, liberating the main thread.

[0109] This is the interaction schematic diagram of each module of the directory tree management system in the embodiment of the present application; refer to

[0110] Figure 5 This is for reading Figure 5 to Figure 3Taking the directory tree in as an example, at the front end of the page, the front-end processing module 100 responds to a target-level loading request for the directory tree. If the target-level loading request is a request for the directory list of the current level (i.e., directory nodes, or regional nodes), it requests the directory list of the current level from the server side. The server side returns the directory list of the current level. After receiving the directory list of the current level returned by the server side, the front-end processing module 100 sends a message to the Web Worker 200: cache the directory list of the current level; After receiving the message, the Web Worker 200 calls the cache directory interface of the JsStore 300 (i.e., the first JsStore 300 data storage interface). In response to the request for the first JsStore 300 data storage interface call, the JsStore 300 stores the directory list of the current level returned by the server side in the IndexedDB database 400 (save directory data). After the IndexedDB database 400 saves the data, it returns a result to the JsStore 300. After receiving the result returned by the IndexedDB database 400, the JsStore 300 returns a result to the Web Worker 200. After receiving the result returned by the JsStore 300, the Web Worker 200 notifies the front-end processing module 100 of the directory cache result.

[0111] Similarly, if the target-level loading request is a request for the device list of the current level (i.e., device nodes, or content nodes), it requests the device list of the current level from the server side. The server side returns the device list of the current level. After receiving the device list of the current level returned by the server side, the front-end processing module 100 sends a message to the Web Worker 200: cache the device list of the current level; After receiving the message, the Web Worker 200 calls the cache device interface of the JsStore 300 (i.e., the second JsStore 300 data storage interface). In response to the request for the second JsStore 300 data storage interface call, the JsStore 300 stores the device list of the current level returned by the server side in the IndexedDB database 400 (save device data). After the IndexedDB database 400 saves the data, it returns a result to the JsStore 300. After receiving the result returned by the IndexedDB database 400, the JsStore 300 returns a result to the Web Worker 200. After receiving the result returned by the JsStore 300, the Web Worker 200 notifies the front-end processing module 100 of the device cache result.

[0112] In this embodiment, the IndexedDB API is not directly used. Instead, the JsStore library encapsulated based on IndexedDB is used to implement the storage and management of data such as directory trees. JsStore provides more advanced and simple interfaces, such as SQL-like queries and transaction management, to achieve efficient and flexible local caching of directory trees. This embodiment uses the built-in support for WebWorker to easily move time-consuming database operations to the background thread for execution, thereby improving the page response speed. This embodiment also uses the transaction mechanism to ensure the atomicity and data consistency of a group of operations, ensuring the synchronization of local cache and server-side data and avoiding data inconsistency. This embodiment not only reduces the complexity of using IndexedDB but also improves the reliability of data management. On the premise of ensuring data integrity, this embodiment optimizes the query performance and improves the user experience.

[0113] In addition, by caching the directory tree in this embodiment, it is convenient for users to quickly access and operate data in the offline state without waiting for network requests, improving the user experience; storing some data on the client reduces the load and pressure on the server; avoiding frequent network requests improves the response speed of the application; even in the case of unstable or offline network, the application can continue to provide services, enhancing the reliability of the application.

[0114] In one embodiment, the front-end processing module 100 is further configured to send a data reading instruction to the WebWorker 200 if the target level data returned by the server side is not received, or if the response to the target level data request returned by the server side is not received within a preset duration.

[0115] The Web Worker 200 is further configured to call the JsStore 300 data reading interface in response to the data reading instruction.

[0116] The JsStore 300 is further configured to retrieve and read the historically cached target level data from the IndexedDB database 400 in response to the request for calling the JsStore 300 data reading interface.

[0117] Specifically, in the case of offline, or in the case of server-side exceptions, or in the case of long delays due to server-side busyness, the front-end processing module 100 on the browser side or the client side may not be able to receive the target level data or response returned by the server side. To reduce the waiting time of users and improve the page loading response speed, this embodiment will obtain the historically cached target level data from the local IndexedDB database 400 when the target level data cannot be obtained from the server side in a timely manner.

[0118] More specifically, the main thread of the front-end processing module 100 creates a background thread, namely a Web Worker thread. When the main thread of the front-end processing module 100 has not received the target level data returned by the server, or has not received a response from the server for the target level data request within a preset duration, it notifies the Web Worker 200 to use the Web Worker thread to read the historically cached target level data from the IndexedDB database 400. That is, the front-end processing module 100 sends a data reading instruction to the WebWorker 200, and the Web Worker 200 calls the JsStore 300 data reading interface in response to the data reading instruction; JsStore 300 retrieves and reads the historically cached target level data from the IndexedDB database 400 in response to the request for the JsStore 300 data reading interface of the Web Worker 200.

[0119] Figure 6 It is an interaction schematic diagram of each module of the directory tree management system in another embodiment of the present application; refer to Figure 6 , to read Figure 3 the directory tree in as an example. At the front end of the page, in response to a target level loading request for the directory tree, if the target level loading request is a request for the directory list of the current level (i.e., a directory node or a region node), the front-end processing module 100 requests the directory list of the current level from the server end. If the server end fails to return the directory list of the current level (i.e., the return fails), the front-end processing module 100 sends a message (or a data reading instruction) to the Web Worker 200: read the cache of the directory list of the current level. After receiving the message, the Web Worker 200 calls the directory acquisition interface or the directory reading interface of the JsStore 300 (i.e., the first JsStore 300 data reading interface). In response to the request for the first JsStore 300 data reading interface call, the JsStore300 sends a directory data retrieval instruction or request to the IndexedDB database 400. After querying and retrieving, the IndexedDB database 400 returns a query result to the JsStore 300. After receiving the query result returned by the IndexedDB database 400, the JsStore 300 returns the query result to the Web Worker 200. After receiving the query result returned by the JsStore 300, the Web Worker200 returns the query result (i.e., the directory list cache data) to the front-end processing module 100.

[0120] Similarly, if the loading request for the target level is to request the device list of the current level (i.e., device node or content node), then the device list of the current level is requested from the server side. If the server side fails to return the device list of the current level (i.e., returns a failure), then the front-end processing module 100 sends a message (or data reading instruction) to the Web Worker 200: read the cache of the device list of the current level. After receiving the message, the Web Worker 200 calls the device acquisition interface or device reading interface of the JsStore 300 (i.e., the second JsStore 300 data reading interface). In response to the request for calling the second JsStore 300 data reading interface, the JsStore 300 sends a retrieval device data instruction or request to the IndexedDB database 400. After querying and retrieving, the IndexedDB database 400 returns the query result to the JsStore 300. After receiving the query result returned by the IndexedDB database 400, the JsStore 300 returns the query result to the Web Worker 200. After receiving the query result returned by the JsStore 300, the Web Worker 200 returns the query result (i.e., device list cache data) to the front-end processing module 100.

[0121] In this embodiment, in the case where the target level data or response returned by the server side cannot be obtained, the background Web Worker thread can be used to read the historically cached target level data from the local IndexedDB database by calling the JsStore data reading interface, which not only responds to the user's access requirement for the page in a timely manner, reduces the user's waiting time, but also alleviates the access pressure on the server.

[0122] In this embodiment, by caching the directory tree, it is convenient for users to quickly access and operate data in the offline state without waiting for network requests, improving the user experience; storing some data on the client side reduces the load and pressure on the server; avoiding frequent network requests improves the response speed of the application; even in the case of unstable or offline network, the application can continue to provide services, enhancing the reliability of the application.

[0123] In one embodiment, the JsStore 300 is further configured to return the historically cached target level data to the Web Worker 200 if the historically cached target level data is read from the IndexedDB database 400;

[0124] The Web Worker 200 is further configured to return the historically cached target level data to the front-end processing module 100;

[0125] The front-end processing module 100 is also used to render and display the obtained target-level data if the target-level data is obtained.

[0126] Specifically, on the front-end browser side or client side, after rendering the obtained target-level data, it can be displayed on the front-end for users to view.

[0127] Among them, the obtained target-level data can be the target-layer data returned by the server side, or the obtained target-level data is the target-level data cached historically.

[0128] In this embodiment, by rendering the obtained target-level data, the page access request of the user for the directory tree can be responded to in a timely manner.

[0129] In one embodiment, the IndexedDB database 400 is used to parse the parent-child relationship between each node in the target-level data and store the node data including the parent-child relationship.

[0130] Specifically, the parent-child relationship is the superior-subordinate node relationship. The IndexedDB database 400 is used to parse the parent-child relationship between each node in the target-level data, establish and store the mapping relationship between the parent node and the child node, as well as the node information of the node itself.

[0131] In a specific embodiment, each node data stored in the IndexedDB database 400 includes a node identifier, node display data, and an association identifier for indicating the parent-child relationship. Among them, if the corresponding node has no parent node, the association identifier is empty, and if the corresponding node has a parent node, the association identifier includes at least the node identifier of the corresponding parent node.

[0132] In the IndexedDB database 400, the node data of each node includes 3 fields: the node identifier, the node display data, and the association identifier, as well as the corresponding field values.

[0133] The node identifier can be, for example, the node ID; the node display data is the node information, which is the display content used to be displayed on the front-end; the node display data includes, for example, the node name, etc. Refer to Figure 2 , Department 1, Department 1-2, Employee 1 and Employee 2, Department 2, Employee 3, Employee 4, and Department 3 are all node display data.

[0134] The association identifier is used to indicate the parent-child relationship. For example, if a node has a parent node (i.e., the superior node), then the association identifier of this node includes at least the node identifier of the corresponding parent node. If a node has no parent node, its association identifier is empty.

[0135] For example, the associated identifier is the parent node ID, or the associated identifier is the parent node ID -> node ID.

[0136] Figure 3 This is a storage schematic diagram of the directory tree in the IndexedDB database 400 in the embodiments of the present application; refer to Figure 3 In the node data of each node stored in the IndexedDB database 400, there are three fields: ID, Pid, and Name. ID is the node ID corresponding to the node, Pid is the associated identifier, and Name is the node name.

[0137] Take Figure 3 the directory tree on the left in

[0138] as an example. This directory tree includes directory nodes and content nodes. The directory nodes are regions, such as Guangzhou City, Shenzhen City, and Yuexiu District. The content nodes are devices, such as Camera 1, Camera 2, Camera 3, and Camera 4. Among them, Yuexiu District is included under Guangzhou City, and Yuexiu District includes Camera 1 and Camera 2; Shenzhen City includes Camera 3 and Camera 4.

[0139] Abstract the tree structure of this directory tree into two types of nodes: region nodes (directory nodes) and device nodes (content nodes). The relationship between regions and regions, and regions and cameras is one-to-one or one-to-many. The association relationship between nodes is established according to the Pid field.

[0140] In the IndexedDB database 400, there are two tables: the region table (directory table) and the device table (content table).

[0141] The region table stores the id, Pid, and name of each region. The id is the unique identifier of the region. The Pid includes the region id corresponding to the parent node, or the Pid includes the id of the region itself and the region id corresponding to its parent node. For example, the Pid of Yuexiu District is: Guangzhou District id + Yuexiu District id. Guangzhou City has no parent node, so the Pid of Guangzhou City is empty.

[0142] The name is the region name such as Guangzhou City or Yuexiu District.

[0143] The device name is camera 1, camera 2, camera 3, or camera 4.

[0144] It should be noted that if Pid contains the id corresponding to the parent node and its own id, the concatenation method of the two ids can be, for example, the parent node id -> node id, or (parent node id, node id), etc. The present application does not limit this method of concatenation and storage.

[0145] In this embodiment, by parsing the hierarchical data obtained from the server side, the parent-child relationship or the upper and lower hierarchical relationship between nodes is obtained, and node data including node identifiers, node display data, and association identifiers is stored in the IndexedDB database. This storage method does not require converting the JSON string to an object and then converting it back to JSON data for storage when performing addition, deletion, modification, and query operations. Therefore, the storage method of this embodiment not only effectively improves the query speed and efficiency but also facilitates data management. In addition, this embodiment does not need to use the native IndexedDB API to maintain the parent-child relationship, avoiding complex data query and modification operations. This embodiment does not need to use the function callback method in the IndexedDB API to handle asynchronous events, avoiding the increase in the code maintenance difficulty caused by excessive nested callbacks and facilitating the development of developers.

[0146] In one embodiment, JsStore 300 is specifically configured to send a target query request to the IndexedDB database 400 in response to a JsStore 300 data reading interface call request;

[0147] The IndexedDB database 400 is specifically configured to obtain the node ID of the first node in the target hierarchical data to be searched in response to the target query request, and search for the node information of all the child nodes to be displayed including the child nodes of the first node according to the association identifier stored in the IndexedDB database 400.

[0148] Specifically, for example, if the first node contains two child nodes a and b, search for the node data of the child nodes a and b of the first node, obtain the node display data of the child node a from the found node data of the child node a, and obtain the node display data of the child node b from the found node data of the child node b.

[0149] For example, Figure 3 when expanding the hierarchical data of Yuexiu District, the child nodes of Yuexiu District, namely camera 1 and camera 2, will be obtained.

[0150] The present application ingeniously combines IndexedDB, JsStore, and Web Worker to provide an efficient, flexible, scalable solution for implementing a million-level directory tree cache based on IndexedDB encapsulation of JsStore. This solution not only addresses the performance bottlenecks and data management complexity issues in existing technical solutions but also provides a better user experience for large-scale Web applications.

[0151] Figure 7 FIG. 4 is a schematic structural diagram of a computer device provided by an embodiment of the present application. The computer device 700 may vary significantly due to configuration or performance differences and may include one or more processors (central processing units, CPUs) 710 (e.g., one or more processors) and a memory 720, and one or more storage media 730 (e.g., one or more mass storage devices) for storing application programs 733 or data 732. Among them, the memory 720 and the storage media 730 may be transient storage or persistent storage. The program stored in the storage media 730 may include one or more modules (not shown in the figure), and each module may include a series of instruction operations on the computer device 700. Further, the processor 710 may be configured to communicate with the storage media 730 and execute a series of instruction operations in the storage media 730 on the computer device 700.

[0152] The computer device 700 may further include one or more power supplies 740, one or more wired or wireless network interfaces 750, one or more input / output interfaces 760, and / or one or more operating systems 731, such as Windows Serve, Mac OS X, Unix, Linux, FreeBSD, etc. Those skilled in the art can understand that Figure 7 the shown computer device structure does not limit the computer device and may include more or fewer components than shown, or combine certain components, or have different component arrangements.

[0153] The present application also provides a computer device. The computer device includes a memory and a processor. When the computer-readable instructions stored in the memory are executed by the processor, the processor is caused to execute the steps of the directory tree management method in the above embodiments.

[0154] The present application also provides a computer-readable storage medium. The computer-readable storage medium may be a non-volatile computer-readable storage medium or a volatile computer-readable storage medium. Instructions are stored in the computer-readable storage medium. When the instructions run on a computer, the computer is caused to execute the steps of the directory tree management method.

[0155] Those skilled in the art can clearly understand that for the convenience and brevity of description, the specific working processes of the systems, devices, and units described above can refer to the corresponding processes in the foregoing method embodiments, and will not be elaborated herein.

[0156] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on such an understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of this technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods in various embodiments of this application. The foregoing storage medium includes: various media that can store program codes, such as USB flash drives, mobile hard disks, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical discs.

[0157] The above embodiments are only used to illustrate the technical solutions of this application and are not intended to limit them; although this application has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that they can still modify the technical solutions recorded in the foregoing embodiments or perform equivalent replacements for some of the technical features; and these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of various embodiments of this application.

Claims

1. A method for managing a directory tree, characterized in that The management method of the directory tree includes: In response to a target level loading request for the directory tree, sending a target level data request to the server side; If the target level data returned by the server side is received, using Web Worker to call the JsStore data storage interface and storing the target level data returned by the server side in the IndexedDB database.

2. The management method of the directory tree according to claim 1, wherein The management method of the directory tree further includes: If the target level data returned by the server side is not received, or the response returned by the server side for the target level data request is not received within a preset time period, using Web Worker to call the JsStore data reading interface and retrieving and reading the historically cached target level data from the IndexedDB database.

3. The management method of the directory tree according to claim 2, wherein: Each node data stored in the IndexedDB database includes a node identifier, node display data, and an association identifier for indicating the parent-child relationship. Among them, if the corresponding node does not have a parent node, the association identifier is empty; if the corresponding node has a parent node, the association identifier at least includes the node identifier of the corresponding parent node.

4. The management method of the directory tree according to any one of claims 1-3, characterized in that, The management method of the directory tree further includes: If the target level data is obtained, rendering and displaying the obtained target level data.

5. A management system for a directory tree, characterized in that, The management system of the directory tree includes: a front-end processing module, Web Worker, JsStore, and IndexedDB database; The front-end processing module is configured to, in response to a target level loading request for the directory tree, send a target level data request to the server side; The front-end processing module is further configured to, if the target level data returned by the server side is received, send a data caching instruction to the WebWorker; The Web Worker is configured to, in response to the data caching instruction, call the JsStore data storage interface; The JsStore is configured to, in response to a JsStore data storage interface call request, store the target level data returned by the server side in the IndexedDB database.

6. The management system of the directory tree according to claim 5, wherein: The front-end processing module is further configured to, if the target level data returned by the server side is not received, or the response returned by the server side for the target level data request is not received within a preset time period, send a data reading instruction to the Web Worker; The Web Worker is further configured to, in response to the data reading instruction, call the JsStore data reading interface; The JsStore is further configured to, in response to a JsStore data reading interface call request, retrieve and read the historically cached target level data from the IndexedDB database.

7. The management system of the directory tree according to claim 6, wherein: The JsStore is also used to return the target level data cached historically read from the IndexedDB database to the Web Worker; The Web Worker is also used to return the target level data cached historically to the front-end processing module; The front-end processing module is also used to render and display the obtained target level data.

8. The management system of the directory tree according to any one of claims 5-7, characterized in that, The IndexedDB database is used to parse the parent-child relationships between the nodes in the target level data and store the node data including the parent-child relationships; Each piece of node data stored in the IndexedDB database includes a node identifier, node display data, and an association identifier for indicating the parent-child relationship. Among them, if the corresponding node has no parent node, the association identifier is empty; if the corresponding node has a parent node, the association identifier includes at least the node identifier of the corresponding parent node.

9. A computer device, characterized in that, The computer device includes: a memory and at least one processor, and instructions are stored in the memory; The at least one processor calls the instructions in the memory to cause the computer device to execute the directory tree management method according to any one of claims 1-4.

10. A computer-readable storage medium having instructions stored thereon, characterized in that, When the instructions are executed by the processor, the directory tree management method according to any one of claims 1-4 is implemented.

Images