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

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

Method and system for visually dragging and querying data based on Browser

The invention discloses a method for data visualization and query system based on the browser drag, the method includes the following steps: step one, extraction of database operation and structure information; step two, the browser access database and structure information, and to render WEB pages; step three, the browser rendering graphics components and query operation the canvas; step four, the user in a graphical interface by dragging the configuration arrangement query operation process; step five, analytic graphical query flow chart for the SQL statement; step six, the back end of the SQL query; step seven, the browser output query results. The present invention in the WEB system more flexible data query, simplified SQL query compilation, change can only enter the SQL statement execution status of the database query, lower threshold for the use of the system, using the graphical arrangement of the query process, query process description to create more clear and intuitive, low learning threshold.

【技术实现步骤摘要】
基于浏览器的可视化拖拽查询数据的方法及系统
本专利技术涉及一种查询数据的方法及系统，特别是涉及一种基于浏览器的可视化拖拽查询数据的方法及系统。
技术介绍
现有的基于浏览器的数据库查询方法或系统，通常是使用预置的固定的数据查询方法进行数据查询，而此方法灵活性不高，需要在系统开发时定义好大量的数据查询方法；为了使数据库查询更灵活，通常系统中还可以使用标准或优化后的SQL表达式，让用户输入自行编写的SQL语句查询数据，然后传送到系统后端执行查询，而使用此方式则要求用户非常了解SQL语句及其语法，没有SQL和数据库基础的用户可能无法使用该功能。
技术实现思路
本专利技术所要解决的技术问题是提供一种基于浏览器的可视化拖拽查询数据的方法及系统，其在WEB系统中查询数据更灵活，简化SQL查询语句编写，改变只能输入SQL语句执行数据库查询的现状，降低系统使用门槛，使用图形化方式编排查询过程，使创建查询过程描述更清晰直观，降低学习门槛。本专利技术是通过下述技术方案来解决上述技术问题的：一种基于浏览器的可视化拖拽查询数据的方法，其特征在于，其包括以下步骤：步骤一，抽取可操作数据库及其结构信息；步骤二，浏览器本文档来自技高网...

【技术保护点】
一种基于浏览器的可视化拖拽查询数据的方法，其特征在于，其包括以下步骤：步骤一，抽取可操作数据库及其结构信息；步骤二，浏览器端获取数据库及其结构信息，并渲染于WEB页面；步骤三，浏览器端渲染查询操作图形组件和画布；步骤四，用户在图形化界面通过拖拽配置方式编排查询操作流程；步骤五，解析图形化查询流程图为SQL语句；步骤六，后端执行SQL查询语句；步骤七，浏览器端输出查询结果。

【技术特征摘要】
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对象中添加一个轮廓图形，用于拖拽连线；步骤三十九：在轮廓图形对象上添加鼠标指向事件及效果，使鼠标指...

【专利技术属性】
技术研发人员：李琛鸽，丁星，闵圣捷，武静，唐丽娜，
申请(专利权)人：中电科华云信息技术有限公司，
类型：发明
国别省市：上海,31