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

我去热饭

发布于 2022-05-19 09:08:37

3700

发布于 2022-05-19 09:08:37

文章被收录于专栏：测试开发干货

本节我们接着开发首页，

主要内容是让左侧的请求记录和右侧的请求模块联动起来。

具体联动需求：

右侧请求一次之后，左侧生成记录
点击左侧记录，右侧则会显示这次记录的请求数据

我们本节课的内容是想办法实现1-生成记录。

我们知道，左侧的记录是存在于我们数据库的记录表中，所以右侧请求模块只要请求，就顺便把这些请求数据+用户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'));
        }
    })
}

看看效果：