接口测试平台-62：多接口用例实现之 小用例列表框架（无数据）

1. 左侧框架

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

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

 

注意这里么的style的设置：;position:absolute;right:100%;  ，这部分是固定位置并距离右边界100%，就是这个样子，就好像是藏在了屏幕的左边看不到的一样。

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

 

现在去写这个show_small()函数：

<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>

 

刷新页面，看看效果：

 

2. 写死小用例，实现框架

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

而这段用来展示的js 就相当于一个刷新功能了，只是属于局部div刷新，并不是刷新整个页面。但是具体效果可以先在html里写死俩个，效果调好了，再用js实现，最后删掉这俩个展示用的小用例接口html代码 即可。

<!--  设置大用例，小用例部分  -->
<div id="left_div" style="background-color: white;border: 1px solid black; z-index: 998;display: none;width:48%;height:100%;text-align: center;
                            position:absolute;right:100%;top:0px;overflow-y: visible">
    <button class="btn btn-default">新增小用例接口</button>
    <button class="btn btn-default">新增登陆态接口</button>
    <button class="btn btn-danger" style="float: right">关闭</button>
    <div id="small_list">
        <!--      小用例都在这里了      -->

    </div>

</div>

 

现在先在这个小div里写几个小用例实体，设计下展示效果：

<button style="margin-top: 5px;width: 90%; background-color: #f5f3f3" class="btn btn-default">小用例1</button>
<button style="margin-top: 5px;width: 90%; background-color: #f5f3f3" class="btn btn-default">小用例2</button>
<button style="margin-top: 5px;width: 90%; background-color: #f5f3f3" class="btn btn-default">小用例3</button>

看下效果：

 

3. function刷新获取小用例列表

关于点击效果和上下调整位置的功能，之后再加即可。所以删掉这三个demo展示，然后去写js，新建这个刷新小用例列表的函数：

<script>
    function refresh_left_div(case_id) {
        // 刷新小用例列表专用
        $.get('/get_small/', {
            'case_id': case_id
        }, function (ret) {
            // 开始解析ret，并展示
        })
    }

    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');
        }
        refresh_left_div();
    }
</script>

接受到了这个ret后，解析，清空小div的内容，来换上新的内容即可。

 

4. 展示标题文案，让人知道现在打开的是哪个大用例

<p style="position: absolute; bottom: 0; left: 5px">
    用例id：<span id="Case_id"></span>
    用例名称：<span id="Case_name"></span>
</p>

 

然后在js中控制显示：

document.getElementById('Case_id').innerText = case_id;
document.getElementById('Case_name').innerText = case_name;

 

show_small函数中并没有Case_name, 所以要在一开始的时候 加上case_name传进来。

 

刷新页面 ，看看效果，再换个颜色，style="color: #2fa8ec"：

 

 

5. 小用例数据字段

既然要从后台获取到这些小用例的数据，那首先要去构造好数据库中的这个小用例表才行。先来想一想这个小用例都包含什么字段呢？

    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,断言返回值-路径法代码

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