接口测试平台代码实现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

相关文章
|
1月前
|
数据采集 机器学习/深度学习 大数据
行为检测代码(一):超详细介绍C3D架构训练+测试步骤
这篇文章详细介绍了C3D架构在行为检测领域的应用,包括训练和测试步骤,使用UCF101数据集进行演示。
36 1
行为检测代码(一):超详细介绍C3D架构训练+测试步骤
|
1月前
|
机器学习/深度学习 人工智能 监控
提升软件质量的关键路径:高效测试策略与实践在软件开发的宇宙中,每一行代码都如同星辰般璀璨,而将这些星辰编织成星系的过程,则依赖于严谨而高效的测试策略。本文将引领读者探索软件测试的奥秘,揭示如何通过精心设计的测试方案,不仅提升软件的性能与稳定性,还能加速产品上市的步伐,最终实现质量与效率的双重飞跃。
在软件工程的浩瀚星海中,测试不仅是发现缺陷的放大镜,更是保障软件质量的坚固防线。本文旨在探讨一种高效且创新的软件测试策略框架,它融合了传统方法的精髓与现代技术的突破,旨在为软件开发团队提供一套系统化、可执行性强的测试指引。我们将从测试规划的起点出发,沿着测试设计、执行、反馈再到持续优化的轨迹,逐步展开论述。每一步都强调实用性与前瞻性相结合,确保测试活动能够紧跟软件开发的步伐,及时适应变化,有效应对各种挑战。
|
5天前
|
JSON Java 测试技术
SpringCloud2023实战之接口服务测试工具SpringBootTest
SpringBootTest同时集成了JUnit Jupiter、AssertJ、Hamcrest测试辅助库,使得更容易编写但愿测试代码。
29 3
|
8天前
|
监控 安全 测试技术
构建高效的精准测试平台:设计与实现指南
在软件开发过程中,精准测试是确保产品质量和性能的关键环节。一个精准的测试平台能够自动化测试流程,提高测试效率,缩短测试周期,并提供准确的测试结果。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
40 1
|
1月前
|
测试技术
自动化测试项目学习笔记(五):Pytest结合allure生成测试报告以及重构项目
本文介绍了如何使用Pytest和Allure生成自动化测试报告。通过安装allure-pytest和配置环境,可以生成包含用例描述、步骤、等级等详细信息的美观报告。文章还提供了代码示例和运行指南,以及重构项目时的注意事项。
150 1
自动化测试项目学习笔记(五):Pytest结合allure生成测试报告以及重构项目
|
26天前
|
人工智能 监控 测试技术
云应用开发平台测试
云应用开发平台测试
42 2
|
8天前
|
监控 安全 测试技术
构建高效精准测试平台:设计与实现全攻略
在软件开发过程中,精准测试是确保产品质量的关键环节。一个高效、精准的测试平台能够自动化测试流程,提高测试覆盖率,缩短测试周期。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
29 0
|
1月前
|
JSON 算法 数据可视化
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
这篇文章是关于如何通过算法接口返回的目标检测结果来计算性能指标的笔记。它涵盖了任务描述、指标分析(包括TP、FP、FN、TN、精准率和召回率),接口处理,数据集处理,以及如何使用实用工具进行文件操作和数据可视化。文章还提供了一些Python代码示例,用于处理图像文件、转换数据格式以及计算目标检测的性能指标。
56 0
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
|
2月前
|
移动开发 JSON Java
Jmeter实现WebSocket协议的接口测试方法
WebSocket协议是HTML5的一种新协议,实现了浏览器与服务器之间的全双工通信。通过简单的握手动作,双方可直接传输数据。其优势包括极小的头部开销和服务器推送功能。使用JMeter进行WebSocket接口和性能测试时,需安装特定插件并配置相关参数,如服务器地址、端口号等,还可通过CSV文件实现参数化,以满足不同测试需求。
230 7
Jmeter实现WebSocket协议的接口测试方法
|
2月前
|
JSON 移动开发 监控
快速上手|HTTP 接口功能自动化测试
HTTP接口功能测试对于确保Web应用和H5应用的数据正确性至关重要。这类测试主要针对后台HTTP接口,通过构造不同参数输入值并获取JSON格式的输出结果来进行验证。HTTP协议基于TCP连接,包括请求与响应模式。请求由请求行、消息报头和请求正文组成,响应则包含状态行、消息报头及响应正文。常用的请求方法有GET、POST等,而响应状态码如2xx代表成功。测试过程使用Python语言和pycurl模块调用接口,并通过断言机制比对实际与预期结果,确保功能正确性。
242 3
快速上手|HTTP 接口功能自动化测试

热门文章

最新文章