本节我们就用最简单的方法来修正一下这个缺陷：
我们先打开welcome.html，找到这个个人头像的代码 img标签：
注意看他的src超链接，是写在自己本身属性里的，全屏闪烁也是因为它和其他标签元素都同时加载引起的，它加载出来的时候，其他元素还没有完全加载完，它就像失控的👿一样充满屏幕。
我们给他改一下，让他不要直接自带这个超链接，而是等页面全部加载完了，通过一个自动运行的script来赋予img标签的这个超链接即可。众所周知，script的js函数是要等页面的静态元素都加载完才会运行，指定好了这个顺序即可解决问题，所以改成如下：
我们刷新看看效果：
发现再也没有那种恐怖的大屏一闪现象了。
好了，正式开始本节内容哦：
我们要进行设计最近比较流行的一种接口请求方式：GraphQL
虽然说它在多重搜素领域表现出色，但是市面上能用的第三方其实并不是facebook的内部最新版本。我们在调用它的时候，其实也仅仅是修正了格式，然后仍然用requests模块进行请求即可。
不过首先我们先来解决前端交互的问题，需要增加这个请求体类型的地方，目前是三处：首页，接口库调试层，用例库步骤详情页。
我们先去搞比较简单的 首页调试吧。
打开home.html：增加这个选项
此时页面刷新可以看到首页多出来了这个：
然后我们在下面给它开辟出子页面：
<div class="tab-pane fade" id="GraphQL"> <table style="width: 98%"> <thead> <tr> <td style="width: 55%"><span >QUERY</span></td> <td style="width: 40%"><span >GRAPHQL VARIABLES</span></td> </tr> </thead> <tbody> <tr> <td><textarea id="body_plan_G_Q" rows="10" style="padding-left: 3px;border-radius: 5px;width: 99%"></textarea></td> <td><textarea id="body_plan_G_G" rows="10" style="padding-left: 3px;border-radius: 5px;width: 100%"></textarea></td> </tr> </tbody> </table> </div>
前端展示如下：
其实看着还凑合。
