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


本节结束,欢迎追更。

相关文章
|
7天前
|
安全 前端开发 测试技术
如何选择合适的自动化安全测试工具
选择合适的自动化安全测试工具需考虑多个因素,包括项目需求、测试目标、系统类型和技术栈,工具的功能特性、市场评价、成本和许可,以及集成性、误报率、社区支持、易用性和安全性。综合评估这些因素,可确保所选工具满足项目需求和团队能力。
|
6天前
|
监控 网络协议 Java
一些适合性能测试脚本编写和维护的工具
一些适合性能测试脚本编写和维护的工具
|
6天前
|
安全 网络协议 关系型数据库
最好用的17个渗透测试工具
渗透测试是安全人员为防止恶意黑客利用系统漏洞而进行的操作。本文介绍了17款业内常用的渗透测试工具,涵盖网络发现、无线评估、Web应用测试、SQL注入等多个领域,包括Nmap、Aircrack-ng、Burp Suite、OWASP ZAP等,既有免费开源工具,也有付费专业软件,适用于不同需求的安全专家。
10 2
|
14天前
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
45 4
|
12天前
|
监控 安全 测试技术
构建高效的精准测试平台:设计与实现指南
在软件开发过程中,精准测试是确保产品质量和性能的关键环节。一个精准的测试平台能够自动化测试流程,提高测试效率,缩短测试周期,并提供准确的测试结果。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
50 1
|
17天前
|
Web App开发 定位技术 iOS开发
Playwright 是一个强大的工具,用于在各种浏览器上测试应用,并模拟真实设备如手机和平板。通过配置 `playwright.devices`,可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外,Playwright 还支持模拟地理位置、区域设置、时区、权限(如通知)和配色方案,使测试更加全面和真实。例如,可以在配置文件中设置全局的区域设置和时区,然后在特定测试中进行覆盖。同时,还可以动态更改地理位置和媒体类型,以适应不同的测试需求。
Playwright 是一个强大的工具,用于在各种浏览器上测试应用,并模拟真实设备如手机和平板。通过配置 `playwright.devices`,可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外,Playwright 还支持模拟地理位置、区域设置、时区、权限(如通知)和配色方案,使测试更加全面和真实。例如,可以在配置文件中设置全局的区域设置和时区,然后在特定测试中进行覆盖。同时,还可以动态更改地理位置和媒体类型,以适应不同的测试需求。
17 1
|
25天前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇(六):发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型,详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据,包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据,并使用 MiniMongo 实现实时数据同步。此外,还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组,实现数据的自动更新。
|
25天前
|
JSON 分布式计算 前端开发
前端的全栈之路Meteor篇(七):轻量的NoSql分布式数据协议同步协议DDP深度剖析
本文深入探讨了DDP(Distributed Data Protocol)协议,这是一种在Meteor框架中广泛使用的发布/订阅协议,支持实时数据同步。文章详细介绍了DDP的主要特点、消息类型、协议流程及其在Meteor中的应用,包括实时数据同步、用户界面响应、分布式计算、多客户端协作和离线支持等。通过学习DDP,开发者可以构建响应迅速、适应性强的现代Web应用。
|
12天前
|
监控 安全 测试技术
构建高效精准测试平台:设计与实现全攻略
在软件开发过程中,精准测试是确保产品质量的关键环节。一个高效、精准的测试平台能够自动化测试流程,提高测试覆盖率,缩短测试周期。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
35 0
|
25天前
|
NoSQL 前端开发 MongoDB
前端的全栈之路Meteor篇(三):运行在浏览器端的NoSQL数据库副本-MiniMongo介绍及其前后端数据实时同步示例
MiniMongo 是 Meteor 框架中的客户端数据库组件,模拟了 MongoDB 的核心功能,允许前端开发者使用类似 MongoDB 的 API 进行数据操作。通过 Meteor 的数据同步机制,MiniMongo 与服务器端的 MongoDB 实现实时数据同步,确保数据一致性,支持发布/订阅模型和响应式数据源,适用于实时聊天、项目管理和协作工具等应用场景。