注册个人网站域名top,李树全网页制作教程,重庆市建设厅官方网站,拍卖网站咋做1. 左侧框架
打开P_cases.html#xff0c;给设置增加点击事件#xff1a; 写好这个左侧列表的基础div容器#xff0c;默认是隐藏的#xff0c;点击后出现。 注意这里么的style的设置#xff1a;;position:absolute;right:100%; #xff0c;这部分是固定位置并距离右边界…1. 左侧框架
打开P_cases.html给设置增加点击事件 写好这个左侧列表的基础div容器默认是隐藏的点击后出现。 注意这里么的style的设置;position:absolute;right:100%; 这部分是固定位置并距离右边界100%就是这个样子就好像是藏在了屏幕的左边看不到的一样。 点击之后不但要给div的display属性变为显示还要给它滑动到屏幕视线里也就是距离右边界100% - 48%的位置48%是它自身的宽度。变成这样 现在去写这个show_small()函数 scriptfunction 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 idleft_div stylebackground-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: visiblebutton classbtn btn-default新增小用例接口/buttonbutton classbtn btn-default新增登陆态接口/buttonbutton classbtn btn-danger stylefloat: right关闭/buttondiv idsmall_list!-- 小用例都在这里了 --/div/div 现在先在这个小div里写几个小用例实体设计下展示效果 button stylemargin-top: 5px;width: 90%; background-color: #f5f3f3 classbtn btn-default小用例1/button
button stylemargin-top: 5px;width: 90%; background-color: #f5f3f3 classbtn btn-default小用例2/button
button stylemargin-top: 5px;width: 90%; background-color: #f5f3f3 classbtn btn-default小用例3/button
看下效果 3. function刷新获取小用例列表
关于点击效果和上下调整位置的功能之后再加即可。所以删掉这三个demo展示然后去写js新建这个刷新小用例列表的函数 scriptfunction 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 styleposition: absolute; bottom: 0; left: 5px用例idspan idCase_id/span用例名称span idCase_name/span
/p 然后在js中控制显示 document.getElementById(Case_id).innerText case_id;
document.getElementById(Case_name).innerText case_name; show_small函数中并没有Case_name, 所以要在一开始的时候 加上case_name传进来。 刷新页面 看看效果再换个颜色stylecolor: #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,断言返回值-路径法代码
暂时就需要这么多还有很多其他字段比如公共请求头/变量/验签算法等。
