接口测试平台代码实现19.首页优化

按照最近俩天 小伙伴的反馈激烈程度，本节课准备把首页添加一个非常有用户黏性的一个功能。公司内的各个超链接传送门！

新来的公司的小伙伴经常会因为找不到各个平台/文档的地址而发懵。老员工跨部门工作的时候也经常会遇到找不到其他部门的各个连接的地址难受。很多诸如功能性的平台，如果你不说，那么新人可能都不知道这个功能平台的存在，针对于这种痛点。我们会思考

有没有一个简单的地方，能让我们所有人进来一目了然呢？

如果没有最好！这样我们就可以自己去动手做一个这样的页面出来给大家使用，几乎90%的同事都会直接把这个页面存成书签。而且久而久之，这个页面的流量会非常大。我们之后再进行推广谁的什么平台/文档/wiki/石墨。都可以把这个当作一个广告位，迅速获得曝光。

那么大家可以跟着我先把这个功能给做了，大概2节就可以了～

本节课的内容主要是训练循环列表等显示效果，目的是为了让我们接下来做项目列表/接口列表/用例列表 铺路。

好，当我们要设计新增一个实体的时候，是不是不知道要如何下手？

那么就先要按照这个思路去思考：

1. 数据存在哪？我们存在数据库，那么就要去models.py中新建一个类作为数据库表
2. 前端的这堆数据展示在哪？我们是展示在home.html中c位
3. 增删改查这些数据去哪？我们去admin后台
4. 数据怎么传递给前端？我们后端进入home的哪个函数从数据库提取这些数据然后返回。

好了，现在我们梳理完毕，我们知道我们要做什么了。那么第一步，去建表。

打开models.py:

创建类：DB_home_href 作为我们首页的超链接传送门表

然后运行那俩个最常用的同步/生效表结构命令：

然后别忘了去admin.py中注册该表，以便我们可以在后台进行增删改查。

好，接下来我们要去后台函数内想办法 把这个数据 返回给前端！

准备好，我们将要学一个新的技术，非常非常烧脑的一个技术：就是如何把数据返回给前端并且能对复杂的不同页面不同情况 返回不同的数据，这里我做了一个数据分发器，功能类似于urls.py的路由控制器。这里比较重要，大家仔细琢磨，琢磨不透就先照葫芦画瓢，熟练了就自然懂了。

首先打开views.py，找到child函数：

大家可以先不用管这个oid，这个oid是灰色的，我们目前还是不会启用它，但是千万不要删除它，它后面会有大用。

现在我们把目光聚集到eid上，这个eid是什么来着？其实是我们要进入的html文件名字。不信我们print一下看看：

然后浏览器等待后台自动重启后，刷新首页 ：

我们现在知道，用户进入的是Home.html页面。那么我们要给它返回对应的数据，也就是所有超链接传送门：

这里我们再新建一个函数，叫child_json() 它专门用来接收页面名字，然后去不同的数据库中查找数据，进行整理后 返回给child()函数，再由child函数返回给前端浏览器。这个函数后期要处理的事情非常之多，所以有必要让他成为一个层级的存在，类似于我们开发同事那边的中台。负责和数据库交互，然后整理数据，返回给业务层函数。

里面很简单，就是个if判断，如果eid是Home.html这个页面，那么就去数据库DB_home_href中拿走所有超链接传送门数据，返回。orm的使用上一个常用查询代码就是：类名.objets.all() 取出来的数据格式其实是queryset。不过你使用上可以暂时当作列表。后续遇到需求我们再引入如何巧用queryset类型数据。格式类似于：[{"name":.....,"href":....},{"name":.....,"href":....},{"name":.....,"href":....}]

列表里面的元素都是字典。

接下来我们想一个问题，我们要给前端返回的数据，格式上是有严格要求的，只能是字典。但是我们刚刚从数据库取出来的这个date是一个类似列表的格式，要怎么办呢？

很简单，我们新建一个字典res,然后把date作为res的一个键值对的值即可。继续修改如下图所示：

最后我们返回res，res是个字典，可以直接让我们child函数返回给前端。

在我们child函数中的返回函数render()内加入第三个参数，就是我们的res，调用child_json(eid) 来获取res：

好我们现在切换到浏览器，等待后台重启，刷新页面 看看有没有报错。

(如果它不主动重启，你就手动点一下重启)

好的。我这边是没有报错的。如果同学报错了，请根据报错信息检查一下是不是哪里漏掉了写错了。

到这里我们已经完成了数据传递给前端的 一系列链路。接下来就到了前端开发的环节了。

让我们打开home.html，但是记住我们前端的数据都放在了hrefs 这个变量中：

在home.html中 我们先把碍事的 欢迎语 和 吐槽框 都给他们靠边站。给我们的大传送门 把c位让出来：

我的做法是 给欢迎语简化，给下面的吐槽框和按钮 新包了一层div，然后给这个div的属性中设置 位置固定，距离底部5px 右边5px：

效果如下：

接下来我们新建一个div，用来展示超链接传送门。

先思考div 的几个特性：

1. 宽度和高度：

宽度我们大概70%就可以了，高度我们不设置，有多少传送门 就自动多高。

2. 位置：

为了避免我们被左侧菜单干扰，所以我们的位置上 要设置外左边距 具体多少一会看效果调。

3. 内部文案显示效果

因我的背景图是暗色系，所以文字最好是淡色亮色，来形成反差 方便辨认。

好，我们按照上面要求做完的结果如下：

其中text-align:left 是为了消除掉最外层div的text-align:center的影响。

内部又包了一层strong，是为了让文字加粗 看着更清晰。

效果如下

现在让我们把循环显示的超链接放进去：

{% for i in hrefs %} .... {% endfor %} 是我们html中的标准循环代码：

内部的一切变量都必须用{{ }} 给包起来，忠实替换原则下我们必须给字符串加上引号才行，如href的 值。

让我们看看效果：

发现啥都没有，那是因我们没有数据啊。我们现在还是先去admin后台，去手动添加几条数据吧：

点击左侧菜单 - 后台，进入我们的db_home_hrefs表：

然后点击添加按钮：

输入完数据后，点击保存并增加另一个：

随便写点东西 增加几个。以便我们调试显示效果：

然后我们回去直接刷新首页看看，注意操作admin后台后不需要等待服务重启，是纯在线修改数据。直接刷新首页就可看到效果：

好，现在成功显示了。我们可以自行测试一下，看看是否可以跳转成功。

好本节课到此结束，下节课我们来优化这个超链接显示效果。

一直追的小伙伴别忘了分享啊～留言板