问题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>
看看效果: