axios和drf结合的增删改查

概述增删改查 查： 前端实例： mounted() { //获取所有数据 // var Base_url = ‘http://paas.bktst.sh.sgcc.com.cn/t/files-check/‘; this.$axios({ method:‘get‘, // url:Base_url+‘checkitems‘+‘/‘, url:‘/checkitems/‘, }

增删改查

查： 前端实例：

mounted() {            //获取所有数据 // var Base_url = ‘http://paas.bktst.sh.sgcc.com.cn/t/files-check/‘; this.$axios({ method:‘get‘,// url:Base_url+‘checkitems‘+‘/‘,url:‘/checkitems/‘,}).then(resp=>{ console.log(resp.data); this.tableData = resp.data; this.total = resp.data.length; }).catch(resp=>{ console.log(resp); }); 

后端代码实例：

class CheckItemsVIEwSet(vIEwsets.VIEwSet): ‘‘‘ List: 获取检查项 ‘‘‘ def List(self,request): queryset = CheckItems.objects.all() serializer = CheckItemsGetSerializer(queryset,many=True) return Response(serializer.data) 

增： 前端实例：

var data = { ‘name‘: this.formAdd.name,‘desc‘: this.formAdd.desc,‘check_item_class‘:this.formAdd.check_item_class,‘order‘:this.formAdd.order,‘is_score‘:this.is_score,‘is_file‘:this.is_file,‘collect_methods‘:this.collect_methods,‘object_type‘:this.object_type,‘file_name‘:this.formAdd.file_name,‘collect_script‘:this.formAdd.collect_script,‘collect_result_score‘:this.formAdd.collect_result_score }; this.$axios({ method: ‘post‘,headers: {‘X-CSrftoken‘: this.getcookie(‘csrftoken‘)},data: data,}).then(resp => { console.log(resp.data); console.log(resp.status); }).catch((resp) => { console.log(resp.status); }); 

后端代码实例：

class CheckItemsVIEwSet(vIEwsets.VIEwSet): ‘‘‘ create: 增加检查项 ‘‘‘ def create(self,request): serializer = CheckItemsUpdateSerializer(data = request.data) serializer.is_valID(raise_exception=True) serializer.save() return Response(serializer.data) 

改： 前端实例：

formEdit:{name:‘‘,desc:‘‘,collect_methods:‘‘,check_item_class:‘‘,order:‘‘,is_score:‘‘,is_file:‘‘,file_name:‘‘,object_type:‘‘,collect_script:‘‘,collect_result_score:‘‘,},var ID = this.formEdit.ID; var data = { ‘ID‘:this.formEdit.ID,‘name‘:this.formEdit.name,‘desc‘:this.formEdit.desc,‘check_item_class‘:this.formEdit.check_item_class,‘order‘:this.formEdit.order,‘file_name‘:this.formEdit.file_name,‘collect_script‘:this.formEdit.collect_script,‘collect_result_score‘:this.formEdit.collect_result_score,}; this.$axios({ method:‘put‘,// url:Base_url+‘checkitems‘+‘/‘+ID+‘/‘,url:‘/checkitems/‘+ID+‘/‘,}).then(resp=>{ // 刷新父级页面 parent.location.reload()； console.log(resp.data); console.log(resp.status); }).catch(resp=>{ console.log(resp.status); }); 

后端代码实例：

逻辑就是前端传ID进来，然后后端后去到ID,然后到数据库中查询通过ID然后找到数据，然后更改相应的字段class CheckItemsVIEwSet(vIEwsets.VIEwSet): def update(self,request,pk=None): obj = CheckItems.objects.get(ID = pk) #先到数据库中获取数据，然后在把前端的数据复制给数据库相关字段 data = request.data # 获取前端数据 obj.name = data[‘name‘] obj.desc = data[‘desc‘] obj.check_item_class = data[‘check_item_class‘] obj.order = data[‘order‘] if data[‘is_score‘] == ‘自动打分‘ or data[‘is_score‘] == 1:#根据前端传的数据，然后保存到数据库中；choice保存一定要保存数字 obj.is_score = 1 else: obj.is_score = 2 if data[‘is_file‘] == ‘导出文件‘ or data[‘is_file‘] == 1: obj.is_file = 1 else: obj.is_file = 2 if data[‘collect_methods‘] == ‘数据库‘ or data[‘collect_methods‘] ==1: obj.collect_methods = 1 else: obj.collect_methods = 2 if data[‘object_type‘] == ‘中间件‘ or data[‘object_type‘] == 1: obj.object_type = 1 elif data[‘object_type‘] == ‘数据库‘ or data[‘object_type‘] == 2 : obj.object_type = 2 else: obj.object_type = 3 obj.file_name = data[‘file_name‘] obj.collect_script = data[‘collect_script‘] obj.collect_result_score = data[‘collect_result_score‘] obj.save() serializer = CheckItemsGetSerializer(obj) return Response(serializer.data) 

删： 前端代码：

formEdit:{name:‘‘,var ID = this.formEdit.ID; this.axios({ method:‘delete‘,}).then(resp=>{ console.log(resp.status) }).catch(resp=>{ console.log(resp.status) }) 

后端代码实例：

class CheckItemsVIEwSet(vIEwsets.VIEwSet): def destory(self,pk=None): obj = CheckItems.objects.get(ID = pk) obj.delete()

作者：萌蛋酱链接：https://www.jianshu.com/p/f7309f3cd831

总结

以上是内存溢出为你收集整理的axios和drf结合的增删改查全部内容，希望文章能够帮你解决axios和drf结合的增删改查所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。