頁面說明
在使用NodeJs做配置管理項(xiàng)目時(shí)某弦，遇到經(jīng)常需要查詢數(shù)據(jù)页眯，現(xiàn)在使用堡壘機(jī)+跳板機(jī)查詢數(shù)據(jù)瓣窄，過于麻煩系宫，有時(shí)候僅僅是需要查簡單的使用數(shù)據(jù)索昂，那能不能在配置項(xiàng)目里寫一個簡單的數(shù)據(jù)庫查詢應(yīng)用呢？
在內(nèi)部管理項(xiàng)目中可以使用扩借，但是需要注意數(shù)據(jù)的安全性和操作權(quán)限椒惨，在此僅介紹使用bootstrap寫一個類似SQLyog的頁面，并做屏幕適配潮罪，安全性就先不展開討論康谆。
頁面demo
-
寫好的頁面展示
update.png
頁面分為四個部分：左側(cè)、右上嫉到、右中秉宿、右下，分別對應(yīng)數(shù)據(jù)庫表名屯碴、SQL編寫區(qū)域、控制臺按鈕膊存、控制臺結(jié)果展示
- 頁面div布局
<div class="page-content" >
<div class="con">
<div class="left" >
<ul class="list-group">
<!-- <li class="list-group-item">
tbl_app
</li>
<li class="list-group-item">
<span class="badge">表</span>
tbl_app
</li> -->
</ul>
</div>
<div class="top" >
<div id="editor"></div>
</div>
<div class="middle" >
<div class="option">
<button class="btn btn-primary" type="button" id="run">執(zhí)行</button>
<button class="btn btn-danger" type="button" id="clear">清空</button>
<button class="btn" type="buttom" id="demo">demo</button>
<button class="btn" type="buttom" id="demo2">demo2</button>
<button class="btn btn-danger" type="button" id="clear_console">清空控制臺</button>
</div>
</div>
<div class="bottom" contenteditable="true">
<span style="color: #6b6b6a;">console:</span>
<span style="color: #6b6b6a;">F8-執(zhí)行命令</span>
<table>
<tr>
<th></th>
</tr>
<tr>
<td></td>
</tr>
</table>
</div>
</div>
</div>
- 左側(cè)表名稱從數(shù)據(jù)庫加載
// 查詢所有表名
$.ajax({
url: '/page/queryData',
type:'post',
dataType:'json',
data:JSON.stringify({"sql":"show tables;"}),
contentType:"application/json",
success:function(data){
if(data.success){
$('.left .list-group').html(createLeftTable(data.data) );
}
}
,error:function(e){
console.log(data);
}
});
//創(chuàng)建左側(cè)表li
function createLeftTable(data){
var lis_html = '';
if( data.length > 0 ){
for(var i = 0; i < data.length ; i++){
var item = data[i];
if(i == 0){
$.each(item, function(k) {
lis_html = lis_html + '<li class="list-group-item">' + k + '</li>';
});
}
$.each(item, function(k) {
lis_html = lis_html + '<li class="list-group-item"><span class="badge">表</span>' + item[k] + '</li>';
});
}
}
return lis_html;
}
- 右上的編輯器使用ace editor插件
ace.require("ace/ext/language_tools");
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/sql");
- 執(zhí)行按鈕js
$('.option #run').click(function(){ // 執(zhí)行
var sql = editor.getValue().trim();
console.log("sql = " + sql);
if( !sql || '' == sql){
$('.bottom').append('<br>請輸入執(zhí)行內(nèi)容:');
return false;
}
$.ajax({
url: '/page/queryData',
type:'post',
dataType:'json',
data:JSON.stringify({"sql":sql}),
contentType:"application/json",
success:function(data){
if(data.success){
$('.bottom').html(parseJson(data.data) );
}
App.unblockUI('#def-form-save .modal-content');
}
,error:function(e){
console.log(data);
App.unblockUI('#def-form-save .modal-content');
}
});
});
- 右下是使用table簡單封裝了數(shù)據(jù)
function parseJson(data){
console.log(typeof data);
console.log(data.length);
console.log(data);
var table_html = '<table class="console-tab">';
if( data.length > 0 ){
for(var i = 0; i < data.length ; i++){
var item = data[i];
if(i == 0){
table_html += '<tr>';
$.each(item, function(k) {
console.log(k);
table_html = table_html + '<th>'+ k +'</th>';
});
table_html += '</tr>';
}
table_html += '<tr>';
$.each(item, function(k) {
table_html = table_html + '<th>'+ item[k] +'</th>';
});
table_html += '</tr>';
}
}else{
if(data.affectedRows){
table_html = '受影響的行數(shù)：' + data.affectedRows;
}else{
//其他情況
table_html = JSON.stringify(data);
}
}
return table_html;
}
- 其他按鈕事件和F8鍵盤事件
// 按鍵捕捉事件
document.onkeydown=function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
console.log(e.keyCode);
if(e && e.keyCode==119){ // F8 鍵
$('.option #run').click();
}
};
$('.option #clear').click(function(){ // 清空
editor.setValue("");
});
$('.option #demo').click(function(){ // demo
editor.setValue("SELECT * FROM `tbl_app`;");
});
$('.option #demo2').click(function(){ // demo
editor.setValue("SELECT * FROM `tbl_server`;");
});
$('.option #clear_console').click(function(){ // demo
$('.bottom').html('');
});
- 頁面的樣式說明
* {margin:0; padding:0;}
.page-content-wrapper .page-content {
padding: 0;
background: #3b3c39;
}
.page-header-fixed .page-container {
margin-top: 30px;
}
/* 判斷屏幕寬度 */
@media screen and (max-height: 1080px) {
.page-content-wrapper .page-content {min-height: 850px ! important;}
}
@media screen and (max-height: 768px) {
.page-content-wrapper .page-content {min-height: 680px ! important;}
}
.con{
width: 100%;
}
/* 判斷屏幕寬度 */
@media screen and (max-height: 1080px) {
.con {height: 820px;}
}
@media screen and (max-height: 768px) {
.con {height: 650px;}
}
.con .left, .top, .middle, .bottom{
float: left;
}
.con .left{
width: 15%;
height: 100%;
background: #393a36;
color: #c0c1bc;
}
.con .left .list-group-item{
background: #393a36;
color: #c0c1bc;
border-color: #4c4646;
}
.con .top{
width: 85%;
height: 60%;
}
.con .middle{
width: 85%;
height: 5%;
background: #393a36;
color: #c0c1bc;
}
.con .bottom{
width: 85%;
height: 38%;
margin-bottom: 0;
background: #272822;
color: #c0c1bc;
border-top: 1px solid black;
overflow: auto;
}
.left-ul li{
list-style: none;
border:0.1px solid #9e9393;
margin: 0;
}
#editor{
width: 100%;
height: 100%;
}
.console-tab tr{
border: 1px solid black;
}
.console-tab tr th,td{
padding-left: 6px;
}
.option button{
margin: 3px 0 0 5px;
}
使用@media判斷屏幕的大小并選擇合適的css進(jìn)行不同大小的屏幕適配
簡單適配了筆記本的14寸屏幕和臺式機(jī)的1080p大屏幕
-
寫查詢sql并執(zhí)行导而，顯示結(jié)果
select.png
