接口测试平台-97: 头像闪烁修复+首页GraphQL请求前端

1. 头像刷新闪烁bug修复

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

先打开welcome.html，找到这个个人头像的代码 img标签：

注意看他的src超链接，是写在自己本身属性里的，全屏闪烁也是因为它和其他标签元素都同时加载引起的，它加载出来的时候，其他元素还没有完全加载完，它就像失控一样充满屏幕。

不要直接自带这个超链接，而是等页面全部加载完了，通过一个自动运行的script来赋予img标签的这个超链接即可。

众所周知，script的js函数是要等页面的静态元素都加载完才会运行，指定好了这个顺序即可解决问题，所以改成如下：

刷新看看效果：发现再也没有那种恐怖的大屏一闪现象了。

 

2. 设计新接口请求方式：GraphQL

GraphQL在多重搜素领域表现出色，但市面上能用的第三方其实并不是facebook的内部最新版本。在调用它的时候，其实也仅仅是修正了格式，然后仍然用requests模块进行请求即可。

不过首先先来解决前端交互问题，需要增加这个请求体类型的地方，目前是三处：首页，接口库调试层，用例库步骤详情页。

 

3. 首页调试

打开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>

前端展示如下：