增删改查
查：
前端实例：
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