接口测试平台-37：接口数据全部保存

本节的任务就是把这些传给后端，然后保存成功。

上节已经获取到了接口id，然后写请求给后端发送这些数据：

 

1. 写好保存请求

$.get('/api_save', {
    'api_id': api_id,
    'ts_method': ts_method,
    'ts_url': ts_url,
    'ts_host': ts_host,
    'ts_header': ts_header,
    'ts_body_method': ts_body_method,  // 请求体格式
    'ts_api_body': ts_api_body
}, function (ret) {

})

 

ts_api_body，编码格式不同，请求体类型也不同。

分为两类：字符串和数组，只能按照字符串格式发出去，所以要把为数组的俩个情况在最后转变为字符串：

分别加上这句把数组变成字符串的代码，改成如下：

 

然后写好urls.py：

url(r'^api_save/$', api_save),  # 获取备注

再去写views.py：

1. 获取到前端过来的所有数据

2. 保存

3. 返回保存成功文案

代码如下：

# 保存接口
@login_required
def Api_save(request):
    # 提取所有数据
    api_id = request.GET['api_id']
    ts_method = request.GET['ts_method']
    ts_url = request.GET['ts_url']
    ts_host = request.GET['ts_host']
    ts_header = request.GET['ts_header']
    ts_body_method = request.GET['ts_body_method']
    ts_api_body = request.GET['ts_api_body']

    # 保存数据
    DB_apis.objects.filter(id=api_id).update(
        api_method=ts_method,
        api_url=ts_url,
        api_header=ts_header,
        api_host=ts_host,
        body_method=ts_body_method,
        api_body=ts_api_body
    )

    # 返回
    return HttpResponse('success')

启动服务，刷新页面，效果如下：

 

2. 保存成功后，隐藏弹框

 

3. 关闭弹框时，清空弹层数据

非请求体部分

function clear_ts_up() {
    document.getElementById('ts_api_id').innerText = '';
    document.getElementById('ts_api_name').innerText = '';
    document.getElementById('ts_method').value = 'none';
    document.getElementById('ts_url').value = '';
    document.getElementById('ts_host').value = '';
    document.getElementById('ts_header').value = '';

    // 开始初始化请求体编码格式部分

}

 

• 请求体恢复默认none

 

• 初始化form-data和x-www-form-urlencoded

删除掉之前方便调试写的俩个表格类的请求体tr，结果如下：记的留下空行

 

对俩个tbody都加上id：

初始化

// form-data
document.getElementById('mytbody').innerHTML = '<tr><td></td><td></td></tr>';
// x-www-form-urlencoded
document.getElementById('mytbody2').innerHTML = '<tr><td></td><td></td></tr>';

 

• 清空row

// row
document.getElementById('raw_Text').value = '';
document.getElementById('raw_JavaScript').value = '';
document.getElementById('raw_Json').value = '';
document.getElementById('raw_Html').value = '';
document.getElementById('raw_Xml').value = '';

 

• 初始化返回体

增加id，并初始化

 

刷新页面进行测试：

 

4. 修复bug

bug一：请求体的初始化不正确，连修改/删除按钮都没有显示。就算点击添加新参数的按钮，它的原理也只是复制第一行：

 

问题的原因：这个第三方插件想要正确显示，不仅仅是html正确，它最后还要运行它的js函数，才能对其进行正确显示化。

这个函数就是我们前面引入的这部分：

 

之所以没有生效，是在运行clear_ts_api()时没有加入，而本来的运行时机是在整个接口库页面刚进入的时候就运行过了，之后若想强行更改tbody的内容tr td等，就必须重新运行这俩个函数，所以要在clear_ts_api()函数的最后再运行这俩个函数即可：

// form-data，运行第三方表格插件的函数
document.getElementById('mytbody').innerHTML = '<tr><td></td><td></td></tr>';
$('#mytable').SetEditable({
    $addButton: $('#add'),
});
// x-www-form-urlencoded，运行第三方表格插件的函数
document.getElementById('mytbody2').innerHTML = '<tr><td></td><td></td></tr>';
$('#mytable2').SetEditable({
    $addButton: $('#add2'),
});

刷新页面再看看：发现效果已经正常显示了。

 

bug二：添加新参数是2个2个加的，如果没有这个bug可以不管，当然，也可以直接不管（后续解决）

 

bug三：删除最后一行，无法正常显示（待解决）

 

用户真的需要切换到form-data和x-www…时，确实是要传入参数了，就不会删掉第一行，会直接编辑第一行或先添加很多行。

当然万一操作失误导致第一行被删除，那么只需要保存/取消，然后重新打开即可。