本节课接着来开发该平台的内容。
首先要先修复俩个缺陷，这要感谢群内小姐姐的慧眼(还没关注的小伙伴点点关注，加加群啊～)
问题1: P_cases.html中的步骤step的 名称存放的标签id重复了。这里我们要把底部的展示用span的id改成如下：
问题2:
点击步骤列表的关闭按钮，右侧步骤详情页也应该一起关闭才是：
所以我们在关闭左侧div的函数中 调用关闭右侧div的代码即可：
好了，继续开始本节内容：
本模块已经进行了高达9节课的长度了，让我们现在开始捋一捋剩下要做的公地方：
1.步骤详情页的请求体输入框
2.步骤详情页的初始化功能
3.步骤详情页的原数据加载
4.步骤详情页的提取返回值功能
5.步骤详情页的断言返回值功能
6.步骤保存功能
7.步骤选择仓库接口生效
8.步骤的执行序号生效
9.用例实际执行的后台实现
10.报告的生成和保存
11.报告的展示
12.报告的word导出
13.步骤的mock功能
然后我们用例库的1期 功能就完事了。2期的话要融合登陆态/项目公共参数/算法/加密 等等功能。
再加上我们已经完成的 一大堆复杂功能。是不是感觉自己居然能跟下来，很不容易了。
废话不多说，开始写代码：
首先，有同学反应，左右div的 宽度不合适，现在是相等的，都是48%，但是很明显，左侧div只是步骤列表，用不到太宽的地方。右侧步骤详情页太小了，放不下。
所以我们开始改一下宽度，当然也要改对应的滑出滑没的相关js代码的参数(注意图中划红线的地方)：
如下图，改动左侧div宽度为35%
改动左侧div内 刷新步骤按钮js中的宽度为65%：
改动右侧div宽度为62%：
好，最后让我们看看效果：
嗯 感觉还不错 ，暂时就这样。
然后本节课按照顺序，我们搞定请求体输入框这块：
首先我去接口库中接口调试层复制过来了这一大堆代码，然后进行改动，去掉返回值子页面，大小，位置，对应的js 等等。下图展示改好的效果，大家可以照着写，也可以直接复制我下面贴的源码，最好不要自己去接口库中复制过来，不然一个细节改动出问题，到时候排错都不好排。
因为这块比较复杂，所以我们尽量不要随意改动其中的id等，以免引起定位不到。
主要有以下几个部分(划红线注意)：
第一步，把以下代码粘贴到正确位置：
<ul id="myTab" class="nav nav-tabs" style="padding-left: 5%;margin-top: 5px">
<li class="active"><a id="click_none" href="#none" data-toggle="tab" >none</a></li>
<li ><a href="#form-data" data-toggle="tab" >form-data</a></li>
<li ><a href="#x-www-form-urlencoded" data-toggle="tab" >x-www-form-urlencoded</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">raw <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#Text" tabindex="-1" data-toggle="tab">Text</a></li>
<li><a href="#JavaScript" tabindex="-1" data-toggle="tab">JavaScript</a></li>
<li><a href="#Json" tabindex="-1" data-toggle="tab">Json</a></li>
<li><a href="#Html" tabindex="-1" data-toggle="tab">Html</a></li>
<li><a href="#Xml" tabindex="-1" data-toggle="tab">Xml</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="none" style="text-align: center;color: grey">
<h3>这个请求将不会携带任何请求体</h3>
<h5>This request will not carry any request-body</h5>
</div>
<div class="tab-pane fade" id="form-data">
<div class="table-responsive" style="width: 98%;color: black">
<table class="table table-bordered table-striped" id="mytable" style="background-color:white">
<thead style="color: #337ab7;font-size: x-small">
<tr>
<td style="width: 30%">Key</td>
<td style="width: 50%">Value</td>
</tr>
</thead>
<tbody id="mytbody">
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<button class="btn btn-default" id="add"><i class="fa fa-plus"></i> 添加新参数</button>
<script>window.jQuery || document.write('<script src="/static/201801271505/js/jquery-1.11.0.min.js"><\/script>')</script>
<script type="text/javascript" src="/static/201801271505/js/bootstable.js"></script>
</div>
<div class="tab-pane fade" id="x-www-form-urlencoded">
<div class="table-responsive" style="width: 98%;color: black">
<table class="table table-bordered table-striped" id="mytable2" style="background-color:white">
<thead style="color: #337ab7;font-size: x-small">
<tr>
<td style="width: 30%">Key</td>
<td style="width: 50%">Value</td>
</tr>
</thead>
<tbody id="mytbody2">
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<button class="btn btn-default" id="add2"><i class="fa fa-plus"></i> 添加新参数</button>
<script>window.jQuery || document.write('<script src="/static/201801271505/js/jquery-1.11.0.min.js"><\/script>')</script>
<script type="text/javascript" src="/static/201801271505/js/bootstable.js"></script>
</div>
<div class="tab-pane fade" id="Text">
<textarea name="" id="raw_Text" style="color: black;width: 98%;height: 300px"></textarea>
</div>
<div class="tab-pane fade" id="JavaScript">
<textarea name="" id="raw_JavaScript" style="color: black;width: 98%;height: 300px"></textarea>
</div>
<div class="tab-pane fade" id="Json">
<textarea name="" id="raw_Json" style="color: black;width: 98%;height: 300px"></textarea>
</div>
<div class="tab-pane fade" id="Html">
<textarea name="" id="raw_Html" style="color: black;width: 98%;height: 300px"></textarea>
</div>
<div class="tab-pane fade" id="Xml">
<textarea name="" id="raw_Xml" style="color: black;width: 98%;height: 300px"></textarea>
</div>
</div>
第二步，把初始化这个详情页的函数clear_step写到script里：
function clear_step(){
document.getElementById('step_id').innerText = '';
document.getElementById('step_old_name').innerText = '';
document.getElementById('step_method').value = 'none';
document.getElementById('apis').value = 'none';
document.getElementById('step_index').value = '';
document.getElementById('step_name').value = '';
document.getElementById('step_url').value = '';
document.getElementById('step_host').value = '';
document.getElementById('step_header').value='{}';
// 开始初始化请求体编码格式部分：
document.getElementById('click_none').click() ; // 点击none子标签
document.getElementById('mytbody').innerHTML='<tr><td></td><td></td></tr>';
document.getElementById('mytbody2').innerHTML='<tr><td></td><td></td></tr>';
document.getElementById('raw_Text').value = '';
document.getElementById('raw_JavaScript').value = '';
document.getElementById('raw_Json').value = '';
document.getElementById('raw_Html').value = '';
document.getElementById('raw_Xml').value = '';
// 运行第三方表格插件的函数：
$('#mytable').SetEditable({
$addButton: $('#add'),
});
$('#mytable2').SetEditable({
$addButton: $('#add2'),
});
}
第三步：
在显示步骤详情页的函数中 调用初始化函数：
好了，让我们刷新页面，看看效果：
好了。因为我们借助初始化函数，所以我们打开任意一个步骤详情页，随意输入点数据，然后点击另一个步骤，会发现新的步骤详情页的数据都被清空了，这样避免上个步骤的数据流落到下一个步骤中。现在我们还按照上面的顺序来看，还需要做默认值带入功能。也就是 我们得真的让这个步骤的数据加载进来。
加载的js代码很显然，要写在 打开这个步骤详情页的函数show_step中。
我们已经有了这个步骤的id，那么就很好办了。我们可以去后台直接拿到数据了。所以这里写个请求：
欲知后事如何，且听下回～ 分解！
别忘了今天还有第二条文章。比较重要哦～
欢迎持续关注～
