Vue.js如何使用axios实现前后端数据交互

本篇内容主要讲解“Vue.js如何使用axios实现前后端数据交互”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue.js如何使用axios实现前后端数据交互”吧!

1.GET请求

方式一：

axios.get(site_url + "get_biz_list/").then(res => {     if (res.data.result){         this.bkBizData = res.data.data;     }else{         this.$message.error('获取业务失败');     } },'json');

对应后端代码：

def get_biz_list(request):     fields = ["bk_biz_id", "bk_biz_name"]     data = cc_search_business(fields)     return JsonResponse({"result": True, "data": data})

方式二：

axios.get(site_url + "search_host/?set_id=" + this.addSet).then(res => {     if (res.data.result){         this.hostData = res.data.data;     }else{         this.$message.error('获取业务失败');     } },'json');

对应后端代码

def search_host(request):     set_id = request.GET.get("set_id")     ...     return JsonResponse({"result": ...})

方式三：

axios.get(site_url + "host_view/",{params: {search_biz_id: this.searchBiz, query_str: this.searchHostIp}}).then(res => {     if (res.data.result){         this.hostData = res.data.data;     }else{         this.$message.error('获取模板失败');     } },'json');

对应后端代码

class HostView(CsrfExemptView):     def get(self, request, *args, **kwargs):         search_biz_id = request.GET.get("search_biz_id")         query_str = request.GET.get("query_str")         ...

2.POST请求

axios.post(site_url + "host_view/", {"host_id": row.host_id,"is_monitored": row.is_monitored}).then(res => {     if (res.data.result) {         if(row.is_monitored){             this.$message.success('主机移除监控队列成功');         } else {             this.$message.warning('主机加入监控队列成功');         }         this.getSearch();     } else {         this.$message.error('更新主机监控状态失败');     } }, 'json');

对应后端代码

class HostView(CsrfExemptView):     ...     def post(self, request, *args, **kwargs):         data = json.loads(request.body)         host_id = data.get("host_id")         is_monitored = data.get("is_monitored")         ...

3.PUT请求

axios.put(site_url + "temp_view/", this.editForm).then(res => {     if (res.data.result) {         this.$message.success('更新模板成功');         this.editDialog = false;         this.init();     } else {         this.$message.error('更新模板失败');     } }, 'json');

对应后端代码

class TemplateView(CsrfExemptView):     ...     def put(self, request, *args, **kwargs):         data = json.loads(request.body)         pk = data.get("pk")         bk_biz_id = data.get("edit_bk_biz").split(":")[0]         bk_biz_name = data.get("edit_bk_biz").split(":")[1]         temp_name = data.get("edit_temp_name")         script = data.get("edit_temp_script")         threshold = data.get("edit_temp_value")         note = data.get("edit_temp_note")         temp_obj = {             "bk_biz_id": bk_biz_id,             "bk_biz_name": bk_biz_name,             "temp_name": temp_name,             "script": script,             "threshold": threshold,             "note": note,         }         try:             Template.objects.filter(pk=pk).update(**temp_obj)             return JsonResponse({"result": True})         except Exception as e:             print(e)             return JsonResponse({"result": False})

4.Delete请求

axios.delete('/temp_view/',{data:{id:row.pk}}).then(res => {     if (res.data.result) {         this.$message.success('删除模板成功');         this.init();     } else {         this.$message.error('删除模板失败');     } }, 'json');

对应后端代码

class TemplateView(CsrfExemptView):     ...     def delete(self, request, *args, **kwargs):         data = json.loads(request.body)         pk = data.get("id")         try:             Template.objects.filter(pk=pk).delete()             return JsonResponse({"result": True})         except Exception:             return JsonResponse({"result": False})

到此，相信大家对“Vue.js如何使用axios实现前后端数据交互”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！