Web tree component automatic generation method and device, electronic equipment and storage medium

Abstract

The application provides a web tree component automatic generation method and device, electronic equipment and a storage medium, wherein the web tree component automatic generation method comprises: obtaining original data and first configuration information of to-be-rendered data, and generating a virtual DOM node; generating a virtual DOM node configuration template based on the original data and the first configuration information; obtaining second configuration information; the second configuration information comprises node lazy loading configuration information and / or node paging configuration information; adding the second configuration information to the virtual DOM node configuration template to obtain an updated virtual DOM node configuration template; and generating a web tree component based on the updated virtual DOM node configuration template. The above-mentioned web tree component automatic generation method can realize node paging loading at the built-in code level, greatly improves the generation efficiency of the tree component, and further improves the data rendering efficiency.

Description

Technical Field

[0001] This application relates to the field of computer technology, and more specifically, to a method, apparatus, electronic device, and storage medium for automatically generating web tree components. Background Technology

[0002] The existing tree component uses a one-time loading method, also known as lazy loading, to load a large amount of data to populate the nodes. However, when there are many child nodes, although lazy loading can quickly load the parent node, it is slow when loading the child nodes. Summary of the Invention

[0003] The purpose of this application is to provide a method, apparatus, electronic device and storage medium for automatically generating web tree components, so as to improve the loading speed of child nodes.

[0004] In a first aspect, embodiments of this application provide a method for automatically generating a web tree component, comprising: obtaining original data of data to be rendered and first configuration information, and generating virtual DOM nodes; generating a virtual DOM node configuration template based on the original data and the first configuration information; obtaining second configuration information; the second configuration information including node lazy loading configuration information and / or node pagination configuration information; adding the second configuration information to the virtual DOM node configuration template to obtain an updated virtual DOM node configuration template; and generating a web tree component based on the updated virtual DOM node configuration template.

[0005] In the implementation of the above scheme, the second configuration information is used to configure whether nodes are lazy-loaded and whether node pagination is performed. This allows the web tree component to simultaneously implement lazy loading and node pagination loading at the built-in code level, improving the node rendering and loading speed. At the same time, compared with the existing technology that requires users to re-edit the code to implement pagination loading, the above-mentioned automatic generation method of web tree component can implement node pagination loading at the built-in code level, which greatly improves the generation efficiency of tree component and thus improves the efficiency of data rendering.

[0006] In one implementation of the first aspect, generating a virtual DOM node configuration template based on the original data and the first configuration information includes: obtaining node name information and node type information based on the first configuration information; generating a virtual DOM node base template based on the node name information, the node type information, and the original data; adding other configuration information from the first configuration information, excluding the node name information and the node type information, to the virtual DOM node base template to generate the virtual DOM node configuration template.

[0007] In the implementation of the above solution, by automatically generating virtual DOM node configuration templates, a foundation is provided for users to customize web tree components. Users can modify the virtual DOM node configuration templates through subsequent second configuration information to achieve flexible configuration of web tree components, thereby improving the scalability of the above-mentioned automatic generation method of web tree components.

[0008] In one implementation of the first aspect, adding the second configuration information to the virtual DOM node configuration template includes: obtaining a configuration field and the name of the node to be configured corresponding to the configuration field based on the second configuration information; finding the node to be configured based on the name of the node to be configured; and adding the configuration field to the virtual DOM node configuration template of the node to be configured.

[0009] In the implementation of the above solution, users can set the second configuration information to perform operations on nodes, including pagination and lazy loading, thereby enabling flexible configuration of the web tree component, greatly improving the generation efficiency of the tree component, and thus improving the efficiency of data rendering.

[0010] In one implementation of the first aspect, the node pagination configuration information includes: whether the node has enabled pagination configuration information, and the number of pages per page configuration information after the node has enabled pagination.

[0011] In the implementation of the above scheme, users can implement pagination operations on the parent node by setting the second configuration information, and can flexibly configure the number of child nodes loaded on each page, realizing flexible configuration of the web tree component and improving the scalability of the above web tree component automatic generation method; at the same time, lazy loading and pagination loading can be implemented simultaneously, which greatly improves the generation efficiency of the tree component, and thus improves the efficiency of data rendering.

[0012] In one implementation of the first aspect, both the first configuration information and the second configuration information are configuration information in JSON format.

[0013] In the implementation of the above solution, the use of JSON format configuration information enables efficient data transmission, simplifies the business logic of web tree component generation, improves the generation efficiency of web tree component, and thus improves web page rendering efficiency.

[0014] In one implementation of the first aspect, the second configuration information is custom configuration information.

[0015] In the implementation of the above solution, users can customize configuration information to flexibly configure the web tree component and enable autonomous expansion of the web tree component, thus improving the scalability of the above-mentioned automatic web tree component generation method. At the same time, the above-mentioned automatic web tree component generation method uses configuration fields to control the web tree component. Users do not need to re-code the code to expand the web tree component. They only need to modify the configuration fields of the corresponding node to control the node. This simplifies the business logic of web tree component generation, greatly improves the generation efficiency of web tree component, and thus improves the rendering efficiency of web pages.

[0016] Secondly, embodiments of this application provide a webpage rendering method, including: obtaining a webpage tree component using the webpage tree component automatic generation method provided by the first aspect or any possible implementation of the first aspect; and rendering the webpage based on the webpage tree component.

[0017] In the implementation of the above solution, an automatic web tree component generation method that can perform lazy loading and pagination loading simultaneously is adopted, which enables the generation of web tree components more efficiently, thereby improving the efficiency of data rendering.

[0018] Thirdly, embodiments of this application provide a web tree component automatic generation device, comprising:

[0019] The original data and first configuration information acquisition module is used to acquire the original data and first configuration information of the data to be rendered;

[0020] The virtual DOM node generation module is used to generate virtual DOM nodes;

[0021] A virtual DOM node configuration template generation module is used to generate a virtual DOM node configuration template based on the original data and the first configuration information;

[0022] The second configuration information acquisition module is used to acquire second configuration information; the second configuration information includes whether the node is lazy-loaded and / or whether the node is paginated.

[0023] The second configuration information loading module is used to add the second configuration information to the virtual DOM node configuration template;

[0024] The Web tree component generation module is used to generate web tree components based on the virtual DOM node configuration template.

[0025] Fourthly, embodiments of this application provide a computer-readable storage medium storing computer program instructions, which, when read and executed by a processor, perform the method provided in the first aspect or any possible implementation thereof.

[0026] Fifthly, embodiments of this application provide an electronic device, including: a memory and a processor, wherein the memory stores computer program instructions, and the computer program instructions are read and executed by the processor to perform the method provided in the first aspect or any possible implementation of the first aspect.

[0027] Other features and advantages of this application will be set forth in the following description and will be apparent in part from the description or may be learned by practicing embodiments of this application. The objectives and other advantages of this application may be realized and obtained by means of the structures particularly pointed out in the written description, claims, and drawings. Attached Figure Description

[0028] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the embodiments of this application will be briefly introduced below. It should be understood that the following drawings only show some embodiments of this application and should not be regarded as a limitation of the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0029] Figure 1 A flowchart illustrating the automatic generation method for web tree components provided in this application embodiment;

[0030] Figure 2 A schematic diagram of a web tree component for Example 1, provided in this application embodiment, of a web tree generated by the web tree component automatic generation method;

[0031] Figure 3 A schematic diagram of a web tree component for Example 2, provided in this application embodiment, of a web tree generated by the web tree component automatic generation method;

[0032] Figure 4 A schematic diagram of the web tree component in Example 3, provided as an embodiment of this application, showing the web tree generated by the web tree component automatic generation method.

[0033] Figure 5 This is a schematic diagram of the structure of the web tree component automatic generation device provided in the embodiments of this application;

[0034] Figure 6 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Detailed Implementation

[0035] The technical solutions of the embodiments of this application will be described below with reference to the accompanying drawings. The following embodiments are only used to more clearly illustrate the technical solutions of this application, and are therefore merely examples and should not be used to limit the scope of protection of this application.

[0036] Unless otherwise defined, 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 pertains; the terminology used herein is for the purpose of describing particular embodiments only and is not intended to limit the application; the terms “comprising” and “having”, and any variations thereof, in the specification, claims, and foregoing description of the drawings are intended to cover non-exclusive inclusion.

[0037] In this document, the term "embodiment" means that a particular feature, structure, or characteristic described in connection with an embodiment may be included in at least one embodiment of this application. The appearance of this phrase in various places throughout the specification does not necessarily refer to the same embodiment, nor is it a separate or alternative embodiment mutually exclusive with other embodiments. It will be explicitly and implicitly understood by those skilled in the art that the embodiments described herein can be combined with other embodiments.

[0038] In the description of the embodiments in this application, the term "and / or" is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, and B existing alone. Additionally, the character " / " in this document generally indicates that the preceding and following related objects have an "or" relationship.

[0039] Please see Figure 1 This application provides a method for automatically generating a web tree component, including:

[0040] Step S110: Obtain the original data and first configuration information of the data to be rendered, and generate virtual DOM nodes;

[0041] Step S120: Generate a virtual DOM node configuration template based on the original data and the first configuration information;

[0042] Step S130: Obtain the second configuration information;

[0043] The second configuration information includes node lazy loading configuration information and / or node pagination configuration information;

[0044] Step S140: Add the second configuration information to the virtual DOM node configuration template and obtain the updated virtual DOM node configuration template;

[0045] Step S150: Generate the web tree component based on the updated virtual DOM node configuration template.

[0046] In the implementation of the above scheme, the second configuration information is used to configure whether nodes are lazy-loaded and whether node pagination is performed. This allows the web tree component to simultaneously implement lazy loading and node pagination loading at the built-in code level, improving the node rendering and loading speed. At the same time, compared with the existing technology that requires users to re-edit the code to implement pagination loading, the above-mentioned automatic generation method of web tree component can implement node pagination loading at the built-in code level, which greatly improves the generation efficiency of tree component and thus improves the efficiency of data rendering.

[0047] The following sections will provide a detailed description of steps S110 to S150:

[0048] First, a detailed explanation of step S110 is provided: The data to be rendered in step S110 is the data that needs to be rendered into the webpage. In the Virtual DOM (Document Object Model) technology, the data to be rendered needs to first construct a virtual DOM tree, then compare the newly constructed virtual DOM tree with the old virtual DOM tree abstracted from the current webpage content, obtain the differences between the new virtual DOM tree and the old virtual DOM tree, and finally render the difference data to the webpage, thereby completing the webpage rendering.

[0049] The aforementioned virtual DOM node refers to a node in the virtual DOM tree. In this embodiment, after obtaining the data to be rendered, the data to be rendered is transformed into target data of the virtual DOM, including original data (data), virtual DOM node (domObj), and first configuration information (opt1). The original data (data) can be understood as data information without configuration fields, while the first configuration information (opt1) can be understood as the configuration fields of the original data, such as node name segment id, node type field type, etc. The node name id, node type field type, etc., can also be referred to as the node's attribute fields. A basic virtual DOM node can be constructed using the original data (data) and the first configuration information (opt1) containing the aforementioned attribute fields. domObj is the node identifier field set after virtual transformation to facilitate quick retrieval of the virtual DOM node.

[0050] It should be noted that the first configuration information opt1 can be obtained from the data to be rendered by field matching, and the data to be rendered excluding the first configuration information opt1 is the original data data. For specific field matching methods, please refer to existing technologies.

[0051] As an optional implementation of the above-mentioned automatic web tree component generation method, step S120, which generates a virtual DOM node configuration template based on the original data and the first configuration information, includes: obtaining node name information and node type information based on the first configuration information; generating a virtual DOM node basic template based on the node name information, node type information, and the original data; and adding the other configuration information from the first configuration information, excluding the node name information and node type information, to the virtual DOM node basic template to generate the virtual DOM node configuration template. For example, the virtual DOM node basic template generated based on the original data `data` and the first configuration information `opt1` is as follows:

[0052] {

[0053] "id":"TOPsec_tree",

[0054] "type":"NGTree"

[0055] “data”:[]

[0056] }

[0057] The `id` in the above virtual DOM node configuration template is the same as the `id` field of the node name in the first configuration information `opt1`, and the node name of the above virtual DOM node is `TOPsec_tree`. The `type` in the above virtual DOM node configuration template is the same as the `type` field of the node type in the first configuration information `opt1`, and the node type of the above virtual DOM node is `NGTree`. The `data` in the above virtual DOM node configuration template is the original data obtained from the data to be rendered.

[0058] It should be noted that the aforementioned virtual DOM node base template can be obtained through the factory pattern.

[0059] After generating the above virtual DOM node base template, add the configuration fields other than the node name field id and the node type field type from the first configuration information opt1 to the above virtual DOM node base template to generate the virtual DOM node configuration template.

[0060] In the implementation of the above solution, by automatically generating virtual DOM node configuration templates, a foundation is provided for users to customize web tree components. Users can modify the virtual DOM node configuration templates through subsequent second configuration information to achieve flexible configuration of web tree components, thereby improving the scalability of the above-mentioned automatic generation method of web tree components.

[0061] It should be noted that, in addition to the node name (id) and node type (type) fields in the first configuration information (opt1), other configuration fields that may be included include:

[0062] (1) checkbox configuration field: Set the checkbox field to configure whether to set a checkbox for the current node;

[0063] (2) cascadeCheck configuration field: After setting a checkbox for a node, set the cascadeCheck field to configure whether to set a cascading operation for the checkbox. The cascading operation is as follows: if all the children are selected, the parent is selected; if the parent is selected, all the children are selected.

[0064] (3) The children configuration field is used to configure the child node information contained in the current node. Of course, if the current node does not contain any child nodes, the children configuration field can be empty.

[0065] (4) The `onExpandRequest` field is used to configure how child nodes are requested in the current stage. Of course, the `onExpandRequest` field can only be configured if the `children` field of the current node is not empty. By configuring the `onExpandRequest` field, lazy loading operations can be implemented for the current node.

[0066] Steps S130 and S140 are described in detail below: The second configuration information opt2 obtained in step S130 is user-input configuration information. After generating the virtual DOM node configuration template in step S120, the user can add custom configuration information based on the content in the virtual DOM node configuration template. The second configuration information opt2 may include node lazy loading configuration information and / or node pagination configuration information, wherein the node lazy loading configuration information is the onExpandRequest field configured for requesting child nodes mentioned above, and the node pagination configuration information includes:

[0067] (1) The isPaging configuration field is used to configure whether the current parent node enables pagination loading;

[0068] (2) The pageNumber configuration field is used to configure the number of child nodes loaded by the parent node in each page when pagination loading is enabled.

[0069] In the implementation of the above scheme, users can implement pagination operations on the parent node by setting the second configuration information, and can flexibly configure the number of child nodes loaded on each page, realizing flexible configuration of the web tree component and improving the scalability of the above web tree component automatic generation method; at the same time, lazy loading and pagination loading can be implemented simultaneously, which greatly improves the generation efficiency of the tree component, and thus improves the efficiency of data rendering.

[0070] As an optional implementation of the above-mentioned automatic web tree component generation method, step S140 adds the second configuration information to the virtual DOM node configuration template, including: obtaining configuration fields and the names of nodes to be configured corresponding to the configuration fields based on the second configuration information; finding the nodes to be configured based on the names of the nodes to be configured; and adding the configuration fields to the virtual DOM node configuration template of the nodes to be configured. For example, in the second configuration information input by the user, there is a pagination loading field for a parent node, including the fields isPaging:true and pageNumber:200. After obtaining these two fields, the above-mentioned automatic web tree component generation method finds the parent node that needs to perform pagination loading by searching for the parent node name, and then adds the fields isPaging:true and pageNumber:200 to the virtual DOM node configuration template of that parent node. The field isPaging:true indicates that pagination loading is enabled, and the field pageNumber:200 indicates that the number of child nodes loaded in each page is 200.

[0071] In the implementation of the above solution, users can set the second configuration information to perform operations on nodes, including pagination and lazy loading, thereby enabling flexible configuration of the web tree component, greatly improving the generation efficiency of the tree component, and thus improving the efficiency of data rendering.

[0072] As an optional implementation of the above-mentioned automatic generation method for web tree components, the second configuration information opt2 is user-defined configuration information. This user-defined configuration information is not limited to the above-mentioned checkbox configuration field, cascadeCheck configuration, onExpandRequest configuration field for requesting child nodes, isPaging field for whether pagination is enabled, and pageNumber configuration field for the number of child nodes loaded in each page. Other fields can also be set to achieve flexible configuration of the web tree component, such as request field related to requests, onBeforeInit field related to initialization, find field related to search, and onExpand field related to expanded nodes.

[0073] In the implementation of the above solution, users can customize configuration information to flexibly configure the web tree component and enable autonomous expansion of the web tree component, thus improving the scalability of the above-mentioned automatic web tree component generation method. At the same time, the above-mentioned automatic web tree component generation method uses configuration fields to control the web tree component. Users do not need to re-code the code to expand the web tree component. They only need to modify the configuration fields of the corresponding node to control the node. This simplifies the business logic of web tree component generation, greatly improves the generation efficiency of web tree component, and thus improves the rendering efficiency of web pages.

[0074] The following details step S150: Step S150 generates a web tree component based on the updated virtual DOM node configuration template. Based on the similar descriptions of steps S110 to S140 above, it can be understood that the virtual DOM node configuration template contains several configuration fields. The virtual DOM nodes defined by these configuration fields can be visually displayed. For example: Please refer to... Figure 2 If the configuration field contains a checkbox field, a checkbox will be set before the node in the visualization. If the configuration field contains an `isPaging` field to indicate whether paging is enabled and a `pageNumber` field to specify the number of child nodes loaded per page, the child nodes contained in the parent node will be displayed in paginated form in the visualization, with the number of pages set by the `pageNumber` field. Figure 2 In the example shown, a button for controlling pagination has also been added to the web tree component. This button includes an icon, node name, and a "next page" button, thus enabling visual control of pagination loading. Step S150, generating the web tree component, is essentially the process of visualizing each virtual DOM node based on the virtual DOM node configuration template.

[0075] As an optional implementation of the above-mentioned automatic generation method for web tree components, both the first configuration information and the second configuration information are configuration information in JSON (JavaScript Object Notation) format. JSON format is a lightweight data exchange format that is easy to read and write, and also easy for machines to parse and generate.

[0076] In the implementation of the above solution, the use of JSON format configuration information enables efficient data transmission, simplifies the business logic of web tree component generation, improves the generation efficiency of web tree component, and thus improves web page rendering efficiency.

[0077] This application provides three examples of web trees generated using the above-described web tree component automatic generation method. The descriptions of the three examples are as follows:

[0078] I. Example 1

[0079] Please see Figure 2 In Example 1, the Web tree component is configured with the default settings. The newly added nodes based on the data to be rendered, i.e., M0 to M9 added from a1, are loaded using lazy loading.

[0080] The configuration method for using lazy loading is as follows:

[0081] (1) Configure the onExpandRequest:function() field, which contains the address of the request and the method of the request. After the above web tree component automatically generates data, it automatically splices the data to be rendered into child nodes. Compared with the existing technology that requires re-editing the code to implement lazy loading of data, the above web tree component automatically generates data without writing additional methods to process data. It only needs to configure the corresponding information, which greatly simplifies the business logic.

[0082] (2) Configure the children field of the parent node to indicate that this node has child nodes.

[0083] II. Example 2

[0084] Please see Figure 3 Example 2 implements pagination based on Example 1. In addition to the fields configured in Example 2, it adds the `isPaging` and `pageNumber` fields, and also adds a button to control access to the next page. The button information includes an icon, a node, and the name of the next page. When the user clicks a node, the node information in the button controlling access to the next page is adjusted to the name of the clicked node.

[0085] III. Example 3

[0086] Please see Figure 4 Example 3 illustrates the handling of the situation in Example 2 where a node has no child nodes or all child nodes have completed their data requests. When the node clicked by the user has no child nodes, or all child nodes of that node have completed their data requests, the node information in the "Next Page" button is adjusted to the name of the node clicked by the user, but the "Next Page" button is disabled.

[0087] It should be noted that the three examples above demonstrate some of the functionality of the automatic web tree component generation method, not all of it.

[0088] The above-mentioned automatic generation method for web tree components can be applied to web page rendering scenarios. For this application scenario, this application provides a web page rendering method, including: obtaining a web tree component using the above-mentioned automatic generation method for web tree components; and rendering data on the web page based on the web tree component.

[0089] It should be noted that the method for rendering webpage data based on the web tree component is as follows:

[0090] The difference between the web tree component obtained by the above-mentioned automatic web tree component generation method and the web tree abstracted for the web page is obtained;

[0091] Update the web tree abstracted from the web page based on the differences;

[0092] The webpage is rendered based on the updated web tree abstracted from the webpage.

[0093] It should be noted that the diff algorithm can be used to obtain the differences between web trees, and the patch algorithm can be used to update the web tree abstracted from web pages. For details on the diff and patch algorithms, please refer to existing technologies.

[0094] In the implementation of the above solution, an automatic web tree component generation method that can perform lazy loading and pagination loading simultaneously is adopted, which enables the generation of web tree components more efficiently, thereby improving the efficiency of data rendering.

[0095] Please see Figure 5 Based on the same technical concept as the above-mentioned automatic web tree component generation method, this application embodiment also provides a web tree component automatic generation device 200, including:

[0096] The original data and first configuration information acquisition module 210 is used to acquire the original data and first configuration information of the data to be rendered;

[0097] Virtual DOM node generation module 220 is used to generate virtual DOM nodes;

[0098] The virtual DOM node configuration template generation module 230 is used to generate a virtual DOM node configuration template based on the original data and the first configuration information.

[0099] The second configuration information acquisition module 240 is used to acquire second configuration information; the second configuration information includes whether the node is lazy-loaded and / or whether the node is paginated.

[0100] The second configuration information loading module 250 is used to add the second configuration information to the virtual DOM node configuration template;

[0101] Web tree component generation module 260 is used to generate web tree components based on the virtual DOM node configuration template.

[0102] In the implementation of the above scheme, the second configuration information obtained by the second configuration information acquisition module is used to configure whether the node is lazy-loaded and whether node pagination is performed. This allows the web tree component to implement lazy loading and node pagination loading at the built-in code level, improving the node rendering and loading speed. At the same time, the above-mentioned web tree component automatic generation device can implement node pagination loading at the built-in code level, which greatly improves the generation efficiency of the tree component and thus improves the data rendering efficiency.

[0103] As an optional implementation of the above-mentioned web tree component automatic generation device, the virtual DOM node configuration template generation module 230 generates a virtual DOM node configuration template based on the original data and the first configuration information, including: obtaining node name information and node type information based on the first configuration information; generating a virtual DOM node basic template based on the node name information, the node type information and the original data; adding other configuration information from the first configuration information other than the node name information and the node type information to the virtual DOM node basic template to generate the virtual DOM node configuration template.

[0104] In the implementation of the above scheme, by automatically generating virtual DOM node configuration templates, a foundation is provided for users to customize web tree components. Users can modify the virtual DOM node configuration templates through subsequent second configuration information to achieve flexible configuration of web tree components, thereby improving the scalability of the above-mentioned web tree component automatic generation device.

[0105] As an optional implementation of the above-mentioned web tree component automatic generation device, the second configuration information loading module 250 adds the second configuration information to the virtual DOM node configuration template, including: obtaining configuration fields and the names of nodes to be configured corresponding to the configuration fields based on the second configuration information; finding the nodes to be configured based on the names of the nodes to be configured; and adding the configuration fields to the virtual DOM node configuration template of the nodes to be configured.

[0106] In the implementation of the above scheme, users can set the second configuration information to perform operations on nodes, including pagination and lazy loading, thereby enabling flexible configuration of the web tree component and greatly improving the web tree generation efficiency of the above-mentioned web tree component automatic generation device.

[0107] As an optional implementation of the above-mentioned automatic web tree component generation device, the node pagination configuration information includes: whether the node has pagination enabled configuration information, and the number of pages per node after pagination is enabled.

[0108] In the implementation of the above scheme, users can implement pagination operations on parent nodes by setting the second configuration information, and can flexibly configure the number of child nodes loaded on each page, thereby realizing flexible configuration of the web tree component and improving the scalability of the above-mentioned web tree component automatic generation device; at the same time, lazy loading and pagination loading can be implemented simultaneously, which greatly improves the generation efficiency of tree components and thus improves the efficiency of data rendering.

[0109] As an optional implementation of the above-mentioned automatic web tree component generation device, both the first configuration information and the second configuration information are configuration information in JSON format. JSON format is a lightweight data exchange format that is easy to read and write, and also easy for machines to parse and generate.

[0110] In the implementation of the above solution, the use of JSON format configuration information enables efficient data transmission, simplifies the business logic of web tree component generation, improves the generation efficiency of web tree component, and thus improves web page rendering efficiency.

[0111] As an optional implementation of the above-mentioned automatic web tree component generation device, the second configuration information is custom configuration information. This custom configuration information is not limited to the above-mentioned checkbox configuration field, cascadeCheck configuration, field request child node configuration field onExpandRequest, whether paging is enabled field isPaging field, and pageNumber configuration field for the number of child nodes loaded in each page. Other fields can also be set to achieve flexible configuration of the web tree component, such as the request field related to requests, the onBeforeInit field related to initialization, the find field related to search, and the onExpand field related to expanded nodes.

[0112] In the implementation of the above solution, users can customize configuration information to flexibly configure the web tree component and enable autonomous expansion of the web tree component, thereby improving the scalability of the above-mentioned automatic web tree component generation device. At the same time, the above-mentioned automatic web tree component generation device uses configuration fields to control the web tree component. Users do not need to re-encode code to expand the web tree component; they only need to modify the configuration fields of the corresponding node to control that node. This simplifies the business logic of web tree component generation, greatly improves the generation efficiency of web tree components, and thus improves the rendering efficiency of web pages.

[0113] Figure 6 This is a schematic diagram of an electronic device provided in an embodiment of this application. (Refer to...) Figure 6 The electronic device 300 includes a processor 310, a memory 320, and a communication interface 330. These components are interconnected and communicate with each other via a communication bus 340 and / or other forms of connection mechanism (not shown).

[0114] The memory 320 includes one or more (only one is shown in the figure), which may be, but is not limited to, Random Access Memory (RAM), Read Only Memory (ROM), Programmable Read-Only Memory (PROM), Erasable Programmable Read-Only Memory (EPROM), Electrically Erasable Programmable Read-Only Memory (EEPROM), etc. The processor 310 and other possible components may access the memory 320 to read and / or write data therein.

[0115] Processor 310 includes one or more (only one is shown in the figure), which can be an integrated circuit chip with signal processing capabilities. The processor 310 described above can be a general-purpose processor, including a central processing unit (CPU), a microcontroller unit (MCU), a network processor (NP), or other conventional processors; it can also be a special-purpose processor, including a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components.

[0116] Communication interface 330 includes one or more (only one is shown in the figure) and can be used to communicate directly or indirectly with other devices to exchange data. For example, communication interface 330 can be an Ethernet interface; it can be a mobile communication network interface, such as an interface for 3G, 4G, or 5G networks; or it can be other types of interfaces with data transmission and reception functions.

[0117] One or more computer program instructions may be stored in the memory 320, and the processor 310 may read and run these computer program instructions to implement the web tree component automatic generation method provided in the embodiments of this application and other desired functions.

[0118] Understandable. Figure 6 The structure shown is for illustrative purposes only; the electronic device 300 may also include components that are more advanced than those shown. Figure 6 The more or fewer components shown, or having the same Figure 6 The different configurations shown. Figure 6 The components shown can be implemented using hardware, software, or a combination thereof. For example, electronic device 300 can be a single server (or other device with computing power), a combination of multiple servers, a cluster of a large number of servers, etc., and can be either a physical device or a virtual device.

[0119] This application also provides a computer-readable storage medium storing computer program instructions. These instructions are read and executed by a computer's processor to perform the web tree component automatic generation method provided in this application. For example, the computer-readable storage medium can be implemented as follows: Figure 6 The memory 320 in the electronic device 300.

[0120] In the embodiments provided in this application, it should be understood that the disclosed apparatus and methods can be implemented in other ways. The apparatus embodiments described above are merely illustrative. For example, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. Furthermore, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Additionally, the displayed or discussed mutual couplings, direct couplings, or communication connections may be through some communication interfaces; indirect couplings or communication connections between devices or units may be electrical, mechanical, or other forms.

[0121] Furthermore, the units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0122] Furthermore, the functional modules in the various embodiments of this application can be integrated together to form an independent part, or each module can exist independently, or two or more modules can be integrated to form an independent part.

[0123] The above description is merely an embodiment of this application and is not intended to limit the scope of protection of this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of protection of this application.

Claims

1. A method for automatically generating a web tree component, characterized in that, include: Obtain the original data and initial configuration information of the data to be rendered, and generate virtual DOM nodes; Based on the original data and the first configuration information, a virtual DOM node configuration template is generated; wherein, the virtual DOM node configuration template is obtained through a factory pattern. Obtain the second configuration information; the second configuration information includes node lazy loading configuration information and / or node pagination configuration information; Add the second configuration information to the virtual DOM node configuration template to obtain the updated virtual DOM node configuration template; Based on the updated virtual DOM node configuration template, a web tree component is generated; The step of generating a virtual DOM node configuration template based on the original data and the first configuration information includes: obtaining node name information and node type information based on the first configuration information; generating a virtual DOM node basic template based on the node name information, the node type information, and the original data; and adding other configuration information from the first configuration information, except for the node name information and the node type information, to the virtual DOM node basic template to generate the virtual DOM node configuration template. Adding the second configuration information to the virtual DOM node configuration template includes: obtaining configuration fields and the names of nodes to be configured corresponding to the configuration fields based on the second configuration information; finding the nodes to be configured based on the names of the nodes to be configured; and adding the configuration fields to the virtual DOM node configuration template of the nodes to be configured.

2. The method for automatically generating web tree components according to claim 1, characterized in that, The node pagination configuration information includes: This section specifies whether pagination is enabled for a node, and the number of pages per page after enabling pagination.

3. The method for automatically generating web tree components according to claim 1, characterized in that, Both the first configuration information and the second configuration information are configuration information in JSON format.

4. The method for automatically generating a web tree component according to claim 1, characterized in that, The second configuration information is custom configuration information.

5. A webpage rendering method, characterized in that, include: A web tree component is obtained by using the automatic generation method for web tree components according to any one of claims 1 to 4. Based on the web tree component, the webpage is rendered.

6. A web tree component automatic generation device, characterized in that, include: The original data and first configuration information acquisition module is used to acquire the original data and first configuration information of the data to be rendered; The virtual DOM node generation module is used to generate virtual DOM nodes; A virtual DOM node configuration template generation module is used to generate a virtual DOM node configuration template based on the original data and the first configuration information; wherein, the virtual DOM node configuration template is obtained through a factory pattern. The second configuration information acquisition module is used to acquire second configuration information; the second configuration information includes whether the node is lazy-loaded and / or whether the node is paginated. The second configuration information loading module is used to add the second configuration information to the virtual DOM node configuration template; The Web tree component generation module is used to generate a web tree component based on the template configured by the virtual DOM node; The virtual DOM node configuration template generation module generates a virtual DOM node configuration template based on the original data and the first configuration information, including: obtaining node name information and node type information based on the first configuration information; generating a virtual DOM node basic template based on the node name information, the node type information and the original data; adding other configuration information from the first configuration information except for the node name information and the node type information to the virtual DOM node basic template to generate the virtual DOM node configuration template. The second configuration information loading module adds the second configuration information to the virtual DOM node configuration template, including: obtaining configuration fields and the names of nodes to be configured corresponding to the configuration fields based on the second configuration information; finding the nodes to be configured based on the names of the nodes to be configured; and adding the configuration fields to the virtual DOM node configuration template of the nodes to be configured.

7. An electronic device, characterized in that, include: Processor, memory, and bus, among which, The processor and the memory communicate with each other via the bus; The memory stores program instructions that can be executed by the processor, and the processor can execute the method as described in any one of claims 1 to 5 by calling the program instructions.

8. A non-transitory computer-readable storage medium, characterized in that, The non-transitory computer-readable storage medium stores computer instructions, which, when executed by a computer, cause the computer to perform the method as described in any one of claims 1 to 5.

Images