在react里引入mock数据

120 阅读1分钟

安装依赖 mockjs、cross-env

npm install mockjs --save-dev
npm install cross-env --save-dev

在src下新建mock文件夹,用于存mock数据

image.png

入口文件引入mock

if(process.env.REACT_APP_MOCK === 'true'){
	require('./mock');
}

package.json 加mock脚本

"mock": "cross-env REACT_APP_MOCK=true craco start",

mock文件夹里的index.js

import Mock from 'mockjs';

// 获取订单详情
Mock.mock('/api/get/dataTest1', 'post', require('./getDataTest1'));
// 获取关联表
Mock.mock('/api/get/dataTest2', 'post', require('./getDataTest2'));

getDataTest1.js格式如下,getDataTest2同理

module.exports = {
    version: '1.0.0',
    errorCode: 200,
    response: {
        list:  [{
            columnName: '商家',
            columnType: 'STR'
        }, {
            columnDecimalLength: 5,
            columnLength: 14,
            columnName: '销量',
            columnType: 'NUM'
        }, {
            columnDecimalLength: 5,
            columnLength: 15,
            columnName: '销售额',
            columnType: 'NUM'
        }]
    },
};