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

2022-05-19 08:54:22 浏览数 (1)

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

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

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

我们一个一个处理:

首先是 x-www-form-urlencoded :

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

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

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

然后js函数中:

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

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

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

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

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

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

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

所以这个ts_show函数要接收接口id和name作为入参:

然后我们去写接口html中的调试按钮,让其的onclick属性=ts_show:

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

当然这个颜色非常暗,所以我们给颜色改成明显一点的:

效果如下:

好了,本节课就到此结束,能继续追的小伙伴一定要坚持住,当然可以养肥再看。

0 人点赞