在线创建MySQL表

场景

之前建表都是在数据库工具中创建的, 感觉工具不太好用, 因为必须链接到某个数据库上才可以用.

就花时间写了一个在线版的, 不用链接数据库, 还有简单的自动补全功能, 方便使用.

使用链接

在线创建表(MySQL)

注意: 里边已经添加了几个常用的字段, 不需要可以删掉源代码: Gitee :Corner-DB-OnlineBuild: 在线构建DB, 创建表结构

功能截图

使用说明

1. 填些表名等基础信息. 引擎,字符集等输入框, 在点击后, 会在下方显示可选值, 点击某个可选值, 可以自动填充到输入框内(下同)

2. 填字段信息. 点击"+"按钮可以增加一行, 注意是否主键那里只有主键那行写PRI, 非主键都留空(遗留问题导致, 后续优化)

3. 填写索引字段. 第一列是索引的名字, 点击第二列后, 会弹出可选字段, 点击后会自动填充到输入框内, 并自动用逗号隔开

4. 填写完毕后, 点击按钮"从表单生产SQL", 即可在下边显示出完整的创建表的语句

源代码说明

注意: 全部源代码可以通过浏览器的查看源代码功能查看js代码, 没有跟后端交互

1. 核心方法: 将json数据转换为SQL语句 :

/*** basic: 表基础信息: 表名, 存储引擎, 字符集等* field_list: 字段信息列表* index_list: 索引信息列表*/
function json_to_sql(basic, field_list, index_list){...}

2. 显示默认表结构: 用于在刚打开页面时, 填充默认的字段,索引等信息

function show_empty_form(){....}

3. 将填写的form表单数据, 转换为SQL

function form_to_sql(){....}

4. 可编辑表格插件, 是自己写的一个小插件, 比较简单, 暂时还不支持上下拖动, 后续可能会更新

//1. 创建一个可以增加/删除/可编辑的表
var et = new zbEditTable();
let domFields = et.createResponseEditTable({id:'field_list',thead:{values:['字段名','数据类型','是否主键','是否允许NULL','默认值','额外设置','注释']},tbody: {default_row:1,default_col:7,values:[['id', 'int', 'PRI', 'NO', '0', 'AUTO_INCREMENT', '自增ID'],['code', 'varchar(20)', '', 'NO', '', '', '唯一编码,前台使用'],['status', 'tinyint', '', 'NO', '0', '', '状态'],['deleted', 'tinyint', '', 'NO', '0', '', '是否删除'],['create_time', 'datetime', '', 'NO', 'CURRENT_TIMESTAMP', '', '创建时间'],['update_time', 'datetime', '', 'NO', 'CURRENT_TIMESTAMP', 'ON UPDATE CURRENT_TIMESTAMP', '修改时间'],]}});//2. 将表插入到dom中
document.getElementById('fields_info').appendChild(domFields);//3. 批量更新表的一些属性
et.setInputAttributes('field_list', [{coordinate:',0', attrs:{name:'COLUMN_NAME'}}, //字段名, 批量更新每行的第一列的name属性{coordinate:',1', attrs:{name:'COLUMN_TYPE'}}, //数据类型{coordinate:',2', attrs:{name:'COLUMN_KEY'}}, //是否是主键{coordinate:',3', attrs:{name:'IS_NULLABLE'}}, //是否可为NULL{coordinate:',4', attrs:{name:'COLUMN_DEFAULT'}}, //默认值{coordinate:',5', attrs:{name:'EXTRA'}}, //额外, 比如: 自增, 更新时自动更新{coordinate:',6', attrs:{name:'COLUMN_COMMENT'}} //字段注释]);