接口测试平台代码实现88: 全局请求头-3

上节，成功搞定了请求头的增删改查。

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

这里还要说一句，这个公共请求头是变量，也就是说，当我们的具体很多接口选中了某些公共请求头后，那么之后需要变化请求头具体内容，只需要在请求头设置弹层设置即可，所有的接口都是实际请求时候去调用最新的请求头。具体选中了哪些请求头的name是储存在接口表，而实际请求头的name/key/value是储存在请求头表的。

首先打开P_apis.html 先找到我们的调试弹层代码：

然后找到header上下文：

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

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

效果：

到这里，我们发现另一个之前遗漏的功能，就是这俩个Clear按钮没有实现。

所以我们这里插一下，解决掉：

一个是host，一个是header的俩个Clear按钮都加上onclick。

然后我们在下面加上这俩个小js函数：

很简单，然后我们回归正传。

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

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

到这里我们要设计一下，这些header的显示效果。

我在这个位置放了一个空的li标签，并写好了id,可能厉害的同学已经猜到了，没错我要用js去控制展示效果：

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

效果：

这个应该是展示成多选框效果。

好了我们删除掉这三个展示用demo。

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

效果：

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

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

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

本节内容到此结束，下节课我们 对接口表中的请求头选中字段进行设计 功能实现。