dva應用中使用mock模擬數據

上一篇中有寫到使用dva-cli創建應用，那么這篇寫下如何在dva項目中使用mock模擬數據。

在上一篇中 .webpackrc 文件中有提到配置接口請求代理，注意使用mock的時候應該先將此配置去掉。

1.將.webpackrc文件中的proxy去掉

 {
  "extraBabelPlugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": true
    }]
  ],

// 因為要使用mock，所以需要將這一坨注釋
  "proxy": {
    "/api": {
      "target": "http://192.168.31.110:8011/",  // 請求數據接口的地址
      "changeOrigin": true
    }
  },

  "env": {
    "development": {
      "extraBabelPlugins": [
        "dva-hmr"
      ]
    }
  }
}

2.安裝mock.js依賴

npm install mockjs --save 或
yarn install mockjs --save

3.配置mock.js（可以分文件也可以直接寫）

　　(1)直接寫，不分離模塊，在.roadhogrc.mock.js，直接使用 

　　打開.roadhogrc.mock.js 設置如下

export default 
{
	'GET /api/products': {
		products: [
			{ name: 'dva', id: 1 },
			{ name: 'antd', id: 2 },
		],
	},
}

　　瀏覽器中直接訪問http://localhost:8000/api/products,就可以訪問到

　　（2）組件多，分文件寫

　　---打開.roadhogrc.mock.js 設置如下

const fs=require('fs');
const path=require('path');
const mockPath=path.join(__dirname+'/mock');

const mock={};
fs.readdirSync(mockPath).forEach(file=>{

    Object.assign(mock,require('./mock/'+file));
});

module.exports=mock;

　　---在應用中的mock文件夾中創建products.js

const Mock = require('mockjs');

let db = Mock.mock({
    products: [
        { name: 'dva', id: 1 },
        { name: 'antd', id: 2 },
	],
});

module.exports = {
	[`GET /api/queryProducts`](req, res) {

		res.status(200).json(db);
	},
}

　　代碼地址：