Vue如何mock數據模擬Ajax請求

        咱們在作一個項目時前期可能沒有後端提供接口模擬數據，那麼做爲前端就須要本身寫json文件模擬數據加載。網上每每參考的都是不全面的，好比get請求沒問題可是post請求就報錯了。在Vue中只須要vue-resource（也可使用axios，安裝方法和vue-resource同樣，具體使用方法能夠去axios官網查看，在這裏我使用vue的插件vue-resource）和body-parser模塊（查看具體使用方法）互相配合就能夠實現get、post不一樣請求類型的數據模擬了。

        1.安裝vue-resource插件（Ajax請求）和body-parser模塊（mock數據，對post請求的模塊）：

            npm install vue-resource --save --registry=https://registry.npm.taobao.org --verbose

            npm install body-parser --save --registry=https://registry.npm.taobao.org --verbose

 

        2.安裝成功後在main.js引入依賴vue-resource，此時在Vue裏就能夠用$http進行Ajax請求了， 查看具體使用方法。：

        3.在build文件夾的dev-server.js文件進行服務配置，具體以下圖所示：

 

        注意：(1).因爲咱們Vue開啓的本地服務是localhost:8080，因此mock數據監控的端口不能是8080，只要不衝突就能夠，我這裏用的是localhost:8081，因此圖中第100行是port+1。

                (2).圖中第87行的data.json就是咱們的假數據文件，通常放在和index.html同級目錄下，若不一樣級則須要修改路徑。

                (3).若是沒有用代理訪問，第99行的第一個參數直接寫接口名字就能夠了，但通常咱們會用代理訪問，因此這裏寫的是‘/api’，代理設置在下一步驟說明。

 

        4.同時咱們須要作一個代理表，這裏我用api，訪問這個代理就能夠獲取到數據，在config文件夾的index.js文件進行代理配置，以下圖紅框所示：

        data.json文件隨意寫了個，以下圖所示：

        此時npm run dev從新開啓服務，輸入服務地址就能夠看到已經成功mock數據：

        6.接着就是在項目中用Ajax請求數據了，咱們在以前安裝了vue-resource插件而且進行依賴注入，在項目中能夠直接進行請求，以下圖所示：

        get請求：

 

        在控制檯輸出的效果以下所示：

        post請求：

 

        在控制檯輸出的效果以下所示：

      

        進一步console.log（res.data）輸出效果以下所示：

        至此咱們已經實現了在Vue項目mock數據模擬後臺請求，但願對你們有幫助。

 

 

 

        如需轉載請註明出處： http://www.cnblogs.com/zishang91/p/7680569.html，以便有錯誤能夠及時修改，如有錯漏不足之處，請見諒而且指點，謝謝！！！