在前端開發中，為了能夠縮短開發時間，需要前后端的分離，只要雙方定義好接口，就可以同步開發，在這里介紹一下在webpack中使用mock數據mock-api的使用。

1.安裝mock-api

指令：npm install -g mock-api

使用方式：比如建立一個目錄test，在test里建立一個json文件，json文件內容為一個數組，例子：

[
    {
        "method": "post",
        "url": "/api/appTangram/card/query",
        "response": {
            "returnCode": "000000",
            "returnMsg": "success",
            "data": {
                "list_card": [
                    {
                        "cardId": "2017510",
                        "id": "00001",
                        "cardStl":"https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar"
                    },
                    {
                        "cardId": "2017511",
                        "id": "00002",
                        "cardStl":"https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar"
                    }

                ]
            }
        }
    }
]

示例代碼寫了一個配置對象，意為post請求/api/appTangram/card/query時，響應內容則是response對象的值。

2.寫webpack中的配置文件

腳手架生成demo之后，基本可以進行開發，但對于接口部分的對應，需要改一下配置內容，由于vue-cli本地開發模式啟動了一個服務，而mock-api又啟動一個服務，雙方接口交互勢必屬于跨域行為，vue-cli對這方面也做了支持，即設置 changeOrigin: true。在config目錄下index.js, 本地開發的相關配置dev如下：

dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/appAdmin': {
            target: 'http://127.0.0.1:10086',
            changeOrigin: true,
            pathRewrite: {
              '^/appAdmin': '/appAdmin'
            }
          }
    }
}

3.啟動mock-api數據服務

指令：mock-api serve test
test就是新建假數據的目錄

啟動時默認端口為10086，更多命令配置可以看github

4.頁面實現

微信截圖_20170516202104.png

5.注意事項

1.webpack 在每次修改配置文件時，重啟服務：npm run Dev
2.當與后臺對接連調時，只要修改config目錄下index.js中target的路徑即可
3.mock-api需要啟動兩個服務。

在于后端連調時配置文件截圖如下：

微信截圖_20170516203230.png

本次調用的接口為：/appAdmin/api/appTangram/card/query