接口测试平台代码实现55:首页重构-3

接着上节继续来做：

先来回顾一下，上节课我们基本就是清空来首页，并且划了一条竖线，把首页分为左右俩部分。

左边放我们请求记录，请求记录我们的数据层已经初步架设好。

右边放我们的请求工具。

本节我们继续完成左边的，上节我们左边的已经在后台建立了俩条记录。本节课就来做好页面展示吧。

在home.html中，我们已经写好了这个初级的请求记录循环：

这种在html中 {{ }} 的变量，是通过我们进入这个页面的后台函数的返回

return render() 中的字典里才能传输的。

所以我们找到后台中进入首页的函数home

但是因我们包装了一层，所有的页面都是通过嵌入到welcome.html中来展现的，所以我们真正要添加这个请求记录的地方不在home里，而是应该在child_json中，统一控制起来的。

所以添加好如下：

这里我们发现一个问题，就是我们需要过滤出当前用户id下的请求记录，所以需要用户id，那么这个oid作为预留的这时候也可派上用场了，按下图写好。

好了,我们现在刷新一下页面看看效果：

结果发现什么都没有..按理说应该显示俩条我已经创建好的请求记录啊？

发现原因是

我们一开始写的循环体，并不符合我们后来开发models.py中 请求记录的各种字段名。所以没有对应上就不显示了：

发现了这个问题了吧，这就是为什么 公司内开发过程中，前后端要进行联调的原因之一。避免出现这种字段都对不上的低级错误。

我们现在修改前端的循环体如下：

再刷新页面看看。

可以看到已经成功显示出来了。

接下来我们进行美化操作：

<h3>&#12288;您的请求记录：</h3>
<div id="home_log_plan" style="padding-left: 20px;overflow-y: scroll;width: 320px">
    {% for i in home_log %}
        <a href="javascript:home_log_show('{{ i.id }}')" style="text-decoration: none"  class="log" >
            <span style="font-size: large;color: black">{{ i.api_method }}</span> -
            {{ i.api_host }}{{ i.api_url }}
        </a> <br>
    {% endfor %}
</div>

小伙伴不要拘泥于教程中的设计，尽量自由发挥美学细胞，教程中的代码你可以当作是草稿或者基础。

好了本期到这就结束了，比较短也没办法。最近要处理的事太多了。