vue框架搭建--axios使用

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

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

1、安裝

cnpm install axios --save-dev

2、引入

main.js 文件引入：　　

　　import Vue from 'vue'//引入vue

　　import axios from 'axios'//引入axios

　　Vue.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官方推薦）方案，待詳細研究后再來補充