一种网页表格的查询构建方法、查询构建器、设备和介质技术

本发明专利技术提供一种网页表格的查询构建方法、表格查询构建器、设备和介质，基于Vue、vxe

【技术实现步骤摘要】
一种网页表格的查询构建方法、查询构建器、设备和介质


[0001]本专利技术涉及计算机
，特别涉及一种网页表格的查询构建方法、查询构建器、设备和介质。

技术介绍

[0002]随着时代的发展，前端技术及框架的不断更新，网页中表格的功能交互也越发的复杂，有时用户对一些表格的数据展示有一些定制化的需求，以及一些偏向报表展示的需求，这就要求开发人员通过编写代码的方式实现一些功能相似的表格展示页面或实现对表格展示内容的调整，造成大量重复的工作，导致资源的浪费。

技术实现思路

[0003]本专利技术要解决的技术问题，在于提供一种网页表格的查询构建方法、表格查询构建器、设备和介质，基于Vue、vxe
‑
table及antvX6的前端框架，根据antvX6封装了表格节点及其字段节点，开发者仅需要通过拖动查询数据源展示列表中的数据库表到画布中进行勾选连线的配置，同时为选中的字段节点配置一些展示时用到的配置信息进行保存，即可根据配置信息及配置信息保存时生成的数据库查询语句快速的生成一个表格展示的页面，或调整表格展示的表格列及数据，由于只要简单的进行拖拽配置就可以生成页面展示的表格，能快速的响应用户需求，也大大降低了开发者的编码门槛从而降低了研发成本和提升了开发的效率。
[0004]第一方面，本专利技术提供了一种网页表格的查询构建方法，基于VUE、 antvX6及vxe
‑
table的前端框架技术栈实现一网页表格的查询构建器，该表格查询构建器包括数据源展示列表、表格节点字段关联选取区和表格列配置区，所述数据源展示列表中罗列了多个数据库表，所述表格节点字段关联选取区包括一画布；所述方法包括下述过程：
[0005]表格节点生成过程，即所述数据源展示列表中的数据库表被拖拽到所述画布中后会生成一个表格节点展示在画布中，每个表格节点对应生成一个网页表格，该表格节点包括至少一个字段节点，其中，某些字段节点属于关联节点，每个字段节点与数据库表中定义的字段相对应；当画布中生多个表格节点时，通过连线连接任意两个表格节点的关联节点来建立网页表格之间的联系；
[0006]表格查询展示列的配置过程，即表格节点的字段在被选中后会展示到所述表格列配置区中，以供配置表格属性；
[0007]查询语句生成过程，即在表格属性配置完成后，配置信息会存储在数据库中并生成一存储id，且存储时会生成对应的数据库查询语句；
[0008]配置信息的加载和回显过程，即根据所述存储id加载所述配置信息，并在表格节点字段关联选取区回显相应的表格节点，在表格列配置区回显相应的表格属性配置结果；
[0009]配置信息的读取及表格展示过程，即在网页表格对应的使用页面中根据所述存储id将对应的配置信息加载转化为对应的表格列，并根据所述数据库查询语句进行查询，根
据查询结果对网页表格的表格列及数据进行展示。
[0010]第二方面，本专利技术提供了一种网页表格的查询构建器，基于VUE、antvX6 及vxe
‑
table的前端框架技术栈实现，包括数据源展示列表、表格节点字段关联选取区和表格列配置区，所述数据源展示列表中罗列了多个数据库表，所述表格节点字段关联选取区包括一画布；
[0011]所述网页表格的查询构建器用于执行下述过程：
[0012]表格节点生成过程，即所述数据源展示列表中的数据库表被拖拽到所述画布中后会生成一个表格节点展示在画布中，每个表格节点对应生成一个网页表格，该表格节点包括至少一个字段节点，其中，某些字段节点属于关联节点，每个字段节点与数据库表中定义的字段相对应；当画布中生多个表格节点时，通过连线连接任意两个表格节点的关联节点来建立网页表格之间的联系；
[0013]配置信息的加载和回显过程，即根据所述存储id加载所述配置信息，并在表格节点字段关联选取区回显相应的表格节点，在表格列配置区回显相应的表格属性配置结果；
[0014]表格查询展示列的配置过程，即表格节点的字段在被选中后会展示到所述表格列配置区中，以供配置表格属性；
[0015]查询语句生成过程，即在表格属性配置完成后，配置信息会存储在数据库中并生成一存储id，且存储时会生成对应的数据库查询语句；
[0016]配置信息的读取及表格展示过程，即在网页表格对应的使用页面中根据所述存储id将对应的配置信息加载转化为对应的表格列，并根据所述数据库查询语句进行查询，根据查询结果对网页表格的表格列及数据进行展示。
[0017]第三方面，本专利技术提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现第一方面所述的方法。
[0018]第四方面，本专利技术提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现第一方面所述的方法。
[0019]本专利技术实施例中提供的一个或多个技术方案，至少具有如下技术效果或优点：基于Vue、vxe
‑
table及antvX6的前端框架技术栈实现一网页表格的查询构建器，该查询构建器包括数据源展示列表、表格节点字段关联选取区和表格列配置区，所述数据源展示列表中罗列了多个数据库表，所述表格节点字段关联选取区包括一画布；根据antvX6封装了表格节点及其字段节点。开发者仅需要通过拖动查询数据源展示列表中的数据库表到画布中进行勾选连线的配置，同时在表格列配置区中为选中的字段节点配置一些展示时用到的配置信息进行保存，即可在表格的使用页面中根据配置信息及配置信息保存时生成的数据库查询语句快速的生成一个表格展示的页面，之后调用配置信息进行修改，调整表格展示的表格列及数据。由于只要简单的进行拖拽配置就可以生成或修改页面展示的表格，从而能快速的响应用户需求，也大大降低了开发者的编码门槛从而降低了研发成本和提升了开发的效率。
[0020]上述说明仅是本专利技术技术方案的概述，为了能够更清楚了解本专利技术的技术手段，而可依照说明书的内容予以实施，并且为了让本专利技术的上述和其它目的、特征和优点能够更明显易懂，以下特举本专利技术的具体实施方式。
附图说明
[0021]下面参照附图结合实施例对本专利技术作进一步的说明。
[0022]图1为本专利技术实施例的查询构建器分区的界面示意图；
[0023]图2为本专利技术实施例查询构建器中的数据源展示列表的示意图；
[0024]图3为本专利技术实施例查询构建器中的表格节点字段关联选取区的画布示意图；
[0025]图4为本专利技术实施例查询构建器中的格列配置区的示意图；
[0026]图5为本专利技术实施例一中方法中的流程图；
[0027]图6为本专利技术实施例的表格节点生成过程的流程图；
[0028]图7为本专利技术实施例的表格查询展示列的配置过程的流程图；
[0029]图8为本专利技术实施例的响应新增自定义列的按钮的弹窗界面示意图；
[0030]图9为本专利技术实施例的查询语句生成过程的流程图；
[003本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种网页表格的查询构建方法，其特征在于：基于VUE、antvX6及vxe
‑
table的前端框架技术栈实现一网页表格的查询构建器，该网页表格的查询构建器包括数据源展示列表、表格节点字段关联选取区和表格列配置区，所述数据源展示列表中罗列了多个数据库表，所述表格节点字段关联选取区包括一画布；所述方法包括下述过程：表格节点生成过程，即所述数据源展示列表中的数据库表被拖拽到所述画布中后会生成一个表格节点展示在画布中，每个表格节点对应生成一个网页表格，该表格节点包括至少一个字段节点，其中，某些字段节点属于关联节点，每个字段节点与数据库表中定义的字段相对应；当画布中生多个表格节点时，通过连线连接任意两个表格节点的关联节点来建立网页表格之间的联系；表格查询展示列的配置过程，即表格节点的字段在被选中后会展示到所述表格列配置区中，以供配置表格属性；查询语句生成过程，即在表格属性配置完成后，配置信息会存储在数据库中并生成一存储id，且存储时会生成对应的数据库查询语句；配置信息的读取及表格展示过程，即在网页表格对应的使用页面中根据所述存储id将读取对应的配置信息，转化为对应的表格列，并根据所述数据库查询语句进行查询，根据查询结果对网页表格的表格列及数据进行展示。2.根据权利要求1所述的一种网页表格的查询构建方法，其特征在于：所述表格节点的生成过程具体包括下述步骤：请求接口获取数据库中数据库表的列表，并显示于所述数据源展示列表中，且每个数据库表对应一个表格节点id；加载antvX6的资源生成所述表格节点字段关联选取区画布；根据antvX6预先定义好的表格节点样式在画布中生成表格节点；根据表格节点id从数据库中获取数据库表下的字段信息，根据字段信息在表格节点中生成字段节点，该字段节点包含了预先定义好的关联节点；当画布中的任两个表格节点的关联节点通过点击拖拽时，根据antvX6预先定义好的连线节点的样式，在点击拖拽的两个关联节点之间产生连线进行连接，产生连线信息，从而建立两个网页表格之间的联系；其中，所述表格节点和所述连线均提供相应的删除方式以供删除表格节点或连线。3.根据权利要求1所述的一种网页表格的查询构建方法，其特征在于：所述表格查询展示列的配置过程具体包括下述步骤：表格节点的字段节点在被选中后，根据表格列的字段类型及字段名在所述表格列配置区中生成默认的查询列对象，所述表格列配置区还提供新增自定义列功能，用以生成自定义的查询列对象；所述表格列配置区通过列配置表格展示各个所述查询列对象，并根据表格列的字段类型为每个查询列对象提供格式化配置选项，以供对表格列属性进行配置或变更，以及对数据库查询语句的拼接属性进行配置，所述表格列属性和所述拼接属性构成列配置表格的数据；所述查询语句生成过程具体包括下述步骤：在完成表格配置并点击保存后，校验当前的画布中是否存在表格节点、列配置表格中
是否有查询列对象以及保存的名称是否存在，若都是，则校验通过；校验通过后调用antvX6的接口读取画布中的表格节点的信息，所述表格节点的信息包括表格节点的位置坐标信息，连线信息以及所述列配置表格的数据；解析所述连线信息，将所述连线信息转化为表关系配置信息，将转化后的所述表关系配置信息、所述表格节点的位置坐标信息、所述列配置表格的数据组装后得到所述配置信息；调用接口接收到所述配置信息后，将所述表关系配置信息及所述列配置表格的数据进行提取，并转化为对应的数据库查询语句，并根据所述拼接属性对所述数据库查询语句进行拼接；将所述配置信息、拼接后的所述数据库查询语句与一存储id对应存储至数据库中；所述配置信息的读取及表格展示过程具体包括下述步骤：在网页表格对应的使用页面中根据所述存储id查询对应的配置信息；将配置信息中的所述列配置表格的数据解析成vxe
‑
table表格插件可识别的查询列对象；调用接口根据所述存储id从数据库中获取对应的所述数据库查询语句并执行，将执行后返回的所述列配置表格的数据加载到vxe
‑
table的表格插件中，得到所述查询列对象的表格列属性；根据所述查询列对象对应的所述表格列属性，展示出表格要展示的表格列及数据。4.根据权利要求1所述的一种网页表格的查询构建方法，其特征在于：还包括：配置信息的加载和回显过程，具体包括：根据所述存储id读取对应的配置信息，包括表格节点的位置坐标信息、表之间的关联关系、列配置表格的数据；根据表格节点的位置坐标信息在画布中生成表格节点并加载表格节点的字段节点，将表格之间的联系转化为连线...

【专利技术属性】
技术研发人员：杨辉，黄家昌，李文集，邱道椿，
申请(专利权)人：福建亿能达信息技术股份有限公司，
类型：发明
国别省市：