首先打开我们的多用例模块,看到现在的步骤详情页是这样的:
我们打开P_cases.html,直接找到这个header后面的html,给它加上倒三角按钮。
注意上图,因为要放在同一行,所以要缩短input的宽度 给留出空间。图中的宽度 高度都是我调过的,可以放心使用,效果如下:
然后我们去复制承载请求头的那个div 放在下面:
虽然它现在是none的 我们看不到效果,但是我们继续去开发即可。
现在我们在下面js的那一堆上加一个script,专门用来写公共请求头的:
大家如果代码和我没有太大的变化,可以对照左侧的行标来确定位置。
现在我们可以知道,这个用例库依然看不到任何请求头,那是因我们后端函数并没有给它返回这个请求头数据,所以我们去views.py中去增加:
重启服务,刷新页面,看看效果:
可以看到 ,点击了倒三角后,成功显示出来了项目当前的俩个请求头。
接下来我们要处理的是,在选择/切换 顶层的 仓库接口 的时候,下面请求头能跟得上更新。
首先找到
这个ready样子的,不用看,这就是监听。监听的什么事件?就是下面写的,id=apis的那个输入框 的内容change改变就会触发后面的那个funcitonn函数。
我们点击这个... ,打开这个函数,在里面加入我们的公共请求头相关的代码
1.首先是这个函数中的初始化代码块。遍历并全部清空选择。
2.然后是按照返回值中的数据进行选中。
好了我们现在刷新页面 来测试一下:
首先是我的接口库中这个接口 选中的请求头如下:
然后我去用例的步骤详情页,套用这个接口,会发现 选中了一样的请求头。
所以这里我们成功搞定。