基于可视化复杂SQL拼接插件 QueryBuilder

原创
2015/07/17 19:02
阅读数 3.5W

本文演示地址为:https://www.oschina.net/p/QueryBuilder

引言

基于Web的自定义查询系统在国内一直是一个短板,目前国内普遍的自定义查询均为一个简单的查询组件的罗列,达不到真正的实现动态、智能化的自定义查询。本系统就是在这个背景下,着力于解决这个短板,并将一个demo发布出来。

功能设计

1.1设计思想

自定义查询系统的组要目的是对系统中的任何数据进行任意组合的查询,而考虑到目前国内传统的自定义查询模块仅仅是条件的简单罗列、并不能达到处理复杂查询的目的的缺点开发一套类似于SQL语句的一个可视化的综合查询模块。

在本模块中,可以创建由各种复杂SQL查询语句组成的可视化的查询模板,在此模块中,包括查询数据来源、类别名管理、结果显示列管理、简单查询、高级查询、查询模板置顶、查询结果显示区域等。在综合查询模块设计中,分为两部分,一是动态的基础模型,二是用户在基础查询模型的基础之上创建的由自己定义的查询条件组成的查询模板。通过这两个部分来达到实现高度灵活的综合查询的功能。基础模型包含模型初始化组件和基础查询模型组件,初始化组件是由javascript 函数构成的。这些组件共同组成了在查询条件中可能出现的所有的组件和约束,基础查询模型由后台代码根据用户选择的查询类动态的生成Json对象封装。这两个组件所构成的基础模型则提供给用户作为其创建自定义查询的基础。模型初始化组件又包括数据库配置和模型定制两个子组件,它们分别负责数据库的连接和处理获取到的数据库元数据的表结构和实体类的沟通。 查询模板则是用户在有基础查询模型的基础上定义出来的新的模型。这个基础模型是通过前端js技术以可视化界面的形式展示出来的,用户通过操作这些可视化的组件,来达到配置查询类,配置类的别名、设置结果显示列和构建查询条件的目的。 在本模块中,构建的查询条件全部是通过js函数动态智能生成的,在此过程中,涉及到了Ajax异步刷新技术,请求生命周期处理等等。同时,本模块添加了支持查询模板置顶以及根据查询模板的点击量智能排序的功能。

1.2系统功能组成

自定义查询系统的功能结构如下图所示:

 

 

 

 

 

 

 

 

 

 

 

 

1.3 数据模型

 

开发过程设计

自定义查询系统的主要功能就是让用户能够在系统中完成任意数据组合的自定义查询模板的创建和查询过程。而目前国内较为普遍的自定以查询仅仅是查询条件的简单罗列,并且不可以修改所要查询的元数据。本系统中的自定义查询综合了用户的实际需求和系统实际开发技术,本模块后台程序结合前端JQuery框架,Ajax技术以及Json技术实现基于SQL动态拼接的可视化的操作平台。

本模块的开发设计包含两大组件,分别是模型初始化组件(Initial Model)和查询组件(Query Component)。本模块的设计开发模型如下:

 

 

模型初始化组件(Initial Model)是提供给系统开发人员的用来订制初始化查询结构模型(一套关联的表及字段,和一些工具类构成的初始化模型,是用户可以用来进行查询条件选择的范围的依据和约束)。

模型初始化组件(Initial Model)又包含两个子组件,分别是基本数据源配置(DS Config)和模型定制(Model Customize)两个子组件。

1)基本数据源配置(DS Config)组要包括两个分类:一是支持模型(Support Model);一是支持组件(Support Component),主要负责从系统的配置文件中读取相应模块下的类、表、以及类的属性和表的列之间的映射关系和类型.

2)模型定制(Model Customize)是预处理从前端传送回的数据的一个预处理组件,它将传送回的数据和数据库中以及系统中的元模型进行匹配处理,然后返回处理后的基础模型,以便用户在基础模型上建立自定义查询模型。模型定制的支持组件包含两个:一个是特殊类型配置文件及配置解析文件(Special Type Res),一个是表/类反射解析文件(T/C Reflection Res)。

查询组件(Query Component)是提供给系统普通用户使用的灵活查询功能,可以让用户自定义查询条件及结果显示内容。

查询组件在页面上的最终形成的结构组成如下图:

 

功能组件(Fuc Component)主要作用就是使用户能够使用以上组件灵活地构建查询模板和组件查询结构。它主要有四个子功能:模板加载(Template Loader)、查询表/类加载(  Query T/C Loader)、表/类别名管理(T/C Alia Management)、显示项管理(Display Item Management)、查询条件订制(Query Condition Customize)、组装查询语句(HQL Generate)和查询数据(Query Data)。

开发效果展示

     

                                                                                             图1  模板管理   

                                                                                             图2   编辑模板            

 

                                                                                    图3  建立查询条件

如果朋友们想继续交流,请加入qq群:129113306

展开阅读全文
打赏
17
112 收藏
分享
加载中
#QueryBuilder# 这是这个插件的说明
2016/07/22 12:50
回复
举报

引用来自“utopia1985”的评论

可不可以 给我一份
你可以先去 www.niubai.net.cn 查看演示,如果感兴趣在www.niubai.net.cn上有下载的地方29
2016/07/22 12:49
回复
举报
307191022@qq.com 谢谢啦
2016/07/22 11:23
回复
举报
可不可以 给我一份
2016/07/22 11:23
回复
举报
2016/07/22 11:22
回复
举报

引用来自“萝卜大帝”的评论

54源码咯。。

引用来自“feifeiguo”的评论

已经完成,现在正在整合规范代码,然后源码。

引用来自“萝卜大帝”的评论

感觉很厉害,这个功能。。能不能先发一份给我看看

引用来自“feifeiguo”的评论

你帮我连接上OSChina.源码你就可以down下来,帮我连接osc呗,我怎么都连不上。

引用来自“萝卜大帝”的评论

怎么帮你连啊?。。

引用来自“feifeiguo”的评论

算了,我现在已经连接上了,哈哈,代码估计下周之前就会上线,不要急,等等

引用来自“萝卜大帝”的评论

源码上传了么。。

引用来自“feifeiguo”的评论

上传了,但是配了新的框架,这个框架还有点问题,暂时还跑步起来

引用来自“萝卜大帝”的评论

在哪下载?
http://git.oschina.net/noworld/queryBuilder-JQuery
2015/08/10 21:23
回复
举报

引用来自“萝卜大帝”的评论

54源码咯。。

引用来自“feifeiguo”的评论

已经完成,现在正在整合规范代码,然后源码。

引用来自“萝卜大帝”的评论

感觉很厉害,这个功能。。能不能先发一份给我看看

引用来自“feifeiguo”的评论

你帮我连接上OSChina.源码你就可以down下来,帮我连接osc呗,我怎么都连不上。

引用来自“萝卜大帝”的评论

怎么帮你连啊?。。

引用来自“feifeiguo”的评论

算了,我现在已经连接上了,哈哈,代码估计下周之前就会上线,不要急,等等

引用来自“萝卜大帝”的评论

源码上传了么。。

引用来自“feifeiguo”的评论

上传了,但是配了新的框架,这个框架还有点问题,暂时还跑步起来
在哪下载?
2015/08/10 13:44
回复
举报

引用来自“萝卜大帝”的评论

54源码咯。。

引用来自“feifeiguo”的评论

已经完成,现在正在整合规范代码,然后源码。

引用来自“萝卜大帝”的评论

感觉很厉害,这个功能。。能不能先发一份给我看看

引用来自“feifeiguo”的评论

你帮我连接上OSChina.源码你就可以down下来,帮我连接osc呗,我怎么都连不上。

引用来自“萝卜大帝”的评论

怎么帮你连啊?。。

引用来自“feifeiguo”的评论

算了,我现在已经连接上了,哈哈,代码估计下周之前就会上线,不要急,等等

引用来自“萝卜大帝”的评论

源码上传了么。。
上传了,但是配了新的框架,这个框架还有点问题,暂时还跑步起来
2015/08/10 12:43
回复
举报

引用来自“萝卜大帝”的评论

54源码咯。。

引用来自“feifeiguo”的评论

已经完成,现在正在整合规范代码,然后源码。

引用来自“萝卜大帝”的评论

感觉很厉害,这个功能。。能不能先发一份给我看看

引用来自“feifeiguo”的评论

你帮我连接上OSChina.源码你就可以down下来,帮我连接osc呗,我怎么都连不上。

引用来自“萝卜大帝”的评论

怎么帮你连啊?。。

引用来自“feifeiguo”的评论

算了,我现在已经连接上了,哈哈,代码估计下周之前就会上线,不要急,等等
源码上传了么。。
2015/08/10 09:51
回复
举报

引用来自“萝卜大帝”的评论

54源码咯。。

引用来自“feifeiguo”的评论

已经完成,现在正在整合规范代码,然后源码。

引用来自“萝卜大帝”的评论

感觉很厉害,这个功能。。能不能先发一份给我看看

引用来自“feifeiguo”的评论

你帮我连接上OSChina.源码你就可以down下来,帮我连接osc呗,我怎么都连不上。

引用来自“萝卜大帝”的评论

怎么帮你连啊?。。
算了,我现在已经连接上了,哈哈,代码估计下周之前就会上线,不要急,等等
2015/07/31 15:06
回复
举报
更多评论
打赏
34 评论
112 收藏
17
分享
返回顶部
顶部