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实现前后端数据交互”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
网页题目：Vue.js如何使用axios实现前后端数据交互
文章源于：http://scyanting.com/article/ggshii.html
