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);
	},
}

　　代码地址：