接上节课。我们继续开始开发小用例的数据层。
models.py如下,新增DB_step，我们从这开始，把小用例 或者说接口，称为步骤。一个大用例 含有多个步骤step 组成，步骤有执行顺序，本体是一个接口，额外还有提取返回值/断言返回值的 设计。
具体字段如下：
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中注册：
然后我们重启服务，刷新页面，进入后台，试着添加一条步骤：
Case_id 就写我们已经创建的大用例的id吧～
好，我们现在已经创造了一个小步骤，并且所属于我的第一个大用例下。
然后我们去修改urls.py，把这个获取小用例的接口给完善好：
然后去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类型来说。
好我们回到P_cases.html中，找到我们刷新步骤的方法
代码语言：javascript复制refresh_left_div开始对其返回值代码进行补全：
我们先来理解一下这段js，
首先是清空那个小div的内容。然后请求接口，获取目标步骤列表后，写个循环。循环体内会给小div 增加一个一个的小步骤。
然后让我们删除之前方便展示用的小demo，变成下面的样子。
然后我们开始补全这个js中循环体的部分。
完整代码如下：
代码语言：javascript复制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);
}
})
}我们刷新页面，再点击设置按钮，看看效果：
看来已经成功显示了，而且id也如我们所料，这个id方便后续我们的一些操作：
好了今天的内容水到此为止了。希望大家多动脑，多练习哦～
