您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容主要讲解“Vue.js如何使用axios实现前后端数据交互”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue.js如何使用axios实现前后端数据交互”吧!
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") ...
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") ...
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})
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实现前后端数据交互”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。