nuxt 刷新之后接口报错_接口测试平台代码实现71: 多接口用例11

     好的因为群内大佬打赏的钱太多，所以履行承诺，加更一节：

本节主要处理掉，这个步骤保存的功能，其实对于跟到现在的同学来说，业务上的curd早就已经轻车熟路了。本节节奏稍快：

首先是保存按钮加一个onclick 指向保存函数：
但是我们发现，其实早就写好了，保存和取消按钮都指向这个关闭的函数。

只不过保存按钮的话，会先发送一个请求去保存，然后再关闭，那我们就直接在这里开始写这个保存代码吧。

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

这段代码改动很大，所有的ts_都换成了step_ 而且api也换成了step。为避免出错。请直接复制下面代码：(若还有错误，我们之后发现再改～)

    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[]')[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                        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                        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");    }

好，现在让我们去写urls.py：

最后是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('')

好的，让我们重启服务，刷新页面。测试一下：

这是我们的前端写的一个步骤数据：

然后我们点击保存按钮。

并没有任何报错。

然后我们再点开这个步骤，看看数据能否展示出来：

发现大部分都没问题，但是这个请求体类型和请求体 还是没有成功。跟我一起排错吧～

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

发现很明显，保存成功了。

然后再看看console.log，前端页面是否也成功拿到了：

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

那么就是说，问题出在了 加载显示到 页面上的函数中。

注意我们上面的这个展示的函数中。肯定是有问题的。

问题就是：我们获取到的步骤中 请求体类型是 api_body_method,但是js函数中却用ret.body_method来获取，所以当然获取不到：

所以我们先改好：

然后再刷新页面测试下：

发现成功了：

好了。今天再处理一个 体验上的问题：

就是当我们点击保存步骤成功后。左侧的步骤列表并没有刷新，如果改了名字或者排序，那么也看不出来。

比如

都改成22了，但是点击保存后，左侧因为没有刷新，依然还是：

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

加完后，刷新页面试试：

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

好今天的内容就到这了。欢迎持续关注和扩散。

最后放上本节进度的源码包：

链接: https://pan.baidu.com/s/1zOsixCLtPcrYTC3_nTFCkA  密码: lg4j