这里还要说一句,这个公共请求头是变量,也就是说,当我们的具体很多接口选中了某些公共请求头后,那么之后需要变化请求头具体内容,只需要在请求头设置弹层设置即可,所有的接口都是实际请求时候去调用最新的请求头。具体选中了哪些请求头的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)
本节内容到此结束,下节课我们 对接口表中的请求头选中字段进行设计 功能实现。