Web page table query construction method, query builder, device and medium

Abstract

The present invention provides a query construction method, table query builder, device and medium for a web page table, which is implemented based on the front-end framework of Vue, vxe‑table and antvX6, and encapsulates table nodes and field nodes thereof according to antvX6. Developers only need to drag the database table in the query data source display list to the canvas to configure the check lines, and at the same time configure some configuration information used for display for the selected field node in the table column configuration area and save it. Then, a page for table display can be quickly generated based on the configuration information and database query statements in the table usage page, and the configuration information can be called for modification afterwards, thereby adjusting the table columns and data displayed in the table. Since the table displayed on the page can be generated or modified by simply dragging and dropping the configuration, the response is fast, the development efficiency is high, and the coding threshold for developers is low, which greatly reduces the R&D cost.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a query construction method, query builder, device and medium for a webpage table. Background Art

[0002] With the development of the times, the continuous updating of front-end technology and frameworks, the functional interaction of tables in web pages has become more and more complex. Sometimes users have some customized requirements for the data display of some tables, as well as some requirements that tend to be report-oriented. This requires developers to implement some functionally similar table display pages or adjust the table display content by writing code, resulting in a lot of repetitive work and a waste of resources. Summary of the Invention

[0003] The technical problem to be solved by the present invention is to provide a query construction method, table query builder, device and medium for web page tables. The front-end framework is based on Vue, vxe-table and antvX6, and the table node and its field node are encapsulated according to antvX6. The developer only needs to drag the database table in the query data source display list to the canvas to check the connection configuration, and at the same time configure some configuration information used for display for the selected field node and save it. A page for table display can be quickly generated according to the configuration information and the database query statement generated when the configuration information is saved, or the table columns and data of the table display can be adjusted. Since the table for page display can be generated by simply dragging and dropping the configuration, it can quickly respond to user needs, greatly reduce the coding threshold for developers, thereby reducing R&D costs and improving development efficiency.

[0004] In a first aspect, the present invention provides a method for constructing a query for a webpage table. The method implements a query builder for a webpage table based on the front-end framework technology stack of VUE, antvX6, and vxe-table. The table query builder includes a data source display list, a table node field association selection area, and a table column configuration area. The data source display list lists multiple database tables, and the table node field association selection area includes a canvas. The method includes the following steps:

[0005] The table node generation process, that is, when a database table in the data source display list is dragged to the canvas, a table node will be generated and displayed on the canvas. Each table node corresponds to a webpage table. The table node includes at least one field node, wherein some field nodes are association nodes, and each field node corresponds to a field defined in the database table. When multiple table nodes are generated in the canvas, the association nodes of any two table nodes are connected by connecting lines to establish a connection between the webpage tables.

[0006] The configuration process of the table query display column, that is, the fields of the table node will be displayed in the table column configuration area after being selected, so as to configure the table properties;

[0007] The query statement generation process, that is, after the table attribute configuration is completed, the configuration information will be stored in the database and a storage id will be generated, and the corresponding database query statement will be generated when storing;

[0008] The configuration information loading and echoing process includes loading the configuration information according to the storage ID, and echoing the corresponding table node in the table node field associated selection area, and echoing the corresponding table attribute configuration result in the table column configuration area;

[0009] The process of reading configuration information and displaying the table is to load the corresponding configuration information into the corresponding table column according to the storage ID in the usage page corresponding to the web table, and query according to the database query statement, and display the table columns and data of the web table according to the query results.

[0010] In a second aspect, the present invention provides a query builder for web tables, implemented based on the front-end framework technology stack of VUE, antvX6, and vxe-table, comprising a data source display list, a table node field association selection area, and a table column configuration area. The data source display list lists multiple database tables, and the table node field association selection area includes a canvas.

[0011] The query builder of the web form is used to perform the following process:

[0012] The table node generation process, that is, when a database table in the data source display list is dragged to the canvas, a table node will be generated and displayed on the canvas. Each table node corresponds to a webpage table. The table node includes at least one field node, wherein some field nodes are association nodes, and each field node corresponds to a field defined in the database table. When multiple table nodes are generated in the canvas, the association nodes of any two table nodes are connected by connecting lines to establish a connection between the webpage tables.

[0013] The configuration information loading and echoing process includes loading the configuration information according to the storage ID, and echoing the corresponding table node in the table node field associated selection area, and echoing the corresponding table attribute configuration result in the table column configuration area;

[0014] The configuration process of the table query display column, that is, the fields of the table node will be displayed in the table column configuration area after being selected, so as to configure the table properties;

[0015] The query statement generation process, that is, after the table attribute configuration is completed, the configuration information will be stored in the database and a storage id will be generated, and the corresponding database query statement will be generated when storing;

[0016] The process of reading configuration information and displaying the table is to load the corresponding configuration information into the corresponding table column according to the storage ID in the usage page corresponding to the web table, and query according to the database query statement, and display the table columns and data of the web table according to the query results.

[0017] In a third aspect, the present invention provides an electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the method described in the first aspect when executing the program.

[0018] In a fourth aspect, the present invention provides a computer-readable storage medium having a computer program stored thereon, which implements the method described in the first aspect when the program is executed by a processor.

[0019] One or more technical solutions provided in the embodiments of the present invention have at least the following technical effects or advantages: a query builder for a webpage table is implemented based on the front-end framework technology stack of Vue, vxe-table, and antvX6, the query builder including a data source display list, a table node field association selection area, and a table column configuration area. The data source display list lists multiple database tables, and the table node field association selection area includes a canvas; the table node and its field nodes are encapsulated according to antvX6. Developers only need to drag the database table in the query data source display list to the canvas to configure the connection, and at the same time configure some configuration information used for display for the selected field node in the table column configuration area and save it. Then, a table display page can be quickly generated on the table usage page based on the configuration information and the database query statement generated when the configuration information is saved. The configuration information can then be called to modify and adjust the table columns and data displayed in the table. Since the table displayed on the page can be generated or modified by simply dragging and dropping the configuration, it can quickly respond to user needs, greatly reducing the coding threshold for developers, thereby reducing R&D costs and improving development efficiency.

[0020] The above description is only an overview of the technical solution of the present invention. In order to more clearly understand the technical means of the present invention, it can be implemented in accordance with the contents of the specification. In order to make the above and other purposes, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are specifically listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] The present invention will be further described below with reference to the accompanying drawings and embodiments.

[0022] Figure 1 This is a schematic diagram of the query builder partitioning interface according to an embodiment of the present invention;

[0023] Figure 2 This is a schematic diagram of a data source display list in a query builder according to an embodiment of the present invention;

[0024] Figure 3 A schematic diagram of a canvas of a table node field associated selection area in a query builder according to an embodiment of the present invention;

[0025] Figure 4 A schematic diagram of a grid configuration area in a query builder according to an embodiment of the present invention;

[0026] Figure 5 This is a flowchart of the method in Example 1 of the present invention;

[0027] Figure 6 A flowchart of a table node generation process according to an embodiment of the present invention;

[0028] Figure 7 A flowchart of a process for configuring a table query display column according to an embodiment of the present invention;

[0029] Figure 8 This is a schematic diagram of a pop-up window interface for a button that responds to adding a custom column according to an embodiment of the present invention;

[0030] Figure 9 A flowchart of a query statement generation process according to an embodiment of the present invention;

[0031] Figure 10 Flowchart of the process of loading and displaying configuration information according to an embodiment of the present invention;

[0032] Figure 11 Flowchart of the process of reading and displaying configuration information in a table according to an embodiment of the present invention;

[0033] Figure 12 A schematic diagram showing the effect of a table display according to an embodiment of the present invention

[0034] Figure 13 This is a schematic structural diagram of an electronic device in a third embodiment of the present invention;

[0035] Figure 14 Schematic diagram of the structure of the medium in the fourth embodiment of the present invention. DETAILED DESCRIPTION

[0036] The embodiments of the present application provide a query construction method, table query builder, device and medium for a web page table. Developers can generate a table for page display by simply dragging and dropping the configuration, which can quickly respond to user needs and greatly reduces the coding threshold for developers, thereby reducing R&D costs and improving development efficiency.

[0037] The technical solution in the embodiment of the present application has the following overall idea: the present application implements a query builder for a web page table based on the front-end framework technology stack of Vue, vxe-table and antvX6. The query builder includes a data source display list, a table node field association selection area and a table column configuration area. The data source display list lists multiple database tables, and the table node field association selection area includes a canvas; the table node and its field node are encapsulated according to antvX6. The developer only needs to drag the database table in the query data source display list to the canvas to configure the connection, and at the same time configure some configuration information used for display for the selected field node in the table column configuration area and save it. Then, a table display page can be quickly generated in the table usage page according to the configuration information and the database query statement generated when the configuration information is saved. The configuration information can then be called to modify and adjust the table columns and data displayed in the table. Since the table displayed on the page can be generated or modified by simply dragging and dropping the configuration, it can quickly respond to user needs, greatly reduce the coding threshold for developers, thereby reducing R&D costs and improving development efficiency.

[0038] Example 1

[0039] This embodiment provides a method for constructing a query for a webpage table, which implements a query builder for a webpage table based on the front-end framework technology stack of VUE, antvX6 and vxe-table. Figure 1 As shown, the query builder of the web form includes a data source display list, a table node field association selection area and a table column configuration area.

[0040] The data source display list lists multiple database tables, which are the basis for building web forms, such as Figure 2 As shown, taking a hospital as an example, the basic input category includes a work group correspondence table, a cadre comparison table, and a department comparison table. The department income category includes an ICU collaboration query table, a medical income and expenditure detail query table, etc. Different database tables can be used to create different web forms.

[0041] The table node field associated selection area includes a canvas, such as Figure 3 As shown, it is used to generate connections between table nodes, field nodes, and associated nodes. Each table node corresponds to a table to be displayed, and each field node corresponds to a display column of a table. Figure 3Two table nodes are generated, namely the workgroup correspondence table and the ICU collaboration query table. The workgroup correspondence table displays multiple field nodes, including the workgroup correspondence table number, workgroup correspondence table department, and workgroup correspondence table position. A check box is provided at the front end of each field node for developers to select according to the display columns of the table;

[0042] This is a schematic diagram of the grid column configuration area, which is used to configure the display columns of the generated table, that is, the table columns; Figure 4 As shown, the table column configuration area displays a table, namely the column configuration table. Each row of the column configuration table displays a query column object. Each query column object corresponds to a table column, and formatting configuration options are provided for each query column object according to the field type of the table column to configure or change the table column properties and configure the splicing properties of the database query statement. After the configuration is completed, the table column properties and the splicing properties constitute the data of the column configuration table.

[0043] like Figure 5 As shown, this embodiment provides a query construction method for a web page table, including a table node generation process, a table query display column configuration process, a query statement generation process, a configuration information reading and table display process, and may also include a configuration information loading and echo process.

[0044] The table node generation process, that is, when a database table in the data source display list is dragged to the canvas, a table node will be generated and displayed on the canvas. Each table node corresponds to a webpage table. The table node includes at least one field node, wherein some field nodes are association nodes, and each field node corresponds to a field defined in the database table. When multiple table nodes are generated in the canvas, the association nodes of any two table nodes are connected by connecting lines to establish a connection between the webpage tables.

[0045] The configuration process of the table query display column, that is, the fields of the table node will be displayed in the table column configuration area after being selected, so as to configure the table properties;

[0046] The query statement generation process, that is, after the table attribute configuration is completed, the configuration information will be stored in the database and a storage id will be generated, and the corresponding database query statement will be generated when storing;

[0047] The process of reading configuration information and displaying the table is to load the corresponding configuration information into the corresponding table column according to the storage ID in the usage page corresponding to the web table (that is, the web page where the web table is located), and query according to the database query statement, and display the table columns and data of the web table according to the query results.

[0048] The process of loading and displaying configuration information, that is, when the content or effect of the table display on the page needs to be adjusted, the configuration information is read according to the storage ID and the configuration is adjusted.

[0049] Among them, as a better or more specific implementation of this embodiment, in this implementation:

[0050] like Figure 6 As shown, the generation process of the table node is mainly to provide the configuration of subsequent table columns and the generation of table relationship configuration information in the query statement, which specifically includes the following steps:

[0051] The request interface obtains a list of database tables in the database and displays it in the data source display list, with each database table corresponding to a table node id;

[0052] Load antvX6 resources to generate the table node field associated selection area canvas, which can be dragged to generate connections;

[0053] Generate table nodes in the canvas according to the pre-defined table node styles of antvX6; the query builder encapsulates the styles of the generated table nodes and the styles of the connection nodes generated by the corresponding table fields according to the antvX6 framework. After the data source table is loaded, the developer drags the corresponding table to the antvX6 canvas and generates nodes in the canvas according to the defined table nodes;

[0054] Get the field information of the database table from the database according to the table node ID, and generate a field node in the table node according to the field information. The field node contains pre-defined associated nodes.

[0055] like Figure 3 As shown, after generating the table node, the developer can establish a connection between the two tables by clicking and dragging the associated nodes connecting the two table nodes. When the associated nodes of any two table nodes in the canvas are clicked and dragged, a connection is generated between the two associated nodes according to the pre-defined connection node style of antvX6, generating connection information, thereby establishing a connection between the two webpage tables;

[0056] The table nodes and the lines both provide corresponding deletion methods for deleting the table nodes or lines. For example, a table node provides a delete icon to delete the node, and a line between two associated nodes provides a double-clicking method to delete the line.

[0057] like Figure 7 As shown, the configuration process of the table query display column specifically includes the following steps:

[0058] After generating a table node in the canvas, developers can customize the display of table columns by selecting the field nodes in the table node. When a field node in the table node is selected, a default query column object is generated in the table column configuration area based on the field type and field name of the table column.

[0059] If the default query column object cannot meet the display requirements of the table, the table column configuration area also provides a new custom column function to generate a custom query column object; for example, a button for adding a custom column can be provided in the table column configuration area, and the developer can click the button to add a custom column, such as Figure 8 As shown, a pop-up window will appear. In this window, you can select the field nodes that have been dragged to the canvas and generate custom query column objects by combining formulas. The formulas include basic mathematical formulas such as addition, subtraction, multiplication, and division.

[0060] The table column configuration area displays each query column object through a column configuration table, and provides formatting configuration options for each query column object according to the field type of the table column, so as to configure or change the table column attributes and configure the splicing attributes of the database query statement. The table column attributes and the splicing attributes constitute the data of the column configuration table; the check boxes, input boxes, and drop-down boxes in the column configuration table can be used to configure or change the table column attributes such as whether to display, the displayed column name, the display format, the width, the alignment, the sorting method, whether to aggregate, whether to filter, whether to fix left and right, etc. of the query column object, as well as the splicing attributes of the database query statement such as sorting, where splicing statement, or splicing statement, etc., wherein different drop-down box option configurations are provided for the display format according to the type of the table field, the date type provides the formatted display configuration of year, year-month, and year-month-day, and the number type provides the formatted display configuration of retaining 0 to 6 decimal places.

[0061] like Figure 9 As shown, the query statement generation process specifically includes the following steps:

[0062] After the configuration is completed, the developer can click the Save button to save the configuration information. After completing the table configuration and clicking Save, check whether there is a table node in the current canvas, whether there is a query column object in the column configuration table, and whether the saved name exists. If so, the verification passes;

[0063] After verification, call the antvX6 interface to read the table node information in the canvas. The information includes the position coordinate information of the table node (referring to the position coordinate information of the table node in the canvas), connection information, and the data of the column configuration table. This data is the data generated by all configurations completed in the column configuration table, including the configuration of table column attributes and the data generated by the configuration of database query statement splicing attributes;

[0064] Parsing the connection information to obtain the starting associated node and the ending associated node of the connection, converting the connection information into table relationship configuration information, and assembling the converted table relationship configuration information, the position coordinate information of the table node, and the data of the column configuration table to obtain the complete configuration information;

[0065] After receiving the configuration information, the calling interface extracts the table relationship configuration information and the data of the column configuration table, converts them into corresponding database query statements, and splices the database query statements according to the splicing attributes. The position coordinate information of the table nodes is only used to display the table nodes on the canvas when the configuration is subsequently modified, so it can be saved directly without converting them into database query statements.

[0066] The configuration information, the spliced ​​database query statement and a storage id are stored in the database in correspondence; therefore, the stored configuration information includes the position coordinate information of the table nodes, the association relationship between tables, and the data of the column configuration table.

[0067] like Figure 11 As shown, the configuration information reading and table display process specifically includes the following steps:

[0068] In the usage page corresponding to the webpage table, query the corresponding configuration information according to the storage ID;

[0069] Parsing the data of the column configuration table in the configuration information into query column objects that can be recognized by the vxe-table table plug-in;

[0070] The calling interface obtains the corresponding database query statement from the database according to the storage ID and executes it, and loads the data of the column configuration table returned after the execution into the table plug-in of vxe-table to obtain the table column attributes of the query column object;

[0071] like Figure 12 As shown, the table columns and data to be displayed in the table are displayed according to the table column attributes corresponding to the query column object.

[0072] like Figure 10 As shown, the configuration information loading and echoing process specifically includes the following steps:

[0073] Read configuration information based on the storage ID, including the location coordinate information of the table node, the relationship between tables, and the data of the column configuration table;

[0074] Generate a table node on the canvas based on the position coordinates of the table node and load its field nodes. Convert the connections between tables into line information and generate lines on the canvas. At the same time, echo the data of the column configuration table to the column configuration table in the table column configuration area to complete the echo of the configuration information.

[0075] Next, you can adjust the coordinate information by dragging the position of the table node on the canvas, readjust the connection lines, generate new query column objects by re-checking field nodes or custom functions, modify the configuration of existing query column objects, save the updated configuration information after the modification is completed, regenerate the corresponding database query statement, and then complete the display effect of the new table by reading the configuration information and displaying the table.

[0076] Based on the same inventive concept, this application also provides a device corresponding to the method in Example 1, see Example 2 for details.

[0077] Example 2

[0078] In this embodiment, a query builder for a webpage table is provided, which is implemented based on the front-end framework technology stack of VUE, antvX6 and vxe-table.

[0079] like Figure 1 As shown, the query builder of the web form includes a data source display list, a table node field association selection area and a table column configuration area.

[0080] The data source display list lists multiple database tables, such as Figure 2 As shown, taking a hospital as an example, the basic entry category includes a work group correspondence table, a cadre comparison table, and a department comparison table. The department income category includes an ICU collaboration query table and a medical income and expenditure details query table.

[0081] The table node field associated selection area includes a canvas, such as Figure 3 As shown, it is used to generate connections between table nodes, field nodes, and associated nodes. Each table node corresponds to a table to be displayed, and each field node corresponds to a display column of a table. Figure 3 Two table nodes are generated, namely the workgroup correspondence table and the ICU collaboration query table. The workgroup correspondence table displays multiple field nodes, including the workgroup correspondence table number, workgroup correspondence table department, and workgroup correspondence table position. A check box is provided at the front end of each field node for developers to select according to the display columns of the table;

[0082] This is a schematic diagram of the grid column configuration area, which is used to configure the display columns of the generated table, that is, the table columns; Figure 4As shown, the table column configuration area displays a table, namely the column configuration table. Each row of the column configuration table displays a query column object. Each query column object corresponds to a table column, and formatting configuration options are provided for each query column object according to the field type of the table column to configure or change the table column properties and configure the splicing properties of the database query statement. After the configuration is completed, the table column properties and the splicing properties constitute the data of the column configuration table.

[0083] like Figure 5 As shown, the query builder of the web page table of this embodiment is used to execute the following processes: table node generation process, table query display column configuration process, query statement generation process, configuration information reading and table display process, and is also used to execute configuration information loading and echo process.

[0084] The table node generation process, that is, when a database table in the data source display list is dragged to the canvas, a table node will be generated and displayed on the canvas. Each table node corresponds to a webpage table. The table node includes at least one field node, wherein some field nodes are association nodes, and each field node corresponds to a field defined in the database table. When multiple table nodes are generated in the canvas, the association nodes of any two table nodes are connected by connecting lines to establish a connection between the webpage tables.

[0085] The configuration process of the table query display column, that is, the fields of the table node will be displayed in the table column configuration area after being selected, so as to configure the table properties;

[0086] The query statement generation process, that is, after the table attribute configuration is completed, the configuration information will be stored in the database and a storage id will be generated, and the corresponding database query statement will be generated when storing;

[0087] The process of reading configuration information and displaying the table is to load the corresponding configuration information into the corresponding table column according to the storage ID in the usage page corresponding to the web table, and query according to the database query statement, and display the table columns and data of the web table according to the query results.

[0088] The process of loading and displaying the configuration information, that is, when the content or effect of the table display on the page needs to be adjusted, the configuration information is read and displayed according to the storage ID to reconfigure and adjust the web page table.

[0089] Among them, as a better or more specific implementation of this embodiment, in this implementation:

[0090] like Figure 6As shown, the generation process of the table node is mainly to provide the configuration of subsequent table columns and the generation of table relationship configuration information in the query statement, which specifically includes the following steps:

[0091] The request interface obtains a list of database tables in the database and displays it in the data source display list, with each database table corresponding to a table node id;

[0092] Load antvX6 resources to generate the table node field associated selection area canvas, which can be dragged to generate connections;

[0093] Generate table nodes in the canvas according to the pre-defined table node styles of antvX6; the query builder encapsulates the styles of the generated table nodes and the styles of the connection nodes generated by the corresponding table fields according to the antvX6 framework. After the data source table is loaded, the developer drags the corresponding table to the antvX6 canvas and generates nodes in the canvas according to the defined table nodes;

[0094] Get the field information of the database table from the database according to the table node ID, and generate a field node in the table node according to the field information. The field node contains pre-defined associated nodes.

[0095] like Figure 3 As shown, after generating the table node, the developer can establish a connection between the two tables by clicking and dragging the associated nodes connecting the two table nodes. When the associated nodes of any two table nodes in the canvas are clicked and dragged, a connection is generated between the two associated nodes according to the pre-defined connection node style of antvX6, generating connection information, thereby establishing a connection between the two webpage tables;

[0096] The table nodes and the lines both provide corresponding deletion methods for deleting the table nodes or lines. For example, a table node provides a delete icon to delete the node, and a line between two associated nodes provides a double-clicking method to delete the line.

[0097] like Figure 7 As shown, the configuration process of the table query display column specifically includes the following steps:

[0098] After generating a table node in the canvas, developers can customize the display of table columns by selecting the field nodes in the table node. When a field node in the table node is selected, a default query column object is generated in the table column configuration area based on the field type and field name of the table column.

[0099] If the default query column object cannot meet the display requirements of the table, the table column configuration area also provides a new custom column function to generate a custom query column object; for example, a button for adding a custom column can be provided in the table column configuration area, and the developer can click the button to add a custom column, such as Figure 8 As shown, a pop-up window will appear. In this window, you can select the field nodes that have been dragged to the canvas and generate custom query column objects by combining formulas. The formulas include basic mathematical formulas such as addition, subtraction, multiplication, and division.

[0100] The table column configuration area displays each query column object through a column configuration table, and provides formatting configuration options for each query column object according to the field type of the table column, so as to configure or change the table column attributes and configure the splicing attributes of the database query statement. The table column attributes and the splicing attributes constitute the data of the column configuration table; the check boxes, input boxes, and drop-down boxes in the column configuration table can be used to configure or change the table column attributes such as whether to display, the displayed column name, the display format, the width, the alignment, the sorting method, whether to aggregate, whether to filter, whether to fix left and right, etc. of the query column object, as well as the splicing attributes of the database query statement such as sorting, where splicing statement, or splicing statement, etc., wherein different drop-down box option configurations are provided for the display format according to the type of the table field, the date type provides the formatted display configuration of year, year-month, and year-month-day, and the number type provides the formatted display configuration of retaining 0 to 6 decimal places.

[0101] like Figure 9 As shown, the query statement generation process specifically includes the following steps:

[0102] After the configuration is completed, the developer can click the Save button to save the configuration information. After completing the table configuration and clicking Save, check whether there is a table node in the current canvas, whether there is a query column object in the column configuration table, and whether the saved name exists. If so, the verification passes;

[0103] After verification, call the antvX6 interface to read the table node information in the canvas. The information includes the position coordinate information of the table node, the connection information, and the data of the column configuration table. This data is the data generated by all configurations completed in the column configuration table, including the configuration of table column attributes and the data generated by the configuration of database query statement splicing attributes;

[0104] Parsing the connection information to obtain the starting associated node and the ending associated node of the connection, converting the connection information into table relationship configuration information, and assembling the converted table relationship configuration information, the position coordinate information of the table node, and the data of the column configuration table to obtain the complete configuration information;

[0105] After receiving the configuration information, the calling interface extracts the table relationship configuration information and the data of the column configuration table, converts them into corresponding database query statements, and splices the database query statements according to the splicing attributes. The position coordinate information of the table nodes is only used to display the table nodes on the canvas when the configuration is subsequently modified, so it can be saved directly without converting them into database query statements.

[0106] The configuration information, the spliced ​​database query statement and a storage id are stored in the database in correspondence; therefore, the stored configuration information includes the position coordinate information of the table nodes, the association relationship between tables, and the data of the column configuration table.

[0107] like Figure 11 As shown, the configuration information reading and table display process specifically includes the following steps:

[0108] In the usage page corresponding to the webpage table, query the corresponding configuration information according to the storage ID;

[0109] Parsing the data of the column configuration table in the configuration information into query column objects that can be recognized by the vxe-table table plug-in;

[0110] The calling interface obtains the corresponding database query statement from the database according to the storage ID and executes it, and loads the data of the column configuration table returned after the execution into the table plug-in of vxe-table to obtain the table column attributes of the query column object;

[0111] According to the table column attributes corresponding to the query column object, the table columns and data to be displayed are displayed.

[0112] like Figure 12 As shown, the table columns and data to be displayed in the table are displayed according to the table column attributes corresponding to the query column object.

[0113] like Figure 10 As shown, the configuration information loading and echoing process specifically includes the following steps:

[0114] Read configuration information based on the storage ID, including the location coordinate information of the table node, the relationship between tables, and the data of the column configuration table;

[0115] Generate a table node on the canvas based on the position coordinates of the table node and load its field nodes. Convert the connections between tables into line information and generate lines on the canvas. At the same time, echo the data of the column configuration table to the column configuration table in the table column configuration area to complete the echo of the configuration information.

[0116] Next, you can adjust the coordinate information by dragging the position of the table node on the canvas, readjust the connection lines, generate new query column objects by re-checking field nodes or custom functions, modify the configuration of existing query column objects, save the updated configuration information after the modification is completed, regenerate the corresponding database query statement, and then complete the display effect of the new table by reading the configuration information and displaying the table.

[0117] Since the device described in the second embodiment of the present invention is used to implement the method of the first embodiment of the present invention, those skilled in the art will be able to understand the specific structure and variations of the device based on the method described in the first embodiment of the present invention, and therefore will not be described in detail here. All devices used in the method of the first embodiment of the present invention fall within the scope of protection of the present invention.

[0118] Based on the same inventive concept, this application provides an electronic device embodiment corresponding to the first embodiment, see the third embodiment for details.

[0119] Example 3

[0120] This embodiment provides an electronic device, such as Figure 13 As shown, it includes a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, any implementation method in the first embodiment can be implemented.

[0121] Since the electronic device described in this embodiment is the device used to implement the method in Example 1 of this application, based on the method described in Example 1 of this application, those skilled in the art will be able to understand the specific implementation of the electronic device of this embodiment and its various variations. Therefore, how the electronic device implements the method in the embodiment of this application will not be described in detail here. As long as the device used by those skilled in the art to implement the method in the embodiment of this application falls within the scope of protection to be provided by this application.

[0122] Based on the same inventive concept, this application provides a storage medium corresponding to Example 1, see Example 4 for details.

[0123] Example 4

[0124] This embodiment provides a computer-readable storage medium, such as Figure 14 As shown, a computer program is stored thereon, and when the computer program is executed by a processor, any implementation method in Example 1 can be implemented.

[0125] The method, apparatus, system, device and medium provided by the embodiments of the present application have at least the following technical effects or advantages: a query builder for a web page table is implemented based on the front-end framework technology stack of Vue, vxe-table and antvX6, the query builder includes a data source display list, a table node field association selection area and a table column configuration area, the data source display list lists multiple database tables, the table node field association selection area includes a canvas; the table node and its field node are encapsulated according to antvX6. The developer only needs to drag the database table in the query data source display list to the canvas to configure the connection, and at the same time configure some configuration information used for display for the selected field node in the table column configuration area and save it. Then, a table display page can be quickly generated in the table usage page according to the configuration information and the database query statement generated when the configuration information is saved, and then the configuration information can be called to modify and adjust the table columns and data displayed in the table. Since the table displayed on the page can be generated or modified by simply dragging and dropping the configuration, it can quickly respond to user needs, greatly reduce the coding threshold for developers, thereby reducing R&D costs and improving development efficiency.

[0126] Those skilled in the art will appreciate that embodiments of the present invention may be provided as methods, devices, systems, or computer program products. Thus, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to magnetic disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0127] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowcharts and / or block diagrams, as well as combinations of processes and / or blocks in the flowcharts and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowcharts and / or block diagrams. Figure 1 a process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0128] These computer program instructions may also be stored in a computer readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 a process or multiple processes and / or boxes Figure 1 The function specified in one or more boxes.

[0129] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operational steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing the instructions executed on the computer or other programmable device for implementing the process. Figure 1 a process or multiple processes and / or boxes Figure 1 A step that specifies a function in one or more boxes.

[0130] Although the specific embodiments of the present invention are described above, those skilled in the art should understand that the specific embodiments described are merely illustrative and are not intended to limit the scope of the present invention. Equivalent modifications and changes made by those skilled in the art in accordance with the spirit of the present invention should be included within the scope of protection of the claims of the present invention.

Claims

1. A method for constructing a query for a webpage table, characterized by: A webpage table query builder is implemented based on the front-end framework technology stack of VUE, antvX6, and vxe-table. The webpage table query builder includes a data source display list, a table node field association selection area, and a table column configuration area. The data source display list lists multiple database tables, and the table node field association selection area includes a canvas. The method includes the following steps: The table node generation process, that is, when a database table in the data source display list is dragged to the canvas, a table node will be generated and displayed on the canvas. Each table node corresponds to a webpage table. The table node includes at least one field node, wherein some field nodes are association nodes, and each field node corresponds to a field defined in the database table. When multiple table nodes are generated in the canvas, the association nodes of any two table nodes are connected by connecting lines to establish a connection between the webpage tables. The configuration process of the table query display column, that is, the fields of the table node will be displayed in the table column configuration area after being selected, so as to configure the table properties; The query statement generation process, that is, after the table attribute configuration is completed, the configuration information will be stored in the database and a storage id will be generated, and the corresponding database query statement will be generated when storing; The process of reading configuration information and displaying the table is to read the corresponding configuration information according to the storage ID in the usage page corresponding to the web table, convert it into the corresponding table column, and query it according to the database query statement, and display the table columns and data of the web table according to the query results.

2. A webpage table query construction method according to claim 1, characterized in that: The process of generating the table node specifically includes the following steps: The request interface obtains a list of database tables in the database and displays it in the data source display list, with each database table corresponding to a table node id; Load antvX6 resources to generate the table node field associated selection area canvas; Generate table nodes in the canvas according to the table node styles pre-defined by antvX6; Get the field information of the database table from the database according to the table node ID, and generate a field node in the table node according to the field information. The field node contains pre-defined associated nodes. When you click and drag the associated nodes of any two table nodes in the canvas, a line will be generated between the two associated nodes according to the pre-defined connection node style of antvX6, generating connection information, thereby establishing a connection between the two webpage tables; The table nodes and the lines both provide corresponding deletion methods for deleting the table nodes or lines.

3. The method for constructing a query for a webpage table according to claim 1, wherein: The configuration process of the table query display column specifically includes the following steps: After a field node of a table node is selected, a default query column object is generated in the table column configuration area according to the field type and field name of the table column. The table column configuration area also provides a new custom column function for generating a custom query column object; The table column configuration area displays each query column object through a column configuration table, and provides formatting configuration options for each query column object according to the field type of the table column, so as to configure or change the table column attributes and configure the splicing attributes of the database query statement. The table column attributes and the splicing attributes constitute the data of the column configuration table; The query statement generation process specifically includes the following steps: After completing the table configuration and clicking Save, check whether the table node exists in the current canvas, whether the query column object exists in the column configuration table, and whether the saved name exists. If so, the verification passes. After verification, call the antvX6 interface to read the information of the table node in the canvas, which includes the position coordinate information, connection information and data of the column configuration table; Parsing the connection information, converting the connection information into table relationship configuration information, and assembling the converted table relationship configuration information, the position coordinate information of the table node, and the data of the column configuration table to obtain the configuration information; After receiving the configuration information, the calling interface extracts the table relationship configuration information and the data of the column configuration table, converts them into corresponding database query statements, and splices the database query statements according to the splicing attributes; Storing the configuration information, the spliced ​​database query statement and a storage ID in a database in correspondence; The configuration information reading and table display process specifically includes the following steps: In the usage page corresponding to the webpage table, query the corresponding configuration information according to the storage ID; Parsing the data of the column configuration table in the configuration information into query column objects that can be recognized by the vxe-table table plug-in; The calling interface obtains the corresponding database query statement from the database according to the storage ID and executes it, and loads the data of the column configuration table returned after the execution into the table plug-in of vxe-table to obtain the table column attributes of the query column object; According to the table column attributes corresponding to the query column object, the table columns and data to be displayed are displayed.

4. The method for constructing a query for a webpage table according to claim 1, wherein: Also includes: The configuration information loading and display process includes: Read the corresponding configuration information according to the storage ID, including the location coordinate information of the table node, the association relationship between tables, and the data of the column configuration table; Generate a table node in the canvas based on the position coordinate information of the table node and load the field nodes of the table node. Convert the connection between tables into connection information and generate connections on the canvas. At the same time, echo the data of the column configuration table to the column configuration table in the table column configuration area to complete the echo of the configuration information for modification or adjustment.

5. A query builder for a web form, characterized by: The front-end framework technology stack based on VUE, antvX6 and vxe-table includes a data source display list, a table node field association selection area and a table column configuration area. The data source display list lists multiple database tables, and the table node field association selection area includes a canvas. The query builder of the web form is used to perform the following process: The table node generation process, that is, when a database table in the data source display list is dragged to the canvas, a table node will be generated and displayed on the canvas. Each table node corresponds to a webpage table. The table node includes at least one field node, wherein some field nodes are association nodes, and each field node corresponds to a field defined in the database table. When multiple table nodes are generated in the canvas, the association nodes of any two table nodes are connected by connecting lines to establish a connection between the webpage tables. The configuration process of the table query display column, that is, the fields of the table node will be displayed in the table column configuration area after being selected, so as to configure the table properties; The query statement generation process, that is, after the table attribute configuration is completed, the configuration information will be stored in the database and a storage id will be generated, and the corresponding database query statement will be generated when storing; The configuration information loading and echoing process includes loading the configuration information according to the storage ID, and echoing the corresponding table node in the table node field associated selection area, and echoing the corresponding table attribute configuration result in the table column configuration area; The process of reading configuration information and displaying the table is to load the corresponding configuration information into the corresponding table column according to the storage ID in the usage page corresponding to the web table, and query according to the database query statement, and display the table columns and data of the web table according to the query results.

6. A web form query builder according to claim 5, characterized in that: The process of generating the table node specifically includes the following steps: The request interface obtains a list of database tables in the database and displays it in the data source display list, with each database table corresponding to a table node id; Load antvX6 resources to generate the table node field associated selection area canvas; Generate table nodes in the canvas according to the table node styles pre-defined by antvX6; Get the field information of the database table from the database according to the table node ID, and generate a field node in the table node according to the field information. The field node contains pre-defined associated nodes. When you click and drag the associated nodes of any two table nodes in the canvas, a line will be generated between the two associated nodes according to the pre-defined connection node style of antvX6, generating connection information, thereby establishing a connection between the two webpage tables; The table nodes and the lines both provide corresponding deletion methods for deleting the table nodes or lines.

7. A web form query builder according to claim 5, characterized in that: The configuration process of the table query display column specifically includes the following steps: The configuration process of the table query display column specifically includes the following steps: After a field node of a table node is selected, a default query column object is generated in the table column configuration area according to the field type and field name of the table column. The table column configuration area also provides a new custom column function for generating a custom query column object; The table column configuration area displays each query column object through a column configuration table, and provides formatting configuration options for each query column object according to the field type of the table column, so as to configure or change the table column attributes and configure the splicing attributes of the database query statement. The table column attributes and the splicing attributes constitute the data of the column configuration table; The query statement generation process specifically includes the following steps: After completing the table configuration and clicking Save, check whether the table node exists in the current canvas, whether the query column object exists in the column configuration table, and whether the saved name exists. If so, the verification passes. After verification, call the antvX6 interface to read the information of the table node in the canvas, which includes the position coordinate information, connection information and data of the column configuration table; Parsing the connection information, converting the connection information into table relationship configuration information, and assembling the converted table relationship configuration information, the position coordinate information of the table node, and the data of the column configuration table to obtain the configuration information; After receiving the configuration information, the calling interface extracts the table relationship configuration information and the data of the column configuration table, converts them into corresponding database query statements, and splices the database query statements according to the splicing attributes; Storing the configuration information, the spliced ​​database query statement and a storage ID in a database in correspondence; The configuration information reading and table display process specifically includes the following steps: In the usage page corresponding to the webpage table, query the corresponding configuration information according to the storage ID; Parsing the data of the column configuration table in the configuration information into query column objects that can be recognized by the vxe-table table plug-in; The calling interface obtains the corresponding database query statement from the database according to the storage ID and executes it, and loads the data of the column configuration table returned after the execution into the table plug-in of vxe-table to obtain the table column attributes of the query column object; According to the table column attributes corresponding to the query column object, the table columns and data to be displayed are displayed.

Images