(简易)测试数据构造平台: 14 (工具列表删除功能前端)

简介: (简易)测试数据构造平台: 14 (工具列表删除功能前端)

【本期目标】删除工具功能


   删除功能,其实就是个删除接口,前端当点击删除的时候会给后端发送请求,让后端根据工具id去数据库删除对应的。


   虽然这个简单的请求,还是可以用get请求来实现,但是相比较查询接口,这个删除要有三个特别的地方:


   1. 删除请求需要带一个参数,即工具id

   2. 删除请求需要按钮触发,并非查询接口的自动触发

   3. 删除成功后,页面需要更新工具列表数据


首先就需要触发,那么点击谁来触发?当然是 删除按钮,也就是说点击这个按钮调用删除函数,并且要传递给工具id。

代码如下:


   先写好bom层删除函数:

image.png

上图中,我们的所有自定义函数,都需要放在这个methods 属性内。

函数名是 del_tool ,参数tool_id , 发送axios请求 和上面的写法不同,加上了params这个请求体。请求体内参数会被自动拼接到url后面这个无需我们关心。

最终返回结果中,我们同样对tool_list进行重新赋值,相当于更新了最新的工具列表,所以注定这个函数的后端实现,返回体必须和查询的那个接口一样。


然后就是我们在dom层的删除按钮上调用这个函数即可:

image.png

上图中,通过@click = 函数名 的方式来实现点击后调用。


然后这里我们就面临下一个问题,这个删除按钮要如何把自己同一行的工具id当做参数传递给 del_tool函数呢?


首先我们要给这个按钮组包裹一层template,用来保存当前行的信息:


image.png

设置属性 slot-scope="scope" , 这个功能是vue的复杂嵌套。大家有兴趣可以研究下。

然后在调用del_tool函数中,传入的就是scope.row.id  最后这个.id就是当前行的数据字典中的那个id ,即工具id。


此时我们前端点击删除看一下 发出的请求是否正确:

image.png

通过观察,我们发现,点击不同工具的删除按钮,触发的请求最后的 tool_id的值是不同的,都是自己的工具id。


所以前端写成这样就是ok了。有的小伙伴会问,为什么404呢?


原因很简单,因为我们后台这个删除接口还没做呢?连urls.py都没有匹配设置,当然404 报找不到了...


本节结束,欢迎追更。

相关文章
|
2天前
|
数据采集 DataWorks 安全
DataWorks产品使用合集之选择独享调度,数据集成里可以使用,但是数据地图里面测试无法通过,是什么原因导致的
DataWorks作为一站式的数据开发与治理平台,提供了从数据采集、清洗、开发、调度、服务化、质量监控到安全管理的全套解决方案,帮助企业构建高效、规范、安全的大数据处理体系。以下是对DataWorks产品使用合集的概述,涵盖数据处理的各个环节。
9 0
DataWorks产品使用合集之选择独享调度,数据集成里可以使用,但是数据地图里面测试无法通过,是什么原因导致的
|
4天前
|
存储 测试技术
【工作实践(多线程)】十个线程任务生成720w测试数据对系统进行性能测试
【工作实践(多线程)】十个线程任务生成720w测试数据对系统进行性能测试
12 0
【工作实践(多线程)】十个线程任务生成720w测试数据对系统进行性能测试
|
5天前
|
存储 测试技术 Python
记一次线上安全测试中误用父类属性导致数据污染的解决方案
在线上安全测试的过程中,会使用 Nmap 进行端口扫描,为了提升端口扫描的效率,扫描策略通常是检测常用端口是否处于开放状态,并在父类中使用名为 all_open_ports 的属性来记录这些开放的端口。 在后续的测试过程中,需要检查所涉及的端口是否包含在 all_open_ports 中。如果不存在,就需要进一步对这些端口进行开放检测。如果端口的检测结果是开放的,测试将继续进行并将这些端口记录到 all_open_ports 中,以便在下次遇到相同端口时无需重复检测。 然而,由于安全测试是多线程进行的,某些情况下可以将 all_open_ports 理解为共享变量,这导致当两个不同的测试环境同
|
3天前
|
SQL 数据采集 DataWorks
DataWorks操作报错合集之数据集成里面的数据调度独享资源组测试通过了,但是数据地图里无法通过,该如何解决
DataWorks是阿里云提供的一站式大数据开发与治理平台,支持数据集成、数据开发、数据服务、数据质量管理、数据安全管理等全流程数据处理。在使用DataWorks过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
|
3天前
|
jenkins Java 测试技术
电商返利平台的测试与持续集成
电商返利平台的测试与持续集成
|
4天前
|
XML 测试技术 Linux
技术笔记:sipp重放rtp数据测试FreeSWITCH
技术笔记:sipp重放rtp数据测试FreeSWITCH
|
12天前
|
JSON Java Maven
使用`MockMvc`来测试带有单个和多个请求参数的`GET`和`POST`接口
使用`MockMvc`来测试带有单个和多个请求参数的`GET`和`POST`接口
23 3
|
2月前
|
NoSQL 安全 测试技术
接口测试用例设计的关键步骤与技巧解析
该文介绍了接口测试的设计和实施,包括测试流程、质量目标和用例设计方法。接口测试在需求分析后进行,关注功能、性能、安全等六项质量目标。流程包括网络监听(如TcpDump, WireShark)和代理工具(Charles, BurpSuite, mitmproxy, Fiddler, AnyProxy)。设计用例时,需考虑基本功能流程、输入域测试(如边界值、特殊字符、参数类型、组合参数、幂等性)、线程安全(并发和分布式测试)以及故障注入。接口测试用例要素包括模块、标题、优先级、前置条件、请求方法等。文章强调了保证接口的幂等性和系统健壮性的测试重要性。
58 5
|
5天前
|
存储 JSON 测试技术
软件测试之 接口测试 Postman使用(下)
软件测试之 接口测试 Postman使用(下)
14 2
|
5天前
|
测试技术 数据格式
软件测试之 接口测试 Postman使用(上)
软件测试之 接口测试 Postman使用(上)
13 1