# 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对象 };