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

简介: 本节我们接着开发首页,主要内容是 让左侧的请求记录和右侧的请求模块 联动起来。具体联动需求: 右侧请求一次之后,左侧生成记录点击左侧记录,右侧则会显示这次记录的请求数据我们本节课的内容是想办法实现1-生成记录。

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

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

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

微信图片_20220624125321.png

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

1.清空已显示的记录

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

微信图片_20220624125333.png

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

微信图片_20220624125340.png

然后去写views.py:

微信图片_20220624125353.png

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

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

还有我们要加上一个调用这个函数的代码,才能调试:微信图片_20220624125403.png

好让我们重启服务,打开浏览器控制台的-console,刷新首页看看输出吧:微信图片_20220624125411.png

看来是获取成功了。

接下来就是生成:

微信图片_20220624125416.png

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

代码如下:

微信图片_20220624125433.png

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'));
        }
    })
}

看看效果:微信图片_20220624125453.png

还是可以接受的。

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

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

微信图片_20220624125501.png

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

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

微信图片_20220624125524.png

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

views.py中修改:

微信图片_20220624125533.png微信图片_20220624125540.png

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

微信图片_20220624125550.png

相关文章
|
8天前
|
算法 Java 测试技术
使用 BenchmarkDotNet 对 .NET 代码进行性能基准测试
使用 BenchmarkDotNet 对 .NET 代码进行性能基准测试
40 13
|
18天前
|
监控 JavaScript 测试技术
postman接口测试工具详解
Postman是一个功能强大且易于使用的API测试工具。通过详细的介绍和实际示例,本文展示了Postman在API测试中的各种应用。无论是简单的请求发送,还是复杂的自动化测试和持续集成,Postman都提供了丰富的功能来满足用户的需求。希望本文能帮助您更好地理解和使用Postman,提高API测试的效率和质量。
70 11
|
2月前
|
并行计算 算法 测试技术
C语言因高效灵活被广泛应用于软件开发。本文探讨了优化C语言程序性能的策略,涵盖算法优化、代码结构优化、内存管理优化、编译器优化、数据结构优化、并行计算优化及性能测试与分析七个方面
C语言因高效灵活被广泛应用于软件开发。本文探讨了优化C语言程序性能的策略,涵盖算法优化、代码结构优化、内存管理优化、编译器优化、数据结构优化、并行计算优化及性能测试与分析七个方面,旨在通过综合策略提升程序性能,满足实际需求。
65 1
|
2月前
|
人工智能 供应链 安全
AI辅助安全测试案例某电商-供应链平台平台安全漏洞
【11月更文挑战第13天】该案例介绍了一家电商供应链平台如何利用AI技术进行全面的安全测试,包括网络、应用和数据安全层面,发现了多个潜在漏洞,并采取了有效的修复措施,提升了平台的整体安全性。
|
2月前
|
JSON Java 测试技术
SpringCloud2023实战之接口服务测试工具SpringBootTest
SpringBootTest同时集成了JUnit Jupiter、AssertJ、Hamcrest测试辅助库,使得更容易编写但愿测试代码。
70 3
|
2月前
|
监控 安全 测试技术
构建高效的精准测试平台:设计与实现指南
在软件开发过程中,精准测试是确保产品质量和性能的关键环节。一个精准的测试平台能够自动化测试流程,提高测试效率,缩短测试周期,并提供准确的测试结果。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
150 1
|
3月前
|
人工智能 监控 测试技术
云应用开发平台测试
云应用开发平台测试
82 2
|
2月前
|
监控 安全 测试技术
构建高效精准测试平台:设计与实现全攻略
在软件开发过程中,精准测试是确保产品质量的关键环节。一个高效、精准的测试平台能够自动化测试流程,提高测试覆盖率,缩短测试周期。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
71 0
|
3月前
|
JSON 算法 数据可视化
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
这篇文章是关于如何通过算法接口返回的目标检测结果来计算性能指标的笔记。它涵盖了任务描述、指标分析(包括TP、FP、FN、TN、精准率和召回率),接口处理,数据集处理,以及如何使用实用工具进行文件操作和数据可视化。文章还提供了一些Python代码示例,用于处理图像文件、转换数据格式以及计算目标检测的性能指标。
83 0
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
|
4月前
|
移动开发 JSON Java
Jmeter实现WebSocket协议的接口测试方法
WebSocket协议是HTML5的一种新协议,实现了浏览器与服务器之间的全双工通信。通过简单的握手动作,双方可直接传输数据。其优势包括极小的头部开销和服务器推送功能。使用JMeter进行WebSocket接口和性能测试时,需安装特定插件并配置相关参数,如服务器地址、端口号等,还可通过CSV文件实现参数化,以满足不同测试需求。
280 7
Jmeter实现WebSocket协议的接口测试方法