CodeMirror5-sqlquery

介绍

  基于CodeMirror5实现的Sql提示扩展功能，主要是用在Sql控制台场景中，对于经常查询数据库的用户很有帮助。

实现功能

1. 展示更多信息（字段、标题、类型、详细注释说明）
2. 模糊匹配关键字，且表、字段高亮
3. 单表、多表提示
4. 嵌套子查询提示
5. 多模式（schema）查询提示
6. 支持多sql，分号“;”间隔
7. 支持独立注释，用“--”
8. 默认快捷表别名（用于快捷引用和查看字段）
9. 特殊别名处理

软件架构

• CodeMirror5
• JavaScript

演示效果

1. 模糊匹配

2. 更多信息展示

3. 默认别名defaultMain使用，无别名快捷选择，记不住字段时快捷查看

4. 多模式查询

5. 多条sql识别，支持注释

6. 别名识别，`XX`、[XX]、"XX"转义处理，子查询字段处理

安装教程

• 引入该项目js和css：  
  lib/sqlquery.css  
  lib/sqlquery.js  

• 引入CodeMirror5的js和css：  
    /codemirror.min.css  
    /theme/dracula.css  
    /addon/hint/show-hint.css  
    /addon/display/fullscreen.css  
    /addon/dialog/dialog.css  
    /codemirror.min.js  
    /addon/hint/show-hint.js  
    /addon/selection/selection-pointer.js  
    /addon/display/autorefresh.js  
    /addon/display/placeholder.js  
    /addon/display/fullscreen.js  
    /addon/edit/matchbrackets.js  
    /addon/hint/anyword-hint.js  
    /addon/fold/comment-fold.js  
    /addon/comment/comment.js  
    /addon/dialog/dialog.js  

使用说明

  已把初始配置、输入事件、实时查询逻辑封装在一起了，方便使用

1. 调用以下方法进行初始化（可以查看example页面）：

• //注册CodeMirror自定义mode  
    sqlqueryHandler(CodeMirror); 

• //注册CodeMirror自定义hint  
    sqlqueryHintHandler(CodeMirror); 

• //创建编辑器  
    createSqlEditor(selfObj,"sqlcontent");

• //处理hint触发事件  
    keypressSqlEditor(selfObj, getColsOfSchema, getTablesOfSchema);

2. 接口需要后台实现（查库、查表、查字段）

• 获取库信息接口（格式无所谓，按页面需要）  
       自定义  

• 获取表信息接口，固定格式  
     queryVal={databaseId: "111",schemaType: "public"]}  
     getColsOfSchema(selfObj,queryVal,callbackHint) {  
        //接口实现  
        //接口响应完成后执行回调  
        callbackHint(data);  
     }

• 获取字段信息接口，固定格式  
     queryVal={databaseId: "111",tableNames: ["public.XXXX1","public.XXXX2"]}  
     getTablesOfSchema(selfObj,queryVal,callbackHint) {  
        //接口实现  
        //接口响应完成后执行回调  
        callbackHint(data);  
     }

3. 初始对象属性

•  var selfObj={  
      existTables:{}, //已查询的表  
       existTableCols:{}, //已查询的表字段  
       databaseId: null, //当前数据库id  
       schemaTypes: null, //当前数据库的模式集合  
       mainSchema: null, //当前数据库的主模式  
       sqlEditor: null, //sql编辑器  
       hintOptions: null, //提示框hint对象  
   };