接口测试平台-56：首页重构-4

本节接着开发首页，主要内容是 让左侧的请求记录和右侧的请求模块 联动起来。

具体联动需求：

1.  右侧请求一次之后，左侧生成记录

2. 点击左侧记录，右侧则会显示这次记录的请求数据

 

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

左侧的记录是存在于数据库的记录表中，所以右侧请求模块只要请求，就顺便把这些请求数据+用户id 存储到记录表中即可。

但是左侧的记录显示逻辑目前是，进入首页后自动获取展示，并没有实时刷新功能，也就是请求完之后，需要刷新页面才能在左侧看到记录，但是刷新的话右侧的返回体什么的也烟消云散了。那么就要重新设计这个左侧记录的展示逻辑，做成主动刷新。

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

 

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

 

这个函数要做的事有两个：1. 清空已显示的记录，2. 从数据库获取最新的记录生成展示

 

2. 添加映射：

urls.py：

url(r'^get_home_log/$', get_home_log),  # 获取最新记录请求

views.py：

def get_home_log(request):
    user_id = request.user.id
    all_logs = DB_apis_log.objects.filter(user_id=user_id)
    ret = {"all_logs": list(all_logs.values("id", "api_method", "api_host", "api_url"))}
    return HttpResponse(json.dumps(ret), content_type='application/json')

特别说一下为什么这样写，只从数据库拿出id, method, host, url四个字段，因为都拿的话肯定数据太大超出了。只拿这几样需要显示的即可。等用户真的去点击某个记录时，再用这个记录的id单独去后台数据库获取全部请求数据就行。然后回过头，打开home.html,输出一下ret，看看对不对。

 

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

 

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

看来是获取成功了。
 

3. 接下来就是生成

要用js代码实现这个html语言的循环。代码如下：

// 左侧记录刷新
log_refresh()
function log_refresh() {
    //清空
    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'));
        }
    })
}

看看效果：

 

 

4. 在右侧进行请求后，把请求数据存放到数据记录表中，然后再调用一下这个刷新log函数即可：

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

# 写入到数据库请求记录表中
DB_apis_log.objects.create(user_id=request.user.id,
                           api_method=ts_method,
                           api_url=ts_url,
                           api_header=ts_header,
                           api_host=ts_host,
                           body_method=ts_body_method,
                           api_body=ts_api_body
                           )

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

 

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

 

左侧一般都是倒序显示，后台函数中首次进入和send请求的俩个位置逆转即可：

 

views.py中修改：

好了，这样顺序就方便了。