react 使用mock.js模擬後臺數據

1、cnpm install mockjs -S

2、在index.js引入mock.js文件
	判斷是否是生產環境
	if(process.env.NODE_ENV=='development')
		{
		  require("mock.js文件所在路徑");
		}
		
3、創建js文件
	(1)引入
		var Mock = require('mockjs')
	
	(2)設置數據返回時間
		Mock.setup({
		    timeout:毫秒,
		})
	
	(3)設置返回數據:
	
		Mock.mock('請求的url地址',{
		     xx:'返回的數據'
		    "xx":"@datetime",  返回隨機時間戳
		    "xx|1-800":800,   返回1-800的隨機數
		    "xx":"@cname",   返回隨機名字 
		    'xx|1-10': [{   返回1-10個隨機元素的數組
		        'xx|+1': 10,   返回從10開始,每次自增1的數據
		    }],
		    "xx":"@url",  返回隨機url地址
		    "xx":"@image",   返回隨機圖片
		    "xxl":"@email",  返回隨機email
		    "xx":Mock.Random.cword(5,20)  返回5-20個隨機漢字
		
		})

代碼示例:
index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux'
import App from './App';
import * as serviceWorker from './serviceWorker';
import store from './store/store'

if(process.env.NODE_ENV=='development')
{
  require("./mock/mock");
}


ReactDOM.render(
  <Provider store={store}>
    <React.Fragment>
       <App  />
    </React.Fragment>
  </Provider>
  ,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

mock.js:

var Mock = require('mockjs')

Mock.setup({
    timeout:1000,

})

Mock.mock('/api/banner',{
    username:'jeff',
    userpwd:'123',
    sex:'男',
    special:'帥',
    "date":"@datetime",
    "score|1-800":800,
    "rank|1-100":100,
    "name":"@cname",
    'list|1-10': [{
        'id|+1': 10,
        'num|20-30':30
    }],
    "address":"@url",
    "img":"@image",
    "email":"@email",
    "text":Mock.Random.cword(5,20)

})