vue+codemirror 实现SQL编译器并使用及sql-formatter格式化sql语句

拼搏现实的明天。 2022-10-07 10:52 939阅读 0赞

需求：实现一个SQL编辑区，通过左侧选择自动生成SQL语句。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70]

# codemirror代码编辑器使用 #

*  安装

npm install --save vue-codemirror

*  代码：已经封装好的组件，可自行配置参数直接复制使用。（使用的idea主题）

//封装好的组件
    <template>
    	<div class="json-editor">
    		<textarea ref="textarea" />
    	</div>
    </template>
    
    <script>
    	import CodeMirror from 'codemirror'
    	import 'codemirror/lib/codemirror.css'
    	import 'codemirror/mode/sql/sql.js'
    	// 替换主题这里需修改名称
    	import 'codemirror/theme/idea.css'
    	export default {
    		props: {
    			value: {
    				type: String,
    				required: true
    			},
    			height: {
    				type: String,
    				required: true
    			}
    		},
    		data() {
    			return {
    				editor: false
    			}
    		},
    		watch: {
    			value(value) {
    				const editorValue = this.editor.getValue()
    				if (value !== editorValue) {
    					this.editor.setValue(this.value)
    				}
    			},
    			height(value) {
    				this.editor.setSize('auto', this.height)
    			}
    		},
    		mounted() {
    			this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
    				mode: 'text/x-mysql', //语言
    				lineNumbers: true, //是否在编辑器左侧显示行号
    				lint: true,
    				matchBrackets: true, // 括号匹配
    				lineWrapping: true,
    				tabSize: 2, // 缩进格式
    				styleActiveLine: true, // 高亮选中行
    				cursorHeight: 0.9,
    				// 替换主题这里需修改名称
    				theme: 'idea',
    				//是否为只读,如果为"nocursor" 不仅仅为只读 连光标都无法在区域聚焦
    				readOnly: false,
    			})
    			this.editor.setSize('auto', this.height)
    			this.editor.setValue(this.value)
    		},
    		methods: {
    			getValue() {
    				return this.editor.getValue()
    			}
    		}
    	}
    </script>
    
    <style scoped>
    	.json-editor {
    		height: 100%;
    	}
    
    	.json-editor>>>.CodeMirror {
    		font-size: 14px;
    		/* overflow-y:auto; */
    		font-weight: normal
    	}
    
    	.json-editor>>>.CodeMirror-scroll {}
    
    	.json-editor>>>.cm-s-rubyblue span.cm-string {
    		color: #F08047;
    	}
    </style>

//父组件调用

//绑定value值即可
    <code-mirror ref="codemirror" :value="content" :height="'400px'"></code-mirror>

# SQL代码格式化功能 #

*  npm安装sql-formatter插件（如果已安装淘宝镜像使用cnpm）

npm install --save sql-formatter

*  引入该sql-formatter.js文件

import sqlFormatter from 'sql-formatter';

*  使用方法

formatSql() {
    	/*（sql编辑器内容绑定content参数） 将sql内容进行格式后放入编辑器中*/
        this.content = sqlFormatter.format(this.content);
    },

*  格式化后效果  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70 1]

# SQL代码格式化遇到的bug #

*  使用过程中遇到问题：`cannot read property ‘format‘ of undefined`  
    解决：版本问题，默认安装4.x.x版本，将版本改低即可。  
    ![在这里插入图片描述][20210617175156747.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70]: /images/20221005/eede07fd24284887a48dff4e0695368a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70 1]: /images/20221005/d9c7948327134ef89706cb403247c49f.png
[20210617175156747.png]: /images/20221005/9ba57a8b48e447c9b0152b957cbc5954.png