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/‘,}).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()