接口测试平台代码实现38: 请求体保存-end

简介: 接口测试平台代码实现38: 请求体保存-end

 上节我们已经成功保存了none 和 form-date 俩种请求体。

本节课我们处理完剩余请求体,内容较多。因为是直播撸码,所以难免会有一些不完美的地方。大家自行优化。

打开P_apis.html发现目前还有这么多空着的:

微信图片_20220618210338.png

我们一个一个处理:

先是 x-www-form-urlencoded :

它的提取和保存应该和form-data一样,所以复制即可,但是要注意把mytable改成mytable2

微信图片_20220618210347.png

然后剩下的就是raw字符串五兄弟了:我们的保存方式实际上一摸一样,但是具体的多行文本框并不是一个。

但是要先给这5个多行文本框加上id:

微信图片_20220618210353.png

然后js函数中:

微信图片_20220618210401.png

搞定了 这个之后。我们在这个大js函数ts_save()的最后要写好http请求了,来把这些数据发给我们的后台让其保存成功。

但是这里我们遇到了一个问题,就是我们请求中,目前还没有获取到接口id,也就是后台也不知道你要保存/修改的是哪个接口。


   所以我们要先把打开这个调试弹层的js函数写好。让用户点击接口的调试按钮的时候,把id传给调试弹层,并显示在调试弹层的顶部标题small里,然后再点击保存按钮的时候,我们从这个顶部标题small里拿出api_id给ts_save函数用即可。微信图片_20220618210411.png

也就是这俩个small,前面的放api_id,后面的放接口名。为了api_id的small后续提取api_id,所以要给这个small加上id来定位。

微信图片_20220618210419.png

所以我们先新建一个ts_show函数来打开调试弹层

微信图片_20220618210426.png

并且把调试弹层的div 的style属性中的display改成none,让其默认是隐藏状态:微信图片_20220618210437.png

 然后我们开发ts_show函数,让用户点击时候可以打开调试弹层,并且把接口id 名字都显示在弹层顶部标题的俩个small标签里:微信图片_20220618210444.png


所以这个ts_show函数要接收接口id和name作为入参:微信图片_20220618210450.png

然后我们去写接口html中的调试按钮,让其的onclick属性=ts_show:微信图片_20220618210456.png

然后我们刷新页面 测试一下 发现可以成功打开调试弹层,并且正确显示接口id-name:微信图片_20220618210502.png

当然这个颜色非常暗,所以我们给颜色改成明显一点的:微信图片_20220618210508.png微信图片_20220618210514.png

好了,本节课就到此结束

相关文章
|
1月前
|
数据可视化 前端开发 测试技术
接口测试新选择:Postman替代方案全解析
在软件开发中,接口测试工具至关重要。Postman长期占据主导地位,但随着国产工具的崛起,越来越多开发者转向更适合中国市场的替代方案——Apifox。它不仅支持中英文切换、完全免费不限人数,还具备强大的可视化操作、自动生成文档和API调试功能,极大简化了开发流程。
|
2天前
|
人工智能 自然语言处理 测试技术
Potpie.ai:比Copilot更狠!这个AI直接接管项目代码,自动Debug+测试+开发全搞定
Potpie.ai 是一个基于 AI 技术的开源平台,能够为代码库创建定制化的工程代理,自动化代码分析、测试和开发任务。
65 19
Potpie.ai:比Copilot更狠!这个AI直接接管项目代码,自动Debug+测试+开发全搞定
|
5天前
|
JSON 前端开发 测试技术
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
43 10
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
|
3天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
25 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
24天前
|
前端开发 JavaScript 测试技术
使用ChatGPT生成登录产品代码的测试用例和测试脚本
使用ChatGPT生成登录产品代码的测试用例和测试脚本
75 35
|
24天前
|
JavaScript 前端开发 Java
使用ChatGPT生成关于登录产品代码的单元测试代码
使用ChatGPT生成关于登录产品代码的单元测试代码
41 16
|
1月前
|
存储 测试技术 数据库
接口测试工具攻略:轻松掌握测试技巧
在互联网快速发展的今天,软件系统的复杂性不断增加,接口测试工具成为确保系统稳定性的关键。它如同“翻译官”,模拟请求、解析响应、验证结果、测试性能并支持自动化测试,确保不同系统间信息传递的准确性和完整性。通过Apifox等工具,设计和执行测试用例更加便捷高效。接口测试是保障系统稳定运行的第一道防线。
|
1月前
|
Web App开发 JSON 测试技术
API测试工具集合:让接口测试更简单高效
在当今软件开发领域,接口测试工具如Postman、Apifox、Swagger等成为确保API正确性、性能和可靠性的关键。Postman全球闻名但高级功能需付费,Apifox则集成了API文档、调试、Mock与自动化测试,简化工作流并提高团队协作效率,特别适合国内用户。Swagger自动生成文档,YApi开源但功能逐渐落后,Insomnia界面简洁却缺乏团队协作支持,Paw仅限Mac系统。综合来看,Apifox是国内用户的理想选择,提供中文界面和免费高效的功能。
|
1月前
|
消息中间件 监控 小程序
电竞陪玩系统架构优化设计,陪玩app如何提升系统稳定性,陪玩小程序平台的测试与监控
电竞陪玩系统架构涵盖前端(React/Vue)、后端(Spring Boot/php)、数据库(MySQL/MongoDB)、实时通信(WebSocket)及其他组件(Redis、RabbitMQ、Nginx)。通过模块化设计、微服务架构和云计算技术优化,提升系统性能与可靠性。同时,加强全面测试、实时监控及故障管理,确保系统稳定运行。
|
2月前
|
算法 Java 测试技术
使用 BenchmarkDotNet 对 .NET 代码进行性能基准测试
使用 BenchmarkDotNet 对 .NET 代码进行性能基准测试
65 13