前端sql语句输入框以及格式化sql语句和sql关键词高亮---sql-formatter、vue-codemirror

1.下载

npm install sql-formatter --save   //sql语句格式化 版本2.3.3（不然报错） 
npm install vue-codemirror --save  //用于sql语句关键词高亮
1
2

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';
1
2
3
4
5

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

4.遇到的问题

“select * from 表格名称” 这个字符包含了中文，如果进行格式化，就会变成 “select * from 表 格 名 称” 中文之前添加了空格

解决方法：使用正则去掉空格

使用正侧格式化去掉空格我尝试的几种方法

方法一

//  const result = sql.replace(/([\u4e00-\u9fa5])\s+/g, '$1'); 
   // 这种方式如果中文后面还有引文就不行
   例如 "select * from 表格名称 where age='1'"
   // "select * from 表格名称where age='1'" 就会把中文后面的空格去掉❌
1
2
3
4

方法二

//  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 中文'" 中间加一个空格❌
1
2
3
4

方法三（最终版本）

 // 格式化
    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 修饰符用于进行全局匹配和忽略大小写匹配。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51