接口测试平台代码实现57-首页重构5

我们知道，左侧的记录是存在于我们数据库的记录表中，所以右侧请求模块只要请求，就顺便把这些请求数据+用户id 存储到记录表中即可。但是左侧的记录显示逻辑目前是，进入首页后自动获取展示，并没有实时刷新功能，也就是我们请求完之后，需要刷新页面才能在左侧看到记录，但是刷新的话右侧的返回体什么的也烟消云散了。那么我们就要重新设计这个左侧记录的展示逻辑，做成主动刷新。

   一开始进到home的展示我们不用删除了，只做后续请求成功后的刷新吧

打开home.html,新建立一个js函数：

这个函数要做的事有两个：

1.清空已显示的记录

2.从数据库获取最新的记录生成展示

我们现在先去架设好获取最新记录的 urls.py：

然后去写views.py：

这里要特别说一下为什么这样写，我们只从数据库拿出id,method，host,url四个字段，其他的不要拿，因为都拿的话肯定数据太大超出了。我们只拿这几样需要显示的即可。等用户真的去点击某个记录的时候，我们在用这个记录的id单独去后台数据库获取全部请求数据就行。

   然后我们回过头，打开home.html,输出一下ret，看看对不对。

还有我们要加上一个调用这个函数的代码，才能调试：

好让我们重启服务，打开浏览器控制台的-console，刷新首页看看输出吧：

看来是获取成功了。

接下来就是生成：

我们要用js代码，实现这个html语言的循环。

代码如下：

log_refersh()
function log_refersh() {
    //清空
    div = document.getElementById('home_log_plan');
    div.innerHTML = '';
    // 生成新的
    $.get('/get_home_log/',{
    },function (ret) { //ret 应该就是我们获取到的记录列表数组 的字符串形式
        // 这里写生成展示的代码
        console.log(ret);
        var res = eval(ret);
        var all_logs = res.all_logs;
        for(var i=0; i<all_logs.length;i++){
            var a =document.createElement('a') ;//创建a标签
            a.href="javascript:home_log_show()" ; // 点击函数
            a.style="text-decoration: none" ;
            a.class = 'log';
            var s = document.createElement('span'); //声明显示请求体类型的span
            s.style = "font-size: large;color: black";
            s.innerText = all_logs[i].api_method+' - '; //设定这个method;
            var s2 = document.createElement('span'); // 声明存放host+url的span
            s2.innerText = all_logs[i].api_host+all_logs[i].api_url;
            a.appendChild(s);
            a.appendChild(s2);
            div.appendChild(a);
            div.appendChild(document.createElement('br'));
        }
    })
}

看看效果：

还是可以接受的。

接下来就是我们要在右侧进行请求后，把请求数据存放到数据记录表中，然后再调用一下这个刷新log函数即可：

打开views.py，找到Api_send_home()，加入下图红框内容，位置别弄错了。

然后在home.html中 的函数最后获取到返回结果的时候 加入调用记录刷新函数log_refersh，注意之前我们为了方便调试的那个一进页面就刷新的调用代码行可以删掉了。

然后重启服务刷新页面 ，随便请求点什么 看看效果。

看来这个是成功了。但是还有瑕疵，比如新显示的应该在最上面，顺序反了。我们在后台函数，首次进入和send请求的俩个位置逆转即可：

views.py中修改：

好了，这样顺序就方便了。到这就完成了今天的内容。