网页上直接sql查询操作数据库,并在网页上展示列表数据的工具页面

17 篇文章 0 订阅
7 篇文章 0 订阅

很多人可能跟我一样,需要连接N都个数据库,进行操作, 有时候要查某个服务器下某个数据库的某张表的数据. 然后只能打开连接远程服务器, 连接远程数据库, 然后再sql语句操作. 每次都很烦,所以有空做了个 连接数据库操作的工具页面.

直接工具栏输入, 下面显示查询结果列表

前端: easyui 前端我用的是easyui的表格功能,这个做列表数据展示还不错,

后端: php 接口, 

直接贴代码. 

<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4/themes/icon.css">
    <script type="text/javascript" src="jquery-easyui-1.4/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.4/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.4/locale/easyui-lang-zh_CN.js"></script>



</head>
<body style="padding:0px;margin:0px">

<table id="dg" style="width:100%;" data-options=""></table>

<div id="toolbar">
    <table style='width:100%'>
        <div id="toolbar">

            <form >
                <div>类型:<select name="type">
                        <option value="0" selected="selected">综合区</option>
                        <option value="1">指定区</option>
                    </select>
                数据库名:<input type="text" name="db_name" placeholder="DATABASE" value="" id="db_name" /></div>
                <div>区ID:<input type="text" name="zoneid"  placeholder="ZONE" value="" id="zoneid" /></div>
                <div>
                    SQL语句:<textarea name="sqlstr" rows="3" cols="30" ></textarea> <a href="javascript:;" onclick="select_gift();" class="easyui-linkbutton" iconCls="icon-undo" >gift</a>
                </div>

            </form>
            <div>
                <button type="button" onclick="datagrid_load();" class="easyui-linkbutton" iconCls="icon-search" >查询</button>
            </div>
        </div>
    </table>

</div>


<script type="text/javascript">
    //动态展示列和数据
    var datagrid_load = function () {
        var columns = new Array();//定义列数组
        var ser = encodeURI($('form').serialize());//参数需要跟 下面保持一致


        $.getJSON('sql_toolbar_port.php?head=1&'+ser, null, function (result) {//通过方法获得后台数据,该方法不唯一。
            /*var column = {
                field: 'field', title: '不变的', width: 100, sortable: true, editor: 'textReadonly',
            }
            columns.push(column);//将固定写死的列,存入列数组中*/

            for (var i = 0; i < result.length; i++) {//遍历获得的后台数据,这是需要动态显示的表头数据源
                var column1 = {
                    field: result[i].field, title: result[i].title , width: 70, sortable: true, editor: {
                        type: 'numberbox',
                    }
                }// field字段和title值都是根据后台的数据来赋值
                columns.push(column1);//将需要动态显示的列,存入列数组中
            }
            initTable(columns);
        });


    }

    $(function () {

    })


    function initTable(columns) {
        grid = $('#dg').datagrid({   //定位到Table标签,Table标签的ID是grid
            url: 'sql_toolbar_port.php',   //指向后台的Action来获取当前菜单的信息的Json格式的数据
            title: 'sql查询',
            iconCls: 'icon-view',
//                height: 650,
//                width: '100%',
            fit: true,
            idField: 'ID',
            toolbar: '#toolbar',
            method : 'post',
            fitColumns:false,    //横向滚动条
            queryParams: {zoneid:$("input[name='zoneid']").val(),type:$("select[name='type']").val(),db_name:$("input[name='db_name']").val(),sqlstr:encodeURI($("textarea[name='sqlstr']").val())},
//            queryParams: $("form").serialize(),  //异步查询的参数
            columns: [
                columns,//通过js动态生成,这是关键。
            ],
        });

    };


    function select_gift() {
        var obj1 = $("form").serializeArray();
        $.each(obj1,function (i,field) {
            alert(field.name + '=' + field.value);
        })

    }


</script>
</body>
</html>

因为easyui的datagrid 表格插件, 官方没有给出 动态输出表格动态展示列的例子, 我采用的是动态获取列.

列标题 一个接口, 列数据一次接口. 我觉得两个本来就是一个查询, 所以放到了一个页面, 只做了返回值的区分, 列标题传一个head=1的参数.

JS两个ajax函数, 一个是获取列的, 下面是获取数据的,  上面获取后把列字符串给到下面的 datagrid表格控件去展示.

注意两个函数的参数都要一致,否则会出错.

 

看看PHP页面.

include_once 'database.php';
include_once 'function.php';
include_once 'models/ZoneClass.php';
$Zone = new ZoneClass(DATABASE_HOST,DATABASE_USER,DATABASE_PASS,DATABASE_PORT,DB_FENTIANSJ);
include_once 'models/GmCode.php';
$GMCODE = new  GmCode(DATABASE_HOST,DATABASE_USER,DATABASE_PASS,DB_EXTGAME,DATABASE_PORT);

$con = mysqli_connect(DATABASE_HOST,DATABASE_USER, DATABASE_PASS, DB_ADMIN, DATABASE_PORT);
$con ? '': die('连接失败');

$head = empty($_REQUEST['head']) ? '' : $_REQUEST['head'];
$type = empty($_REQUEST['type']) ? 0:1;
$db_name = empty($_REQUEST['db_name']) ? '': urldecode($_REQUEST['db_name']);
$zoneid = empty($_REQUEST['zoneid']) ? '' : $_REQUEST['zoneid'];
$sqlstr = empty($_REQUEST['sqlstr']) ? '' : urldecode($_REQUEST['sqlstr']) ;
$rows = array();
//echo urldecode($sqlstr);die();

if($type ==0){

    mysqli_set_charset($con,'utf8');
    mysqli_select_db($con,$db_name) or die("mysql select db error ".mysqli_error($con));//设置或修改数据库

    $result = mysqli_query($con,$sqlstr);

    while ($row = mysqli_fetch_assoc($result)){
        $rows[] = $row;
    }

}else{

    $rows = $Zone->readZoneData($zoneid,$sqlstr);

}
//var_dump($rows);
//die();

$array = array();
if (!$rows){
    echo '{"error":"没有数据","rows":[]}';exit();
}


if($head == 1){//读取列
    $jsons1 = '';
    foreach ($rows[0] as $k=>$v){
//        $jsons1 .= '{"title":"'.$k.'","field":"'.$k.'","width":"100","align":"center"},';
        $jsons1[] = array(
            'field' =>$k,
            'title' =>$k,
            'align' => 'center',
            "width" => 200,
        );
    }
    echo json_encode($jsons1);

//    echo '[{"field":"id","title":"ID"},{"field":"gm_code","title":"gm"},{"field":"gm_zones","title":"gm_zones"},{"field":"action","title":"action"},{"field":"state","title":"state"},{"field":"timesss","title":"timesss"},{"field":"ctime","title":"ctime"}]';
}else{
    //读取数据
    echo json_encode($rows);
}



die();

这是个原生的php, 直接用mysqli连接,

前面引入的是连接数据库的公共文件.

先说说数据库情况,

 default 数据库 : 默认数据库, 服务器 IP 10.10.1.1. 所以选择综合区,填写操作的数据库即可 

其他区数据库(每个区的服务器都不同): 我这里在默认服务器下,有一个ZONE区数据表, 记录不同ZONE ID的 服务器IP 账号 密码 等.

所以要查询 某个区下面的数据库, 填写区ID 即可, 引入的ZoneClass是封装文件.

你们可以直接 把你们多个服务器做成一个SELECT下拉框, 一个数据库 文本框, 一个SQL语句文本框.

代码没什么好说的, 有注释, head是只取字段名, 然后把字段名转为json字符串.前端获取后展示列标题. 另外一个就是获取数据. 遵循easyui 表格的规则

  • 21
    点赞
  • 103
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
想要通过 Maven 和 Servlet 实现查询数据库表并将结果显示网页上,可以按照以下步骤进行操作: 1. 首先,确保已经在项目配置了 Maven 依赖管理工具。在 pom.xml 文件添加相应的依赖,包括 Servlet API、数据库驱动程序和其他必要的库。 2. 在项目创建一个 Servlet 类。在该类的 doGet() 方法实现数据库查询的逻辑。可以使用 Java 的 JDBC API 来连接数据库,并编写 SQL 查询语句来获取所需的数据。执行查询后,将结果保存在适当的数据结构。 3. 创建一个 JSP 文件,用于显示查询结果。在 JSP 文件,可以使用 Java 代码片段和 JSP 标签来获取并显示查询结果。使用 JSTL(JSP 标准标签库)可以更方便地处理数据。根据需要,可以使用 HTML 和 CSS 来美化页面。 4. 在 Servlet 类的 doGet() 方法,使用 request.getRequestDispatcher() 方法获取 JSP 文件的请求分派器。然后,将查询结果作为属性(attribute)设置在请求,并将请求分派到 JSP 页面。 5. 在 JSP 页面,使用 JSTL 标签和 Java 代码片段来获取查询结果,并将其在网页显示出来。可以根据需要使用循环、条件和其他功能来处理和展示数据。 6. 运行项目并访问相应的 URL,即可看到从数据库查询到的数据网页上的显示。 总结来说,通过 Maven 管理依赖,使用 Servlet 连接数据库并编写SQL查询语句,然后将查询到的结果通过 JSP 页面展示出来,就可以实现在网页显示数据库表的功能。通过合理利用 Java、HTML、CSS 和 JSTL 等技术,可以实现更灵活、美观的数据展示效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值