vue + django 批量删除
简单的代码逻辑
views.py
# 批量删除
class Pdels(APIView):
def post(self,request):
id = request.data.get('piliang') #获取前端传过来的值
ss=Stu.objects.filter(id__in=id).delete() #去表里查询 前端的id是否在 表里的id字段中 id__in
if not ss: #如果不在
#返回给前端信息
return Response({'code': 10020, 'message': '删除失败'})
#如果在 返回给前端信息
return Response({'code':200,'message':'删除成功'})
vue 代码
写一个input 复选框的模式
<h1>展示学生</h1>
<table border="1">
<tr>
<td>学生姓名</td>
<td>学生照片</td>
<td>操作</td>
<td>多选</td>
<td>修改</td>
</tr>
<tr v-for="i in aa">
<td>{{i.name}}</td>
<td><img :src="'http://127.0.0.1:8000/'+i.img" height="100"></td>
<td><button v-on:click="dels(i.id)">删除</button></td>
<td><input type="checkbox" v-model="piliang" :value="i.id">批量删除</td>
<td><router-link :to="{'name':'uploads',params:{'id':i.id}}">修改</router-link></td>
</tr>
<button v-on:click="delsa">批量删除</button> 写一个按钮的点击事件
</table>
在初始化赋值
export default {
name: "showstu",
components: {
showstu2:showstu2
},
data:function () {
return{
piliang:[],
}
},
执行点击事件
delsa:function () {
this.axios({
url:'/api/a/pdels/', //后台接口
data:{'piliang':this.piliang}, // 传给后台的值
method:'post'
}).then(res=>{
console.log(res) //在页面中打印后台传给前端的信息
if (res.data.code==200){
alert(res.data.message) alert 后端正确的信息
this.$router.go() //刷新页面
}else{ // alert 后端的错误信息
alert(res.data.message)
}
}).catch(err=>{
})
}
}