React之mock的使用

//1.安装mockjs
yarn add mocker-api mockjs --dev

//2.项目根目录下创建mock/index.js
const Mock = require('mockjs');
const delay = require('mocker-api/utils/delay')
const request = {
    'GET /api/user': {
        id: 1,
        username: "kenny",
        sex: 6
    },
    'GET /api/hi': (req, res) => {
        res.json({
            id: 1,
            username: "jaja"
        })
    },
    'GET /api/mock': Mock.mock({
        success: true,
        //随机生成一段中文
        message: '@cparagraph',
        // 属性 list 的值是一个数组，其中含有 1 到 5 个元素
        'list|1-5': [{
            // 属性 sid 是一个自增数，起始值为 1，每次增 1
            'sid|+1': 1,
            // 属性 userId 是一个5位的随机码
            'userId|5': '',
        }]
    })
}
//数据会延迟1000毫秒获得
module.exports = delay(request, 1000)

//3.修改package.json中的scripts，新增
"mock": "mocker ./mock"

//4.yarn mock启动服务，会开一个随机端口

//5.测试mock数据
http://localhost:3721/api/user

mockjs官网 http://mockjs.com/

mock语法示例

'GET /api/mock': Mock.mock({
        success: "true",
        //随机生成一段中文
        message: '@cparagraph',
        // 属性list的值是一个数组，里面有1到10个元素
        'list|1-10': [{
            // 属性 sid 是一个自增数，起始值为 1，每次增 1
            'sid|+1': 1,
            'name': '@word',
            'area':'@region',
            'color':'@color',
            'image':"@image",
            //把1重复1到10次
            'count|1-10':'1',
            //把p重复5次
            'repeat|5':'p',
            // 属性 userId 是一个5位的随机码
            'userId|5': '',
// 此时obj会从指定对象中随机挑三个属性返回给前台
            'obj|3':{
               name:"kk",
               age:"19",
               gender:"男",
               birthday:"2019",
               hobby:"篮球" 
            }
        }]