快捷導(dǎo)航

Vue CLI項(xiàng)目 axios模塊前后端交互的使用(類似ajax提交)

更新時(shí)間：2019年09月01日 08:34:07 作者：小小咸魚YwY

這篇文章主要介紹了Vue-CLI項(xiàng)目-axios模塊前后端交互的使用詳解(類似ajax提交),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

Vue-CLI項(xiàng)目-axios模塊前后端交互(類似ajax提交)08.31自我總結(jié)，內(nèi)容如下：

Vue-CLI項(xiàng)目-axios前后端交互

一.模塊的安裝

npm install axios --save
#--save可以不用寫

二.配置main.js

import axios from 'axios'
Vue.prototype.$axios = axios;

三.使用

created() { // 組件創(chuàng)建成功的鉤子函數(shù)
  // 拿到要訪問(wèn)課程詳情的課程id
  let id = this.$route.params.pk || this.$route.query.pk || 1;
  this.$axios({
    url: `http://127.0.0.1:8000/course/detail/${id}/`, // 后臺(tái)接口
    method: 'get', // 請(qǐng)求方式
  }).then(response => { // 請(qǐng)求成功
    console.log('請(qǐng)求成功');
    console.log(response.data);
    this.course_ctx = response.data; // 將后臺(tái)數(shù)據(jù)賦值給前臺(tái)變量完成頁(yè)面渲染
  }).catch(error => { // 請(qǐng)求失敗
    console.log('請(qǐng)求失敗');
    console.log(error);
  })
}

與ajax提交不同的一些設(shè)置

ajax 中的tyle這里是method
ajax中的success這里是them且不在大括號(hào)內(nèi)后面接著.出來(lái)
catch請(qǐng)失敗
內(nèi)容是在$axios之前

總結(jié)

以上所述是小編給大家介紹的Vue CLI項(xiàng)目 axios模塊前后端交互的使用(類似ajax提交)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

vue-cli 項(xiàng)目打包完成后運(yùn)行文件路徑報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了vue-cli 項(xiàng)目打包完成后運(yùn)行文件路徑報(bào)錯(cuò)問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
vue子組件設(shè)計(jì)provide和inject理解使用
這篇文章主要為大家介紹了vue子組件設(shè)計(jì)provide和inject理解及使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
vue如何使用router.meta.keepAlive對(duì)頁(yè)面進(jìn)行緩存
這篇文章主要介紹了vue如何使用router.meta.keepAlive對(duì)頁(yè)面進(jìn)行緩存問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
VUE?項(xiàng)目如何使用?Docker+Nginx進(jìn)行打包部署
使用?Docker,你可以創(chuàng)建一個(gè)包含?Vue.js?應(yīng)用程序的容器鏡像,并在任何支持?Docker?的環(huán)境中運(yùn)行該鏡像,這篇文章主要介紹了VUE?項(xiàng)目用?Docker+Nginx進(jìn)行打包部署,需要的朋友可以參考下
2024-06-06
vuejs父子組件之間數(shù)據(jù)交互詳解
這篇文章主要為大家詳細(xì)介紹了vuejs父子組件之間的數(shù)據(jù)交互，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
從0到1搭建Element的后臺(tái)框架的方法步驟
這篇文章主要介紹了從0到1搭建Element的后臺(tái)框架的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-04-04
在vue中使用echarts實(shí)現(xiàn)上浮與下鉆效果
這篇文章主要介紹了在vue中使用echarts實(shí)現(xiàn)上浮與下鉆效果,本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-11-11
vue日歷/日程提醒/html5本地緩存功能
這篇文章主要介紹了vue日歷/日程提醒/html5本地緩存功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-09-09
Vue 使用iframe引用html頁(yè)面實(shí)現(xiàn)vue和html頁(yè)面方法的調(diào)用操作
這篇文章主要介紹了Vue 使用iframe引用html頁(yè)面實(shí)現(xiàn)vue和html頁(yè)面方法的調(diào)用操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
vue實(shí)現(xiàn)動(dòng)態(tài)表格提交參數(shù)動(dòng)態(tài)生成控件的操作
這篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)表格提交參數(shù)動(dòng)態(tài)生成控件的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11