# CodeMirror5-sqlquery

**Repository Path**: 172463468/codemirror5-sqlquery

## Basic Information

- **Project Name**: CodeMirror5-sqlquery
- **Description**: 基于CodeMirror5实现的Sql提示扩展功能，主要是用在Sql控制台场景中，对于经常查询数据库的用户很有帮助。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2024-01-26
- **Last Updated**: 2024-04-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: SQL, sql提示, codemirror, JavaScript, 前端

## README

# CodeMirror5-sqlquery

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

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


#### 软件架构
  -    CodeMirror5  
  -    JavaScript  

#### 演示效果

1.    模糊匹配
![输入图片说明](images/%E6%A8%A1%E7%B3%8A%E5%8C%B9%E9%85%8D.png)

2.    更多信息展示
![输入图片说明](images/%E6%9B%B4%E5%A4%9A%E4%BF%A1%E6%81%AF.png)

3.    默认别名defaultMain使用，无别名快捷选择，记不住字段时快捷查看
![输入图片说明](images/%E9%BB%98%E8%AE%A4%E5%88%AB%E5%90%8D.png)
![输入图片说明](images/%E9%BB%98%E8%AE%A4%E5%88%AB%E5%90%8D2.png)
4.    多模式查询
![输入图片说明](images/%E5%A4%9A%E6%A8%A1%E5%BC%8F%E6%9F%A5%E8%AF%A2.png)
![输入图片说明](images/%E5%A4%9A%E6%A8%A1%E5%BC%8F%E6%9F%A5%E8%AF%A22.png)

5.    多条sql识别，支持注释
![输入图片说明](images/%E5%A4%9Asql%E6%94%AF%E6%8C%81.png)
6.    别名识别，\`XX\`、[XX]、"XX"转义处理，子查询字段处理
![输入图片说明](images/%E5%AD%90%E6%9F%A5%E8%AF%A2%E5%92%8C%E5%88%AB%E5%90%8D%E5%A4%84%E7%90%86.png)

#### 安装教程

-     引入该项目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对象  
       };