接口测试平台代码实现101:图片优化和GraphQL-1

之前有小伙伴反馈一个问题。说每次刷新页面，个人头像的图片都会全屏显示，闪烁一下再回到正常位置和大小。用个可怕的头像的时候尤其吓人。

本节我们就用最简单的方法来修正一下这个缺陷：

我们先打开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>

前端展示如下：

其实看着还凑合。

本节内容到此结束，下节实现后台相关代码。