接口测试平台代码实现40:修改bug

我们的这个系列已经进行了长达12章成品预览和40章纯开发章节，但是基本还没做过完全一点的测试修复bug章节，每次新开发的功能也仅仅停留在单元/函数层面上的自测。 

    经过了最近几十名小伙伴的反馈后，凑够了一些bug，对于一个复杂一点的工具化平台来说，尤其是我们一个测试单枪匹马负责研发且缺少测试环节的情况下，有几个bug太正常了，大家不要灰心。

 其他的教程中可能从头到尾都是最正确的代码，一个bug都没有，我们跟着学完之后，难免会觉得这些太简单了，太顺利了，然后等到自己实际工作中敲起来，出现了bug后接受不了，开始悲观自暴自弃甚至放弃，自我否定。实际上，这就是为什么我不直接把已经完成的平台正确可靠的代码一章一章的复制粘贴出来，而是亲自实际带着大家从0开始 搭建一套新的平台的原因，这样可以让大家感受一下，实际经历一下最真实的开发过程：

    有bug就修复，设计出错后面补，调试用的代码数据忘记删除，ide命令行报错，浏览器的console报错 等等等等。这些经历实打实的是一段开发经历，而非跟着书上的教程敲一遍那样顺畅。这也是你在任何培训/书本/公众号。博客/视频 上都无法得到的真实经历和体验。经受过这个教程后你才算是一个铁骨铮铮，摸爬滚打，身经百战出来的汉子，而不是一个温室培养出来纸上谈兵的书生。

其实在开发过程中，我故意留下了一些小bug或者比较有话题的bug，当然也有确实疏忽掉的，幸运的是真的好多粉丝都在实际写着代码跟着，反馈了很多。

    那么本节课，就让我们来对这些bug依次进行修复吧。

 bug-1:

描述：删除项目后，这个项目内的接口并没有被删除，依然停留在数据库，并且通过后台删除会报错，变成了实打实的脏数据。

解决：这就是所谓的联级删除了。

首先找到我们的删除项目的函数：delete_project

发现我们之前写这个函数的时候，还没有去开发接口概念，所以没有写接口删除的代码，那么现在就该加上了。（之后项目内的用例模块也需要到时候进行删除）,增加代码后如下图：

这样就可以实现删除项目id为待删除项目的id的 所有接口了

bug-2:

描述：接口保存后，再打开发现数据没有显示成功。

解决：这个问题是最近的一个bug，我去后台看了一下，其实数据都保存成功了，那么问题就出在显示上了。

这里要给大家解释一下，在我们前端的ts_show函数中，目前只有 清空初始化调试弹层+显示弹层和接口id/接口name。还并没有开始写显示接口真实内容的代码，所以下一节才是要做这个显示，因为当中涉及到编码格式的显示/子页面的切换/下拉框的选择等等，所以还是比较复杂的。

目前的ts_show()函数：

bug-3:

描述：好几个页面的console中都出现了这个404报错，也不知道什么意思也不知道怎么修复

解决： 大家可以看到这个红色报错，404代表这个资源没有找到，这个资源的后缀是.ico，也就是一个图标，之所以一直懒得管这个bug，就是因为仅仅是个小图标而已，但是天天这么红实在碍眼，所以就修复一下吧：

首先要明白这个.ico到底是什么，为什么我明明没引用，但是每个页面都会报错找不到。其实他就是我们的icon图标，也就是这个网页的小图标：

而html默认都会去寻找这个小标志，我们没有设置过，自然会报错了，这里我们可以用俩种方式解决，一是不让它找了，二是给它弄个漂亮的小icon。无论哪种，我们都只需要在welcome.html中改动即可在所有页面模块内生效。

打开welcome.html：

在head中加入这样一句代码：

<link rel="shortcut icon" href="#">

然后刷新页面就会发现 各个模块不再报这个错误了。

不过很多小伙伴会觉得灰心，我们真的想弄一个自己的图标呢？

所以我们其实可以制作一个.ico的图片放在/static目录下，然后这句代码的href属性就要为这个图片的相对路径了：

首先我们要知道这个图片应该非常非常非常小才行，太大的会很卡。最好我们找个在线制作的网站做一个：http://www.bitbug.net/

比如上面这个，百度搜索的第一个。

点击生成后就会自动下载这个.ico图标了，切记一点，图片一定要小！越小越好，低于500k，并且图案要简洁大方，不然缩小之后看着花花绿绿的是什么都看不出来。你看看百度等大网站的icon就简简单单一个字...

然后把这个文件粘贴到static目录下：

在welcome.html中的这句代码改成如下：

让我们再次刷新页面看看效果吧：

图片已经缩小展示了，而且console也不报错了。大家可以用自己公司的ico来作为内部平台也可以，跟设计部门要就行。

bug-4:

描述：在接口库中，左侧菜单展开后，隐藏按钮不见了？

解决：其实并不是不见了，只是因为隐藏按钮被这个接口库顶部菜单给遮挡了。虽然我们可以通过调整层级来让这个按钮显示出来，但是我总觉得这个按钮设计的并不好，所以我们这次干脆给这个显示隐藏按钮 给重新设计，当然逻辑不变，只是位置和文案都变了。

打开welcome.html：找到旧的这个按钮：

我们修改成如下：

style进行了大变动，且文案变成了小于号，并且用span 大号包裹住：

然后修改下面的它关联的函数：display_menu()

注意细微差别，style.margileft改成了style.left。避免大家出错，请直接复制以下代码：

<button id="menu_btn" onclick="display_menu()" style="
position: absolute;left: 188px;top: 48%;z-index: 999;height: 35px;
background-color: #353c48;color: white;border: 0;font-size: x-large"><</button>

<script>
    function display_menu() {
        menu = document.getElementById('navbar');
        btn = document.getElementById('menu_btn');
        if( btn.innerText == '<' ){
            menu.style.display = 'none';
            btn.style.left = '0px';
            btn.innerText = '>';
        }else{
            menu.style.display = 'block';
            btn.style.left = '188px';
            btn.innerText = '<';
        }
    }
</script>

好，刷新页面看看效果：

但是经过这次改动后，右上角的 回到主页和退出按钮 的位置就乱了：

这种情况我们正好也可以重新设计这俩个按钮：同样他们也只在welcome.html中显示，所以我们如下设计。找到这俩个按钮：

然后，记住他们的超链接 一个是/home/ 一个是/logout/ ，好，删掉～

记住这些功劳按钮，他们都是为了当时我们学习更多的css才制作的如此难看的，如今我们要设计更好看 符合审美常识的按钮来替换掉它们了。

新增如下按钮组,简洁大方。

<div style="font-size: large;position: absolute;top: 0px;right: 0px;box-shadow: 4px 4px 8px grey;
            padding-left: 5px;padding-right: 5px">
    <a href="/home/" style="color: black;text-decoration: none"> 主页 </a>
    <a href="/logout/"  style="color: black;text-decoration: none"> 退出 </a>
</div>

看看效果：

然后我们发现 ，每个子页面貌似都向上移动了一大块距离，使得我们原本的布局不好看了起来：

太顶了，那是因为这个主页/退出按钮组 以前在文档流中可以当作一行来占位，现在脱离文档流了，所以所有子页面都顺势上滑。我们可以在原位置用过br标签换行符来撑开：

然后各个页面效果就恢复了之前的：

bug-5:

描述：接口名称目前貌似没法修改，用户不能登陆后台去修改接口名称吧？

解决：这个是我们疏忽的一点，之前的确忘记了接口名称了。所以用户新增的接口名称都是None，而且没法改。这属于设计缺失，那么我们本节最后就搞定这个问题吧：

打开P_apis.html，找到这个调试弹层中的这个small标签，就是放接口名的：

我们的解决方案是，把这个small标签变成一个输入框，用来显示接口名，并且内容会和接口的其他数据一样，传递给后端保存函数用来保存。

首先给它改成input如下所示，并且h3改成h4，不然太大了，注意颜色为绿色，不然和背景白色靠色了。

效果如下：

然后我们去修改ts_show()函数，把它的innertext改成value：

刷新页面，发现可以成功显示接口名称了。

然后是清空函数clear_ts_api()中，增加这个id和name的清空，这是我们上一节课漏掉的部分：

然后就是保存函数ts_save()中加入这个api_name吧：

最后我们要把这个函数的返回处理部分改动一下，从关闭调试弹层 改成 直接刷新页面。这样可以保证我们新改动的数据能直接生效显示：

好，我们这里前端html的基本弄完了，现在去改后台保存函数Api_save()：

搞完之后，我们重启服务，刷新页面。测试：

现在叫这个：

改了之后：

好了本节内容稍多，大家慢慢消化。

项目源码打包存放的地址如下：

链接: https://pan.baidu.com/s/1xkANzAfQ-xvRPe66YCdbCw 密码: bft9

最后仍然是求分享求扩散求点赞