本篇內(nèi)容主要講解“Vue.js如何使用axios實(shí)現(xiàn)前后端數(shù)據(jù)交互”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“Vue.js如何使用axios實(shí)現(xiàn)前后端數(shù)據(jù)交互”吧!

為碧江等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及碧江網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、碧江網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

1.GET請(qǐng)求

方式一：

axios.get(site_url + "get_biz_list/").then(res => {
    if (res.data.result){
        this.bkBizData = res.data.data;
    }else{
        this.$message.error('獲取業(yè)務(wù)失敗');
    }
},'json');

對(duì)應(yīng)后端代碼：

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('獲取業(yè)務(wù)失敗');
    }
},'json');

對(duì)應(yīng)后端代碼

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');

對(duì)應(yīng)后端代碼

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請(qǐng)求

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('主機(jī)移除監(jiān)控隊(duì)列成功');
        } else {
            this.$message.warning('主機(jī)加入監(jiān)控隊(duì)列成功');
        }
        this.getSearch();
    } else {
        this.$message.error('更新主機(jī)監(jiān)控狀態(tài)失敗');
    }
}, 'json');

對(duì)應(yīng)后端代碼

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請(qǐng)求

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');

對(duì)應(yīng)后端代碼

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請(qǐng)求

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

對(duì)應(yīng)后端代碼

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})

到此，相信大家對(duì)“Vue.js如何使用axios實(shí)現(xiàn)前后端數(shù)據(jù)交互”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！