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)

})