接口测试平台代码实现41：调试窗口显示接口内容

接口调试层打开后，目前并没有显示这个接口的所有数据。本节就一句一句的把这些数据显示出来吧。

首先，让我们打开P_apis.html,找到打开显示调试层的函数：

如图所示，我们已经显示了 接口的id和name。

我们是需要请求后台拿到最新的接口数据，然后实时根据其请求方式进行显示。

所以我们这里需要写一个请求(当然接口id不可能变，但是名字name其实也应该获取最新的。这里为什么不用进入这个接口库时带的接口数据呢？因为很可能在你闲逛的时候，其他同学已经修改来这个接口，而你这时候打开，显示的还是你之前进入接口库的旧数据，就会造成混乱，随便点一下保存，就会把其他同学辛苦修正的新数据给覆盖掉)

所以，写一个请求：

请求中我们只需要传给后端接口id即可。

然后去urls.py中架好映射：

然后去后台写好这个函数：

因为这次要用到传给前端字典json串，所以要在文件开头导入json

然后写好这个给前端单个api数据的函数：

第一句是获取到前端过来的接口id

第二句是拿到这个接口的字典格式数据

第三句是返回给前端，但是数据要变成json串。

这段代码很常用，大家最好死记硬背下来。

然后我们回过头来看P_apis.html中这个打开函，开始写它接收到后台返回的数据后的动作：

先加一句打印，看看打印出来的对不对。

这样就是成功拿到了这个接口的所有数据。然后就是一点一点给显示在页面即可。首先是name名称。我们抛弃掉之前的显示名称的代码，在这里加上新的实时显示。

然后刷新一下页面，看看前端是否可以正常显示，正常显示名称，说明我们这个链路和设计成功了。

成功后，我们继续补充其他数据：

首先是请求方式：

请求方式是一个下拉框，一个下拉框中是由多个option构成，当每个option被选中时，实际上是这个下拉框本身的value值变成了这个option的value。所以我们只要强行指定下拉框的value = 接口返回值的接口api_method即可：

然后是url host header三个简单的输入框：

完成后即可测试，无bug。

然后就到了最复杂的请求体编码格式环节了：

首先是要确保下面的几个子页面能自动切换到保存的编码格式上。

我们的保存功能是已经做好的，所以这里我们保存none以外一个其他编码格式方便测试。

在打开form-data的时候 意外发现了一个小bug，之前有粉丝反馈过。

这里多出来一列。这是为什么呢？因我们在打开函数中调用了clear初始化函数。这个初始化函数中对于这个第三方表格有一句，添加这个按钮列的代码：

如上图，俩个表格都有。但是我们忘记删除我们一开始调试样式时候加入的这句代码了，导致重复添加了按钮列。也就是在html部分的一个嵌入的，最开始写的那段，需要删除。

删除后再试试看：

发现已经恢复正常了。

然后我们保存一个form-data的内容，至少俩对参数：

点击保存按钮，然后再次打开调试弹层：

可以看到编码格式和请求体内容均已成功在console里获取到：

然后就是该让它们显示在页面上了。

首先是这个子页面切换：

让我们好好看一下这些个子页面到底是什么：

控制它们的按钮就是这样一堆li标签。所以其实我们只需要点击到这几个标签，就能实现自动切换了。

上图中，第一句是我们拼接起来这个#form-data。因为所有的li标签内的a标签的href 都是#开头。我们就是要利用这个href来进行定位。

然后第二句是jquery选择器的语法，意思是li 标签下的a标签中 href 是这个拼接字符串的 元素执行点击click操作。

效果如下，打开调试弹层后，自动切换到来form-data：

我们可以再试试其他几个子页面均可成功被点击。

然后就是请求体显示了。因为请求体显示的格式不同，所以代码也不同。

考虑到本节内容已经很多，所以放在下节了。

最后有需要订书的小伙伴可以后台留言一下，人数够了自然就会出书了。

最近准备出一个新系列，比较剪短，就是点评看过的一些书，优点缺点都会说一下，仅代表个人见解，意见不同的也不要喷哈。