基於可視化複雜SQL拼接插件 QueryBuilder

本文演示地址爲：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