(简易)测试数据构造平台: 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 报找不到了...


本节结束,欢迎追更。

相关文章
|
23小时前
|
测试技术
如何管理测试用例?测试用例有什么管理工具?YesDev
该文档介绍了测试用例和测试用例库的管理。测试用例是描述软件测试方案的详细步骤,包括测试目标、环境、输入、步骤和预期结果。测试用例库用于组织和管理这些用例,强调简洁性、完整性和可维护性。管理者可以创建、删除、重命名用例库,搜索和管理用例,以及通过层级目录结构来组织用例。此外,还支持通过Excel导入和导出测试用例,以及使用脑图查看用例关系。后台管理允许配置全局别名,如用例状态、优先级和执行结果。
|
1天前
|
机器学习/深度学习 人工智能 运维
深入探索软件测试:策略、工具与未来趋势
【5月更文挑战第14天】在软件开发的生命周期中,测试环节扮演着至关重要的角色。它不仅保证产品能够达到预定的质量标准,还有助于提前发现并修复潜在的缺陷,从而减少维护成本和提高用户满意度。本文将深入探讨当前软件测试领域的最佳实践,包括测试策略的制定、工具的选择以及面对快速变化的技术环境如何保持测试活动的前瞻性和灵活性。通过分析自动化测试、性能测试和安全测试等关键领域,本文旨在为读者提供一个全面的软件测试指南,同时对未来的发展趋势进行预测。
|
1天前
|
前端开发 小程序 测试技术
前端后端测试接口mork神器,Apifox使用一分钟入门
前端后端测试接口mork神器,Apifox使用一分钟入门
11 0
|
1天前
|
SQL 测试技术 网络安全
Python之SQLMap:自动SQL注入和渗透测试工具示例详解
Python之SQLMap:自动SQL注入和渗透测试工具示例详解
24 0
|
1天前
|
前端开发 JavaScript Java
java测试链接超时返回前端
java测试链接超时返回前端
18 0
|
1天前
|
JSON 前端开发 JavaScript
快照测试在前端自动化测试中的应用
在前端自动化测试中,快照测试常用于检验组件渲染与布局。
|
1天前
|
测试技术 API
探索软件测试中的自动化工具与挑战
本文探讨了软件测试领域中自动化工具的应用与挑战。通过分析目前主流的自动化测试工具,探讨了其在提高测试效率、减少人工成本、增强测试覆盖率等方面的优势。然而,自动化测试也面临着诸如脆弱性、维护成本高等挑战。最后,提出了一些应对挑战的建议,以期为软件测试领域的自动化工作提供一些启示。
16 1
|
1天前
|
机器学习/深度学习 人工智能 测试技术
提升软件测试效率与准确性的策略与工具
【5月更文挑战第2天】 在软件开发生命周期中,测试阶段是确保产品质量的关键。然而,传统的测试方法往往耗时且容易出错。本文将探讨一系列现代软件测试策略和工具,旨在提高测试效率和准确性。我们将分析自动化测试框架、持续集成(CI)、测试驱动开发(TDD)以及人工智能(AI)在测试中的应用,并讨论如何结合这些技术和方法来优化测试流程。
|
1天前
|
敏捷开发 监控 测试技术
探索自动化测试工具Selenium Grid的高效集成策略
【4月更文挑战第30天】在现代Web应用的快速迭代和持续部署中,测试自动化已成为确保产品质量的关键。Selenium Grid作为一款支持多种浏览器和操作系统的测试工具,提供了并行执行测试用例的能力,极大地提升了测试效率。本文将深入探讨如何高效地将Selenium Grid集成到现有的测试框架中,以及实施过程中的最佳实践,帮助团队最大化测试覆盖率,同时降低资源消耗。
|
1天前
|
网络协议 安全 测试技术
性能工具之emqtt-bench BenchMark 测试示例
【4月更文挑战第19天】在前面两篇文章中介绍了emqtt-bench工具和MQTT的入门压测,本文示例 emqtt_bench 对 MQTT Broker 做 Beachmark 测试,让大家对 MQTT消息中间 BenchMark 测试有个整体了解,方便平常在压测工作查阅。
126 7
性能工具之emqtt-bench BenchMark 测试示例
http://www.vxiaotou.com