基于NodeJs和ACE Editor插件实现简单的mysql控

页面说明

在使用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