(19)中华人民共和国国家知识产权局
(12)发明专利申请
(10)申请公布号 (43)申请公布日 (21)申请号 201710016523.9
(22)申请日 2017.01.10
(71)申请人 中电科华云信息技术有限公司
地址 200231 上海市徐汇区华泾路509号7
幢552室
(72)发明人 李琛鸽 丁星 闵圣捷 武静
唐丽娜
(74)专利代理机构 上海汉声知识产权代理有限
公司 31236
代理人 郭国中
(51)Int.Cl.
G06F 17/30(2006.01)
G06F 3/0486(2013.01)
(54)发明名称
及系统
(57)摘要
本发明公开了一种基于浏览器的可视化拖
拽查询数据的方法及系统，该方法包括以下步
骤二，浏览器端获取数据库及其结构信息，并渲
染于WEB页面；步骤三，浏览器端渲染查询操作图
形组件和画布；步骤四，用户在图形化界面通过
拖拽配置方式编排查询操作流程；步骤五，解析
图形化查询流程图为SQL语句；步骤六，后端执行
SQL查询语句；步骤七，浏览器端输出查询结果。
本发明在WEB系统中查询数据更灵活，简化SQL查
询语句编写，改变只能输入SQL语句执行数据库
查询的现状，降低系统使用门槛，使用图形化方
式编排查询过程，使创建查询过程描述更清晰直
观，
降低学习门槛。权利要求书3页 说明书6页 附图2页CN 106909610 A 2017.06.30
C N 106909610
A
1.一种基于浏览器的可视化拖拽查询数据的方法，其特征在于，其包括以下步骤：
步骤一，抽取可操作数据库及其结构信息；
步骤二，浏览器端获取数据库及其结构信息，并渲染于WEB页面；
步骤三，浏览器端渲染查询操作图形组件和画布；
步骤四，用户在图形化界面通过拖拽配置方式编排查询操作流程；
步骤五，解析图形化查询流程图为SQL语句；
步骤六，后端执行SQL查询语句；
步骤七，浏览器端输出查询结果。
2.根据权利要求1所述的基于浏览器的可视化拖拽查询数据的方法，其特征在于，所述步骤一包括以下子步骤：
步骤十一：检查数据库连接并存储数据库连接信息；
步骤十二：根据数据库连接信息连接数据库；
步骤十三：获取数据库信息及所有表；
步骤十四：获取数据库中所有表的结构信息；
步骤十五：将数据库信息、所有表及其结构存储于系统数据库。
3.根据权利要求1所述的基于浏览器的可视化拖拽查询数据的方法，其特征在于，所述步骤二包括以下子步骤：
步骤二十一：浏览器端向后端请求数据库信息；
步骤二十二：浏览器端根据获取的数据库信息索引获取所有数据库中的表；
步骤二十三：将数据库及表信息缓存至浏览器端；
步骤二十四：在浏览器端运用HTML5、CSS3及JS技术将数据库、表信息渲染于浏览器页面中，并使渲染出的对象； 步骤二十五：在渲染出的表对象上添加鼠标单击事件，在单击后向后端发出请求，获取表结构数据，并将获取到的表结构数据渲染到界面上表对象下一级目录中；
步骤二十六：在渲染出的表对象上添加鼠标左键按下事件，当鼠标左键按下时，复制一个表对象，并跟随鼠标移动；
步骤二十七：在鼠标左键弹起时，删除复制的对象。
4.根据权利要求1所述的基于浏览器的可视化拖拽查询数据的方法，其特征在于，所述步骤三包括以下子步骤：
步骤三十一：在浏览器中使用JS和SVG技术渲染画布区域，并监听画布上的拖放、点击操作；
步骤三十二：向后端发起请求，获取可用操作类型及相关参数；
步骤三十三：前端获取到可用操作类型数据后，根据图形化规则引擎中的规则定义，将不同的操作类型渲染为不同形状和样式的SVG图形；
步骤三十四：为所有操作类型对应的SVG图形添加鼠标左键按下事件，当鼠标左键按下时，复制一个SVG对象，并跟随鼠标移动；
步骤三十五：添加鼠标左键弹起事件，当鼠标拖动表或操作类型对应的SVG对象到画布中鼠标左键弹起时，在画布对象中添加一个相应的表或SVG对象，并将表和类型数据存储于流程配置JSON对象中；
步骤三十六：在画布上添加的表和SVG对象上添加鼠标单击事件，在单击是为单击对象添加或删除选中样式，当对象上具有选中样式时，在页面中显示属性窗口，根据对象类型，从操作类型数据中获取可配置项，并将可配置项目以动态表单元素的方式渲染于页面中的属性窗口中；
步骤三十七：当属性窗口表单中数据被修改后，同步将这些参数存储于流程配置JSON 对象中；
步骤三十八：为画布上的表、操作类型图标流程相关的对象添加hover事件，当鼠标指向对象时，在该SVG对象中添加一个轮廓图形，用于拖拽连线；
步骤三十九：在轮廓图形对象上添加鼠标指向事件及效果，使鼠标指向图形轮廓时显示不同的外观样
式，以提示用户边缘可被操作；
步骤四十：在轮廓图形对象上添加鼠标左键按下事件，鼠标左键按下时在SVG画布上添加一个连接线SVG图形，并使线条从按下鼠标左键的位置连接到鼠标当前所在位置，并使用定时器即时刷新线条长度及方向；
步骤四十一：在连接线SVG绘制定时器开启状态下，鼠标左键弹起事件触发后，检测连接线结束点是否与画布中某一表或操作类型图标相近，如线条结束点与某一图标相近，则自动调整线条端点位置使线条规整，完成连接线绘制，否则删除未成功连接的SVG线条；
步骤四十二：在连接线SVG图形上添加双击事件，在双击线条时删除连接线。
5.根据权利要求1所述的基于浏览器的可视化拖拽查询数据的方法，其特征在于，所述步骤五包括以下子步骤：
步骤五十一：在用户配置完查询操作流程图后，将前端存储的流程配置JSON对象提交至后台程序；
步骤五十二：后端SQL规则引擎模块对传入的流程配置JSON对象进行解析，将JSON中的操作类型、操作参数、关联关系、操作顺序信息转换为可执行的SQL语句。
6.一种基于浏览器的可视化拖拽查询数据的系统，其特征在于，其包括：
SQL语法库；用于存储SQL语法中的关键字及语句格式、语句参数类型信息，以用于生成界面可视化的SQL子元素及其配置参数；
数据权限管理引擎模块，用于配置和管理数据库、表、字段操作和查询权限，控制在不同的库和表中允许使用的SQL查询和操作方法；
数据库结构抽取引擎模块，用于将所有可被查询的数据库、表和字段信息提取到系统数据库，并对外提供接口，便于浏览器端引用查询对象；
SQL语句执行模块，用于接收并执行来自浏览器端的SQL语句，并向浏览器端返回执行过程日志及执行结果；
SQL语句图形化规则转换模块，用于定义不同类型的数据库、表和字段用不同的图形进行表示；
查询流程JSON转换规则引擎模块：定义特定的JSON对象格式，用于存储查询流程中的所有操作及其配置信息，使SQL语句与查询流程JSON对象之间可以相互转换；其中，包括查询流程JSON格式校验、SQL语法检查、JSON对象转换为SQL语句、SQL语句转换为JSON功能；
查询流程JSON暂存器模块：用于存储查询流程JSON对象；
操作类型图标渲染模块：根据SQL语法库及SQL语句图形化规则转换模块中的SQL语句
转换规则，将不同的SQL操作转换为不同类型的图标并渲染于可视化界面中；
数据库与表结构存储模块：用于存储从后端服务数据库结构抽取引擎模块获取的数据库及表结构信息，以使得在前端界面渲染时可以快速使用这些数据库及表信息；
库与表元素渲染模块：利用HTML、CSS和JS前端技术，将数据库与表结构存储模块中存储的数据库和数据表信息渲染于前端界面；
流程图渲染与编译处理器模块：将流程图中的图形、逻辑关于及对象属性配置与JSON 数据进行相互转换；
界面元素及交互操作控制器模块：为界面中被渲染出的库、表、操作图标、线条图形化元素添加交互，并对交互方式、拖放规则、线条连接规则、删除规则、修改规则进行定义与控制，使用于自由创建与编辑查询流程图。
基于浏览器的可视化拖拽查询数据的方法及系统技术领域
[0001]本发明涉及一种查询数据的方法及系统，特别是涉及一种基于浏览器的可视化拖拽查询数据的方法及系统。
背景技术
[0002]现有的基于浏览器的数据库查询方法或系统，通常是使用预置的固定的数据查询方法进行数据查询，而此方法灵活性不高，需要在系统开发时定义好大量的数据查询方法；为了使数据库查询更灵活，通常系统中还可以使用标准或优化后的SQL表达式，让用户输入自行编写的SQL语句查询数据，然后传送到系统后端执行查询，而使用此方式则要求用户非常了解SQL语句及其语法，没有SQL和数据库基础的用户可能无法使用该功能。
发明内容
[0003]本发明所要解决的技术问题是提供一种基于浏览器的可视化拖拽查询数据的方法及系统，其在WEB系统中查询数据更灵活，简化SQL查询语句编写，改变只能输入SQL语句执行数据库查询的现状，降低系统使用门槛，使用图形化方式编排查询过程，使创建查询过程描述更清晰直观，降低学习门槛。
[0004]本发明是通过下述技术方案来解决上述技术问题的：一种基于浏览器的可视化拖拽查询数据的方法，其特征在于，其包括以下步骤：
[0005]步骤一，抽取可操作数据库及其结构信息；
[0006]步骤二，浏览器端获取数据库及其结构信息，并渲染于WEB页面；
[0007]步骤三，浏览器端渲染查询操作图形组件和画布；
[0008]步骤四，用户在图形化界面通过拖拽配置方式编排查询操作流程；
[0009]步骤五，解析图形化查询流程图为SQL语句；
[0010]步骤六，后端执行SQL查询语句；
[0011]步骤七，浏览器端输出查询结果。
[0012]优选地，所述步骤一包括以下子步骤：
[0013]步骤十一：检查数据库连接并存储数据库连接信息；
[0014]步骤十二：根据数据库连接信息连接数据库；
[0015]步骤十三：获取数据库信息及所有表；
[0016]步骤十四：获取数据库中所有表的结构信息；
[0017]步骤十五：将数据库信息、所有表及其结构存储于系统数据库。
[0018]优选地，所述步骤二包括以下子步骤：
[0019]步骤二十一：浏览器端向后端请求数据库信息；
[0020]步骤二十二：浏览器端根据获取的数据库信息索引获取所有数据库中的表；
[0021]步骤二十三：将数据库及表信息缓存至浏览器端；
[0022]步骤二十四：在浏览器端运用HTML5、CSS3及JS技术将数据库、表信息渲染于浏览
说 明 书
1/6页CN 106909610 A
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议