(简易)测试数据构造平台: 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天前
|
Java 测试技术 数据安全/隐私保护
软件测试中的自动化策略与工具应用
在软件开发的快速迭代中,自动化测试以其高效、稳定的特点成为了质量保证的重要手段。本文将深入探讨自动化测试的核心概念、常见工具的应用,以及如何设计有效的自动化测试策略,旨在为读者提供一套完整的自动化测试解决方案,帮助团队提升测试效率和软件质量。
|
16天前
|
Web App开发 IDE 测试技术
Selenium:强大的 Web 自动化测试工具
Selenium 是一款强大的 Web 自动化测试工具,包括 Selenium IDE、WebDriver 和 Grid 三大组件,支持多种编程语言和跨平台操作。它能有效提高测试效率,解决跨浏览器兼容性问题,进行性能测试和数据驱动测试,尽管存在学习曲线较陡、不稳定等缺点,但其优势明显,是自动化测试领域的首选工具。
112 17
Selenium:强大的 Web 自动化测试工具
|
26天前
|
机器学习/深度学习 人工智能 算法
BALROG:基准测试工具,用于评估 LLMs 和 VLMs 在复杂动态环境中的推理能力
BALROG 是一款用于评估大型语言模型(LLMs)和视觉语言模型(VLMs)在复杂动态环境中推理能力的基准测试工具。它通过一系列挑战性的游戏环境,如 NetHack,测试模型的规划、空间推理和探索能力。BALROG 提供了一个开放且细粒度的评估框架,推动了自主代理研究的进展。
37 3
BALROG:基准测试工具,用于评估 LLMs 和 VLMs 在复杂动态环境中的推理能力
|
7天前
|
前端开发 JavaScript 开发者
前端项目代码规范工具 (ESLint. Prettier. Stylelint. TypeScript)
前端项目代码规范工具 (ESLint. Prettier. Stylelint. TypeScript)
|
29天前
|
机器学习/深度学习 算法 UED
在数据驱动时代,A/B 测试成为评估机器学习项目不同方案效果的重要方法
在数据驱动时代,A/B 测试成为评估机器学习项目不同方案效果的重要方法。本文介绍 A/B 测试的基本概念、步骤及其在模型评估、算法改进、特征选择和用户体验优化中的应用,同时提供 Python 实现示例,强调其在确保项目性能和用户体验方面的关键作用。
33 6
|
1月前
|
前端开发 数据处理 Android开发
Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍
本文深入探讨了Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍,以及具体操作步骤、常见问题解决、高级调试技巧、团队协作中的调试应用和未来发展趋势,旨在帮助开发者提高调试效率,提升应用质量。
51 8
|
1月前
|
机器学习/深度学习 算法 UED
在数据驱动时代,A/B 测试成为评估机器学习项目效果的重要手段
在数据驱动时代,A/B 测试成为评估机器学习项目效果的重要手段。本文介绍了 A/B 测试的基本概念、步骤及其在模型评估、算法改进、特征选择和用户体验优化中的应用,强调了样本量、随机性和时间因素的重要性,并展示了 Python 在 A/B 测试中的具体应用实例。
30 1
|
8天前
|
监控 JavaScript 测试技术
postman接口测试工具详解
Postman是一个功能强大且易于使用的API测试工具。通过详细的介绍和实际示例,本文展示了Postman在API测试中的各种应用。无论是简单的请求发送,还是复杂的自动化测试和持续集成,Postman都提供了丰富的功能来满足用户的需求。希望本文能帮助您更好地理解和使用Postman,提高API测试的效率和质量。
45 11
|
1月前
|
JSON Java 测试技术
SpringCloud2023实战之接口服务测试工具SpringBootTest
SpringBootTest同时集成了JUnit Jupiter、AssertJ、Hamcrest测试辅助库,使得更容易编写但愿测试代码。
65 3
|
2月前
|
JSON 算法 数据可视化
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
这篇文章是关于如何通过算法接口返回的目标检测结果来计算性能指标的笔记。它涵盖了任务描述、指标分析(包括TP、FP、FN、TN、精准率和召回率),接口处理,数据集处理,以及如何使用实用工具进行文件操作和数据可视化。文章还提供了一些Python代码示例,用于处理图像文件、转换数据格式以及计算目标检测的性能指标。
79 0
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)