【本期目标】删除工具功能
删除功能,其实就是个删除接口,前端当点击删除的时候会给后端发送请求,让后端根据工具id去数据库删除对应的。
虽然这个简单的请求,还是可以用get请求来实现,但是相比较查询接口,这个删除要有三个特别的地方:
1. 删除请求需要带一个参数,即工具id
2. 删除请求需要按钮触发,并非查询接口的自动触发
3. 删除成功后,页面需要更新工具列表数据
首先就需要触发,那么点击谁来触发?当然是 删除按钮,也就是说点击这个按钮调用删除函数,并且要传递给工具id。
代码如下:
先写好bom层删除函数:
上图中,我们的所有自定义函数,都需要放在这个methods 属性内。
函数名是 del_tool ,参数tool_id , 发送axios请求 和上面的写法不同,加上了params这个请求体。请求体内参数会被自动拼接到url后面这个无需我们关心。
最终返回结果中,我们同样对tool_list进行重新赋值,相当于更新了最新的工具列表,所以注定这个函数的后端实现,返回体必须和查询的那个接口一样。
然后就是我们在dom层的删除按钮上调用这个函数即可:
上图中,通过@click = 函数名 的方式来实现点击后调用。
然后这里我们就面临下一个问题,这个删除按钮要如何把自己同一行的工具id当做参数传递给 del_tool函数呢?
首先我们要给这个按钮组包裹一层template,用来保存当前行的信息:
设置属性 slot-scope="scope" , 这个功能是vue的复杂嵌套。大家有兴趣可以研究下。
然后在调用del_tool函数中,传入的就是scope.row.id 最后这个.id就是当前行的数据字典中的那个id ,即工具id。
此时我们前端点击删除看一下 发出的请求是否正确:
通过观察,我们发现,点击不同工具的删除按钮,触发的请求最后的 tool_id的值是不同的,都是自己的工具id。
所以前端写成这样就是ok了。有的小伙伴会问,为什么404呢?
原因很简单,因为我们后台这个删除接口还没做呢?连urls.py都没有匹配设置,当然404 报找不到了...
本节结束,欢迎追更。