浅析基于可视化复杂SQL拼接插件 QueryBuilder技术！

个人博客导航页（点击右侧链接即可打开个人博客）：大牛带你入门技术栈 

引言

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

功能设计

1.1设计思想

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

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

1.2系统功能组成

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