首頁 使用axios 傳送ajax請求

開啟碼雲 建立分支 index-ajax  

然後cd到資料夾  輸入 git pull  然後 git checkout index-ajax

然後輸入git status 如果不小心改動了其他檔案，會報錯，不想修改就輸入git checkout . 去除這次更改。然後git status

在vue中傳送ajax可以使用fetch 還有vue-resource 目前最火的是axios,在瀏覽器端axios可以幫助你傳送xhr請求，在node伺服器上可以傳送http請求，使用axios對ajax資料的請求。

先安裝 cd到資料夾 npm install  axios --save

然後重新啟動 npm run start

瀏覽觀察，發現列表項沒了，因為沒有把 分支程式碼合併到master分支上。

首先git clear

然後檢視輸入 git branch

上一節課的分支是index-recommend

現在把這個分支進行合併(merge是融合的意思) 輸入 git merge index-recommend  

在git status 然後npm run start.

現在傳送ajax請求，

因為首頁有5個元件組成，但是不能在每個頁面裡都進行ajax請求，所以在Home.vue裡只進行。

藉助生命週期函式來進行ajax資料請求。然後引入axios.。當頁面掛載好（mounted）之後，完成getHomeInfo函式的呼叫,這個函式幫助我們完成ajax資料的獲取，用get方法獲取一個url

axios返回的是一個promise物件，所以用.then,then裡寫一個方法，getHOmeInfoSucc，然後定義這個函式。資料獲取成功之後就console一下

axiosS

在沒有後端的支援下，如何進行資料的模擬呢。

第一步在static檔案下新建一個mock資料夾，在裡面新建一個index,json檔案

（只有static資料夾才可以被外部訪問）

這個路徑就可以被訪問

但是這個路徑

所以要把模擬資料放在 static資料夾裡。

但是不希望吧mock資料夾裡的內容新增到線上，就要開啟 主目錄下的

填寫

那axios請求路徑就要改一下

重新整理頁面 ，資料被請求到

上線之前改動程式碼是由風險的，所以資料請求的路徑不能那麼寫，在開發環境中依然這麼寫

，如果有個轉發機制可以幫助我們把對api資料夾下的json檔案轉發到本地的mock資料夾下就好了。vue裡提供了一個代理props功能。

第一步開啟config資料夾下的index,js檔案

通過完善proxyTable這個配置項就可以了。

當我們請求api這個目錄的時候，把請求轉發到當前的8080埠上，然後把路徑做一個替換pathRewrite,一旦請求的地址是‘以api開頭的’我就把它替換成這個路徑下的檔案。這個功能是webpack-dev-server提供的。

因為改了配置檔案，需要重新啟用一下 npm run start