1.Herunterladen
npm install sql-formatter --save //sql语句格式化 版本2.3.3（不然报错）
npm install vue-codemirror --save //用于sql语句关键词高亮
2. Einführung
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.Verwenden
<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. Aufgetretene Probleme
Das Zeichen „select * from table name“ enthält chinesische Zeichen. Wenn es formatiert wird, wird es zu „select * from table name“, wobei vor dem chinesischen Zeichen ein Leerzeichen eingefügt wird.
Lösung: Verwenden Sie reguläre Ausdrücke, um Leerzeichen zu entfernen
Ich habe mehrere Methoden ausprobiert, um Leerzeichen mithilfe der positiven Seitenformatierung zu entfernen
Methode eins
// const result = sql.replace(/([\u4e00-\u9fa5])\s+/g, '$1');
// 这种方式如果中文后面还有引文就不行
例如 "select * from 表格名称 where age='1'"
// "select * from 表格名称where age='1'" 就会把中文后面的空格去掉❌
Methode Zwei
// 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 中文'" 中间加一个空格❌
Methode drei (endgültige Version)
// 格式化
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. Durch die Optimierung kann die Höhe des SQL-Eingabefelds gesteuert werden
<!-- 拖动改变大小 -->
<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;
}