大良营销网站建设咨询wordpress 微信 分享

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字符串。