106-登录态接口2/前端实际dom元素

参考大佬文章：106

前端

注意修改内部的id
host输入框我们仍然用datalist_1来作为选择条件，但是因为调试层已经声明过一个datalist_1，所以我们这里不用再写，直接用即可，并且我们删除了clear这个按钮
最重要的部分，就是返回值提取设置。我们其他普通接口调用这个登陆态接口是为了拿到token，所以我们要写这个返回值设置
要想各个元素显示在同一行，就用ul+li标签搞定

{#登录态接口#}
<div id="login_set_div" style="display: none;border-radius:5px;width: 70%;
position: absolute;left: 15%;top: 10%;box-shadow: 2px 2px 4px grey;border: 1px solid #3e2935;
padding-left: 10px;background-color: white;z-index: 2">
    <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>
    <h4>请设置本项目的登录态接口：</h4>
    <ul class="nav navbar-nav" style="width: 100%">
        <li style="width: 15%">
            <select id="login_method" style="height: 40px;" class="form-control">
                <option value="none"> 请求方式</option>
                <option value="post"> POST</option>
                <option value="get"> GET</option>
                <option value="put"> PUT</option>
                <option value="delete"> DELETE</option>
            </select>
        </li>
        {# url #}
        <li style="width:70%">
            <input id="login_url" style=";padding-left: 10px;width: 100%;height: 40px;" type="text"
                   placeholder='url: 如 /abcd/efgh/' value="" class="form-control">
        </li>

        <li style="width: 15%">
            <button type="button"
                    style="height: 40px;width: 120px;" class="btn btn-default"
                    onclick=""><span style="font-size: medium">SEND</span></button>
        </li>
    </ul>
    <br><br><br>
    {# host #}
    <ul class="nav navbar-nav" style="width: 100%">
        <li style="width: 100%">
            <input id="login_host" style="width: 100%;height: 40px;padding-left: 10px" type="text" list="datalist_1"
                   class="form-control" autocomplete="off"
                   placeholder="host：如http(s)://xxx.ccc.com" value="">
        </li>
    </ul>
    <br><br><br>
    {#请求头#}
    <ul class="nav navbar-nav" style="width: 100%">
        <li style="width: 100%">
            <input id="login_header" style="width: 100%;height: 40px;padding-left: 10px" type="text"
                   class="form-control"
                   placeholder='header请求头：如{"content":"application/json"}' value="">
        </li>
    </ul>
    <br><br><br>
    <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>Username</td>
                        <td>wqrf</td>
                    </tr>
                    <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>Username</td>
                        <td>wqrf</td>
                    </tr>
                    <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="width: 98%;height: 250px"></textarea>
        </div>
        <div class="tab-pane fade" id="login_JavaScript">
            <textarea name="" id="login_raw_JavaScript" style="width: 98%;height: 250px"></textarea>
        </div>
        <div class="tab-pane fade" id="login_Json">
            <textarea name="" id="login_raw_Json" style="width: 98%;height: 250px"></textarea>
        </div>
        <div class="tab-pane fade" id="login_Html">
            <textarea name="" id="login_raw_Html" style="width: 98%;height: 250px"></textarea>
        </div>
        <div class="tab-pane fade" id="login_Xml">
            <textarea name="" id="login_raw_Xml" style="width: 98%;height: 250px"></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>
                <tr>
                    <td><textarea id="login_body_plan_G_Q" rows="10"
                                  style="padding-left: 3px;border-radius: 5px;width: 99%"></textarea></td>
                    <td><textarea id="login_body_plan_G_G" rows="10"
                                  style="padding-left: 3px;border-radius: 5px;width: 100%"></textarea></td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="tab-pane fade" id="login_response">
            <ul class="nav navbar-nav" style="width: 100%">
                <li style="width: 33%;">
            <textarea name="" id="login_response_body" disabled="disabled"
                      style="width: 100%;height: 300px"
                      placeholder="返回体"></textarea>
                </li>
                <li style="width: 33%;">
             <textarea name="" id="login_response_set"
                       style="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="width: 100%;height: 300px"
                       placeholder="提取结果"></textarea>

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

完成效果