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',
  // url:Base_url+'checkitems'+'/',
  url:'/checkitems/',
  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,

  'is_score':this.is_score,
  'is_file':this.is_file,
  'collect_methods':this.collect_methods,
  'object_type':this.object_type,

  '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+'/',
  data: data,
}).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:'',
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;
this.axios({
    method:'delete',
    // url:Base_url+'checkitems'+'/'+id+'/',
    url:'/checkitems/'+id+'/',

    }).then(resp=>{
        console.log(resp.status)
    }).catch(resp=>{
        console.log(resp.status)
    })

后端代码实例：

class CheckItemsViewSet(viewsets.ViewSet):
    def destory(self,request,pk=None):
        obj = CheckItems.objects.get(id = pk)
        obj.delete()

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