接口测试平台代码实现70: 多接口用例-10在开始之前，依然要解决几个bug： 1. 这个地方的步骤id,我们写错了。

在开始之前，依然要解决几个bug：

这个地方的步骤id,我们写错了。

应该是这个步骤在数据库中的id，而不是这个步骤按钮的属性id。

出错位置是：

给它改成：

其实还是利用了原始步骤按钮的id 进行拆分，然后取第三个值即可。

好，开始回归主线：

目前本功能尚未完成的部分：

3.步骤详情页的原数据加载

4.步骤详情页的提取返回值功能

5.步骤详情页的断言返回值功能

6.步骤保存功能

7.步骤选择仓库接口生效

8.步骤的执行序号生效

9.用例实际执行的后台实现

10.报告的生成和保存

11.报告的展示

12.报告的word导出

13.步骤的mock功能

好现在，我们开始完成昨天尚未完成的原始数据加载功能，我们拿到了步骤id后，准备去发送请求拿到具体步骤数据了。

我们去写urls.py：

然后是veiws.py（views.py随着内容越来越多，后续我们可以进行拆分）

然后我们回到页面的js里，把这个返回值解析并打印：

重启服务刷新页面，测试效果：

发现已经成功的显示出来了。

然后就是把这些内容给加载到页面上对应的输入框内了。

大部分内容我们仍然可以复制接口库-接口调试-当中的代码然后改动：

function show_step(step_id,step_name) {
     clear_step();
    if(document.getElementById('right_div').style.display == 'none'){
        $("#right_div").css("display","block");
        $("#right_div").animate({left:'38%'},'fast');

    }else{
        $("#right_div").css("display","none");
        $("#right_div").animate({left:'100%'},'fast');
        $("#right_div").css("display","block");
        $("#right_div").animate({left:'38%'},'fast');
    }
    document.getElementById('step_id').innerText = step_id;
    document.getElementById('step_old_name').innerText = step_name;

    //加载数据：
    $.get("/get_step/",{
        "step_id":step_id
    },function (ret) {
        var ret = eval(ret);
        console.log(ret);
        document.getElementById('step_name').value = ret.name ;
        document.getElementById('step_method').value = ret.api_method;
        document.getElementById('step_url').value = ret.api_url;
        document.getElementById('step_host').value = ret.api_host;
        document.getElementById('step_header').value = ret.api_header;
        // 请求体编码格式
        var body_method = '#'+ret.body_method;
        $("li a[href="+body_method+"]").click();
        // 请求体显示
        if(ret.body_method == 'Text'){
            document.getElementById('raw_Text').value = ret.api_body;
        }
        if(ret.body_method == 'JavaScript'){
            document.getElementById('raw_JavaScript').value = ret.api_body;
        }
        if(ret.body_method == 'Json'){
            document.getElementById('raw_Json').value = ret.api_body;
        }
        if(ret.body_method == 'Html'){
            document.getElementById('raw_Html').value = ret.api_body;
        }
        if(ret.body_method == 'Xml'){
            document.getElementById('raw_Xml').value = ret.api_body;
        }
        if(ret.body_method == 'form-data'){
            var tbody = document.getElementById('mytbody'); // 定位表格中的tbody部分
            body = eval(ret.api_body); //把这个像列表的字符串请求体变成真正的列表
            for(var i=0;i<body.length;i++){ // 遍历这个请求体列表
                key = body[i][0]; //拿出每一个键值对的key
                value = body[i][1];//拿出每一个键值对的value
                var childs_tr = tbody.children ;//获取到这个表格下面所有的tr组成的大列表
                // 每个tr下的children得到的是 td列表，只有俩个。
                childs_tr[i].children[0].innerText = key; //第一个td放key
                childs_tr[i].children[1].innerText = value;//第二个td放value
                //判断是否是最后一次遍历，来决定是否点击新增参数按钮
                if(i<body.length-1){
                    document.getElementById('add').click()
                }
            }
        }
        if(ret.body_method == 'x-www-form-urlencoded'){
            var tbody = document.getElementById('mytbody2'); // 定位表格中的tbody部分
            body = eval(ret.api_body); //把这个像列表的字符串请求体变成真正的列表
            for(var i=0;i<body.length;i++){ // 遍历这个请求体列表
                key = body[i][0]; //拿出每一个键值对的key
                value = body[i][1];//拿出每一个键值对的value
                var childs_tr = tbody.children ;//获取到这个表格下面所有的tr组成的大列表
                // 每个tr下的children得到的是 td列表，只有俩个。
                childs_tr[i].children[0].innerText = key; //第一个td放key
                childs_tr[i].children[1].innerText = value;//第二个td放value
                //判断是否是最后一次遍历，来决定是否点击新增参数按钮
                if(i<body.length-1){
                    document.getElementById('add2').click()
                }
            }
        }
        
    })
}