167 lines
6.2 KiB
HTML
167 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-cn">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>MySql数据库表结构导出</title>
|
|
<!-- zui -->
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/zui/1.8.1/css/zui.min.css">
|
|
<link rel="stylesheet" href="res/css/zui-theme.css">
|
|
<link rel="stylesheet" href="res/css/red-kit.css">
|
|
<style>
|
|
.input-group {
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container-fixed">
|
|
<row>
|
|
<div class="col-md-8">
|
|
<h3>导出数据库表结构(导出后使用wps打开)</h3>
|
|
<form>
|
|
<div class="input-group">
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="button">jdbc.url</button>
|
|
</span>
|
|
<input id="url" type="text" class="form-control" placeholder="jdbc:mysql://127.0.0.1:3306" v-model="jdbc.url">
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="button">jdbc.user</button>
|
|
</span>
|
|
<input id="user" type="text" class="form-control" placeholder="请输入数据库用户" v-model="jdbc.user">
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="button">jdbc.pwd</button>
|
|
</span>
|
|
<input id="pwd" type="text" class="form-control" placeholder="请输入数据库密码" v-model="jdbc.pwd">
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="button">Database</button>
|
|
</span>
|
|
<input id="database" type="text" class="form-control" placeholder="请输入Database" v-model="jdbc.database">
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" v-model="cate" value="word" checked> 导出表结构到word
|
|
</label>
|
|
</div>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" v-model="cate" value="excel"> 导出表结构到excel
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="export" data-toggle="button" class="btn btn-primary" data-cate="word" type="button">导出表结构</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="col-md-4" v-show="logs.total">
|
|
<h3>最近使用记录 <small>共 {{logs.total}} 条记录</small></h3>
|
|
<table class="table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>IP</th>
|
|
<th>时间</th>
|
|
<th>导出数据类型</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="row in logs.rows">
|
|
<td v-text="row.remoteAddr"></td>
|
|
<td v-text="timeFmt(new Date(row.time*1), 'yyyy-MM-dd HH:mm:ss')"></td>
|
|
<td v-text="row.cate"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</row>
|
|
|
|
</div>
|
|
|
|
|
|
<!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
|
|
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
|
|
<!-- ZUI Javascript组件 -->
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/zui/1.8.1/js/zui.min.js"></script>
|
|
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
|
|
|
|
<script>
|
|
|
|
function getData(key, defaultValue) {
|
|
var v = localStorage.getItem(key) || defaultValue || "";
|
|
if (typeof(v) == "string" && v.startsWith("{") && v.endsWith("}")) {
|
|
v = JSON.parse(v);
|
|
} else if (typeof(v) == "string" && v.startsWith("[") && v.endsWith("]")) {
|
|
v = JSON.parse(v);
|
|
}
|
|
return v;
|
|
}
|
|
|
|
var vm = new Vue({
|
|
el:".container-fixed",
|
|
data:{
|
|
jdbc:getData("jdbc", {url: "jdbc:mysql://192.168.202.11:3306/", user: "root"}),
|
|
cate: getData("cate", "word"),
|
|
logs: {}
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
methods: {
|
|
loadLog: function() {
|
|
$.getJSON("/ddl/ddllist",function (json) {
|
|
vm.logs = json;
|
|
});
|
|
},
|
|
timeFmt: function (date,fmt){
|
|
var o = {
|
|
"M+" : date.getMonth()+1, //月份
|
|
"d+" : date.getDate(), //日
|
|
"H+" : date.getHours(), //小时
|
|
"m+" : date.getMinutes(), //分
|
|
"s+" : date.getSeconds(), //秒
|
|
"q+" : Math.floor((date.getMonth()+3)/3), //季度
|
|
"S" : date.getMilliseconds() //毫秒
|
|
};
|
|
if(/(y+)/.test(fmt))
|
|
fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
|
|
for(var k in o)
|
|
if(new RegExp("("+ k +")").test(fmt))
|
|
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
|
|
return fmt;
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.loadLog();
|
|
}
|
|
});
|
|
|
|
$("#export").click(function () {
|
|
localStorage.setItem("jdbc", JSON.stringify(vm.jdbc));
|
|
localStorage.setItem("cate", vm.cate);
|
|
$.post("/"+ vm.cate +"/build", {account:JSON.stringify(vm.jdbc)}, function (json) {
|
|
console.log(json)
|
|
if (json.code == 0) {
|
|
location.href = "/"+ vm.cate +"/download";
|
|
} else {
|
|
alert(json.message);
|
|
}
|
|
});
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html> |