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

发布时间:2021-06-25 13:43:13 作者:chen
来源:亿速云 阅读:1910

本篇内容主要讲解“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实现前后端数据交互”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. 怎么在vue中利用axios实现数据交互
  2. json前后端数据交互相关代码

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue.js axios

上一篇:Jenkins CLI命令行v0.0.21新增哪些功能

下一篇:PHP如何实现原比例生成缩略图

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》