umi项目中使用mockj生成数据模拟请求调用

Mock.js简介

Mock.js 是一个轻量级且无依赖的JavaScript库，用于生成模拟数据。它可以帮助开发者在前端开发过程中模拟后端API接口，以便进行快速原型设计和测试。Mock.js 提供了丰富的API来模拟各种类型的数据，如字符串、数字、日期、数组等。

编码实战

在umi项目的根目录的mock文件夹下新建如下js文件

//  mock数据 tds专用
import mockjs from 'mockjs';

const mock = {
  'GET /api/item/list': (req, res) => {
    // 企业营销列表
    setTimeout(() => {
      if (req.query.type === 'error') {
        res.status(200).json({
          errCode: '-1',
          errMsg: '连接数据库错误啦',
          datas: '',
        });
      } else {
        const data = mockjs.mock({
          'list|10': [
            {
              id: '@guid',
              name: '@cname',
              'customNum|1-100': 50,
            },
          ],
        });
        res.status(200).json({
          errCode: '0',
          traceId: '666',
          success: true,
          errorMsg: '',
          resultInfo: { total: 10, size: 10, records: [...data.list] },
          resultInfo: [...data.list],
        });
      }
    }, 200);
  },
};

module.exports = mock;

Mock.js的常用API

基本数据类型生成

• Mock.Random.integer()：生成一个指定范围内的整数。
• Mock.Random.float()：生成一个指定范围内的浮点数。
• Mock.Random.string()：生成一个指定长度的字符串。
• Mock.Random.email()：生成一个随机的电子邮件地址。
• Mock.Random.date()：生成一个随机的日期。
• Mock.Random.image()：生成一个随机的图片URL。

对象和数组生成

• Mock.mock()：基于模板生成复杂的对象或数组。
• Mock.mock({ ‘name’: ‘@cname’ })：生成一个包含中文姓名的对象。
• Mock.mock([{ ‘name’: ‘@cname’ }])：生成一个包含多个中文姓名的数组。

自定义规则

• @is：检查值是否满足给定的正则表达式。
• @in：从给定的数组中随机选取一个值。
• @csentence()：生成一个中文句子。
• @cparagraph()：生成一段中文段落。

其他功能

• Mock.withSeed()：设置随机种子，确保每次生成相同的随机数据。
• Mock.toJSON()：将模拟数据转换为JSON字符串。