nginx+jquery+ajax搭建的qaweb游戏测试平台

本文链接：https://blog.youkuaiyun.com/ruguokeyi110/article/details/48155587
做游戏服务器时经常要与客户端联调，但客户端程序不一定抽出空来。于是做了个web平台，直接去测试服务器功能。
下面是web界面的代码。由于自己只是业余学习web相关东西，代码可能比较丑陋。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>自动化测试平台</title>
    <script src="jquery.js"> </script>
    <style type="text/css">
        body {
            background-color: #C7EDCC;
        }
    </style>
    <script type="text/javascript">
        var total_amount = {
            "line_func": 1,
            "cmd_func": 1
        }
        function get_height()
        {

        }

        function copy_line_func(btn)
        {
            var tr = $(btn).parents('tr');
            tr.after(tr.clone(true));
            total_amount["line_func"]++;
        }

        function copy_line_cmd(btn)
        {
            var tr = $(btn).parents('tr');
            tr.after(tr.clone(true));
            total_amount["cmd_func"]++;
        }

        function del_line_func(btn, type)
        {
            if ( total_amount[type] <= 1 )
            {
                alert("最后一个按钮不允许删除");
                return;
            }
            var tr = $(btn).parents('tr');
            tr.remove();
        }

        function mycommand(btn) {
            var port = $("#port").val();
            var action = $("#main_form").attr('action');
            if ( port == "" )
            {
                alert("先输入端口");
                return;
            }
            var ipt = $(btn).parents('tr');
            var cmd = ipt.find(".typeahead").val();
            if ( port == "" )
            {
                alert("没有数据啊，提交什么");
                return;
            }
            var comment = ipt.find(".comment").val();

            $("#loading").show();
            $("#serverresult").hide();
            var post_data = {
                "port": port,
                "cmd": cmd,
                "comment": comment
            };
            $.ajax({
                type: "POST",
                //ip略去
                url: "http://xx/hello",
                data: post_data,
                dataType: "text",
                success: function(ret) {
                    $("#loading").hide();
                    $("#serverresult").show();
                    $("#serverresult").text("已收到指令请求，结果是:"+ret);
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    $("#loading").hide();
                    alert(XMLHttpRequest.readyState + "stata" + XMLHttpRequest.status + "tst"+XMLHttpRequest.responseText);
                }
            });


        }

    </script>


</head>

<body>

<div class="content">

    <div class="crumb">
        <h2>游戏测试工作台</span></h2>
    </div>

    <h3 class="blockTitle">执行指令 <a href="#" οnclick="block();return false;">显示/隐藏</a></h3>

    <div class="layout">

        <form action="action_execute" method="POST" id='main_form' target="">
            <table class="lay" cellpadding="5px" style="text-align:left;">
                <tr class="all_port">
                    <td style="width: 7%;">输入端口:</td>
                    <td style="width: 55%;">
                        <div class="mymatch_port">
                            <input class="typeahead" id="port" name="port" maxlength="10" size="10" type="text">
                        </div>
                    </td>
                    <td style="width: 20%;">指令注释</td>
                    <td style="width: 15%;">
                        <input type="button" value="保存指令" οnclick="sava_cmd_data()">
                        <input style="margin-left:10px" type="button" value="读取指令" οnclick="get_cmd_data()">
                    </td>
                </tr>
                <tr class="all_func">
                    <td>
                        <label>调用函数:</label>
                    </td>
                    <td>
                        <div class="mymatch_func">
                            <input class="typeahead" type="text" style="border: 2px solid #99CCFF; width: 80%;"
                                   id="command_auto" name="command" maxlength="1000"
                                   command="true">
                            <input type="button" value="+" οnclick="copy_line_func(this)">
                            <input type="button" value="-" οnclick="del_line_func(this, 'line_func')">
                        </div>
                    </td>
                    <td><input type="text" style="width: 80%;" id="command_comment" maxlength="1000" class = "comment" command="true"></td>
                    <td><input type="button" value="调用" οnclick="mycommand(this)"></td>
                </tr>

                <tr class="all_cmd">
                    <td>
                        <label>执行指令:</label>
                    </td>
                    <td>
                        <div class="mymatch_cmd">
                            <input class="typeahead" type="text" style="border: 2px solid #FFCCFF; width: 80%;"
                                   id="command_auto2" name="command2"
                                   maxlength="1000"
                                   command="true">
                            <input type="button" value="+" οnclick="copy_line_cmd(this)">
                            <input type="button" value="-" οnclick="del_line_func(this, 'cmd_func' )">
                        </div>
                    </td>
                    <td><input type="text" style="width: 80%;" id="command2_comment" maxlength="1000" class="comment" command="true"></td>
                    <td><input type="button" value="执行" οnclick="mycommand(this)"></td>
                </tr>
            </table>
        </form>
    </div>

    <div id="result">
        <h3 class="blockTitle">执行结果 <a href="#" οnclick="full_screen();return false;">全屏/恢复</a></h3>
        <img id="loading" src="res/loading.gif" title="正在执行指令，请稍候" style="margin-left:300px;display:none;"/>
        <p id="serverresult"></p>
    </div>

</div>
<!-- content  over-->

</body>
</html>
效果图: