01-01 07:40 阅读 240

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

我们本节继续研究小步骤接口的增删设置功能。

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

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

这个函数很简单，我们直接请求后台增加一个空的步骤就可以，然后调动刷新步骤列表的函数来刷新，这样就可以看到来。下图我们需要获取大用例的id。

然后去写urls.py：

最后去views.pys实现这个函数：

好了，我们重启服务刷新页面试着增加几个步骤：

发现了这种情况。看着成功了，但是代码还不全面。因为他们的顺序貌似排列有问题。我们在一开始的时候就设计了他们的执行顺序。但是貌似这些步骤并没按照执行顺序排列。所以我们在创建的代码中，要加入顺序标志index，它应该默认是已有步骤数量的总和+1:

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

新创建了三个，然后去后台看看这三个有顺序的对不对：

看来没问题了。

然后我在后台准备删除掉之前的那些之前的步骤，却发现了报错：

遇到这种问题不要慌，先仔细看看为什么：

上面说，__str__函数返回了个空字符串是NoneTyep。原来我之前不小心创建了三个没有name的步骤，然后无论是点开还是删除它们都会报错。因为我的models.py中设置好这个__str__函数必须返回字符串的name的，所以这里报错了。

这种就属于脏数据了。那么我们要怎么删除他们呢？

其实有三种办法：

不去理会，等我们开发出我们自己的删除步骤功能后，再用我们的功能删除它们，这种是可以办到的。
利用sqlite3 的命令行命令删除，先sqlite3 你的数据库文件，然后tables; 列出所有表，然后用sql语句删除，delete from....
我们直接改models.py文件，让它先别返回这个name，然后我们就可以删除了，然后再改回来。

因为3最简单，所以我们选3:

然后重启服务，刷新页面。注意虽然我改的是models.py，但是我并没有动数据结构，所以不用执行那两句同步命令。直接重启服务就生效了。

好，现在后台的步骤列表显示的都是这个id了：

然后我们把他们一股脑都删了吧～

删除完了～

怎么样，很多问题是不是惊叹于作者有各种解决方法，其实这都是踩过的坑，全是泪啊～

然后我们把models.py改回去：

好，这个小插曲完毕，让我们开启下一个小插曲：

就是这个滑动出来的步骤列表，关闭按钮还没好使：

如上图，我们给它加上onclick函数，关闭左侧div。

然后在下面新建这个函数,很简单就一行代码。

好的。

现在让我们开始最后一个小插曲，就是有同学反应，左侧菜单居然被这个步骤列表给遮住了～

其实这种层级遮盖问题，我是用z-index来解决，最大是999。

我们把这个步骤列表的div 的z-index 从998 改成 2 即可：

这样既能比用例列表这种1的大，又能低于左侧菜单。

然后刷新页面看看效果：

发现已经可以成功显示左侧菜单了。

好，我们回归主线。这时候我们似乎忘记了一个重要的事情，就是删除项目/用例的时候，要自动删除下面的步骤。所以我们回到views.py中找到删除用例的代码，新增如下行：

删除项目的时候稍微麻烦了一点：因为一个项目下有多个用例，一个用例下有多个步骤，但是步骤的字段中并没有存储所属项目id，这种情况我们怎么办呢？

最简单的方法是，写个循环遍历删除：

。好的，让我们测试一下：

我新建了个新的项目-接口-用例-步骤。然后删除项目，然后去后台看看是否都删除干净了。

好的，全部删除干净了～具体过程就不截图了。

然后我们回到主线。写这个小步骤的删除功能：

首先在P_cases.html中找到这个小步骤后面的删除按钮应该写入的位置，就是我们的刷新步骤的函数中～

写好后如下：

注意，此处js比较复杂，最好复制。我们做了一个button，当作删除按钮，button的onclick属性必须在此写好。然后内部url中夹杂了这个步骤的id，怎么传进来的呢？我是用的土方法，给这个按钮设置自身的idd属性，然后this.idd就是获取自身的idd的值。

 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);
            }
        })
    }复制代码

效果如下：