Vue CLI項(xiàng)目 axios模塊前后端交互的使用(類似ajax提交)
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ù)大家的!
- VUE 更好的 ajax 上傳處理 axios.js實(shí)現(xiàn)代碼
- vue使用Axios做ajax請(qǐng)求詳解
- 在Vue組件化中利用axios處理ajax請(qǐng)求的使用方法
- vue axios 在頁(yè)面切換時(shí)中斷請(qǐng)求方法 ajax
- vue結(jié)合axios與后端進(jìn)行ajax交互的方法
- vue 組件的封裝之基于axios的ajax請(qǐng)求方法
- vue項(xiàng)目使用axios發(fā)送請(qǐng)求讓ajax請(qǐng)求頭部攜帶cookie的方法
- Vue官方推薦AJAX組件axios.js使用方法詳解與API
- Vue通過(guò)axios發(fā)送ajax請(qǐng)求基礎(chǔ)演示
相關(guān)文章
Vue3解析markdown并實(shí)現(xiàn)代碼高亮顯示的詳細(xì)步驟
Vue的markdown解析庫(kù)有很多,如markdown-it、vue-markdown-loader、marked、vue-markdown等,這篇文章主要介紹了Vue3解析markdown并實(shí)現(xiàn)代碼高亮顯示,需要的朋友可以參考下2022-07-07vue項(xiàng)目實(shí)現(xiàn)路由跳轉(zhuǎn)到新頁(yè)面,返回舊頁(yè)面,保留之前的數(shù)據(jù)記錄(操作代碼)
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)路由跳轉(zhuǎn)到新頁(yè)面,返回舊頁(yè)面,保留之前的數(shù)據(jù)記錄,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09vue項(xiàng)目啟動(dòng)后沒有局域網(wǎng)地址問(wèn)題
這篇文章主要介紹了vue項(xiàng)目啟動(dòng)后沒有局域網(wǎng)地址問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09vue滾動(dòng)插件better-scroll使用詳解
這篇文章主要為大家詳細(xì)介紹了vue滾動(dòng)插件better-scroll,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10Vue動(dòng)畫之第三方類庫(kù)實(shí)現(xiàn)動(dòng)畫方式
這篇文章主要介紹了Vue動(dòng)畫之第三方類庫(kù)實(shí)現(xiàn)動(dòng)畫方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04vue.js評(píng)論發(fā)布信息可插入QQ表情功能
這篇文章主要為大家詳細(xì)介紹了vue.js評(píng)論發(fā)布信息可插入QQ表情功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08