接口测试平台-44：接口调试层异常处理

问题1：

bug复现的情况是先切换到调试层的form-data或x-www...上，然后点击取消按钮，再打开就会出现显示错乱等状况。

这个问题会引起很多bug，考虑到我们去修复第三方的插件代价比较大，所以采用最简单粗暴的方式全部绕过去。

就是点击取消按钮后，进行一次页面的刷新，让所有控件都处于一个初始化的状态。

 

打开P_apis.html，找到取消关闭调试层的js函数：

改为刷新页面，问题迎刃而解：

 

功能：新增接口，原文没有这部分，我自己写的

P_apis.html

views.py

 

问题2：

新创建的接口，首次打开调试弹层，发现请求方式是空白的。

 

通过console可以看到，这个接口的数据中的请求方式为null：

而目的是想让其定位到none

这里介绍一个简单的后端修复，就是在新建接口的函数中，给接口初始的请求方式设置称字符串的none，而不是不写。

 

 

删掉这个旧接口，再新创建的接口则可以正常显示了。

 

问题3：

新接口首次打开时的顶部接口名称输入框 需要有提示，不然看着空白，用户不知道这个输入框干嘛的，给它加入默认文案：

<input type="text" id="ts_api_name" placeholder="请在此输入接口名称" style="padding-left:5px; width: 50%; color: #329104" />

看看效果：

 

问题4：

当参数过多时，屏幕放不下，却又没滚动条：

 

这个问题是因调试弹层的显示位置脱离了文档流，所以自己很长，浏览器也不知道。

解决的办法也很简单，要么改变它的位置固定方式，要么用一个js函数撑开浏览器高度。

之前的位置固定方式代码如下：

改成如下：

看看效果：

 

问题5：

接口的5个按钮风格不统一，很丑。此处打开project_list.html

找到最开的这个样式，它控制着这三个中间的小按钮的样式，把五个按钮统一风格，所以这个.wqrf_button{}没用了，删了。

然后找到这五个按钮的html代码，采用bootstrap3的按钮组写法：

<td>
    <div class="btn-group">
        <button class="btn btn-success" onclick="ts_show('{{ i.id }}', '{{ i.name }}')">调试</button>
        <button class="btn btn-default" onclick="open_bz('{{ i.id }}')">备注</button>
        <button class="btn btn-default">复制</button>
        <button class="btn btn-default">异常值测试</button>
        <button class="btn btn-danger" onclick="document.location.href='/project_api_del/{{ i.id }}/'" >删除</button>
    </div>
</td>

看看效果：

 

问题6：

有人反应新增项目的按钮，看着很别扭，希望可以改。好那看下原来的样子：

删除以下代码

在原位置修改为：

<h3 style="padding-left: 10px;color: #353c48">项目列表：
    <span style="font-size: small;color: grey;">
        点击 <a href="#" onclick="javascript:document.getElementById('add_project_div').style.display='block'">新增项目</a>
        即可创建属于您的新项目！
    </span>
</h3>

看看效果：