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ù)
// 拿到要訪問課程詳情的課程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', // 請求方式
}).then(response => { // 請求成功
console.log('請求成功');
console.log(response.data);
this.course_ctx = response.data; // 將后臺(tái)數(shù)據(jù)賦值給前臺(tái)變量完成頁面渲染
}).catch(error => { // 請求失敗
console.log('請求失敗');
console.log(error);
})
}
與ajax提交不同的一些設(shè)置
- ajax 中的tyle這里是method
- ajax中的success這里是them且不在大括號(hào)內(nèi)后面接著.出來
- catch請失敗
- 內(nèi)容是在$axios之前
總結(jié)
以上所述是小編給大家介紹的Vue CLI項(xiàng)目 axios模塊前后端交互的使用(類似ajax提交)，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
vue-cli 項(xiàng)目打包完成后運(yùn)行文件路徑報(bào)錯(cuò)問題
這篇文章主要介紹了vue-cli 項(xiàng)目打包完成后運(yùn)行文件路徑報(bào)錯(cuò)問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(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對頁面進(jìn)行緩存
這篇文章主要介紹了vue如何使用router.meta.keepAlive對頁面進(jìn)行緩存問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(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
這篇文章主要為大家詳細(xì)介紹了vuejs父子組件之間的數(shù)據(jù)交互，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了從0到1搭建Element的后臺(tái)框架的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
在vue中使用echarts實(shí)現(xiàn)上浮與下鉆效果
這篇文章主要介紹了在vue中使用echarts實(shí)現(xiàn)上浮與下鉆效果,本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-11-11
這篇文章主要介紹了vue日歷/日程提醒/html5本地緩存功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
Vue 使用iframe引用html頁面實(shí)現(xiàn)vue和html頁面方法的調(diào)用操作
這篇文章主要介紹了Vue 使用iframe引用html頁面實(shí)現(xiàn)vue和html頁面方法的調(diào)用操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧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à)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11