接口测试平台-71: 多接口之 小用例：接口弹框（保存）

保存按钮加一个onclick 指向保存函数，却发现其实早就写好了，保存和取消按钮都指向这个关闭的函数。只不过保存按钮的话，会先发送一个请求去保存，然后再关闭，那就直接在这里开始写这个保存代码吧。

 

1. 其实大部分代码仍然是去接口库保存接口的js函数中复制粘贴，然后改改：

// 关闭右侧div
function close_right_div (which) {
    if (which === "save") {
        // 这里写保存的脚本代码
        // 获取所有接口设置数据
        var name = document.getElementById('step_name').value ;
        var step_method = document.getElementById('step_method').value ;
        var step_url = document.getElementById('step_url').value ;
        var step_host = document.getElementById('step_host').value ;
        var step_header = document.getElementById('step_header').value ;
        var index = document.getElementById('step_index').value;

        // 判断顶部的数据是否填充完
        if (name === '') {
            alert('请输入接口名字！');
            return;
        }
        if (step_method === 'null') {
            alert('请选择请求方式！');
            return;
        }
        if (step_url === '') {
            alert('请输入url！');
            return;
        }
        if (step_host === '') {
            alert('请输入host！');
            return;
        }

        //判断关键数据是否符合规则
        if (step_host.slice(0,7) !== 'http://' && step_host.slice(0,8) !== 'https://') {
            alert('host必须以http://或https://开头！');
            return;
        }
        if (step_header !== '') {
            try {
                JSON.parse(step_header)
            } catch (e) {
                alert('header请求头不符合json规范！');
                return;
            }
        }
        var step_body_method = $('ul#myTab li[class="active"]')[0].innerText;
        if (step_body_method === 'none') {
            var step_api_body = ''
        }
        if (step_body_method === 'form-data') {
            var step_api_body = []; //新建这个空列表用来存放后续的数据
            var tbody_ = $("table#mytable tbody")[0]; //获取该表格的内容部分
            var trlist = tbody_.children ; //获取下面所有tr，每个tr就是一个键值对实际上
            for (var i=0; i<trlist.length; i++) {
                var tdarr = trlist[i].children; // 获取tr下的俩个td
                var key = tdarr[0].innerText; // 获取key
                var value = tdarr[1].innerText; // 获取value
                step_api_body.push([key, value]);// 作为一个数组，存放到这个大数组里。
            }
            step_api_body = JSON.stringify(step_api_body);
        }
        if (step_body_method === 'x-www-form-urlencoded') {
            var step_api_body = []; //新建这个空列表用来存放后续的数据
            var tbody_ = $("table#mytable2 tbody")[0]; //获取该表格的内容部分
            var trlist = tbody_.children ; //获取下面所有tr，每个tr就是一个键值对实际上
            for(var i=0;i<trlist.length;i++) {
                var tdarr = trlist[i].children; // 获取tr下的俩个td
                var key = tdarr[0].innerText; // 获取key
                var value = tdarr[1].innerText; // 获取value
                step_api_body.push([key, value]);// 作为一个数组，存放到这个大数组里。
            }
            step_api_body = JSON.stringify(step_api_body);
        }
        if (step_body_method === 'Text') {
            var step_api_body = document.getElementById('raw_Text').value;
        }
        if (step_body_method === 'JavaScript') {
            var step_api_body = document.getElementById('raw_JavaScript').value;
        }
        if (step_body_method === 'Json') {
            var step_api_body = document.getElementById('raw_Json').value;

        }
        if (step_body_method === 'Html') {
            var step_api_body = document.getElementById('raw_Html').value;

        }
        if (step_body_method === 'Xml') {
            var step_api_body = document.getElementById('raw_Xml').value;
        }
        var step_id = document.getElementById('step_id').innerText ;  // 获取到了接口id

        $.get('/save_step/',{
            'step_id':step_id,
            'name':name,
            'index':index,
            'step_method':step_method,
            'step_url':step_url,
            'step_host':step_host,
            'step_header':step_header,
            'step_body_method':step_body_method,
            'step_api_body':step_api_body
        }, function (ret) { })
     }
    $("#right_div").animate({left:'100%'},'fast');
    $("#right_div").css("display","none");
}

 

2. 添加映射：

urls.py：

url(r'^save_step/$', save_step),  # 保存小步骤

views.py：

# 保存小步骤
def save_step(request):
    step_id = request.GET['step_id']
    name = request.GET['name']
    index = request.GET['index']
    step_method = request.GET['step_method']
    step_url = request.GET['step_url']
    step_host = request.GET['step_host']
    step_header = request.GET['step_header']
    step_body_method = request.GET['step_body_method']
    step_api_body = request.GET['step_api_body']

    DB_step.objects.filter(id=step_id).update(name=name,
                                              index=index,
                                              api_method=step_method,
                                              api_url=step_url,
                                              api_host=step_host,
                                              api_header=step_header,
                                              api_body_method=step_body_method,
                                              api_body=step_api_body)
    return HttpResponse('')

 

重启服务，刷新页面。测试一下：

 

 

3. 请求体类型和请求体

这种情况，肯定是数据流出现了差错，所以去排查一下数据流的问题。先进入后台，看看这个步骤的请求体类型请求体 俩个字段是否保存成功了。

发现很明显，保存成功了。然后再看看console.log，前端页面是否也成功拿到了：

发现前端页面也拿到了数据。

那么就是说，问题出在了 加载显示到 页面上的函数中。问题就是：我们获取到的步骤中 请求体类型是 api_body_method,但是js函数中却用ret.body_method来获取，所以当然获取不到：

所以先改好：

然后再刷新页面测试下：

发现没有自动点击，问题是因为click没有加上[0]

 

4. 保存后刷新左侧步骤列表

当前没有刷新，如果改了名字或者排序，那么也看不出来。

所以在保存成功的函数返回动作中，加上刷新左侧div的那个js：

刷新页面试试：

发现已经可以直接刷新左侧步骤列表了～