接口测试平台代码实现33:接口调试

终于开始了接口调试模块，废话不多说了，直接开始：

首先我们要做一个简单的弹层，和上节课的备注弹层一样的做法，这里就给大家快速贴源码了用到的技术都是之前学过的。注意一点，打开弹层后，一定要在弹层的某个地方放入接口id，以便我们之后调试保存时，发出的请求中可以知道当前用户打开的是哪个接口。

首先打开P_apis.html，加入这个弹层：id=ts

注意长款等具体属性.隐藏属性仍然之后才添加。

然后我们给它设计俩个按钮：保存/取消

在我们的设计中，首先完成的应该是这个接口的各种属性的展示/保存 功能，之后才是调试。

在这个div中添加一个按钮组，具体代码如下：

按钮组的好处是可以让俩个按钮紧贴着风格很简约。

效果如下，放在了右上角，float:right可以让俩个按钮并不会占用一整行位置。但是之后所有的控件必须都要放在这对按钮之下才可以。

我们先要做的是所有属性的展示，无论是什么输入框，按钮，静态文案，我们暂时都不加入id，等到最后需要定位的时候，再加。

接下来我们放一个标题，一来是让用户知道是哪个接口的调试界面，二来是偷偷存上我们的接口id 以便后续请求使用。

注意，我们因为div的背景色太黑了，所以文案都看不见，所以我们要给div补充上属性color=white白色，而且为了美观，我们不要顶格，就加入了格内左边距padding-left = 10px

h3这个大标题中，我写了俩对 small标签，small标签内可以放字号较小的文案，俩个标签，第一个里面放接口id，第二个放接口名字。中间用个横线链接会美观。目前这里是空的，具体填入什么，要靠我们之后写的打开调试面板的函数 来自动填充，所以最后我们也要给这俩个small标签添加不同的id。

紧接着我们写好接口的：请求方式和url，域名我们一会再单独一行写，因为大多数情况下，我们调试接口的url不会变动，而域名则会常变，不同的测试环境都不同。

请求方式和url 包括后面的发送请求按钮send ，这一套都在一行写比较好

继续添加：

代码中是一个大的ul，里面是3个小li 。style属性也是简单进行优化了一下。

源码如下可复制：

    <ul class="nav navbar-nav" style="width: 98%">

        <li>
            <select style="height: 40px;" class="form-control">
                <option value="none"> 请求方式</option>
                <option value="post" > POST</option>
                <option value="get" > GET</option>
                <option value="put" > PUT</option>
                <option value="delete"> DELETE</option>
            </select>
        </li>

        <li style="width: -webkit-calc(100% - 225px)">
            <input  style=";padding-left: 10px;width: 100%;height: 40px;" type="text"
                   placeholder='url: 如 /abcd/efgh/' value="">
        </li>

        <li >
            <button type="button"
                    style="height: 40px;width: 120px;"
                    class="btn btn-default"><span style="font-size: large">Send</span></button>
        </li>
    </ul>

效果如下：

接下来我们开发host输入框：

上图中，我们要加3个换行符来完美效果，基本格式和上面那行一样，还是一个大ul 下面包着小li标签，只不过这次只有一个li。设置好宽度和默认提示文案，看看效果：

接下来我们放入请求头。大家知道，请求头虽然我们在网页f12里，postman里看到都是 一行一对的表格样，但是实际发送请求时候，可是一个大json。所以我们这里简化一下，就放一个大输入框，里面写请求头的json即可。当然下节课我们会立即对其交互优化，全局公共请求头和全局公共域名是我们之后要学习的内容，这里暂时不加了，等到时候再改。

按照之前的格式，继续再来一行header请求头输入框：

注意默认文案。

我们这里可以简单加上俩个小按钮，重置输入，也就是用户输入错了，想清空输入框的按钮。大小对应上面的Send按钮，这样看起来比较协调：

给host和header俩个输入框，都加入一个新的li标签，里面放入类似Send的按钮但是字体和宽度都变小，注意各个li的宽度要对应变化，具体如下：

大家尽量按照我的宽度设置，已经调试的很好了：

效果如下：

功能等我们之后再实现即可。

本节就到这里结束了，内容较多，但是没有难点。大家细心一点，别写错了。

ps：最近追的小伙伴变少了。那么看到此节的你可真的是太给力了。这样不算测开，什么算测开。