数据工厂平台10： 首页底部

最近几节我们要结束掉首页，虽然首页是我们的草稿，承担了我们学习的第一步，但是确实已经占用了过多篇幅。

   先来看看首页目前的样子：

仔细看可以发现，右侧和底部都留有大块的空白，而其中的右侧空白 慢慢会被这些个条形统计图充满，我们不必担心~

   底部留白我们可以放一些 扇形统计图作为装饰。

   不过这里我们要思考一个设计上的问题：

   很多第一次做平台的同学，会盲目崇拜 首页的各种统计图，觉得这样很高大上。但是实际上，你去访问公司很多内部平台时候，首页的统计图你根本不会去看，也不会在意。

   尤其是统计数据是全局的整体的时候，作为单个用户 更加不会关心了。当然大部分如此的设计，主要是为了美感，再就是给领导一目了然的掌控心里设计，然后就是秀肌肉，给同事看看自己的平台流量很大。最后就是为了开发者自己的后面晋升答辩、简历美化 提供数据量化支持。

   鉴于我捅破了这层窗户纸，所以我们的设计是，同样是统计数据，但是底部留白我们要统计的一定得是登陆者的个人信息，而非全平台的总体数据。试想，你们公司的app 首页，放的不是用户的个人信息，个人浏览记录，个人兴趣推送。而是这个app的总体数据如一共现在多少用户，每个功能使用了多少次。这样是不是很别扭？？？

   所以这个底布统计数据，我们决定用扇形图来展示个人的数据，当然个人的数据中也有个人在乎，个人不在乎的，这里我不给大家规定死了。全部提出来，让大家自行选择，我会挑选几个作为例子示范。

   说到前端样式，我在django 和 vue的冲突 解决中 经历了无数次的踩坑和填坑，这里我明白了一个道理。就是谁说学vue就不用学js了？开玩笑呢？vue的很多methods 都是要用js来写的。而且如果你不想做的很简单，一点复杂交互都不会的话，那就必须要学好js。

如果我js差的话，那么vue和django的冲突 和很多花样我也不会很容易就搞定。

   先学vue，笑着进去，哭着出来 或者 出不来了。

   先学js， 哭着进去，笑着出来。

   当然还有类似无敌哥那种用react的高端玩法

   还有用jsx的封装代码~

   各有各的好，但是js作为一切的基础，如果精力足够，还是建议先打好基础

   然后我们再去推演另一个部分，即前端样式。

   有的前辈用css + js硬写

   有的用jq样式等

   有的用bootstrap系列

   有的用elementUI

   还有的自己写各种样式组件

   还有的用公司的统一风格的样式组件

   无论哪种，都有存在的合理性和适用场景。

   所以我们这里去弄的扇形统计图，仍然是给大家带来尽量多的风格，以便各位自行举一反三，发散思维，开拓眼界。

我挑选了一个不错的 jq组件， 一进入页面的动画效果也是很让人喜欢。

地址：http://www.htmleaf.com/jQuery/Form/201801024909.html

打开之后点击下载，然后解压：

可能下载后你的名字和教程不一样，自己记住别认错就好。然后拖拽复制到项目的static目录下：

然后我们打开下面的index.html， 发现 这里面的行数实在太多了，所以我们准备在其基础上进行修改，然后移动位置到templates下，然后再home.html中引入即可。

修改原则：

第一步：先删除这个index.html中额外的无用部分，比如它的上下广告 背景色等等

具体代码删除部分：

head中：

body的header：

body底部的 div：

大家注意不要删错一点。

然后再通过文件右上角的谷歌浏览器点开 ，看看效果：

可以看到 页面只剩下 这四个圆圈了。

但是这里还不算完，这些圈目前仍然在 外围的div中控制，大小，位置，都被锁死。我们为了能更好的融入进我们的平台首页，所以还要继续给它扒皮。

如下图，删掉红圈内的部分，我们先扒掉三层div看看效果：

注意，此时只留下了 最里面一层div包装 和 内部的四个圆圈的div

效果不错：

可以看到 基本定格了，这说明 我们对之后的位置控制，可以更加随心所欲，而防止被之前的外层div 影响。

现在给这个index.html移动到templates中，并且重新命名为 home_tj (名字随便起，但是别再用index.html了，这个太重名了)

然后，我们给它内部的所有关于链接的地方 全部改成/static/文件夹名字/开头的

除了外链哦~

’

然后我们这时候不要浏览器直接打开这个文件查看，因为样式文件一样会报错报丢。

这个改动是让该html可以在平台通过url的方式再到后端函数再返回浏览器这样的 路线中可以用的。

我们现在去home.html中引入该html：

刷新页面看看效果：

注意看，已经成功进来了。

但是这样就算完了么？当然不是。

导入之后，我们至少还有三件主要的事要做：

1. 调整位置大小等样式
   
2. 查看是否有console报错
   
3. 换成我们实际的数据 而非它预置写死的数据。
   

本节课内容到此结束。下节课我们会给大家搞定这三件事，届时，首页也将告一段落，我们将正式进入到设计构造数据的章节中。