基于 Vue + Codemirror 实现 SQL 在线编辑器 |
您所在的位置：网站首页 › nodemon安装 › 基于 Vue + Codemirror 实现 SQL 在线编辑器 |
基于 Vue + Codemirror 实现 SQL 在线编辑器
|
一、项目介绍
本项目是基于 Vue2 + Codemirror 开发的 Web 版 SQL 编辑器，提供了以下功能： 在线运行 SQL 语句 实时命令提示（支持表名、字段名、SQL关键词提示） 查看 SQL 执行结果 提交 SQL 命令集 快捷使用命令集 SQL 语句格式化 SQL code differ 动态设置编辑器配置项 实时查看表结构前端项目地址： https://gitee.com/web1024cn/vue-sqleditor 本项目提供了配套的后端示例代码（基于 Node + Express 实现）项目后端地址： https://gitee.com/web1024cn/sqleditor-server 二、项目下载clone 项目： git clone https://gitee.com/web1024cn/vue-sqleditor.git安装依赖： npm install启动： npm run serve访问： http://localhost:8080 三、效果演示 编辑器效果：
展示查询结果：
实时表名、字段名、关键词提示：
SQL执行异常提示：
查看命令保存记录：
保存命令的 code differ 查看：
动态设置编辑器配置项：
快捷使用命令集：
; 四、代码介绍
项目中使用了 [email protected] 实现编辑器功能；
使用 axios 实现 HTTP 请求，在 vue.config.js 中配置了 webpack-server 的代理解决跨域问题；
封装 axios 请求模块，规范 API 格式；
使用 vuex modules 和 vuex-persistedstate 实现前端数据缓存；
使用 [email protected] 模块处理日期格式化。
五、后端示例代码
Vue SQLEditor 在线 SQL 编辑器项目的后端示例代码，是基于 Node + Exopress 实现，数据库使用 Mysql。 安装： git clone https://gitee.com/web1024cn/sqleditor-server.git npm install npm start项目的访问地址为 http://127.0.0.1:3000，本项目没有提供页面，均为 RESTful api 接口。 接口说明： 执行SQL语句 http://127.0.0.1:3000/ext （method：post，params:{sql:”}） 查询所有表名 http://127.0.0.1:3000/query/tables (method：get) 查询指定表下的字段 http://127.0.0.1:3000/query/field （method：get）代码说明： 基于 [email protected] 开发 使用 [email protected] 模块连接 MySQL 数据库 使用 mysql 模块提供的 pool 实例实现数据连接池 使用 nodemon 管理热部署，需要先安装 nodemon注意：项目使用了 nodemon 管理热部署，需要先在本地安装 nodemon ！本项目使用的 nodemon 为全局安装。 Original: https://blog.csdn.net/p445098355/article/details/123315195Author: 柯晓楠Title: 基于 Vue + Codemirror 实现 SQL 在线编辑器 相关阅读 Title: Python Flask SQLite CRUD WEB应用from flask import Flask,render_template,request,redirect from models import db,EmployeeModel app = Flask(__name__) app.config[ 'SQLALCHEMY_DATABASE_URI' ] = 'sqlite:///data.db' app.config[ 'SQLALCHEMY_TRACK_MODIFICATIONS' ] = False db.init_app(app) @app .before_first_request def create_table():db.create_all() @app .route( '/data/create' , methods = [ 'GET' , 'POST' ]) def create():if requesthod = = 'GET' :return render_template( 'createpage.html' )if requesthod = = 'POST' :employee_id = request.form[ 'employee_id' ]name = request.form[ 'name' ]age = request.form[ 'age' ]position = request.form[ 'position' ]employee = EmployeeModel(employee_id = employee_id, name = name, age = age, position = position)db.session.add(employee)db.session.commit()return redirect( '/data' ) @app .route( '/data' ) def RetrieveList():employees = EmployeeModel.query. all ()return render_template( 'datalist.html' ,employees = employees) @app .route( '/data/' ) def RetrieveEmployee( id ):employee = EmployeeModel.query.filter_by(employee_id = id ).first()if employee:return render_template( 'data.html' , employee = employee)return f "Employee with id ={id} Doenst exist" @app .route( '/data//update' ,methods = [ 'GET' , 'POST' ]) def update( id ):employee = EmployeeModel.query.filter_by(employee_id = id ).first()if requesthod = = 'POST' :if employee:db.session.delete(employee)db.session.commit()name = request.form[ 'name' ]age = request.form[ 'age' ]position = request.form[ 'position' ]employee = EmployeeModel(employee_id = id , name = name, age = age, position = position)db.session.add(employee)db.session.commit()return redirect(f '/data/{id}' )return f "Employee with id = {id} Does nit exist"return render_template( 'update.html' , employee = employee) @app .route( '/data//delete' , methods = [ 'GET' , 'POST' ]) def delete( id ):employee = EmployeeModel.query.filter_by(employee_id = id ).first()if requesthod = = 'POST' :if employee:db.session.delete(employee)db.session.commit()return redirect( '/data' )abort( 404 )return render_template( 'delete.html' ) app.run(host = 'localhost' , port = 5000 ) Original: https://blog.csdn.net/allway2/article/details/118084868Author: allway2Title: Python Flask SQLite CRUD WEB应用 原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/409770/ 转载文章受原作者版权保护。转载请注明原作者出处！ |
【本文地址】