A method and system for displaying a file directory tree

Abstract

The present application discloses a method and system for displaying a file directory tree, which includes: when electron reads the first level of file information and / or folder information under the project path for the first time; electron sends the first level of file information and / or folder information to vue, so that vue generates a preliminary directory tree; when electron reads the information subsequently, according to the requirements returned by vue, reads the sub-file information and / or sub-folder information corresponding to the required information; electron sends the read sub-file information and / or sub-folder information to vue, so that vue generates a complete directory tree. This method does not require electron to read all file information and / or folder information, thus reducing the reading and transmission of unnecessary redundant information from the source; it does not require vue to perform large-scale processing of the received information, thus reducing complexity and improving efficiency.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a method and system for displaying a file directory tree. Background Art

[0002] With the rapid development of information technology, people are increasingly using electronic devices to store information. When electronic devices store a large number of files, these files need to be effectively organized and managed. A file directory tree is an effective management method that generates a tree diagram for folders and files to represent the hierarchical relationships between files.

[0003] Existing methods for displaying file and directory trees can be implemented using Electron and Vue. Electron, developed by GitHub, is an open-source library for building cross-platform desktop applications using HTML, CSS, and JavaScript. Vue is a progressive framework for building user interfaces. This method requires Electron to read information about all files and / or folders in the project directory and pass it to Vue. Vue then processes the data as needed to generate a directory tree.

[0004] The existing file directory tree display method requires electron to read all file information and / or folder information, which results in a large amount of data to be read; Vue eliminates unnecessary information according to needs, resulting in a large amount of data to be processed, and the processing steps are complex, which has the disadvantage of low efficiency. Summary of the Invention

[0005] In view of this, the present application provides a method and system for displaying a file directory tree, which can reduce processing complexity and improve efficiency.

[0006] To solve the above problems, the technical solutions provided by this application are as follows:

[0007] This application provides a method for displaying a file directory tree, the method comprising:

[0008] When electron reads for the first time, it reads the first-level file information and / or folder information under the project path; electron sends the first-level file information and / or folder information to vue, so that vue generates a preliminary directory tree;

[0009] When electron reads the information subsequently, it reads the sub-file information and / or sub-folder information corresponding to the required information according to the requirements returned by vue;

[0010] Electron sends the read sub-file information and / or sub-folder information to Vue, so that Vue generates a complete directory tree.

[0011] Optionally, the first-level folder information includes: the expansion state and path of the first-level folder; wherein the expansion state is closed by default.

[0012] Optionally, the required reading information includes: the expansion state and path of the folder; wherein, Vue sets the expansion state of the folder to be expanded to expanded;

[0013] Read the information according to the requirements returned by Vue. The sub-file information and / or sub-folder information corresponding to the required information includes:

[0014] Electron reads the expansion status and path of the folder in the information as required, and reads the sub-file information and / or sub-folder information under the folder path whose expansion status is expanded.

[0015] Optionally, the required reading information includes: the path of the folder to be expanded;

[0016] The path of the folder to be expanded is obtained by Vue based on whether the folder needs to be expanded;

[0017] Read the information according to the requirements returned by Vue. The sub-file information and / or sub-folder information corresponding to the required information includes:

[0018] Electron reads the sub-file information and / or sub-folder information under the path of the folder to be expanded.

[0019] Optionally, the folder to be expanded is a folder to be expanded triggered by Vue receiving a user.

[0020] This application also provides a system for displaying a file directory tree, including: a storage module, an electron module, and a vue module;

[0021] A storage module, used for storing file information and / or folder information;

[0022] The electron module is used to read the file information and / or folder information under the project path of the storage module; wherein, during the first reading, the electron module is used to read the file information and / or folder information of the first level under the project path; during subsequent reading, the electron module is used to read the information according to the requirements returned by the vue module, and read the sub-file information and / or sub-folder information corresponding to the required information;

[0023] The vue module is used to generate a preliminary directory tree based on the first-level file information and / or folder information sent by the electron module; return the required read information to the electron module; and generate a complete directory tree based on the sub-file information and / or sub-folder information sent by the electron module.

[0024] Optionally, the first-level folder information includes: the expansion state and path of the first-level folder; wherein the expansion state is closed by default.

[0025] Optionally, the required reading information includes: the expansion state and path of the folder; wherein the vue module is specifically used to set the expansion state of the folder to be expanded to expanded;

[0026] The electron module is specifically used to read the sub-file information and / or sub-folder information under the folder path whose expansion state is expanded according to the expansion state and path of the folder.

[0027] Optionally, the required reading information includes: a path of a folder to be expanded; wherein the vue module is specifically used to filter out the path of the folder to be expanded according to whether the folder needs to be expanded;

[0028] The electron module is specifically used to read the sub-file information and / or sub-folder information under the path of the folder to be expanded.

[0029] Optionally, the folder to be expanded is a folder to be expanded triggered by Vue receiving a user.

[0030] It can be seen that this application has the following beneficial effects:

[0031] This application provides a method for displaying a file directory tree. During the first read, Electron only reads the first-level file and / or folder information. Vue then generates a preliminary directory tree based on the first-level file / folder information. During subsequent reads, Electron reads the information based on the requirements returned by Vue, only reading the required sub-file and / or sub-folder information, and passing it to Vue, which then generates a complete directory tree. This method eliminates the need for Electron to read all file and / or folder information, reducing the reading and transmission of unnecessary redundant information. It also eliminates the need for Vue to perform large-scale processing of the received information, reducing complexity and improving efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0032] Figure 1 A flowchart of a method for displaying a file directory tree provided in an embodiment of the present application;

[0033] Figure 2A flowchart of another method for displaying a file directory tree provided in an embodiment of the present application;

[0034] Figure 3 A flowchart of another method for displaying a file directory tree provided in an embodiment of the present application;

[0035] Figure 4 A schematic diagram of a system for displaying a file directory tree provided in an embodiment of the present application. DETAILED DESCRIPTION

[0036] In order to enable those skilled in the art to better understand and implement the technical solution of the present application, the specific implementation methods of the present application are introduced below.

[0037] Traditionally, Electron reads all file and / or folder information in the project directory and sends it to Vue. Because some folders aren't expanded in the directory tree, Vue needs to remove the unexpanded sub-file and / or sub-folder information, adding unnecessary workload. Furthermore, Vue isn't well suited to handling complex data, resulting in inefficient directory tree display.

[0038] In the technical solution provided by this application, electron does not need to read all file information and / or folder information, but only reads the required sub-file information and / or sub-folder information as needed. This reduces unnecessary reading and also reduces the amount of information that Vue needs to process, thereby improving efficiency and user experience.

[0039] The embodiments of the present application are described in detail below with reference to the accompanying drawings and specific implementation methods.

[0040] See also Figure 1 , which is a flowchart of a method for displaying a file directory tree provided in an embodiment of the present application.

[0041] The method includes:

[0042] S101: Determine whether electron is read for the first time. If yes, execute step S102; if not, execute step S104.

[0043] S102: When electron reads for the first time, it reads the file information and / or folder information of the first level under the project path.

[0044] When Electron reads for the first time, it only reads the first-level file information and / or folder information with the least amount of information, minimizing unnecessary reading by Electron.

[0045] S103: Electron sends the first-level file information and / or folder information to Vue, and Vue generates a preliminary directory tree.

[0046] When reading for the first time, Vue itself does not have any file information and / or folder information. Electron needs to provide Vue with some file information and / or folder information so that Vue can return the required reading information.

[0047] S104: Electron reads the information according to the requirements returned by Vue during subsequent reading, and reads the sub-file information and / or sub-folder information corresponding to the required information.

[0048] The required read information returned by Vue can be obtained based on user actions, such as user triggers or clicks. Electron reads information based on demand, only reading the required sub-file information and / or sub-folder information, skipping unnecessary information, reducing the amount of information Electron reads and improving efficiency.

[0049] S105: Electron sends the read sub-file information and / or sub-folder information to Vue, and Vue generates a complete directory tree.

[0050] The Vue side directly generates a complete directory tree based on the sub-file information and / or sub-folder information read by Electron, without the need to remove unnecessary sub-file information and / or sub-folder information, which reduces the workload of Vue and improves efficiency.

[0051] The present application provides a method for displaying a file directory tree. When Electron first reads a file, it only reads the first-level file information and / or folder information. Vue generates a preliminary directory tree based on the first-level file / folder information. When Electron subsequently reads a file, it reads the information based on the requirements returned by Vue, only reading the required sub-file information and / or sub-folder information, and passes it to Vue, which then generates a complete directory tree. This method eliminates the need for Electron to read all file information and / or folder information, reducing the reading and transmission of unnecessary redundant information at the source. It also eliminates the need for Vue to perform large-scale processing of the received information, reducing complexity and improving efficiency.

[0052] In the above embodiment, there are multiple ways to implement the demand reading information returned by vue, which are introduced in detail below.

[0053] The required reading information may at least include the expansion status and path of the folder.

[0054] See also Figure 2, which is a flowchart of another method for displaying a file directory tree provided in an embodiment of the present application.

[0055] The method includes:

[0056] S201: Determine whether electron is read for the first time. If yes, execute step S202; if not, execute step S204.

[0057] S202: When electron reads for the first time, it reads the file information and / or folder information of the first level under the project path. By default, the expansion state of all folders in the first level is closed.

[0058] S203: Electron sends the first-level file information and / or folder information to Vue, and Vue generates a preliminary directory tree.

[0059] S204: Vue sets the expansion state of the folder to be expanded to expanded, and returns the expansion state and path of the folder to electron.

[0060] Vue tells Electron which folders are to be expanded by returning the folder's expanded state. Vue does not perform any other operations, which reduces Vue's processing work, so Electron is required to filter out the folders to be expanded.

[0061] S205: Electron determines whether the folder expansion status is expanded. If yes, execute step S206; if not, execute step S207.

[0062] When the folder expansion state is expanded, it means that the folder is a folder to be expanded, and electron needs to read the sub-file information and / or sub-folder information therein; when the folder expansion state is closed, it means that the folder does not need to be expanded, and electron does not read the sub-file information and / or sub-folder information therein, thereby reducing the amount of information read by electron.

[0063] S206: Electron reads the sub-file information and / or sub-folder information under the folder path whose expansion state is expanded.

[0064] S207: Determine whether all folders in the information returned by vue have been completed. If so, execute step S208; if not, return to step S205 to determine the next folder.

[0065] S208: Electron sends the read sub-file information and / or sub-folder information to Vue, and Vue generates a complete directory tree.

[0066] The required reading information may also include at least the path of the folder to be expanded.

[0067] See also Figure 3 , this figure is a flowchart of another method for displaying a file directory tree provided in an embodiment of the present application.

[0068] The method includes:

[0069] S301: Determine whether electron is read for the first time. If yes, execute step S302; if not, execute step S304.

[0070] S302: When electron reads for the first time, it reads the file information and / or folder information of the first level under the project path. By default, the expansion state of all folders in the first level is closed.

[0071] S303: Electron sends the first-level file information and / or folder information to Vue, and Vue generates a preliminary directory tree.

[0072] S304: Vue obtains the path of the folder to be expanded based on whether the folder needs to be expanded and returns it to electron.

[0073] Vue filters whether to expand and only returns the paths of the folders to be expanded, telling Electron that only the folders under these paths need to be expanded for further reading.

[0074] S305: Electron reads the sub-file information and / or sub-folder information under the folder path to be expanded.

[0075] Since the filtering step is performed by Vue, Electron directly reads the sub-file information and / or sub-folder information under the returned folder path to be expanded, reducing the workload of Electron.

[0076] The function can return multiple folder paths to be expanded at once, or it can return the path of the folder to be expanded corresponding to each trigger or click. In practice, because the software processes information much faster than user actions, it usually returns the path of one folder to be expanded at a time.

[0077] S306: Electron sends the read sub-file information and / or sub-folder information to Vue, and Vue generates a complete directory tree.

[0078] Based on the method for displaying a file directory tree provided in the above embodiment, the embodiment of the present application also provides a system for displaying a file directory tree, which is described in detail below with reference to the accompanying drawings.

[0079] See also Figure 4 , which is a schematic diagram of a system for displaying a file directory tree provided in an embodiment of the present application.

[0080] The file directory tree display system provided in this application includes: a storage module 100, an electron module 200 and a vue module 300.

[0081] The storage module 100 is used to store file information and / or folder information.

[0082] The electron module 200 is used to read the file information and / or folder information under the project path of the storage module 100; wherein, during the first reading, the electron module 200 is used to read the file information and / or folder information of the first level under the project path; during subsequent reading, the electron module 200 is used to read the information according to the requirements returned by the vue module, and read the sub-file information and / or sub-folder information corresponding to the required reading information.

[0083] The electron module 200 does not read all the file information and / or folder information under the project path, but only reads the first-level file information and / or folder information that needs to be expanded, which reduces the amount of information read by electron and improves efficiency.

[0084] The vue module 300 is used to generate a preliminary directory tree based on the first-level file information and / or folder information sent by the electron module 200; return the required reading information to the electron module 200; and generate a complete directory tree based on the sub-file information and / or sub-folder information sent by the electron module 200.

[0085] The vue module 300 does not perform a large amount of information processing. It only returns the corresponding required reading information as needed, and directly generates a directory tree based on the information transmitted by the electron module 200, which reduces the amount of data processed by vue and improves efficiency.

[0086] Among them, when the information required to be read includes at least the expansion status and path of the folder, the vue module is specifically used to set the expansion status of the folder to be expanded to expanded; the electron module is specifically used to read the sub-file information and / or sub-folder information under the folder path with the expansion status as expanded according to the expansion status and path of the folder.

[0087] When the required read information contains at least the path of the folder to be expanded, the vue module is specifically used to filter out the path of the folder to be expanded according to whether the folder needs to be expanded; the electron module is specifically used to read the sub-file information and / or sub-folder information under the path of the folder to be expanded.

[0088] The folder to be expanded may be triggered or clicked by the user.

[0089] The system for displaying a file directory tree provided by the embodiment of the present application comprises a storage module for storing file information and / or folder information; when the electron module is read for the first time, the electron module is used to read the file information and / or folder information of the first level under the project path; when reading subsequently, the electron module is used to read information according to the requirements returned by the vue module, and read the sub-file information and / or sub-folder information corresponding to the required reading information; the vue module is used to generate a preliminary directory tree based on the first-level file information and / or folder information sent by the electron module; return the required reading information to the electron module; and generate a complete directory tree based on the sub-file information and / or sub-folder information sent by the electron module. The system does not require the electron module to read all file information and / or folder information, thereby reducing the reading and transmission of unnecessary redundant information from the source; and does not require the vue module to perform large-scale processing of the received information, thereby reducing complexity and improving efficiency.

[0090] The above description of the disclosed embodiments is intended to enable one skilled in the art to implement or use the present application. Various modifications to these embodiments will be readily apparent to one skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present application. Therefore, the present application is not limited to the embodiments shown herein, but is intended to conform to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method for displaying a file directory tree, characterized in that: The method includes: When reading for the first time, electron reads the file information and / or folder information of the first level under the project path; the electron sends the file information and / or folder information of the first level to vue, so that the vue generates a preliminary directory tree; When the electron subsequently reads, it reads the sub-file information and / or sub-folder information corresponding to the required reading information according to the required reading information returned by the vue; The electron sends the read sub-file information and / or sub-folder information to the vue, so that the vue generates a complete directory tree; The first-level folder information includes: the expansion state and path of the first-level folder; wherein the expansion state is closed by default; The required reading information includes: the expansion state and path of the folder; wherein, the vue sets the expansion state of the folder to be expanded to expanded; The step of reading the information according to the requirement returned by the vue and reading the sub-file information and / or sub-folder information corresponding to the requirement reading information includes: The electron reads the expansion state and path of the folder in the information according to the demand, and reads the sub-file information and / or sub-folder information under the folder path whose expansion state is expanded.

2. The method according to claim 1, characterized in that The required reading information includes: the path of the folder to be expanded; The path of the folder to be expanded is obtained by the Vue based on whether the folder needs to be expanded; The step of reading the information according to the requirement returned by the vue and reading the sub-file information and / or sub-folder information corresponding to the requirement reading information includes: The electron reads the sub-file information and / or sub-folder information under the path of the folder to be expanded.

3. The method according to claim 1 or 2, characterized in that The folder to be expanded is the folder to be expanded triggered by the user when the Vue is received.

4. A system for displaying a file directory tree, characterized in that: The system includes: storage module, electron module and vue module; The storage module is used to store file information and / or folder information; The electron module is used to read the file information and / or folder information under the project path of the storage module; wherein, during the first reading, the electron module is used to read the file information and / or folder information of the first level under the project path; during subsequent reading, the electron module is used to read the information according to the requirements returned by the vue module, and read the sub-file information and / or sub-folder information corresponding to the required information; The vue module is used to generate a preliminary directory tree based on the file information and / or folder information of the first level sent by the electron module; return the required reading information to the electron module; and generate a complete directory tree based on the sub-file information and / or sub-folder information sent by the electron module; The first-level folder information includes: the expansion state and path of the first-level folder; wherein the expansion state is closed by default; The required reading information includes: the expansion state and path of the folder; wherein the vue module is specifically used to set the expansion state of the folder to be expanded to expanded; The electron module is specifically used to read the sub-file information and / or sub-folder information under the folder path with the expansion state being expanded according to the expansion state and path of the folder.

5. The system according to claim 4, characterized in that The demand reading information includes: the path of the folder to be expanded; wherein the vue module is specifically used to filter out the path of the folder to be expanded according to whether the folder needs to be expanded; The electron module is specifically used to read the sub-file information and / or sub-folder information under the path of the folder to be expanded.

6. The system according to claim 4 or 5, characterized in that The folder to be expanded is the folder to be expanded triggered by the user when the Vue is received.

Images