vb.net form 最大化按钮 代码_接口测试平台代码实现34:请求体

    接着上节的开发，我们还差一个请求体，等我们把核心功能开发后，会对交互进行优化。输入更加快捷。

    打开P_apis.html。接着在div调试弹层 的里面 加上一个ul ，用来放我们请求体的选择按钮组：

    按钮一共有5个，其中一个是下拉单。

分别是None ，form-data,x-www-form-urlencoded,raw,返回体

其中raw自己带下拉单，包含：text ,javascript,json,html,xml

这些按钮。按照代码中写好后看看效果噢～ 纯纯的bootstrap3

 <br><br><br>    <ul id="myTab" class="nav nav-tabs" >        <li class="active"><a href="#None" data-toggle="tab" >Nonea>li>        <li ><a href="#form-data" data-toggle="tab" >form-dataa>li>        <li ><a href="#x-www-form-urlencoded" data-toggle="tab" >x-www-form-urlencodeda>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">Texta>li>                <li><a href="#JavaScript" tabindex="-1" data-toggle="tab">JavaScripta>li>                <li><a href="#Json" tabindex="-1" data-toggle="tab">Jsona>li>                <li><a href="#Html" tabindex="-1" data-toggle="tab">Htmla>li>                <li><a href="#Xml" tabindex="-1" data-toggle="tab">Xmla>li>            ul>        li>        <li ><a href="#home" data-toggle="tab" >返回体a>li>    ul>

效果如下：

整个调试窗体下半部分的大片空白，就是给这些按钮预备的，也就是一个公共区域，每个按钮都管领着自己的界面一个小div 但是一开始几乎都是隐藏的，你点击哪个按钮，下面就迅速切换到哪个div，同时隐藏其他div。

当然默认是第一个按钮None显示，并且下面空旷区域显示的也是None领导的小div。

那么 要怎么映射好 每个小div对应哪个按钮呢？

其实就是我刚刚写的那些按钮的中的 href属性，利用锚点技术，href=“#None” 那么你新建的小div 的id写成None ,即可让二者联系起来。

至于到底内部是怎么做的呢？其实都在于我们bootstrap3中，已经写好了，我们只需要给他们的class属性写对就可以了，所以大家在抄的时候一定不要写错字，最好复制下来。

这些小div 我们要放在一个大div里，才可以生效：具体代码如下：

在刚写的ul下方，加入这个大div和里面的小div：

还是给出源码：

"myTabContent" class="tab-content">

class="tab-pane fade in active" id="None"> 进入了None

class="tab-pane fade" id="form-data"> 进入了form-data

class="tab-pane fade" id="x-www-form-urlencoded"> 进入了x-www-form-urlencoded

class="tab-pane fade" id="Text"> 进入了Text

class="tab-pane fade" id="JavaScript"> 进入了JavaScript

class="tab-pane fade" id="Json"> 进入了Json

class="tab-pane fade" id="Html"> 进入了Html

class="tab-pane fade" id="Xml"> 进入了Xml

目前每个小div中只包含一个文案，就是告诉你确实成功进入了哪个小div。

你发现只有第一个 id=None的小div的class 比别人多了 in active。

这就是默认显示

好看看效果：

好我们测试完毕后，没问题，接着就是要开始开发各个小div的内容了，得删掉之前写的小文案。换上其他东西：

首先是最简单的None : (不传任何请求体)

设计：当用户点击这个的时候，我们就给显示一句话：这个请求讲不会携带任何请求体。中英文混合！颜色不要太鲜艳！文案要居中！

效果如下：

好了，差不多了，我们开始设计form-data ：

按照postman的交互规则，这里要做成类似表格的样子，左边是key，右边是value，全部按照字符串格式。数量要可随时增加/删除。貌似难度较大。当遇到这种清空时候，我们可以有俩种办法：

1. 土办法，用超大量的js代码 实现。

2. bootstrap3找对应的表格，不过不支持增删，需要进行二次开发，难度更高

3. 直接找支持增删的第三方组件。效果稳定，但是需要花成本试。

我们选择第三种，直接找现成的，作者已经从数个方法中找到了最好的，免去了大家的烦恼。

    不过具体内容要放在下节课了。欢迎持续关注哦～