vue+codemirror 实现SQL编译器并使用及sql-formatter格式化sql语句_sql-formatter.js_O3ohn的博客-程序员秘密

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

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);
},

格式化后效果

SQL代码格式化遇到的bug

使用过程中遇到问题：cannot read property ‘format‘ of undefined
解决：版本问题，默认安装4.x.x版本，将版本改低即可。

本文链接：https://blog.csdn.net/ka_xingl/article/details/117998681

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

ROS基入门十 MoveIt!编程（中）_moveit 编程_小钟的学习记录的博客-程序员秘密

ROS基入门十 MoveIt!编程中前情回顾笛卡尔路径规划代码部分前情回顾上一篇讲了MoveIt！的接口部分，主要介绍了如何使用MoveIt!的接口进行关节空间规划及工作空间规划上篇链接关节空间规划和工作空间规划都存在着相同的问题，末端执行器的姿态是不可预知的，无法让机器人走出只想或者圆弧，也就是无法让机器人走出你想要的运动。下面就来使用笛卡尔路径规划来解决这个问题。笛卡尔路径规划运行roslaunch marm_planning arm_planning_with_trail.launch打开机

在配置hibernate.cfg.xml时需指定使用数据库的方言：_weixin_30952103的博客-程序员秘密

在配置hibernate.cfg.xml时需指定使用数据库的方言：例：<propertyname="dialect">org.hibernate.dialect.MySQL5Dialect</property>以下是各数据库对应的方言（Dialect）：数据库方言（Dialect）DB2or...

linux对外暴露端口可以被外部访问_打水花的博客-程序员秘密

在linux中以standalone的方式启动flink集群，但是在外部不能访问到8081端口，怀疑是端口没有对外暴漏的问题，在Linux中输入如下命令后，可以正常访问到该端口：/sbin/iptables -I INPUT -p tcp --dport 8081 -j ACCEPT...

Ngix学习记录_HY_Chan的博客-程序员秘密

一、简介Nginx (engine x) 是一个高性能的HTTP和反向代理服务，可以在分布式系统中提供负载均衡。什么叫反向代理？这里有一篇别人写的关于正向代理和反向代理的文章： https://blog.csdn.net/qq_28602957/article/details/61615876什么叫负载均衡？很好理解。用户使用Web、APP、SDK，通过HTTP、TCP连接到...

KeyError: ‘You have to pass data to augmentations as named arguments, for example: aug(image=image)‘_soulyiran的博客-程序员秘密

在使用albumentations库进行数据增强时，调用torchvision.datasets.ImageNet()读取ImageNet数据集，在将albumentations方法作为transform参数传入时，运行报错。 File "/Users/yi/miniforge3/envs/PyTorch_py39/lib/python3.9/site-packages/albumentations/core/composition.py", line 175, in __call__ r.

让步进电机动起来——L298N驱动步进电机_程序员小哈的博客-程序员秘密

文章目录步进电机特点：步进电机相关概念：相关问题：L298N主要参数说明L298N原理图应用实例驱动步进电机实现代码1. 驱动步进电机的引脚初始化2. 两相电机驱动代码，包括正转和反转3. 主函数中调用说明主函数代码如下：定时器中代码如下：实物图步进电机特点：它是通过输入脉冲信号来进行控制的电机的总转动角度由输入脉冲数决定电机的转速由脉冲信号频率决定步进电机主要用于一些有定位要求、进行精确控制的场合。特别适合要求运行平稳、低噪音、响应快、使用寿命长、高输出扭矩的应用场合。比如3D打印机、工业机

vue+codemirror 实现SQL编译器并使用及sql-formatter格式化sql语句_sql-formatter.js_O3ohn的博客-程序员秘密

codemirror代码编辑器使用

SQL代码格式化功能

SQL代码格式化遇到的bug

智能推荐

ROS基入门十 MoveIt!编程（中）_moveit 编程_小钟的学习记录的博客-程序员秘密

在配置hibernate.cfg.xml时需指定使用数据库的方言：_weixin_30952103的博客-程序员秘密

linux对外暴露端口可以被外部访问_打水花的博客-程序员秘密

Ngix学习记录_HY_Chan的博客-程序员秘密

KeyError: ‘You have to pass data to augmentations as named arguments, for example: aug(image=image)‘_soulyiran的博客-程序员秘密

让步进电机动起来——L298N驱动步进电机_程序员小哈的博客-程序员秘密

随便推点

如何给Table/Tr/Td添加超链接?_weixin_38203203的博客-程序员秘密

搜狗用户查询日志(SogouQ)数据_用心倾听的博客-程序员秘密

webservices原理_xrt95050的博客-程序员秘密

【条件竞争】攻防世界web进阶区泰山杯 wzsc_文件上传_当归qaq的博客-程序员秘密

Java如何连接远程服务器取文件（通过SCP协议）_南丘xf的博客-程序员秘密

基于OpenCV下---多红外目标检测、跟踪、质心坐标提取、跟踪目标排序_zhuoyueljl的博客-程序员秘密

推荐文章

热门文章

相关标签