接口测试平台-66: 多接口之 小用例：新增+删除+关闭+排序

1. 增加小用例

打开P_cases.html，增加点击事件

实现onclick：

// 新增小用例
function add_new_step() {
    var Case_id = document.getElementById('Case_id').innerText

    $.get('/add_new_step/', {
        "Case_id": Case_id
    }, function (ret) {
        refresh_left_div(Case_id);
    })
}

添加映射：

urls.py：

url(r'^add_new_step/$', add_new_step),  # 新增小步骤接口

views.py：

# 新增小步骤
def add_new_step(request):
    Case_id = request.GET['Case_id']
    DB_step.objects.create(Case_id=Case_id, name='我是新步骤')
    return HttpResponse('')

重启服务 刷新页面 试着增加几个步骤：

问题：1. 顺序不对，2. 执行index不对，以下是解决办法

服务重启页面刷新后，再添加一下试试：

可能会遇到问题，在后台删除出错：

因为之前没有写name，造成了脏数据；解决办法： 

1. 不去理会，等开发出删除步骤功能再删除它们

2. sqlite3 命令行删除，先sqlite3 你的数据库文件》tables; 列出所有表，然后用sql语句删除，delete from....

3. 直接改models.py文件，让它先别返回这个name，然后就可以删除了，然后再改回来。（最简单）

 

2. 关闭左侧弹层

增加点击事件，打开P_cases.html：

实现：

// 关闭左侧div
function close_left_div() {
    $("#left_div").css("display", "none")
}

 

3. 菜单被小用例遮挡问题

用z-index来解决，最大是999。把这个步骤列表的div 的z-index 从998 改成 2 即可：这样既能比用例列表这种1的大，又能低于左侧菜单。

 

4. 删除大用例删除小用例

 

5. 删除项目时删除大小用例

# 删除项目
@login_required
def delete_project(request):
    project_id = request.GET['id']
    DB_project.objects.filter(id=project_id).delete()
    DB_apis.objects.filter(project_id=project_id).delete()  # 删除旗下接口

    all_Case = DB_cases.objects.filter(project_id=project_id)
    for case in all_Case:
        DB_step.objects.filter(Case_id=case.id).delete()  # 删除旗下小用例
        case.delete()  # 删除旗下大用例，用例删除自己

    return HttpResponse('')

 

6. 删除小用例

增加删除事件，打开P_cases.html：

// 刷新小用例列表专用
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;
            //小步骤的删除按钮
            var del = document.createElement('button');
            del.className ='btn btn-default';
            del.style.fontSize = 'xx-small';
            del.innerText = 'delete';
            del.style.height = '28px';
            del.style.cssFloat='right';
            del.style.marginTop='8px';
            del.idd = all_steps[i].id;
            del.onclick = function(){
                $.get('/delete_step/'+this.idd+'/',{

                },function (ret) {
                    refresh_left_div(document.getElementById('Case_id').innerText)
                })
            };
            d.appendChild(bu);
            d.appendChild(del);
        }
    })
}

效果如下：

添加映射：

urls.py：

url(r'^delete_step/(?P<eid>.*)/$', delete_step),  # 删除小步骤接口

views.py：

# 删除小步骤
def delete_step(request, eid):
    step_id = eid
    DB_step.objects.filter(id=eid).delete()

    return HttpResponse('')

重启服务/刷新页面，我们测试一下：

 

7. 优化排序问题

忽略了一个问题：现在要在页面上显示出 这些步骤的index执行顺序，以便之后调试。

不要忘了，之前刷新功能获取的只有id和name，现在因为要考虑到排序顺序，所以得增加上index：

重启服务，刷新页面：

 

假如删除了 序号为2的步骤，那么剩下的步骤怎么办？序号是1 和 3，还是 1和2（3自动变成2）呢？希望 后者

重写del_step函数～

# 删除小步骤
def delete_step(request, eid):
    step = DB_step.objects.filter(id=eid)[0]  # 获取待删除的step
    index = step.index  # 获取目标index
    Case_id = step.Case_id # 获取目标的所属大用例id
    step.delete()  # 删除目标step

    for i in DB_step.objects.filter(Case_id=Case_id).filter(index_gt=index):  # 遍历所有大用例下的步骤中，顺序号大雨目标index的步骤
        i.index -= 1  # 执行顺序自减1
        i.save()

    return HttpResponse('')

其中，首次运用了双筛选和 大于写法 字段__gt = 

 

重启服务，刷新页面。测试一下，删除中间的第二条后的效果：