Vue CLI項(xiàng)目 axios模塊前后端交互的使用(類似ajax提交)
更新時間：2019年09月01日 08:34:07 作者：小小咸魚YwY
這篇文章主要介紹了Vue-CLI項(xiàng)目-axios模塊前后端交互的使用詳解(類似ajax提交),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
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ù)
// 拿到要訪問課程詳情的課程id
let id = this.$route.params.pk || this.$route.query.pk || 1;
this.$axios({
url: `http://127.0.0.1:8000/course/detail/${id}/`, // 后臺接口
method: 'get', // 請求方式
}).then(response => { // 請求成功
console.log('請求成功');
console.log(response.data);
this.course_ctx = response.data; // 將后臺數(shù)據(jù)賦值給前臺變量完成頁面渲染
}).catch(error => { // 請求失敗
console.log('請求失敗');
console.log(error);
})
}
與ajax提交不同的一些設(shè)置
- ajax 中的tyle這里是method
- ajax中的success這里是them且不在大括號內(nèi)后面接著.出來
- catch請失敗
- 內(nèi)容是在$axios之前
總結(jié)
以上所述是小編給大家介紹的Vue CLI項(xiàng)目 axios模塊前后端交互的使用(類似ajax提交)，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
Vue3解析markdown并實(shí)現(xiàn)代碼高亮顯示的詳細(xì)步驟
Vue的markdown解析庫有很多，如markdown-it、vue-markdown-loader、marked、vue-markdown等，這篇文章主要介紹了Vue3解析markdown并實(shí)現(xiàn)代碼高亮顯示,需要的朋友可以參考下2022-07-07
vue項(xiàng)目實(shí)現(xiàn)路由跳轉(zhuǎn)到新頁面,返回舊頁面,保留之前的數(shù)據(jù)記錄(操作代碼)
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)路由跳轉(zhuǎn)到新頁面，返回舊頁面，保留之前的數(shù)據(jù)記錄,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
vue項(xiàng)目啟動后沒有局域網(wǎng)地址問題
這篇文章主要介紹了vue項(xiàng)目啟動后沒有局域網(wǎng)地址問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
這篇文章主要介紹了vue實(shí)現(xiàn)微信獲取用戶信息的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
今天小編就為大家分享一篇關(guān)于實(shí)例講解v-if和v-show的區(qū)別，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要為大家詳細(xì)介紹了vue滾動插件better-scroll，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了Vue動畫之第三方類庫實(shí)現(xiàn)動畫方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue中內(nèi)置了很多的指令,但有時候這些指令并不能滿足我們,或者說我們想為元素附加一些特別的功能,這時候我們就需要用到vue中一個很強(qiáng)大的功能了—自定義指令,這篇文章主要給大家介紹了關(guān)于vue中自定義指令（directive）的基本使用方法,需要的朋友可以參考下2021-09-09
這篇文章主要給大家介紹的是vue2 vue3中使用Echarts的相關(guān)資料，下面文章 會詳細(xì)介紹該內(nèi)容，感興趣的小伙伴不要錯過喲2021-09-09
這篇文章主要為大家詳細(xì)介紹了vue.js評論發(fā)布信息可插入QQ表情功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08