接口测试平台-63：多接口用例实现之 小用例：列表

1. 小用例数据库

# 小用例
class DB_step(models.Model):
    Case_id = models.CharField(max_length=10,null=True)  # 所属大用例id
    name = models.CharField(max_length=50,null=True)  # 步骤名字
    index = models.IntegerField(null=True)  # 执行步骤
    api_method = models.CharField(max_length=10,null=True)  # 请求方式
    api_url = models.CharField(max_length=1000,null=True)  # url
    api_host = models.CharField(max_length=100,null=True)  # host
    api_header = models.CharField(max_length=1000,null=True)  # 请求头
    api_body_method = models.CharField(max_length=10,null=True)  # 请求体编码类型
    api_body = models.CharField(max_length=10,null=True)  # 请求体
    get_path = models.CharField(max_length=500,null=True)  # 提取返回值-路径法
    get_zz = models.CharField(max_length=500,null=True)  # 提取返回值-正则
    assert_zz = models.CharField(max_length=500,null=True)  # 断言返回值-正则
    assert_qz = models.CharField(max_length=500,null=True)  # 断言返回值-全文检索存在
    assert_path = models.CharField(max_length=500,null=True)  # 断言返回值-路径法

    def __str__(self):
        return self.name

同步并生效：

admin.py中注册：

admin.site.register(DB_step)

进入后台先弄2条数据调试

 

2. 添加映射

urls.py

url(r'^get_small/$', get_small),  # 获取小用例步骤的列表数据

views.py

# 获取小用例步骤的数据
def get_small(request):
    case_id = request.GET['case_id']
    steps = DB_step.objects.filter(Case_id= case_id).order_by('index')
    ret = {"all_steps": list(steps.values("id", "name"))}
    return HttpResponse(json.dumps(ret), content_type='application/json')

为什么要用list(.values())的方法呢，因为要给js使用，这个方法是非常温和稳定的，相比较queryset类型来说。

 

3. 实现小用例刷新

回到P_cases.html中，找到刷新步骤的方法，开始对其返回值代码进行补全：

// 刷新小用例列表专用
function refresh_left_div(case_id) {
    var d = document.getElementById('small_list');
    d.innerText = '';  // 清空旧数据

    $.get('/get_small/', {
        'case_id': case_id
    }, function (ret) {
        // 开始解析ret，并展示
        res = eval(ret);
        all_steps = res.all_steps;
        for (var i=0; i<all_steps.length; i++) {
            // 这里写 生成小用例步骤的button代码

        }
    })
}

 

删除之前方便展示用的小demo，变成下面的样子：

 

补全这个js中循环体的部分：

// 刷新小用例列表专用
function refresh_left_div(case_id) {
    var d = document.getElementById('small_list');
    d.innerHTML = ''; //清空旧数据
    $.get('/get_small/',{
        'case_id':case_id
    },function (ret) {
        //开始解析ret,并展现。
        res = eval(ret);
        all_steps = res.all_steps;
        for(var i=0;i<all_steps.length;i++){
            //这里写 生成小用例步骤的button代码
            var bu = document.createElement('button');
            bu.style = 'margin-top: 5px;width: 90%;background-color: #f5f3f3;';
            bu.className = 'btn btn-defaul';
            bu.innerText = all_steps[i].name;
            bu.id = 'step_btn_'+all_steps[i].id;
            d.appendChild(bu);
        }
    })
}

最后在调用刷新的位置传入case_id

 

刷新页面，再点击设置按钮，看看效果：