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,断言返回值-路径法代码
暂时就需要这么多,还有很多其他字段比如公共请求头/变量/验签算法等。