1.下载
npm install sql-formatter --save //sql语句格式化 版本2.3.3(不然报错)
npm install vue-codemirror --save //用于sql语句关键词高亮
2.引入
import sqlFormatter from 'sql-formatter';
import CodeMirror from 'codemirror/lib/codemirror';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/darcula.css';
import 'codemirror/mode/sql/sql.js';
3.使用
<template>
<textarea autofocus="true" ref="mycode" class="codesql" v-model="sqlCode"> </textarea>
<Button class="mr" type="primary" @click="handleFormat">格式化</Button>
</template>
<script>
export default {
data(){
return{
sqlCode: '',
sqlScript:'select * from 表格名称',
editor:null
}
},
method:{
// sql初始化
sqlInit() {
this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
value: this.sqlCode,
mode: 'text/x-mariadb',
indentWithTabs: true,
smartIndent: true,
lineNumbers: true,
matchBrackets: true,
cursorHeight: 1,
lineWrapping: true,
readOnly: false,
theme: 'darcula',
autofocus: true,
});
},
// 格式化
handleFormat() {
let sql = sqlFormatter.format(this.sqlScript, { syntax: 'sql' });
this.editor.setValue(sql); // 设置sql语句
this.sqlScript=this.editor.getValue(); //获取sql语句
},
}
}
</script>
4.遇到的问题
“select * from 表格名称” 这个字符包含了中文,如果进行格式化,就会变成 “select * from 表 格 名 称” 中文之前添加了空格
解决方法:使用正则去掉空格
使用正侧格式化去掉空格我尝试的几种方法
方法一
// const result = sql.replace(/([\u4e00-\u9fa5])\s+/g, '$1');
// 这种方式如果中文后面还有引文就不行
例如 "select * from 表格名称 where age='1'"
// "select * from 表格名称where age='1'" 就会把中文后面的空格去掉❌
方法二
// const result = sql.replace(/(\s*)([\u4e00-\u9fa5])/g, '$2').replace(/([a-zA-Z])([\u4e00-\u9fa5])/g, '$1 $2');
ql.replace(/(\s*)([\u4e00-\u9fa5])/g, '$2') 这个是去掉中文前面的空格,中文前面可能是英文,所以还需一步给英文前面添加空格replace(/([a-zA-Z])([\u4e00-\u9fa5])/g, '$1 $2')
// 例如 "select * from 表格名称 where age='18' and name='rose中文'"
//"select * from 表格名称 where age='18' and name='rose 中文'" 就会把name='rose 中文'" 中间加一个空格❌
方法三(最终版本)
// 格式化
handleFormat() {
let sql = sqlFormatter.format(this.editor.getValue());
let arr = ['select', 'from', 'as', 'where', 'group by', 'order by', 'and', 'on', 'like', 'end'];
let result = this.addSpaceAfterWord(sql.replace(/(\s*)([\u4e00-\u9fa5])/g, '$2'), arr);
this.editor.setValue(result);
console.log(result, 'result');
},
addSpaceAfterWord(sql, keywords) {
const keywordPattern = new RegExp(`\\b(${keywords.join('|')})\\b`, 'gi');
return sql.replace(keywordPattern, '$& ');
},
//先把中文之间的空格给去掉,这时候英文单字后面就不会有空格,那么这是我就把关键字写成数组使用正侧来替换
1.keywords.join('|') 来创建一个用于匹配目标英文单词的正则表达式模式,其中 | 表示逻辑或运算符,用于将关键字连接在一起。
2.replace 方法来匹配查询字符串中的目标英文单词,并在其后添加一个空格。$& 是替换字符串中的特殊字符,表示与正则表达式匹配的内容本身。
3. \b 单词边界,以确保只匹配完整的目标英文单词,并避免在其他地方不必要地添加空格。另外,gi 修饰符用于进行全局匹配和忽略大小写匹配。
5.优化 可以控制sql输入框的高度
<!-- 拖动改变大小 -->
<div id="resizeId" class="resize"></div>
dragControllerDiv() {
const resize = document.querySelector('#resizeId'); // 拖拽条
// 鼠标按下事件
resize.addEventListener('mousedown', this.onMouseDown);//鼠标按下
},
onMouseDown(e) {
this.resizeBox = e.target;
const sqlStatement = document.querySelector('.sqlStatement');
this.startY = e.clientY;
this.curLen = sqlStatement.clientHeight;
document.addEventListener('mousemove', this.onMousemove);//鼠标移动改变高度
document.addEventListener('mouseup', this.onMouseup); // 鼠标抬起销毁
},
onMousemove(e) {
const endX = e.clientY;
const moveLen = endX - this.startY; // (endX-startY)= 移动的距离
const CurBoxLen = this.curLen + moveLen; // sql的高+移动的距离=现在sql的高度
const sqlStatement = document.querySelector('.sqlStatement');
const rightCenter = document.querySelector('.rightCenter');
let tH = rightCenter.clientHeight - CurBoxLen - 120; //表格的高=一整个区域减去sql的高-其他元素的高
this.resizeBox.style.background = '#2d8cf0';
if (CurBoxLen < 200 || tH <= 300) return;
sqlStatement.style.height = CurBoxLen + 'px';
this.$nextTick(() => {
this.resultHeight = tH + 'px';
});
},
onMouseup(e) {
this.resizeBox.style.background = '#d6d6d6';
document.removeEventListener('mousedown', this.onMouseDown);
document.removeEventListener('mousemove', this.onMousemove);
},
//css
.resize {
cursor: row-resize;
float: left;
position: relative;
left: 45%;
background-color: #d6d6d6;
border-radius: 5px;
margin-top: -24px;
width: 50px;
height: 10px;
background-size: cover;
background-position: center;
font-size: 32px;
color: white;
}