接口测试平台-39：调试窗口显示接口内容（不含请求体）

打开P_apis.html，找到打开显示调试层的函数：

需要请求后台拿到最新的接口数据，然后实时根据其请求方式进行显示。所以这里需要写一个请求.

接口id不可能变，但名字name其实也应该获取最新的。

为什么不用进入接口库时带的接口数据呢？

因为很可能在你闲逛的时候，其他同学已经修改来这个接口，而你这时候打开，显示的还是你之前进入接口库的旧数据，就会造成混乱，随便点一下保存，就会把其他同学辛苦修正的新数据给覆盖掉

 

1. 修改ts_show函数

$.get('/get_api_data/',{
    'api_id': id
},function (ret) {

})

添加映射：

urls.py

url(r'^get_api_data/$', get_api_data),  # 获取接口数据

views.py

# 获取接口数据
@login_required
def get_api_data(request):
    api_id = request.GET['api_id']
    api = DB_apis.objects.filter(id=api_id).values()[0]
    return HttpResponse(json.dump(api), content_type='application/json')

 

回过头来看P_apis.html中，开始写它接收到后台返回的数据后的动作：

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

这样就是成功拿到了这个接口的所有数据。

然后就是一点一点给显示在页面即可。首先是name名称。抛弃掉之前的显示名称的代码，在这里加上新的实时显示。

效果如下，显示正常，补充其余的

 

function ts_show(id, name) {
    clear_ts_up();
    document.getElementById('ts').style.display = 'block';
    document.getElementById('ts_api_id').innerText = id;

    $.get('/get_api_data/',{
        'api_id': id
    },function (ret) {
        document.getElementById('ts_api_name').value = ret.name
        document.getElementById('ts_method').value = ret.api_method
        document.getElementById('ts_url').value = ret.api_url
        document.getElementById('ts_host').value = ret.api_host
        document.getElementById('ts_header').value = ret.api_header
    })

}

看看效果，无bug

 

2. 修复bug

在打开form-data的时候 意外发现了一个小bug，多了1列

 

因在打开函数中调用了clear初始化函数。这个初始化函数中对于这个第三方表格有一句，添加这个按钮列的代码：

忘记删除一开始调试样式时加入的代码了，导致重复添加按钮列。也就是在html部分的嵌入的，最开始写的那段，需要删除。

删除后再试试看：

 

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

接口返回证明已经保存上，接下来就是展示了

 

3. 控制请求体方式子页面

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

// 请求体编码格式
var body_method = '#'+ret.body_method;
$("li a[href="+body_method+"]")[0].click();

看看效果：

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

 

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