Implementation of SQL online editor based on Vue + codemirror

One 、 Project introduction

This project is based on Vue2 + Codemirror Developed Web edition SQL Editor , The following functions are provided ：

• The online operation SQL sentence
• Real time command prompt （ Support table name 、 Field name 、SQL Keyword tips ）
• see SQL Execution results
• Submit SQL Command set
• Quick use command set
• SQL Statement formatting
• SQL code differ
• Dynamic settings editor configuration item
• View the table structure in real time

Front end project address ：https://gitee.com/web1024cn/vue-sqleditor

This project provides supporting back-end sample code （ be based on Node + Express Realization ）
Project backend address ：https://gitee.com/web1024cn/sqleditor-server

Two 、 Project Download

clone project ：

git clone https://gitee.com/web1024cn/vue-sqleditor.git

Installation dependency ：

npm install

start-up ：

npm run serve

visit ：

http://localhost:8080

3、 ... and 、 Effect demonstration

• Editor effect ：

• Display query results ：

• Real time table name 、 Field name 、 Keyword tips ：

• SQL Execute exception prompt ：

• View command save record ：

• Save the command code differ see ：

• Dynamic settings editor configuration item ：

• Quick use command set ：

Four 、 Code Introduction

• Used in the project [email protected] Realize the editor function ;
• Use axios Realization HTTP request , stay vue.config.js Configuration of the webpack-server The agent solves cross domain problems ;
• encapsulation axios Request module , standard API Format ;
• Use vuex modules and vuex-persistedstate Implement front-end data cache ;
• Use [email protected] The module handles date formatting .

5、 ... and 、 Back end sample code

Vue SQLEditor On-line SQL Back end code editor for the project , Is based on Node + Exopress Realization , Database usage Mysql.

install ：

# clone  project 
git clone https://gitee.com/web1024cn/sqleditor-server.git 

#  Installation dependency 
npm install

#  Start project 
npm start

The access address of the project is http://127.0.0.1:3000, This project does not provide a page , Are all RESTful api Interface .

Interface specification ：

• perform SQL sentence http://127.0.0.1:3000/ext （method：post,params:{sql:’’}）
• Query all table names http://127.0.0.1:3000/query/tables (method：get)
• Query the fields under the specified table http://127.0.0.1:3000/query/field （method：get）

Code instructions ：

• be based on [email protected] Development
• Use [email protected] Module connection MySQL database
• Use mysql Module provided pool Instance implements data connection pool
• Use nodemon Manage hot deployments , You need to install nodemon

Be careful ： The project USES nodemon Manage hot deployments , It needs to be installed locally first nodemon ！ This project uses nodemon Install for global .