页面说明
在使用NodeJs做配置管理项目时，遇到经常需要查询数据，现在使用堡垒机+跳板机查询数据，过于麻烦，有时候仅仅是需要查简单的使用数据，那能不能在配置项目里写一个简单的数据库查询应用呢？
在内部管理项目中可以使用，但是需要注意数据的安全性和操作权限，在此仅介绍使用bootstrap写一个类似SQLyog的页面，并做屏幕适配，安全性就先不展开讨论。
页面demo
-
写好的页面展示
update.png
页面分为四个部分：左侧、右上、右中、右下，分别对应数据库表名、SQL编写区域、控制台按钮、控制台结果展示
- 页面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">执行</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-执行命令</span>
<table>
<tr>
<th></th>
</tr>
<tr>
<td></td>
</tr>
</table>
</div>
</div>
</div>
- 左侧表名称从数据库加载
// 查询所有表名
$.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);
}
});
//创建左侧表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");
- 执行按钮js
$('.option #run').click(function(){ // 执行
var sql = editor.getValue().trim();
console.log("sql = " + sql);
if( !sql || '' == sql){
$('.bottom').append('<br>请输入执行内容:');
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简单封装了数据
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 = '受影响的行数：' + 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进行不同大小的屏幕适配
简单适配了笔记本的14寸屏幕和台式机的1080p大屏幕
-
写查询sql并执行，显示结果
select.png
网友评论