接口测试平台代码实现番外：主页改版-5

上节之后有粉丝私聊觉得，平台右上角的“主页/退出” 按钮已经过时。所以我们本节首先来优化下。

首先是退出按钮，我们因为不经常用，不必要放在这么明显的位置，而且和个人姓名头像放在一起更符合常理....所以转移到左侧收缩菜单里即可。

打开welcome.html：

我们把这个退出按钮的超链接 先转移走

我们把它移动到左侧菜单的 名字后面 别忘了改成图中设置的颜色，并且和名字username中间 放一个  就是空格，注意分号别漏。

效果如下：

接着是 剩余的左上角的主页按钮。

现在是这样：

我们简单重新设计下：

删除我们原来的主页按钮相关的div和超链接。

然后在header中加入style，并粘贴下面的css样式：

  <style>
      .chamfer{
          background: linear-gradient(41deg, transparent 10px, #66defd 0) top left,
                  linear-gradient(-90deg, transparent 0px, #adfdee 0) top right,
                  linear-gradient(-90deg, transparent 0px, #cbffbd 0) bottom right,
                  linear-gradient(45deg, transparent 21px, #b0fde2 0) bottom left;
          background-size: 49% 48%;
          background-repeat: no-repeat;

      }
</style>

然后在底部找一个位置 写上新的home首页按钮 div。具体写在那随意，因为我们要给它固定位置在页面右上角。

<div class="chamfer" style="height: 30px;width: 100px;position: fixed;right: 0px;top: 0px ">
    <strong>
        <a href="/home/" style="font-size: large;padding-left: 30px;color: #00372e;text-decoration: none"> HOME </a>
    </strong>
</div>

效果如下：

具体细节，自己可以随意调试改动，颜色 大小等等。

好了，关于右上角按钮的问题到此结束。开始本节主要内容：

本节我们继续想办法 添加个人看板栏：

可能目前有些同学 很想加一个 统计图，这样看起来显得高大上一些，所以本节我们来嵌入这个。

不过这个功能，大家可以跟我一起进行思考，以一个第一次完全不知道如何下手的新人状态来思考。注意以下思考是我根据我总结的方法论生成的具体步骤，而非沉淀的方法论本身， 所以这也是我在逐步校验这套理论的可行性的一步。

1. 首先不知道要如何添加这种图形的，我猜测肯定是通过js/css来根据具体数据来生成图像。
2. 但是我并不知道要如何生成，我需要去百度，百度的话会有俩种方向搜索，一种是教我如何自己开发，一种是直接给我做好第三方我直接复用。
3. 这个问题我觉得一定很难，所以先试试不造轮子，直接去下载使用。
4. 风险上肯定是有，第三方的也都是个人开发的，并不一定能适应我们现在的布局和具体环境，大概率是需要进行修正，但是这个难度不好说，代价也许很大。
5. 那么既然要去下载，所以我优先选择了jq之家的。找了几款试一下吧，改动的时候记住修改的地方，以便不合适的时候可以还原干净。
6. 如果是第三方的，那么风格上我们需要进行本地化，也就是我的主页是淡蓝色简约风格，不可能弄个大红大绿的欧式繁华的花纹控件。所以寻找到合适的如下：

http://www.htmleaf.com/jQuery/Chart/201802074971.html

好的我下载好了资源：

然后解压到 static目录下：

取了个low名 ：bingxingtu。

然后点击它的index.html，也就是它的demo。看看如何使用。

凭借多年经验，一眼就看出来 这个饼形图的html代码：

我们把其复制到我们的Home.html中：

效果如下：

这里没有成功，是肯定的。而且位置也不对。我们希望是 同一行显示，不过我们先不管位置了，先让它变成图而非字。我们注意到 这些class的具体我们并没有引入，所以继续去index.html中复制粘贴到Home.html：

现在效果变成了这样：

还是差很多，所以我们继续去找index.html。我们仔细看index.html，它最下面的时候明显引入了 我们不认识的陌生js和script。所以我怀疑这个应该就是图形生成的必须代码：

将其复制到Home.html最后：

然后我们刷新页面看看效果，注意因为我们引入了js等静态文件，所以我的习惯是打开console看看。

结果是仍然没成功，并且有报错，这个报错信息很简单，就是我们的js文件没有找到导致。我们复制过来的时候 并没有修改js文件的引入路径。所以改成如下：

不过这里我们去刷新页面可以看到，console并不报错了，但是效果仍然是不对的。所以我们还需要去index.html中找必须的代码：

可以很明显的看到这句箭头指向的，不是平时见过的，而且都带有circle圆的标志，所以推测这个css文件引入代码也是必须的。粘贴到Home.html里：

其实这里的css文件 和刚刚的js文件我们都可以在bingxingtu文件夹轻松找到：

好了。如今我们 dom复制了，js也复制了，css也复制了。再不成功！天理难容！。

刷新页面，效果如下：

可以看到已经成功，而且进入页面后还有个慢涨动画效果。

接下来我们给其大小位置 重新设计。代码修改如下：

大小，我们最好的办法是直接去刚刚的css文件中看，刚进入就可以发现 有明显的关于大小高度的设置，我们依次修改，找出生效的设置即可：

（注意，如不生效，记得还原）

强制刷新页面后，效果如下：

看来大小合适了，然后是间距貌似太大了。我们关闭了progresscircle.css，回到Home.html中设置：

可以看到我们在header中引入的那个css，给它加入宽度看看效果：

效果如下，可以看到间距明显缩小了。

剩下的是 位置。我们想办法给移动到和文字数据看板并列，这里有俩种办法，一是给其和父级div都设置上bootstrap的并列属性。二是简单点，直接给写死位置，因为其相对于页面的底部和左边界是固定的。所以简单点这样改即可：

效果如下：

最后我们要做的就是让这个饼形图 真的有用。我们可以随意控制它的数量。所以我们先想好都有什么可以用图来表示。然后如何表示？

从其中具体文字可以看出，我们进入页面时直接把这几个位置的数字传进来即可展示：

然后现在来思考可以做什么吧。

1. 个人项目占平台总项目的比
2. 个人接口占平台总接口的比
3. 个人用例占平台总接口的比
4. 未完成请求/任务通知占总数的比
5. 未被用例套用的接口占总数的比
6. 后台反馈吐槽未被管理员回复 占总数的比
7. 等等。。。。

欢迎大家畅所欲言～ 这里可以根据自己需要在views.py的child_json中计算好数据 带入页面中实现真正效果。

下一节我们就来去做示范的弄三个数据计算展示~

最后看看目前主页的变化，其实很大了：