接口测试平台-101: 项目公共登陆态弹框 UI

登陆态接口，先来制定下要怎么做：

1. 这个登录态接口包含账户信息，就不能作为整个平台的公用的，只能放到项目内。因为项目内是个人建立的，后果可以自负。当然后续上了权限管理后，其他人就可以控制看不到自己项目内的内容了。   
2. 作为项目内的一项功能，那么它应该可以作用到接口库和用例库中。
3. 它需要有自己独特的管理页面(弹层),其中包括调试，返回值提取设置，类型选择，客户端选择，预置默认文案等等。

    

1. 打开登陆态弹框

首先看底部的按钮：登录按钮，首先打开P_apis.html，下方找个地方写登陆态的div：

 

然后新建script 并内增一个展示函数function：

<script>
    function login_show() {
        // 显示蒙层，并设置好蒙层的层级关系，让其在调试层之下，其他元素之上
        document.getElementById('mengceng').style.display = 'block';
        document.getElementById('mengceng').style.zIndex = '998';
        document.getElementById('login_set_div').style.zIndex = '999';
        document.getElementById('login_set_div').style.display = 'block';
    }
</script>

内容基本是照搬部分接口调试层的代码。然后在登录态按钮和这个login_show函数结合起来：

到此，点击按钮 打开登陆态接口的设置层的链路就完成了。

 

2. 补充弹框内容

首先是div的样式和标题。标题虽然没啥大用，但是起个提示效果

{#  登陆态接口  #}
<div id="login_set_div" style="display: none; color: black; padding-left: 10px; border-radius: 5px; width: 80%;
    position: absolute; left: 10%; top: 20%; background-color: white; box-shadow: 4px 4px 8px grey">

</div>

 

 然后是 请求方式/url/调试按钮那一行。

上图中这一大块都是直接复制调试层的，不过移动过来后要注意修改内部的id,毕竟不能重复，所以之前全是ts_.... 全改成login_.....

{#  登陆态接口  #}
<div id="login_set_div" style="display: none; color: black; padding-left: 10px; border-radius: 5px; width: 80%;
    position: absolute; left: 10%; top: 20%; background-color: white; box-shadow: 4px 4px 8px grey">
    <h4>请设置该项目的登陆态接口：</h4>
    <ul class="nav navbar-nav" style="width: 98%">
        <li>
            <select id="login_method" style="height: 40px" class="form-control">
                <option value="none">请求方式</option>
                <option value="post">POST</option>
                <option value="get">GET</option>
            </select>
        </li>

        <li style="width: -webkit-calc(100% - 225px)">
            <input id="login_url" style="color: black; padding-left: 10px; width: 100%; height: 40px" type="text" placeholder="url：如 /abc/efgh/" value ="" />
        </li>

        <li>
            <button onclick="ts_send()" type="button" style="height: 40px; width: 120px" class="btn btn-default">
                <span id="login_send_btn" style="font-size: large">Send</span>
            </button>
        </li>
    </ul>
    <br><br><br>
</div>

这时候看看效果：

 

接下来是环境/host：

{#      host    #}
<ul class="nav navbar-nav" style="width: 98%">
    <li style="width:100%">
        <input id="login_host" list="datalist_host" autocomplete="off" style="color: black; padding-left: 10px; width: 100%; height: 40px" type="text" placeholder="host：如 http(s)://xxx.ccc.com" value ="" />
    </li>
</ul>
<br><br><br>

host输入框直接用调试层已经声明的datalist_host即可，并且删除了clear这个按钮，这里用处不大，所以要修改下输入框的宽度。

看看效果：

 

接下来是请求头：

{#     header请求头    #}
<ul class="nav navbar-nav" style="width: 98%">
    <li style="width: 100%">
        <input id="login_header" style="color: black; padding-left: 10px; width: 100%; height: 40px" type="text" placeholder='header请求头：如 {"Content": "application/json"}' value ="" />
    </li>
</ul>
<br><br><br>

 

然后是body请求头类型和请求体了，一样直接复制后 改id。

{#    body    #}
<ul id="login_myTab" class="nav nav-tabs" >
    <li class="active"><a id="login_click_none" href="#login_none" data-toggle="tab" >none</a></li>
    <li ><a href="#login_form-data" data-toggle="tab" >form-data</a></li>
    <li ><a href="#login_x-www-form-urlencoded" data-toggle="tab" >x-www-form-urlencoded</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">raw <b class="caret"></b></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="login_myTabDrop1">
            <li><a href="#login_Text" tabindex="-1" data-toggle="tab">Text</a></li>
            <li><a href="#login_JavaScript" tabindex="-1" data-toggle="tab">JavaScript</a></li>
            <li><a href="#login_Json" tabindex="-1" data-toggle="tab">Json</a></li>
            <li><a href="#login_Html" tabindex="-1" data-toggle="tab">Html</a></li>
            <li><a href="#login_Xml" tabindex="-1" data-toggle="tab">Xml</a></li>
        </ul>
    </li>
    <li ><a href="#login_GraphQL" data-toggle="tab" >GraphQL</a> </li>
    <li ><a href="#login_response" data-toggle="tab" >返回体</a></li>
</ul>
<div id="login_myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="login_none" style="text-align: center;color: grey">
        <h3>这个请求将不会携带任何请求体</h3>
        <h5>This request will not carry any request-body</h5>
    </div>
    <div class="tab-pane fade" id="login_form-data">
        <div class="table-responsive" style="width: 98%;color: black">
            <table class="table table-bordered table-striped" id="login_mytable" style="background-color:white">
                <thead style="color: #337ab7;font-size: x-small">
                  <tr>
                    <td style="width: 30%">Key</td>
                    <td style="width: 50%">Value</td>
                  </tr>
                </thead>
                <tbody id="login_mytbody">
                  <tr>
                    <td></td>
                    <td></td>
                  </tr>
                </tbody>
            </table>
        </div>
        <button class="btn btn-default" id="login_add"><i class="fa fa-plus"></i> 添加新参数</button>
        <script>window.jQuery || document.write('<script src="/static/201801271505/js/jquery-1.11.0.min.js"><\/script>')</script>
        <script type="text/javascript" src="/static/201801271505/js/bootstable.js"></script>
    </div>
    <div class="tab-pane fade" id="login_x-www-form-urlencoded">
        <div class="table-responsive" style="width: 98%;color: black">
            <table class="table table-bordered table-striped" id="login_mytable2" style="background-color:white">
                <thead style="color: #337ab7;font-size: x-small">
                  <tr>
                    <td style="width: 30%">Key</td>
                    <td style="width: 50%">Value</td>
                  </tr>
                </thead>
                <tbody id="login_mytbody2">
                  <tr>
                    <td></td>
                    <td></td>
                  </tr>
                </tbody>
            </table>
        </div>
        <button class="btn btn-default" id="login_add2"><i class="fa fa-plus"></i> 添加新参数</button>
        <script>window.jQuery || document.write('<script src="/static/201801271505/js/jquery-1.11.0.min.js"><\/script>')</script>
        <script type="text/javascript" src="/static/201801271505/js/bootstable.js"></script>
    </div>
    <div class="tab-pane fade" id="login_Text">
        <textarea name="" id="login_raw_Text" style="color: black;width: 98%;height: 300px"></textarea>
    </div>
    <div class="tab-pane fade" id="login_JavaScript">
        <textarea name="" id="login_raw_JavaScript" style="color: black;width: 98%;height: 300px"></textarea>
    </div>
    <div class="tab-pane fade" id="login_Json">
        <textarea name="" id="login_raw_Json" style="color: black;width: 98%;height: 300px"></textarea>
    </div>
    <div class="tab-pane fade" id="login_Html">
        <textarea name="" id="login_raw_Html" style="color: black;width: 98%;height: 300px"></textarea>
    </div>
    <div class="tab-pane fade" id="login_Xml">
        <textarea name="" id="login_raw_Xml" style="color: black;width: 98%;height: 300px"></textarea>
    </div>
    <div class="tab-pane fade" id="login_GraphQL">
         <table style="width: 98%">
           <thead>
                <tr>
                    <td style="width: 55%"><span >QUERY</span></td>
                    <td style="width: 40%"><span >GRAPHQL VARIABLES</span></td>
                  </tr>
           </thead>
            <tbody style="color: black">
              <tr>
                <td><textarea id="login_body_plan_G_Q"  rows="14" style="padding-left: 3px;border-radius: 5px;width: 99%"></textarea></td>
                <td><textarea id="login_body_plan_G_G"  rows="14" style="padding-left: 3px;border-radius: 5px;width: 100%"></textarea></td>
              </tr>
            </tbody>
        </table>
     </div>
    <div class="tab-pane fade" id="login_response">
        <textarea name="" id="login_response_body" disabled="disabled" style="background-color: #e4f3f5;color: black;width: 98%;height: 300px"></textarea>
    </div>
</div>
<br>

目前显示均正常，除了form-data和x-www....的那俩表格，那俩表格需要之后的函数中进行初始化才会正常。现在要接着弄前端dom的元素展示功能。

 

然后是保存/取消按钮。这俩个按钮照样放在右上角，所以位置应该是在h4标题之上，div的第一个子属性，并且是float属性：

{#    保存 + 取消    #}
<div class="btn-group" style="float: right">
    <button onclick="login_save()" type="button" class="btn btn-success">保存</button>
    <button onclick="login_close()" type="button" class="btn btn-default">取消</button>
</div>

注意onclick调用的函数，也要加login_ ，效果如下：

 

然后是token提取设置，还要有提取结果展示：

返回体目前是一个超大的显示框，很浪费，给它拆成三份：（要想各个元素显示在同一行，就用ul+li标签搞定。）

<div class="tab-pane fade" id="login_response">
    <ul class="nav navbar-nav" style="width: 98%">
        <li style="width: 33%;">
            <textarea name="" id="login_response_body" disabled="disabled"
                      style="background-color: #e4f3f5;color: black;width: 100%;height: 300px"
                       placeholder="返回体"></textarea>
        </li>
        <li style="width: 33%;">
             <textarea name="" id="login_response_set"
                      style="color: black;width: 100%;height: 300px"
                       placeholder="请输入提取设置，=号左边写变量名，右边写绝对路径，多个用换行分开，格式例如：
sessId=/content/sessId
token=/data/token"></textarea>
        </li>
        <li style="width: 33%;">
             <textarea name="" id="login_response_result" disabled="disabled"
                      style="background-color: #f5eeec;color: black;width: 100%;height: 300px"
                       placeholder="提取结果"></textarea>

        </li>
    </ul>
</div>

效果如下，大家可以自己改改样式，注意id：