react 使用mock.js模拟后台数据

╰+攻爆jí腚メ 2021-07-24 23:03 541阅读 0赞

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