接口调试层翻开后，目前并没有显现这个接口的一切数据。本节就一句一句的把这些数据显现出来吧。
首要，让咱们翻开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：
咱们能够再试试其他几个子页面均可成功被点击。
然后便是恳求体显现了。由于恳求体显现的格局不同，所以代码也不同。
考虑到本节内容现已很多，所以放在下节了。
最终有需求订书的小伙伴能够后台留言一下，人数够了天然就会出书了。
最近准备出一个新系列，比较剪短，便是点评看过的一些书，优点缺陷都会说一下，仅代表个人见解，定见不同的也不要喷哈。
