CN106909610B - 基于浏览器的可视化拖拽查询数据的方法及系统 - Google Patents

基于浏览器的可视化拖拽查询数据的方法及系统 Download PDF

Info

Publication number
CN106909610B
CN106909610B CN201710016523.9A CN201710016523A CN106909610B CN 106909610 B CN106909610 B CN 106909610B CN 201710016523 A CN201710016523 A CN 201710016523A CN 106909610 B CN106909610 B CN 106909610B
Authority
CN
China
Prior art keywords
database
query
sql
browser
information
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201710016523.9A
Other languages
English (en)
Other versions
CN106909610A (zh
Inventor
李琛鸽
丁星
闵圣捷
武静
唐丽娜
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Cetc Kehuayun Information Technology Co ltd
Original Assignee
Cetc Kehuayun Information Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Cetc Kehuayun Information Technology Co ltd filed Critical Cetc Kehuayun Information Technology Co ltd
Priority to CN201710016523.9A priority Critical patent/CN106909610B/zh
Publication of CN106909610A publication Critical patent/CN106909610A/zh
Application granted granted Critical
Publication of CN106909610B publication Critical patent/CN106909610B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/24—Querying
    • G06F16/245—Query processing
    • G06F16/2455—Query execution
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/951—Indexing; Web crawling techniques
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Computational Linguistics (AREA)
  • Human Computer Interaction (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开了一种基于浏览器的可视化拖拽查询数据的方法及系统，该方法包括以下步骤：步骤一，抽取可操作数据库及其结构信息；步骤二，浏览器端获取数据库及其结构信息，并渲染于WEB页面；步骤三，浏览器端渲染查询操作图形组件和画布；步骤四，用户在图形化界面通过拖拽配置方式编排查询操作流程；步骤五，解析图形化查询流程图为SQL语句；步骤六，后端执行SQL查询语句；步骤七，浏览器端输出查询结果。本发明在WEB系统中查询数据更灵活，简化SQL查询语句编写，改变只能输入SQL语句执行数据库查询的现状，降低系统使用门槛，使用图形化方式编排查询过程，使创建查询过程描述更清晰直观，降低学习门槛。

Description

基于浏览器的可视化拖拽查询数据的方法及系统
技术领域
本发明涉及一种查询数据的方法及系统，特别是涉及一种基于浏览器的可视化拖拽查询数据的方法及系统。
背景技术
现有的基于浏览器的数据库查询方法或系统，通常是使用预置的固定的数据查询方法进行数据查询，而此方法灵活性不高，需要在系统开发时定义好大量的数据查询方法；为了使数据库查询更灵活，通常系统中还可以使用标准或优化后的SQL表达式，让用户输入自行编写的SQL语句查询数据，然后传送到系统后端执行查询，而使用此方式则要求用户非常了解SQL语句及其语法，没有SQL和数据库基础的用户可能无法使用该功能。
发明内容
本发明所要解决的技术问题是提供一种基于浏览器的可视化拖拽查询数据的方法及系统，其在WEB系统中查询数据更灵活，简化SQL查询语句编写，改变只能输入SQL语句执行数据库查询的现状，降低系统使用门槛，使用图形化方式编排查询过程，使创建查询过程描述更清晰直观，降低学习门槛。
本发明是通过下述技术方案来解决上述技术问题的：一种基于浏览器的可视化拖拽查询数据的方法，其特征在于，其包括以下步骤：
步骤一，抽取可操作数据库及其结构信息；
步骤二，浏览器端获取数据库及其结构信息，并渲染于WEB页面；
步骤三，浏览器端渲染查询操作图形组件和画布；
步骤四，用户在图形化界面通过拖拽配置方式编排查询操作流程；
步骤五，解析图形化查询流程图为SQL语句；
步骤六，后端执行SQL查询语句；
步骤七，浏览器端输出查询结果。
优选地，所述步骤一包括以下子步骤：
步骤十一：检查数据库连接并存储数据库连接信息；
步骤十二：根据数据库连接信息连接数据库；
步骤十三：获取数据库信息及所有表；
步骤十四：获取数据库中所有表的结构信息；
步骤十五：将数据库信息、所有表及其结构存储于系统数据库。
优选地，所述步骤二包括以下子步骤：
步骤二十一：浏览器端向后端请求数据库信息；
步骤二十二：浏览器端根据获取的数据库信息索引获取所有数据库中的表；
步骤二十三：将数据库及表信息缓存至浏览器端；
步骤二十四：在浏览器端运用HTML5、CSS3及JS技术将数据库、表信息渲染于浏览器页面中，并使渲染出的对象；
步骤二十五：在渲染出的表对象上添加鼠标单击事件，在单击后向后端发出请求，获取表结构数据，并将获取到的表结构数据渲染到界面上表对象下一级目录中；
步骤二十六：在渲染出的表对象上添加鼠标左键按下事件，当鼠标左键按下时，复制一个表对象，并跟随鼠标移动；
步骤二十七：在鼠标左键弹起时，删除复制的对象。
优选地，所述步骤三包括以下子步骤：
步骤三十一：在浏览器中使用JS和SVG技术渲染画布区域，并监听画布上的拖放、点击操作；
步骤三十二：向后端发起请求，获取可用操作类型及相关参数；
步骤三十三：前端获取到可用操作类型数据后，根据图形化规则引擎中的规则定义，将不同的操作类型渲染为不同形状和样式的SVG图形；
步骤三十四：为所有操作类型对应的SVG图形添加鼠标左键按下事件，当鼠标左键按下时，复制一个SVG对象，并跟随鼠标移动；
步骤三十五：添加鼠标左键弹起事件，当鼠标拖动表或操作类型对应的SVG对象到画布中鼠标左键弹起时，在画布对象中添加一个相应的表或SVG对象，并将表和类型数据存储于流程配置JSON对象中；
步骤三十六：在画布上添加的表和SVG对象上添加鼠标单击事件，在单击是为单击对象添加或删除选中样式，当对象上具有选中样式时，在页面中显示属性窗口，根据对象类型，从操作类型数据中获取可配置项，并将可配置项目以动态表单元素的方式渲染于页面中的属性窗口中；
步骤三十七：当属性窗口表单中数据被修改后，同步将这些参数存储于流程配置JSON对象中；
步骤三十八：为画布上的表、操作类型图标流程相关的对象添加hover事件，当鼠标指向对象时，在该SVG对象中添加一个轮廓图形，用于拖拽连线；
步骤三十九：在轮廓图形对象上添加鼠标指向事件及效果，使鼠标指向图形轮廓时显示不同的外观样式，以提示用户边缘可被操作；
步骤四十：在轮廓图形对象上添加鼠标左键按下事件，鼠标左键按下时在SVG画布上添加一个连接线SVG图形，并使线条从按下鼠标左键的位置连接到鼠标当前所在位置，并使用定时器即时刷新线条长度及方向；
步骤四十一：在连接线SVG绘制定时器开启状态下，鼠标左键弹起事件触发后，检测连接线结束点是否与画布中某一表或操作类型图标相近，如线条结束点与某一图标相近，则自动调整线条端点位置使线条规整，完成连接线绘制，否则删除未成功连接的SVG线条；
步骤四十二：在连接线SVG图形上添加双击事件，在双击线条时删除连接线。
优选地，所述步骤五包括以下子步骤：
步骤五十一：在用户配置完查询操作流程图后，将前端存储的流程配置JSON对象提交至后台程序；
步骤五十二：后端SQL规则引擎模块对传入的流程配置JSON对象进行解析，将JSON中的操作类型、操作参数、关联关系、操作顺序信息转换为可执行的SQL语句。
本发明还提供一种基于浏览器的可视化拖拽查询数据的系统，其特征在于，其包括：
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数据进行相互转换；
界面元素及交互操作控制器模块：为界面中被渲染出的库、表、操作图标、线条图形化元素添加交互，并对交互方式、拖放规则、线条连接规则、删除规则、修改规则进行定义与控制，使用于自由创建与编辑查询流程图。
本发明的积极进步效果在于：本发明在WEB系统中查询数据更灵活，简化SQL查询语句编写，改变只能输入SQL语句执行数据库查询的现状，降低系统使用门槛，使用图形化方式编排查询过程，使创建查询过程描述更清晰直观，降低学习门槛。
附图说明
图1为本发明基于浏览器的可视化拖拽查询数据的方法的流程示意图。
图2为本发明基于浏览器的可视化拖拽查询数据的系统的模块示意图。
具体实施方式
下面结合附图给出本发明较佳实施例，以详细说明本发明的技术方案。
如图1所示，本发明基于浏览器的可视化拖拽查询数据的方法包括以下步骤：
步骤一，抽取可操作数据库及其结构信息；后端服务器通过基础数据库查询方法将可以供查询的数据库、表及字段信息存储于系统数据库中，并向前端暴露相应接口；
步骤二，浏览器端获取数据库及其结构信息，并渲染于WEB(互联网总称)页面；浏览器端调用步骤一S1中所描述的后端接口获取可供查询的数据库、表及字段等信息，利用HTML5(超文本标记语言)、JS(JavaScript，直译式脚本语言)等前端技术将数据库以图形化的方式绘制于浏览器中；
步骤三，浏览器端渲染查询操作图形组件和画布；利用HTML5、JS等前端技术，在浏览器中绘制可供使用的查询动作组件和查询工作台区域(画布)；
步骤四，用户在图形化界面通过拖拽配置等方式编排查询操作流程；用户通过拖拽数据库、表或字段到查询工作台区域(画布)，单击或拖动查询动作组件来创建不同的数据库查询方法以及建立查询条件、关系等；
步骤五，解析图形化查询流程图为SQL(Structured Query Language，结构化查询语言)语句；用户单击“执行”按钮后，系统根据特定算法将工作台区域(画布)中用户绘制的查询流程关系图转换为SQL语句，发送至后端服务器；
步骤六，后端执行SQL查询语句；后端服务器将接收到的SQL语句转换为可执行的SQL语句，并执行查询动作，将查询结果返回到浏览器端；
步骤七，浏览器端输出查询结果；浏览器端将接收到的查询结果渲染WEB于页面中。
所述步骤一包括以下子步骤：
步骤十一：检查数据库连接并存储数据库连接信息；
步骤十二：根据数据库连接信息连接数据库；
步骤十三：获取数据库信息及所有表；
步骤十四：获取数据库中所有表的结构信息；
步骤十五：将数据库信息、所有表及其结构存储于系统数据库。
所述步骤二包括以下子步骤：
步骤二十一：浏览器端向后端请求数据库信息；
步骤二十二：浏览器端根据获取的数据库信息索引获取所有数据库中的表；
步骤二十三：将数据库及表信息缓存至浏览器端；
步骤二十四：在浏览器端运用HTML5、CSS3及JS技术将数据库、表等信息渲染于浏览器页面中，并使渲染出的对象；
步骤二十五：在渲染出的表对象上添加鼠标单击事件，在单击后向后端发出请求，获取表结构数据，并将获取到的表结构数据渲染到界面上表对象下一级目录中；
步骤二十六：在渲染出的表对象上添加鼠标左键按下事件，当鼠标左键按下时，复制一个表对象，并跟随鼠标移动；
步骤二十七：在鼠标左键弹起时，删除复制的对象。
所述步骤三包括以下子步骤：
步骤三十一：在浏览器中使用JS和SVG技术渲染画布区域，并监听画布上的拖放、点击等操作；
步骤三十二：向后端发起请求，获取可用操作类型及相关参数；
步骤三十三：前端获取到可用操作类型数据后，根据图形化规则引擎中的规则定义，将不同的操作类型渲染为不同形状和样式的SVG图形；
步骤三十四：为所有操作类型对应的SVG图形添加鼠标左键按下事件，当鼠标左键按下时，复制一个SVG对象，并跟随鼠标移动；
步骤三十五：添加鼠标左键弹起事件，当鼠标拖动表或操作类型对应的SVG对象到画布中鼠标左键弹起时，在画布对象中添加一个相应的表或SVG对象，并将表和类型数据存储于流程配置JSON对象中。
步骤三十六：在画布上添加的表和SVG对象上添加鼠标单击事件，在单击是为单击对象添加或删除选中样式，当对象上具有选中样式时，在页面中显示属性窗口，根据对象类型，从操作类型数据中获取可配置项，并将可配置项目以动态表单元素的方式渲染于页面中的属性窗口中；
步骤三十七：当属性窗口表单中数据被修改后，同步将这些参数存储于流程配置JSON对象中；
步骤三十八：为画布上的表、操作类型图标等流程相关的对象添加hover事件，当鼠标指向对象时，在该SVG对象中添加一个轮廓图形，用于拖拽连线；
步骤三十九：在轮廓图形对象上添加鼠标指向事件及效果，使鼠标指向图形轮廓时显示不同的外观样式，以提示用户边缘可被操作；
步骤四十：在轮廓图形对象上添加鼠标左键按下事件，鼠标左键按下时在SVG画布上添加一个连接线SVG图形，并使线条从按下鼠标左键的位置连接到鼠标当前所在位置，并使用定时器即时刷新线条长度及方向；
步骤四十一：在连接线SVG绘制定时器开启状态下，鼠标左键弹起事件触发后，检测连接线结束点是否与画布中某一表或操作类型图标相近，如线条结束点与某一图标相近，则自动调整线条端点位置使线条规整，完成连接线绘制，否则删除未成功连接的SVG线条；
步骤四十二：在连接线SVG图形上添加双击事件，在双击线条时删除连接线。
所述步骤五包括以下子步骤：
步骤五十一：在用户配置完查询操作流程图后，将前端存储的流程配置JSON对象提交至后台程序；
步骤五十二：后端SQL规则引擎模块对传入的流程配置JSON对象进行解析，将JSON中的操作类型、操作参数、关联关系、操作顺序等信息转换为可执行的SQL语句。
如图2所示，本发明基于浏览器的可视化拖拽查询数据的系统包括：
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数据进行相互转换，即实现SVG与JSON对象的互换。
界面元素及交互操作控制器模块：为界面中被渲染出的库、表、操作图标、线条等图形化元素添加交互，并对交互方式、拖放规则、线条连接规则、删除规则、修改规则等进行定义与控制，使用于可以自由创建与编辑查询流程图。
以上所述的具体实施例，对本发明的解决的技术问题、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本发明的具体实施例而已，并不用于限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (1)

1.一种基于浏览器的可视化拖拽查询数据的方法，其特征在于，包括如下系统模块：
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数据进行相互转换；
界面元素及交互操作控制器模块：为界面中被渲染出的库、表、操作图标、线条图形化元素添加交互，并对交互方式、拖放规则、线条连接规则、删除规则、修改规则进行定义与控制，用于自由创建与编辑查询流程图；
所述可视化拖拽查询数据的方法包括以下步骤：
步骤一，抽取可操作数据库及其结构信息；
步骤二，浏览器端获取数据库及其结构信息，并渲染于WEB页面；
步骤三，浏览器端渲染查询操作图形组件和画布；
步骤四，用户在图形化界面通过拖拽配置方式编排查询操作流程；
步骤五，解析图形化查询流程图为SQL语句；
步骤六，后端执行SQL查询语句；
步骤七，浏览器端输出查询结果；
所述步骤一包括以下子步骤：
步骤十一：检查数据库连接并存储数据库连接信息；
步骤十二：根据数据库连接信息连接数据库；
步骤十三：获取数据库信息及所有表；
步骤十四：获取数据库中所有表的结构信息；
步骤十五：将数据库信息、所有表及其结构存储于系统数据库；
所述步骤二包括以下子步骤：
步骤二十一：浏览器端向后端请求数据库信息；
步骤二十二：浏览器端根据获取的数据库信息索引获取所有数据库中的表；
步骤二十三：将数据库及表信息缓存至浏览器端；
步骤二十四：在浏览器端运用HTML5、CSS3及JS技术将数据库、表信息渲染于浏览器页面中，得到渲染出的表对象；
步骤二十五：在渲染出的表对象上添加鼠标单击事件，在单击后向后端发出请求，获取表结构数据，并将获取到的表结构数据渲染到界面上表对象下一级目录中；
步骤二十六：在渲染出的表对象上添加鼠标左键按下事件，当鼠标左键按下时，复制一个表对象，并跟随鼠标移动；
步骤二十七：在鼠标左键弹起时，删除复制的对象；
所述步骤三包括以下子步骤：
步骤三十一：在浏览器中使用JS和SVG技术渲染画布区域，并监听画布上的拖放、点击操作；
步骤三十二：向后端发起请求，获取可用操作类型及相关参数；
步骤三十三：前端获取到可用操作类型数据后，根据图形化规则引擎中的规则定义，将不同的操作类型渲染为不同形状和样式的SVG图形；
步骤三十四：为所有操作类型对应的SVG图形添加鼠标左键按下事件，当鼠标左键按下时，复制一个SVG对象，并跟随鼠标移动；
步骤三十五：添加鼠标左键弹起事件，当鼠标拖动表或操作类型对应的SVG对象到画布中鼠标左键弹起时，在画布对象中添加一个相应的表或SVG对象，并将表和类型数据存储于流程配置JSON对象中；
步骤三十六：在画布上添加的表和SVG对象上添加鼠标单击事件，在单击时为单击对象添加或删除选中样式，当对象上具有选中样式时，在页面中显示属性窗口，根据对象类型，从操作类型数据中获取可配置项，并将可配置项目以动态表单元素的方式渲染于页面中的属性窗口中；
步骤三十七：当属性窗口表单中数据被修改后，同步将这些参数存储于流程配置JSON对象中；
步骤三十八：为画布上的表、操作类型图标流程相关的对象添加hover事件，当鼠标指向对象时，在该SVG对象中添加一个轮廓图形，用于拖拽连线；
步骤三十九：在轮廓图形对象上添加鼠标指向事件及效果，使鼠标指向图形轮廓时显示不同的外观样式，以提示用户边缘可被操作；
步骤四十：在轮廓图形对象上添加鼠标左键按下事件，鼠标左键按下时在SVG画布上添加一个连接线SVG图形，并使线条从按下鼠标左键的位置连接到鼠标当前所在位置，并使用定时器即时刷新线条长度及方向；
步骤四十一：在连接线SVG绘制定时器开启状态下，鼠标左键弹起事件触发后，检测连接线结束点是否与画布中某一表或操作类型图标相近，如线条结束点与某一图标相近，则自动调整线条端点位置使线条规整，完成连接线绘制，否则删除未成功连接的SVG线条；
步骤四十二：在连接线SVG图形上添加双击事件，在双击线条时删除连接线；
所述步骤五包括以下子步骤：
步骤五十一：在用户配置完查询操作流程图后，将前端存储的流程配置JSON对象提交至后台程序；
步骤五十二：后端SQL规则引擎模块对传入的流程配置JSON对象进行解析，将JSON中的操作类型、操作参数、关联关系、操作顺序信息转换为可执行的SQL语句。
CN201710016523.9A 2017-01-10 2017-01-10 基于浏览器的可视化拖拽查询数据的方法及系统 Active CN106909610B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710016523.9A CN106909610B (zh) 2017-01-10 2017-01-10 基于浏览器的可视化拖拽查询数据的方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710016523.9A CN106909610B (zh) 2017-01-10 2017-01-10 基于浏览器的可视化拖拽查询数据的方法及系统

Publications (2)

Publication Number Publication Date
CN106909610A CN106909610A (zh) 2017-06-30
CN106909610B true CN106909610B (zh) 2020-11-24

Family

ID=59207205

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710016523.9A Active CN106909610B (zh) 2017-01-10 2017-01-10 基于浏览器的可视化拖拽查询数据的方法及系统

Country Status (1)

Country Link
CN (1) CN106909610B (zh)

Families Citing this family (30)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108319687B (zh) * 2018-02-01 2021-12-03 中国农业银行股份有限公司 一种基于js拖拽技术的sql规则生成器
CN110807042B (zh) * 2018-07-20 2023-02-24 武汉烽火众智智慧之星科技有限公司 一种sql语句生成系统及方法
CN109408540A (zh) * 2018-08-24 2019-03-01 周宁 一种可视化sql查询系统及方法
CN109460418B (zh) * 2018-10-22 2021-04-13 武汉达梦数据库有限公司 一种基于数据库的查询业务执行方法
CN109558420A (zh) * 2018-11-23 2019-04-02 北京锐安科技有限公司 数据查询方法、装置、电子设备及存储介质
CN109634476B (zh) * 2018-11-29 2021-10-15 武汉兴图新科电子股份有限公司 一种基于c#语言的二维可视化图层设备显示控制方法及系统
CN109815288A (zh) * 2019-01-28 2019-05-28 武汉卓力品胜科技有限公司 一种数据可视化方法及系统
CN109992262A (zh) * 2019-03-27 2019-07-09 杭州城市大数据运营有限公司 一种结构化查询语言(sql)图形化操作方法
CN109992589B (zh) * 2019-04-11 2020-04-10 北京启迪区块链科技发展有限公司 基于可视化页面生成sql语句的方法、装置、服务器及介质
CN110083650B (zh) * 2019-04-25 2023-06-30 中电科嘉兴新型智慧城市科技发展有限公司 一种基于元数据自发现的数据查询接口自动生成方法
CN110222047B (zh) * 2019-04-28 2021-03-16 深圳易伙科技有限责任公司 一种动态表单生成方法和装置
CN110232162B (zh) * 2019-05-29 2020-06-09 北京中亦安图科技股份有限公司 一种基于html5的流程定义方法及系统
CN110245175A (zh) * 2019-06-19 2019-09-17 山东浪潮商用系统有限公司 一种基于大数据的可视化加工处理系统及方法
CN110222113A (zh) * 2019-06-20 2019-09-10 中国人民解放军陆军特种作战学院 一种数据提取处理可视化预警方法
CN110413675A (zh) * 2019-07-24 2019-11-05 深圳乐信软件技术有限公司 一种实时任务计算的控制方法、装置、服务器及存储介质
CN110377429A (zh) * 2019-07-24 2019-10-25 深圳乐信软件技术有限公司 一种实时任务计算的控制方法、装置、服务器及存储介质
CN110489441B (zh) * 2019-08-12 2022-08-05 厦门商集网络科技有限责任公司 一种基于大数据的即席查询方法及设备
CN110619013A (zh) * 2019-09-10 2019-12-27 紫光云技术有限公司 一种基于Json对象进行可视化配置的方法
CN111813926B (zh) * 2019-11-13 2022-12-09 中国传媒大学 一种图数据库Neo4J交互可视化的操作方法与系统
CN110825766A (zh) * 2019-11-13 2020-02-21 恩亿科(北京)数据科技有限公司 查询条件生成方法、装置、服务器及可读存储介质
CN111145038B (zh) * 2019-12-02 2023-08-01 积成电子股份有限公司 基于可视化数据流图的电网调控大数据交互式分析方法
CN111274304A (zh) * 2019-12-31 2020-06-12 武汉优聘科技有限公司 一种数据可视化的图表控制方法及系统
CN111831275B (zh) * 2020-07-14 2023-06-30 绿盟科技集团股份有限公司 一种编排微场景剧本的方法、服务器、介质及计算机设备
CN111831192A (zh) * 2020-07-23 2020-10-27 北京思特奇信息技术股份有限公司 一种绘制流程图的方法、系统及电子设备
CN112463873A (zh) * 2020-11-12 2021-03-09 苏州浪潮智能科技有限公司 一种图数据库可视化交互方法、装置、设备及可读介质
CN112417027A (zh) * 2020-11-19 2021-02-26 青岛以萨数据技术有限公司 可视化操作数据库的数据处理方法、系统、终端及介质
CN112363713A (zh) * 2020-11-30 2021-02-12 杭州玳数科技有限公司 一种绑定式的sql血缘解析数据流可视化交互方法
CN112783966B (zh) * 2021-01-08 2022-05-17 科大国创云网科技有限公司 一种基于业务元数据的sql可视化设计生成方法及系统
CN113434130A (zh) * 2021-06-25 2021-09-24 平安科技（深圳）有限公司 Sql自动生成方法及装置
CN114397994A (zh) * 2021-12-20 2022-04-26 北京旷视科技有限公司 一种对象管理方法、电子设备及存储介质

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103873277A (zh) * 2012-12-12 2014-06-18 中国科学院声学研究所 一种分层的网络拓扑可视化方法及系统
CN105335508A (zh) * 2015-10-29 2016-02-17 苏州国云数据科技有限公司 基于浏览器的可视化拖拽显示数据源信息的方法
CN105512139A (zh) * 2014-09-26 2016-04-20 阿里巴巴集团控股有限公司 数据可视化的实现方法及装置
CN105549982A (zh) * 2016-01-14 2016-05-04 国网山东省电力公司物资公司 一种基于模型配置的自动化开发平台
CN105740333A (zh) * 2016-01-23 2016-07-06 北京掌阔移动传媒科技有限公司 一种可视化的广告管理平台和实现方法
CN106293661A (zh) * 2015-05-22 2017-01-04 阿里巴巴集团控股有限公司 图形报表的生成、生成处理方法及装置

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103873277A (zh) * 2012-12-12 2014-06-18 中国科学院声学研究所 一种分层的网络拓扑可视化方法及系统
CN105512139A (zh) * 2014-09-26 2016-04-20 阿里巴巴集团控股有限公司 数据可视化的实现方法及装置
CN106293661A (zh) * 2015-05-22 2017-01-04 阿里巴巴集团控股有限公司 图形报表的生成、生成处理方法及装置
CN105335508A (zh) * 2015-10-29 2016-02-17 苏州国云数据科技有限公司 基于浏览器的可视化拖拽显示数据源信息的方法
CN105549982A (zh) * 2016-01-14 2016-05-04 国网山东省电力公司物资公司 一种基于模型配置的自动化开发平台
CN105740333A (zh) * 2016-01-23 2016-07-06 北京掌阔移动传媒科技有限公司 一种可视化的广告管理平台和实现方法

Also Published As

Publication number Publication date
CN106909610A (zh) 2017-06-30

Similar Documents

Publication Publication Date Title
CN106909610B (zh) 基于浏览器的可视化拖拽查询数据的方法及系统
US11635944B2 (en) Methods and systems for programmatic creation of an interactive demonstration presentation for an envisioned software product
US10671235B2 (en) Software robots for programmatically controlling computer programs to perform tasks
US11710064B2 (en) Machine learning analysis of user interface design
US8996978B2 (en) Methods and systems for performing analytical procedures by interactions with visual representations of datasets
US9058365B2 (en) Systems and methods providing touchscreen report navigation
CN109992589A (zh) 基于可视化页面生成sql语句的方法、装置、服务器及介质
CN107111639B (zh) 构建报表
US7849419B2 (en) Computer-implemented graphical user interface previews
CN109033260B (zh) 基于rdf的知识图谱交互式可视化查询方法
JP6866551B2 (ja) 数式処理方法、装置、デバイス及びプログラム
JP2013528860A (ja) 選択したデータの一時的な書式設定とグラフ化
KR101951719B1 (ko) 그래픽 인터페이스 기반으로 이벤트 동작을 프로그래밍 하는 웹 레포팅 디자인 시스템
US9880815B2 (en) SQL visualizer
CN108319687B (zh) 一种基于js拖拽技术的sql规则生成器
US9239854B2 (en) Multi-domain impact analysis using object relationships
US20160231876A1 (en) Graphical interaction in a touch screen user interface
US9529843B2 (en) Highly portable and dynamic user interface component to specify and perform simple to complex filtering on data using natural language-like user interface
Karpovich et al. Topic model visualization with IPython
Jiang et al. Log-it: Supporting Programming with Interactive, Contextual, Structured, and Visual Logs
KR101910179B1 (ko) 데이터 시각화를 위한 웹 기반 차트 라이브러리 시스템
In et al. This is the table i want! interactive data transformation on desktop and in virtual reality
US20140282477A1 (en) Automatic updating of data in application programs
Bennett et al. Working with’monster’traces: Building a scalable, usable, sequence viewer
Anderson et al. Visualization of search results of large document sets

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant