接上节课。我们继续开始开发小用例的数据层。
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.nam
然后让我们执行同步命令：
然后去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中，找到我们刷新步骤的方法
refresh_left_div
开始对其返回值代码进行补全：
我们先来理解一下这段js，
首先是清空那个小div的内容。然后请求接口，获取目标步骤列表后，写个循环。循环体内会给小div 增加一个一个的小步骤。
然后让我们删除之前方便展示用的小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); } }) }
我们刷新页面，再点击设置按钮，看看效果：
看来已经成功显示了，而且id也如我们所料，这个id方便后续我们的一些操作：
好了今天的内容水到此为止了。希望大家多动脑，多练习哦～
