前后端數據交互作為項目最基礎需求（靜態的除外），同時也是項目中最重要的需求。

本文重點介紹axios如何配合vue搭建項目框架，而axios的詳細使用介紹請移步 使用說明

1、安裝

cnpm install axios --save-dev

2、引入

main.js 文件引入：

import Vue from 'vue'//引入vueimport axios from 'axios'//引入axiosVue.prototype.$axios = axios;//把axios掛載到vue上

3、使用

　　　　　getStore(){      let that = this      that.$axios({        method: "post",//指定請求方式        url: "/business-app/getCityShopList.cgi",//請求接口（相對接口，后面會介紹到）        data: {          cityId: cityId,          data:{},          isDebug:"1",          longitude: "",          latitude: ""        }      })      .then(function(res){        //接口成功返回結果執行      })      .catch(function(err){　　　　　　　　　　//請求失敗或者接口返回失敗或者.then()中的代碼發生錯誤時執行      })    }

4、跨域與代理

在vue本地開發時請求總是發生跨域

解決方案：配置代理

config 下的index.js 文件

proxyTable: {    '/business-app/*': {      target: 'http://****:8080',//被代理的接口            changeOrigin: true,      secure:true // 如果是https接口，需要配置這個參數    }  },

　　當URL以 '/business-app/'層級開端時，把 'http://****:8080' 代理成本地IP

5、 baseURL與代理

兩者用途不一樣，

baseUrl會附加到你綁定的axios實例（如果是全局的，那就是所有實例）上，即如果get/post的url參數是相對路徑（如） /api/c/xx，那就會執行 baseUrl + '/api/c/xx',如果未指定baseUrl，那就走瀏覽器地址欄里的base + baseUrl。

webpack里的proxyTable是測試環境為了避免瀏覽器下的跨域訪問，而以nodejs代理成同前端頁面（即瀏覽器地址欄）同域的一種處理。指定proxyTable后， axios就不需要指定baseUrl了。proxyTable會把base + '/api/c/xx'代理到【base baseUrl + '/api/c/xx'】的接口地址上。

當然工程發布時，后端和前端也需要發布到同一個域下。

6、axios與vue-axios

先看兩者的用法

Vue.prototype.$axios = axios和import Vueaxios from ‘vue-axios'Vue.use(VueAxios,axios)

解釋：使用vue-axios更多是為了符合規范，并且方便協作

7、其他待補充

對于跨域的處理，除了采用代理外，也可用JSONP或者Qs（axios官方推薦）方案，待詳細研究后再來補充

總結

以上所述是小編給大家介紹的vue框架搭建之axios使用教程，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！