接口测试平台代码实现66：多接口用例-6

2023-11-01 08:08:33

各位好，我是编程爱好者程序君，在分享了将近60篇接口测试平台系列之后，我们终于来到了最后一节，这一节我们来实现接口测试用例管理。我们会在一个用例管理页面，列出所有的用例，然后点击之后编辑，在一个编辑用例的页面完成用例的编辑和执行，并且支持参数化用例，等等很多功能。这一节我们先来实现一个案例来介绍我们的页面设计，这个案例就是，在一个用例里，先创建一个http接口，再创建一个dubbo接口，两个接口可以互相传参数。我们还是先看看页面：

这是用例列表页面，和我们的项目列表的页面很相似，都有一列卡片，只不过项目卡片里是项目的信息，这里用例卡片是用例的信息，用例的信息当然会包括接口相关的信息。这里再透露一个，这两个卡片是可以拖动排序的哦，实现方法很简单，用到html5的drag and drop，过会儿我们再介绍。

点击编辑用例，来到用例编辑页面：

我们在左侧增加小步骤的按钮，方便用户快速的添加小步骤。右边是小步骤列表，每一个小步骤，除了有接口调用信息之外，还有一个JSON编辑器，方便用户快速配置接口参数。

JSON编辑器就是用CodeMirror来实现，这里不多说了，CodeMirror的文档很详细，用法也非常多，我们这里就是用一个最基本的用法。还有保存按钮，暂时按下不表，我们先把左侧的添加小步骤给实现了。

打开我们的P_cases.html，找到这个增加小步骤的按钮，给它添加onclick：

<div class="pull-left">
    <button class="btn btn-default" onclick="step_add(this)">增加小步骤</button>
</div>

然后我们找个地方写好这个js函数：

function step_add(obj){
    var case_id = parseInt($(obj).closest('.case').attr('case_id'));
    $.getJSON('/cases/addstep?case_id=' + case_id, function(data){
        if(data['error']==0){
            window.location.href = window.location.href;
        }
    });
}