首先是div的样式和标题。标题虽然没啥大用，但是起个提示效果,
然后是 请求方式/url/调试按钮那一行。
上图中这一大块都是直接复制调试层的，不过移动过来后要注意修改内部的id,毕竟不能重复，所以之前全是ts_.... 全改成login_.....
这时候看看效果：
接下来是环境/host：
host输入框我们仍然用datalist_1来作为选择条件，但是因为调试层已经声明过一个datalist_1，所以我们这里不用再写，直接用即可，并且我们删除了clear这个按钮，这里用处不大，所以要修改下输入框的宽度。
接下来是请求头：
然后是body请求头类型和请求体了，这里我们一样直接复制后 改id。
这里这一大段代码比较麻烦，我们直接复制后，我只标记出id修改的地方，大家把所有id，前面都加上login_这样便于之后区分,逐行检查，千万别落下，不然各种未知bug会出现，大家也可以之后直接复制我的源码。
可复制代码：
<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>
这次改动的地方很密集，如果之后使用中出现bug，请及时反馈哦～
目前显示均正常，除了form-data和x-www....的那俩表格，那俩表格需要我们之后的函数中进行初始化才会正常。我们现在要接着弄前端dom的元素展示功能。
然后是保存/取消按钮。这俩个按钮我们照样放在右上角，所以位置应该是在h4标题之上，div的第一个子属性，并且是float属性：
注意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：
好了，到此，我们最终的登陆态接口的前端展示效果做完了。下一节就要开始写BOM层的各种script了。
最新源码在github。
