接口测试平台-87: 全局请求头之 调试弹框展示header

1. 实现host和header的clear功能

发现另一个之前遗漏的功能，就是这俩个Clear按钮没有实现。所以这里插一下，解决掉：

一个是host，一个是header的俩个Clear按钮都加上onclick。然后在下面加上这俩个小js函数：

{#    清空host    #}
function ts_clear_host() {
    document.getElementById('ts_host').value = '';
}

{#    清空header    #}
function ts_clear_header() {
    document.getElementById('ts_header').value = '';
}

 

2. 实际使用公共请求头

本节一起来研究，在接口库调试页面，用例库步骤详情页 这俩个地方如何加入这些项目公共请求头吧。

当接口选中公共请求头后，那么之后需要变化请求头具体内容，只需要在请求头设置弹层设置即可，所有的接口都是实际请求时候去调用最新的请求头。

具体选中了哪些请求头的name是储存在接口表，而实际请求头的name/key/value是储存在请求头表的。

首先打开P_apis.html 先找到调试弹层代码，然后找到header上下文：

注意看，之前是用一个ul 标签包裹着 俩个li标签，这样保证了他们在一行，第一个li标签是header的输入框，第二个标签是后面的clear按钮：

这里要在它最后再新增一个按钮选择公共请求头用，所以这个input的长度要再缩短一些，新按钮直接复制上面的Clear即可。可复制：▼

</button><button type="button" style="height: 40px; width: 60px" class="btn btn-default">
    <span>▼</span>
</button>

效果：

给这个公共请求头选择按钮加上onclick：

然后下面新建这个js函数：

到这里要设计一下这些header的显示效果。在这个位置放了一个空的li标签，并写好了id，要用js去控制展示效果：

可以手动写几个demo看看效果，然后别忘了删掉：

<li id="ts_project_header_li">
    <label style="margin-right: 5px"><input type="checkbox" />第1个name</label>
    <label style="margin-right: 5px"><input type="checkbox" />第2个name</label>
    <label style="margin-right: 5px"><input type="checkbox" />第3个name</label>
</li>

效果：

这个应该是展示成多选框效果。删除掉这三个展示用demo。

现在要在进入这个页面的时候就带上所有请求头数据，所以这里要用个for循环：

<li id="ts_project_header_li" style="display: none">
    {% for i in project_header %}
        <label style="margin-right: 5px"><input id="checkbox_{{ i.id }}" value="{{ i.id }}" type="checkbox" />{{ i.name }}</label>
    {% endfor %}
</li>

效果：

但是要让它默认是隐藏状态，所以加上属性display,然后在下面的展示js函数中写：

现在是默认隐藏，点击倒三角按钮后才会出现。

然后要在接口表中，设置这个接口选用的请求头的id字段，（之前设计是用name存放，后来意识到name是可重复的，所以改用更加准确的请求头id）