要开始写主体页面了，好头大。

首先需要梳理一下，如果写一条接口测试需要什么东西。

不如参考一下postman和httpbin～

不过这个页面太卡了，我决定把它部署在本地然后再测试。

使用docker好了，也不用管那些乱七八糟的环境了。

docker run -p 80:80 kennethreitz/httpbin

建议有空可以去了解一下docker，毕竟把乱七八糟的环境装在自己的电脑上还是蛮烦的，可能一下子遇到个环境问题就浪费一天。

使用这句话就可以把kennethreitz大神写的httpbin镜像下载并在我们的80端口上开启了。

运行

等待下载完成。

在等待的途中，看一下Postman都要哪些东西。

Postman

Postman

首先是请求方法（GET，POST，PUT，DELETE）其他的请求方法感觉用的不是很多，就不写了。

然后是请求参数，GET的参数需要以url的形式拼接起来，POST和PUT就需要使用各种形式的表单传输，DELETE一般也是通过url拼接。

然后是鉴权了，不登录什么接口都是白扯。

鉴权

鉴权也是一个很让人头大的事情，一些难以鉴权的可能就需要直接提供cookies了。所以先做Basci Auth，Digest Auth还有直接传入cookies好了。

还有就是数据传输方式了，为了降低难度，先只支持源数据raw好了，就这么愉快的决定了。

数据传输方式

在经过漫长的等待后本地的httpbin终于下载完成了。

httpbin

里面看到的东西应该都是requests包支持的，所以放心大胆的模仿就好了，总能从requests中找到轮子的。

所以我们大概知道要做什么了，先来画一个页面的雏形

页面雏形

新增接口的页面大概就长这样吧，然后然后开始补全下拉框。

继续打开之前的演示界面，来找一找下拉框怎么写

演示界面

演示界面

元素检查

不管三七二十一，复制过去看看，然后修改下里面的英文内容<div class="col-md-6"> <div class="form-group"> <label>请求方式</label> <select class="form-control select2 select2-hidden-accessible" style="width: 100%;" tabindex="-1" aria-hidden="true"> <option selected="selected">GET</option> <option>POST</option> <option>PUT</option> <option>DELETE</option> </select> <span class="select2 select2-container select2-container--default select2-container--below" dir="ltr" style="width: 100%;"> <span class="selection"> <span class="select2-selection__arrow" role="presentation"> <b role="presentation"> </b> </span> </span> </span> <span class="dropdown-wrapper" aria-hidden="true"></span> </span> </div> </div>

展示状态

就变成这样了，明显太长了。。

吧style="width: 100%;"改成style="width: 20%;"就好了

长度问题

真的感觉这些布局太不听话了。老是不按我的想法移动

初步结果一

既然如此，那今天就先到这了～

欢迎关注我的公众号：zx94_11