接口测试平台代码实现106:登录态接口-2
本节我们要想办法构造出登陆态接口的div内的实际dom元素。
大部分内容我们仍然可以借鉴普通接口调试层的内容，所以打开P_apis.html，找到那个登陆态的div，开始进行添加内部控件，但是也不能全都照搬过来，有一些就不需要，比如接口名字。而因为这个接口一个项目基本也就设置一次，所以优化便利性这种事的优先级不高，精力还是留给那些使用频率高的功能上吧
首先是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。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-12-28，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
