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

简介: 上节,成功搞定了请求头的增删改查。本节我们就一起来研究,在接口库调试页面,用例库步骤详情页 这俩个地方如何加入这些项目公共请求头吧。

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

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

微信图片_20220625154227.png

然后找到header上下文:

微信图片_20220625154244.png

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

微信图片_20220625154250.png

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

微信图片_20220625154256.png

效果:

微信图片_20220625154304.png

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

所以我们这里插一下,解决掉:

微信图片_20220625154311.png

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

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

微信图片_20220625154316.png

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


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

微信图片_20220625154322.png

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

微信图片_20220625154328.png到这里我们要设计一下,这些header的显示效果。

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

微信图片_20220625154333.png

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

微信图片_20220625154339.png

效果:

微信图片_20220625154344.png

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

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

微信图片_20220625154349.png

现在我们要在进入这个页面的时候就带上所有请求头数据,所以这里要用个for循环:微信图片_20220625154354.png

效果:

微信图片_20220625154400.png

但是我们要让它默认是隐藏状态,所以加上属性display,然后在下面的展示js函数中写:微信图片_20220625154406.png

微信图片_20220625154411.png

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


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


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

相关文章
|
1月前
|
数据采集 机器学习/深度学习 大数据
行为检测代码(一):超详细介绍C3D架构训练+测试步骤
这篇文章详细介绍了C3D架构在行为检测领域的应用,包括训练和测试步骤,使用UCF101数据集进行演示。
40 1
行为检测代码(一):超详细介绍C3D架构训练+测试步骤
|
1月前
|
机器学习/深度学习 人工智能 监控
提升软件质量的关键路径:高效测试策略与实践在软件开发的宇宙中,每一行代码都如同星辰般璀璨,而将这些星辰编织成星系的过程,则依赖于严谨而高效的测试策略。本文将引领读者探索软件测试的奥秘,揭示如何通过精心设计的测试方案,不仅提升软件的性能与稳定性,还能加速产品上市的步伐,最终实现质量与效率的双重飞跃。
在软件工程的浩瀚星海中,测试不仅是发现缺陷的放大镜,更是保障软件质量的坚固防线。本文旨在探讨一种高效且创新的软件测试策略框架,它融合了传统方法的精髓与现代技术的突破,旨在为软件开发团队提供一套系统化、可执行性强的测试指引。我们将从测试规划的起点出发,沿着测试设计、执行、反馈再到持续优化的轨迹,逐步展开论述。每一步都强调实用性与前瞻性相结合,确保测试活动能够紧跟软件开发的步伐,及时适应变化,有效应对各种挑战。
|
7天前
|
JSON Java 测试技术
SpringCloud2023实战之接口服务测试工具SpringBootTest
SpringBootTest同时集成了JUnit Jupiter、AssertJ、Hamcrest测试辅助库,使得更容易编写但愿测试代码。
36 3
|
11天前
|
监控 安全 测试技术
构建高效的精准测试平台:设计与实现指南
在软件开发过程中,精准测试是确保产品质量和性能的关键环节。一个精准的测试平台能够自动化测试流程,提高测试效率,缩短测试周期,并提供准确的测试结果。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
47 1
|
29天前
|
人工智能 监控 测试技术
云应用开发平台测试
云应用开发平台测试
46 2
|
11天前
|
监控 安全 测试技术
构建高效精准测试平台:设计与实现全攻略
在软件开发过程中,精准测试是确保产品质量的关键环节。一个高效、精准的测试平台能够自动化测试流程,提高测试覆盖率,缩短测试周期。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
33 0
|
1月前
|
JSON 算法 数据可视化
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
这篇文章是关于如何通过算法接口返回的目标检测结果来计算性能指标的笔记。它涵盖了任务描述、指标分析(包括TP、FP、FN、TN、精准率和召回率),接口处理,数据集处理,以及如何使用实用工具进行文件操作和数据可视化。文章还提供了一些Python代码示例,用于处理图像文件、转换数据格式以及计算目标检测的性能指标。
59 0
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
|
2月前
|
Java C++
代码文件间重复性测试
本文介绍了如何使用代码相似性检测工具simian来找出代码文件中的重复行,并通过示例指令展示了如何将检测结果输出到指定的文本文件中。
|
1月前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day02【9.Home组件拆分+10.postman测试接口】
vue尚品汇商城项目-day02【9.Home组件拆分+10.postman测试接口】
40 0
|
1月前
|
算法 Java 测试技术
数据结构 —— Java自定义代码实现顺序表,包含测试用例以及ArrayList的使用以及相关算法题
文章详细介绍了如何用Java自定义实现一个顺序表类,包括插入、删除、获取数据元素、求数据个数等功能,并对顺序表进行了测试,最后还提及了Java中自带的顺序表实现类ArrayList。
19 0