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

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

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

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

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

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

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

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

代码如下：

先写好bom层删除函数：

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

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

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

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

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

@click是vue特有的点击事件，vue的基础大家可以关注公众号内的vue学习系列教程： vue学习

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

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

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

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

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

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

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

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

本节结束，欢迎追更。