目錄

• 一、為什麽要mock數據？
• 二、如何mock數據？
• 三、webpack本地代理配置
• 四、mockjs使用
• 五、easymock使用

一、為什麽要mock數據？

VUE項目開發過程中，前後端是完全分離，後端負責提供數據，前端負責數據展示，因此就會存在這種情況：前端需要用到數據接口的時候，後端還沒開發出來，此時前端就要掛起嗎？當然不是了，我們要解決的就是如何給前端模擬數據？從而實現前後端完全獨立開發。

二、如何mock數據？

在團隊協作過程中，在人員角色分工明確的情況下，我們可以先根據產品功能文檔，定義好一份前後端交互的api文檔，開發人員可根據api文檔獨立編碼；後端比較簡單，按api文檔實現相應的接口，並為接口編寫單元測試，mock前端請求參數即可；而前端可以引入第三者，mock接口返回結果。

如何搭建Mock API:

• 本地json文件
  這是最原始的方法了，直接將接口返回的結果，寫死在本地文本文件中，如user.json，這種方式也是可以，只是會汙染到我們的代碼，到了項目上線的，需要修改代碼請求接口；
• 本地mock api或遠程mock api
  本地用mockjs，遠程用easymock，這兩種都可以，可以非常靈活的模擬真實api請求交互，如：http://mockapi/user模擬http://restapi/user，前後端開發完成後，可以通過修改api host一鍵切換至我們的api。

三、webpack本地代理配置

我們在本地開發的時候，調用遠程api，存在ajax跨域請求的問題，此時可通過webpack proxy配置，實現本地請求轉發至遠程，解決跨域問題。
找到config/index.js修改proxyTable，如下：

    proxyTable: {
      ‘/refundApi‘: {
        target: ‘https://easy-mock.com/mock/5af0f80305d45458a763bc65‘, // 接口的域名
        // secure: false, // 如果是https接口，需要配置這個參數
        changeOrigin: true, // 如果接口跨域，需要進行這個參數配置
        pathRewrite: {
          ‘^/refundApi‘: ‘‘
        }
      }
    },

假如vue的啟動端口是8081，即http://localhost:8081

四、mockjs使用

Mock.js is a simulation data generator to help the front-end to develop and prototype separate from the back-end progress and reduce some monotony particularly while writing automated tests.
The official site: http://mockjs.com

• vue安裝mockjs

npm install mockjs

• vue中使用mockjs
  示例：http://mockjs.com/examples.html

數據模板格式:

‘name|rule‘: value
屬性名|生成規則: 屬性值

定義mock api：

// mock/user.js
import Mock from ‘mockjs‘;//es6語法引入mock模塊
Mock.mock(‘/test/‘, {
    // 屬性 list 的值是一個數組，其中含有5個元素
    ‘list|5‘: [{
        ‘url‘: ‘@url‘
    }]
});

調用mock api：

// use in test.vue
import axios from ‘axios‘
import data from ‘../mock/user.js‘

axios.get(‘/test/‘).then(function(res){
   var data = res.data;
   console.log(JSON.stringify(data));
}).catch(function(err){
  console.log(err);
});

請求成功，輸出結果：

{
    "list": [
        {
            "url": "http://pqibpj.gt/tqreffku"
        },
        {
            "url": "tn3270://huqptk.tv/wejcc"
        },
        {
            "url": "mid://kncn.bt/hpjutggpn"
        }
    ]
}

五、easymock使用

mockjs確實可以滿足我的需求，不過在無意間發現了easymock，就喜歡上這個工具了，easymock其實就是一個在線的mockjs，提供可視化管理界面，能快速配置api地址，生成模擬數據，而其實接觸mockjs那會我就有想基於mockjs自己搭建一個專門的mock api服務，沒想到早就有人這麽幹了。

並且easymock還基於GPL3.0開放了源碼，企業或個人可下載源碼進行私有化部署。
github地址：https://github.com/easy-mock/easy-mock
在線服務：https://easy-mock.com

vue本地開發mock數據.md