描述
目前支持两种模式,如图所示:
第一种是如果没有创建对应的数据库以及对应的表,选择这个模式后点击“开始执行”,会先根据前端发送过去的数据库名称、表名以及表字段创建对应的数据库;然后进行下一步的数据插入。
第二种是提前已经创建好了对应的数据库,会直接进行插入数据操作(注意:如果插入数据时跟已经创建好的数据库有出入会报错)。
代码实现
前端部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script crossorigin="anonymous" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
<body>
<div id='app'>
当前功能:<span v-if="status==0" style="color: green;">创建数据库表</span><span v-if="status==1" style="color: orange;">向已创建好的数据库表插入数据</span><br /><br />
<button @click="tagButton">切换功能</button><br /><br />
<button @click="beginGet">开始执行</button><br /><br />
<div v-for="(item,index) in tables" style="margin-bottom: 30px;">
<span>序号:{{index+1}}</span>
<span>表名:{{item.name}}</span>
<span>中文含义:{{item.label}}</span>
<table border="1" cellspacing="0">
<tr></tr>
<th>字段名</th>
<th>中文含义</th>
</tr>
<tr v-for="tr in item.fields">
<td>{{tr.name}}</td>
<td>{{tr.label}}</td>
</tr>
<!--<tr v-for="data in data[index]">
<td>{{data}}</td>
</tr>-->
</table>
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
token: "",
tables: "",
data: [],
createTableSql: "",
status: 0,
},
mounted() {
},
methods: {
tagButton(){
this.status=this.status==0?this.status=1:this.status=0;
},
beginGet() {
var info = {
client_id: "BfR3gNHMHGUthamd8OcFN",
client_secret: "FNBLtf9Y71IuLUqHDMAgHj0vG3g",
grant_type: "client_credentials"
}
_this = this
//获取token
$.ajax({
url: "https://********",//注意换上对应正确的地址
type: "post",
contentType: "application/json",
data: JSON.stringify(info),
dataType: 'json',
success: function(res) {
_this.token = res.access_token
_this.getTables()
}
});
},
getTables() {
//获取表结构
$.ajax({
url: "https://*********",//注意换上对应正确的地址
type: "get",
headers: {
Authorization: "Bearer " + _this.token,
},
dataType: 'json',
success: function(res) {
// console.log(res)
_this.tables = res;
//创建建表sql
var creTabSqlArr = [];
// res.length
for(var i = 0; i < res.length; i++) {
// let str=CREATE TABLE qwe(id int,title VARCHAR(255),body VARCHAR(255),PRIMARY KEY(id))"
var bbq = '';
for(var j = 0; j < res[i].fields.length; j++) {
let string = res[i].fields[j].type;
let split = string.split("(")[0];
if(split == "string") {
if(string.split("(")[1] != undefined) {
string = "VARCHAR" + "(" + string.split("(")[1];
} else {
string = "VARCHAR(255)"
}
}
if(split == "decimal") {
string = "varchar(240)"
}
if(string == "enum") {
string = "varchar(255)"
}
let name = res[i].fields[j].name;
if(name == "rank") {
name = "rank_"
}
if(name == "delayed") {
name = "delayed_"
}
if(name == "key") {
name = "key_"
}
bbq += (name + " " + string + ",")
}
var str = "CREATE TABLE " + res[i].name + "(" + bbq
var reg = /,$/gi;
str = str.replace(reg, "");
str = str + ")"
str += "comment='" + res[i].label + "'";
creTabSqlArr.push(str);
}
_this.createTableSql = creTabSqlArr;
if(_this.status == 0) {
_this.postCreateSql();
}
//res.length
for(var i = 0; i < res.length; i++) {
var tableDataArr = []
for(var j = 0; j < res[i].fields.length; j++) {
tableDataArr.push(res[i].fields[j].name)
}
if(_this.status==1){
_this.getTableData(res[i].name, tableDataArr)
}
}
}
});
},
getTableData(name, arr) {
// console.log(name)
// console.log(arr)
let params = {
content: {
type: "simple",
from: name,
select: arr,
}
}
$.ajax({
url: "https://**********",//注意换上对应正确的地址
type: "post",
contentType: "application/json",
data: JSON.stringify(params),
headers: {
Authorization: "Bearer " + _this.token,
},
dataType: 'json',
success: function(res) {
// console.log(res)
let json = {}
json.name = name;
json.data = res.data
let tables = "";
for(var i = 0; i < res.schema.length; i++) {
let name = res.schema[i].name
if(name == "rank") {
name = "rank_"
}
if(name == "delayed") {
name = "delayed_"
}
if(name == "key") {
name = "key_"
}
tables += "`" + name + "`,";
}
var reg = /,$/gi;
tables = tables.replace(reg, "");
json.tables = tables;
console.log(tables)
console.log(json)
_this.submitData(json)
}
});
},
postCreateSql() { //提交建库sql
let params = {
createTableSql: this.createTableSql
}
$.ajax({
url: 'http://localhost:3000/createTable',
type: 'POST',
dataType: 'json',
data: {
createTableData: JSON.stringify(params)
},
dataType: 'json',
success: function(res) {
//请求成功后执行的代码
console.log(res);
//服务器端传送回来的success
console.log('success');
}
});
},
submitData(data) {
$.ajax({
url: 'http://localhost:3000/writeData',
type: 'POST',
dataType: 'json',
data: {
tableData: JSON.stringify(data)
},
success: function(response, xml) {
//请求成功后执行的代码
console.log(response);
}
});
}
}
})
</script>
</html>
获取表结构的接口会返回所有需要创建的表名以及对应各表的字段名(后面会通过获取到的表名去查询该表下对应的数据以便进行接下来的插入操作)
获取到对应的表结构后接下来就会向node服务发送ajax请求来创建对应的表(如果是模式二的话会跳过这一步);
node服务
const express = require('express');
const cors = require('cors');
const mysql = require('mysql');
var url = require('url');
var http = require('http');
var bodyParser = require('body-parser')
var querystring = require('querystring');
const app = express();
app.use(cors());
app.use(bodyParser.json({
limit: "2100000kb"
}));
app.use(bodyParser.urlencoded({
limit: "2100000kb",
extended: true
}))
//设置监听端口
app.listen(3000, "127.0.0.1", function() {
console.log("server is started listen port 3000");
});
//创建连接
const db = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'password', //密码
database: 'database', // 这里等数据库创建之后放开就可以
useConnectionPooling: true,
charset: 'utf8mb4'
})
//connect 连接数据库
db.connect(err => {
if(err) throw err;
console.log('mysql connected ......')
})
app.post("/createTable", (req, res) => {
let createTableData = JSON.parse(req.body.createTableData)
//创建表
for(var i = 0; i < createTableData.createTableSql.length; i++) {
let sql = createTableData.createTableSql[i]; //创建表
db.query(sql, (err, result) => {
if(err) throw err;
console.log('表已经建立')
})
}
res.end('success')
})
app.post("/writeData", (req, res) => {
let tableData = JSON.parse(req.body.tableData)
var deletesql = "delete from " + tableData.name
db.query(deletesql, function(err, rows, fields) {
if(err) {
// console.log('delete error ++++++++++'+bbb.name, err.message);
return;
}
console.log("delete SUCCESS");
});
var values = tableData.data;
var sql = "INSERT INTO " + tableData.name + "(" + tableData.tables + ") VALUES ?";
if(values != "" && values.length < 10000) {
// console.log(sql)
db.query(sql, [values], function(err, rows, fields) {
if(err) {
console.log(tableData.name)
console.log('INSERT ERROR*************', err.message);
return;
}
console.log("------------------INSERT SUCCESS");
// status=true;
});
}
if(values != "" && values.length >= 10000) {
// console.log("进来了")
var num = Math.ceil(values.length / 10000)
// console.log(num)
for(var i = 0; i < num; i++) {
var newValues = [];
var cleng
if(10000 * (i + 1) > values.length) {
cleng = values.length
} else {
cleng = 10000 * (i + 1)
}
for(var j = 10000 * i; j < cleng; j++) {
newValues.push(values[j])
}
console.log("开始插入")
// console.log(newValues.length)
db.query(sql, [newValues], function(err, rows, fields) {
if(err) {
console.log(tableData.name)
console.log('INSERT ERROR*************', err.message);
handleError()
return;
}
console.log("------------------INSERT SUCCESS");
});
}
}
res.end('success')
})
以上代码块包含所有逻辑,通过“/createTable”来创建对应的表,通过“/writeData”来实现数据的插入(插入前为了前期调试多次插入会先进行删除操作)。
插入操作时进行每10000条循环插入,是因为如果一次性插入太多数据会导致有些数据量过大的字段插入失败,导致这个表插入不成功。