接口测试平台代码实现59-首页重构7

我去热饭

发布于 2022-05-19 09:10:20

4710

发布于 2022-05-19 09:10:20

文章被收录于专栏：测试开发干货

本节基本就是最后一节，上节我们本来以为很简单的重构，结果遇到了恶心的第三方组件bug，所以我就用刷新套路来绕过了这个问题，还省去了clear清空函数，顺便给大家讲了下新增的第二万能参数ooid。在最后我们解决了url,host,header的显示问题。本节就剩处理一下请求方式/请求体类型/请求体了。

打开我们的home.html,在下图位置新建一个script，记住，是script，并不是一个js函数，如果是js函数的话我们必须要调用才能触发，而我们直接把js代码写在外面，那就会一进入这个页面就会触发了。

我们先来处理请求体类型：

代码含义：先判断进来的这个api_method 是不是空的，如果不是，那么它的值一定是post/get/put/delete ,恰好符合我们这个请求方式select下拉框的value，所以直接赋值就可以实现。

然后继续：

(代码较多，大家复制即可)

<script>
    // 自动设置请求类型
    if( "{{ log.api_method }}" != ''){
        document.getElementById('ts_method').value = "{{ log.api_method }}";
    }
    //请求体类型 //请求体
    if("{{ log.body_method }}" != ''){
        console.log("{{ log.body_method }}");
        console.log("{{ log.api_body }}");

        var body_method = '#'+"{{ log.body_method }}";
        $("li a[href="+body_method+"]").click();

        if("{{ log.body_method }}" == 'Text'){
            document.getElementById('raw_Text').value = "{{ log.api_body }}";
        }
        if("{{ log.body_method }}" == 'JavaScript'){
            document.getElementById('raw_JavaScript').value = "{{ log.api_body }}";
        }
        if("{{ log.body_method }}" == 'Json'){
            document.getElementById('raw_Json').value = "{{ log.api_body }}";
        }
        if("{{ log.body_method }}" == 'Html'){
            document.getElementById('raw_Html').value = "{{ log.api_body }}";
        }
        if("{{ log.body_method }}" == 'Xml'){
            document.getElementById('raw_Xml').value = "{{ log.api_body }}";
        }
        if("{{ log.body_method }}" == 'form-data'){
            var tbody = document.getElementById('mytbody'); // 定位表格中的tbody部分
            body = eval("{{ log.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("{{ log.body_method }}" == 'x-www-form-urlencoded'){
            var tbody = document.getElementById('mytbody2'); // 定位表格中的tbody部分
            body = eval("{{ log.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()
                }
            }
        }
    }
</script>

好了我们现在可以刷新页面测试了