# CodeMirror5-mybatis-sqlquery

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

## Basic Information

- **Project Name**: CodeMirror5-mybatis-sqlquery
- **Description**: 基于CodeMirror5实现的mybatis+sql提示扩展功能，主要是用于在线设计开发场景中的动态sql部分，以便于开发的动态接口可以直接复用Sql以及传入动态参数。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2024-01-26
- **Last Updated**: 2024-09-11

## Categories & Tags

**Categories**: Uncategorized

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

## README

# CodeMirror5-mybatis-sqlquery

#### 介绍
     基于CodeMirror5实现的mybatis标签整合sql提示扩展功能，主要是用于在线设计开发场景中的动态sql部分，以便于开发的动态接口可以直接复用Sql以及传入动态参数。

##### 实现功能
  
1.    sql与xml标签无缝结合，已包含sqlquery模式的所有提示效果
2.    mybatis标签提示
3.    mybatis标签自身属性提示
4.    引用、嵌套标签中的sql也能提示

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


#### 演示效果


1.   标签属性提示（已设置的属性不重复提示）
![输入图片说明](images/%E6%A0%87%E7%AD%BE%E5%B1%9E%E6%80%A7%E6%8F%90%E7%A4%BA.png)

2.   标签提示（按父子可嵌套逻辑提示）
![输入图片说明](images/%E6%A0%87%E7%AD%BE%E6%8F%90%E7%A4%BA.png)
![输入图片说明](images/%E6%A0%87%E7%AD%BE%E6%8F%90%E7%A4%BA2.png)

3.   处理sql，嵌套标签、引入标签均可以提示
![输入图片说明](images/%E8%B7%A8%E6%A0%87%E7%AD%BE%E6%8F%90%E7%A4%BA.png)

4.   可以开启自动转换驼峰，方便对应javabean属性
![输入图片说明](images/%E9%A9%BC%E5%B3%B0%E5%A4%84%E7%90%86.png)

#### 安装教程

-     引入该项目js和css：  
      lib/sqlquery.css  
      lib/mybatis.js  
      lib/mybatissql.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 
        /addon/comment/continuecomment.js  
        /addon/edit/closetag.js  
        /addon/edit/matchtags.js

#### 使用说明  

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

1.   调用以下方法进行初始化（可以查看example页面）：  
-     //注册CodeMirror自定义mode  
        mybatisHandler(CodeMirror); 
-     //注册CodeMirror自定义hint  
        mybatisHintHandler(CodeMirror); 
-     //注册CodeMirror自定义mode  
        sqlqueryHandler(CodeMirror); 
-     //注册CodeMirror自定义hint  
        sqlqueryHintHandler(CodeMirror); 
-     //创建编辑器  
        createMybatisEditor(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对象  
       };