接口测试平台代码实现64: 多接口用例-4

上节我们成功的搞定了大用例的 增加/删除/复制功能

本节我们计划搞定设置大用例功能， 也就是：

点击设置按钮，左侧弹出小用例(接口) 列表+接口列表相关的数据层实现。

首先打开P_cases.html,找到这个设置按钮，给它加入onclick：

我取名叫show_small() ，意思就是点击后，展示小用例列表,别忘了要传入大用例的id，这样才能确定要展示的是谁的小用例列表。

然后我们先去写好这个左侧列表的基础div容器，默认是隐藏的，点击后出现。

<div id="left_div" style="background-color: white;border: 1px solid black;
                            z-index: 998;display: none;width:48%;height:100%;
                            position:absolute;right:100%;top:0px;overflow-y: visible">

    我是内容

</div>

注意这里么的style的设置：

;position:absolute;right:100%;

这部分，是固定位置，并且距离右边界100%， 距离右边100%，那么就是这个样子，就好像是藏在了屏幕的左边我们看不到的一样。

然后我们点击之后，不但要给div的display属性变为显示，还要给它滑动到屏幕视线里，也就是距离右边界100% - 48%的位置，48%是它自身的宽度。

变成这样：

然后我们现在去写这个show_small()函数：

好，这里的逻辑要给大家细细说一下：

首先，我们点击大用例a的设置按钮时候，这个div滑动出来，也就是走的if。

然后我们去点击 大用例b的设置，这个div 我们做了一个动画效果，就是先快速撤回到左侧屏幕之左，然后再快速滑回来，这个过程中把小用例列表给切换成大用例b的了，走的else。

这里我们也学习了jquery的新方法: .css() 直接改style中的属性，然后.animate是带动画效果的改距离右边界的right的属性。

源码如下：

<script>
    function show_small(case_id) {

        if(document.getElementById('left_div').style.display == 'none'){
            $("#left_div").css("display","block");
            $("#left_div").animate({right:'52%'},'fast');

        }else{
            $("#left_div").css("display","none");
            $("#left_div").animate({right:'100%'},'fast');
            $("#left_div").css("display","block");
            $("#left_div").animate({right:'52%'},'fast');
        }

    }
</script>

刷新页面，看看效果：

看来是成功滑动出来了。当然具体内部展示效果还需要我们一句一句的写，这里我们要设计下这个小用例列表的展示：

并不是简单的 像大用例列表那样，一进入页面的时候就带数据进来展示了。

而是当用户点击不同设置按钮的时候，通过请求获取实时的小用例列表，然后通过js的操作展示在这个div上。

而这段用来展示的js 就相当于一个刷新功能了，只是属于局部div刷新，并不是刷新整个页面。

但是具体效果我们可以先在html里写死俩个，效果调好了，我们在用js实现，最后删掉这俩个展示用的小用例接口html代码 即可。

这个左侧大div中，我们设置了三个按钮，然后还有一个真正装小用例列表的div，这个小div就是我们后续用js控制刷新展示的div。我们现在先在这个小div里写几个小用例实体，设计下展示效果：

暂时我们先用这个方式吧～ 关于点击效果和上下调整位置的功能，我们之后再加即可。

所以删掉这三个demo展示，然后去写js，新建这个刷新小用例列表的函数

然后这个里面我们用js实现的话，是需要去从后台获取到小用例数据才可以。所以这么写：

这个case_id就是我们一路传过来的大用例的id。后台根据这个id返回旗下所有小用例数据。然后我们接受到了这个ret后，解析，清空小div的内容，来换上新的内容即可。

思路很清晰，接下来就开始实现

忘了我们要展示个标题文案了，就是让人知道我现在打开的是哪个大用例。。。

在底部加上这个放置id和名称的 文案段落。

然后在js中控制显示：

当然，我们发现，我们这个show_small函数中并没有Case_name,所以我们要在一开始的时候 加上case_name传进来。

这三处红线，请确保不要出错。

然后我们刷新页面 ，看看效果：

这时候我们点击不同大用例的设置按钮，会发现动画效果，并且上面的数据也变化了：

好了，让我们继续回归主线， 既然要从后台获取到这些小用例的数据，那首先我们要去构造好数据库中的这个小用例表才行。

先来想一想这个小用例都包含什么字段呢？

id，自动的不用管

Case_id, 所属的大用例id

name，小用例的简单名字或描述

index, 当前序号，影响我们后续的执行顺序

api_method，请求方式

api_url，请求url

api_host,请求host

api_header, 请求头

api_body_method ,请求体类型

api_body, 请求体

get_path , 提取返回值-路径法代码

get_zz ,提取返回值-正则法代码

assert_zz ,断言返回值-正则法代码

assert_qz,断言返回值-全文检索是否存在法代码

assert-path,断言返回值-路径法代码

好了，暂时就需要这么多。我们之后还有很多其他字段比如公共请求头/变量/验签算法等。

好了，篇幅关系，本文内容到此结束，下节课我们继续实现吧～