app手机网站模板免费下载职业培训机构资质
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,断言返回值-路径法代码
暂时就需要这么多，还有很多其他字段比如公共请求头/变量/验签算法等。