🇨🇳 中文

Mock数据生成器

快速生成模拟数据，支持多种数据格式和模板，适用于前端开发、测试和演示

用户信息模板

生成包含用户基本信息的模拟数据

{
  "id": "@id",
  "name": "@cname",
  "email": "@email",
  "age|18-60": 1,
  "phone": "@string('number', 11)",
  "address": "@county(true)",
  "avatar": "@image('200x200')"
}

文章数据模板

生成文章列表的模拟数据

{
  "id": "@id",
  "title": "@ctitle(10, 30)",
  "content": "@cparagraph(5, 10)",
  "createTime": "@datetime",
  "author": "@cname",
  "views|100-10000": 1,
  "likes|0-500": 1,
  "tags": ["@csentence(3)", "@csentence(3)", "@csentence(3)"]
}

商品数据模板

生成电商商品信息的模拟数据

{
  "id": "@id",
  "name": "@ctitle(5, 20)",
  "price|10-1000.2": 1,
  "stock|0-1000": 1,
  "description": "@cparagraph(2, 5)",
  "category": "@pick(['电子产品', '服装', '食品', '家居', '图书'])",
  "images|1-5": ["@image('300x300')"],
  "onSale": "@boolean"
}

API响应模板

生成标准API接口响应格式的模拟数据

{
  "code": 200,
  "message": "success",
  "data|5-10": [{
    "id": "@id",
    "name": "@cname",
    "email": "@email",
    "createTime": "@datetime"
  }],
  "pagination": {
    "page": 1,
    "pageSize": 10,
    "total": 100
  }
}

生成结果

// 选择左侧模板或自定义模板后，点击生成按钮查看结果

Mock数据生成指南

Mock数据是前端开发中不可或缺的工具，它允许开发者在后端API尚未完成时，使用模拟数据进行开发和测试，大大提高开发效率和应用质量。

什么是Mock数据？

Mock数据是指根据预定规则生成的模拟数据，用于替代真实的后端API响应。Mock数据具有以下特点：

  • 真实性：模拟真实业务场景的数据结构和内容
  • 可预测性：按照预定规则生成，结果可预测
  • 多样性：支持多种数据格式和类型
  • 灵活性：可以根据需要自定义数据生成规则

Mock数据的应用场景

Mock数据在前端开发和测试中有广泛的应用：

前端开发

  • 后端API尚未完成时的替代方案
  • 组件开发和测试
  • 页面布局和样式调试
  • 功能演示和展示

测试验证

  • 单元测试和集成测试
  • 边界情况和异常测试
  • 性能测试和压力测试
  • 用户体验测试

教学演示

  • 编程教学和示例
  • 技术分享和演示
  • 概念验证和原型开发
  • 文档和示例代码

Mock.js语法基础

Mock.js使用简单而强大的语法规则来定义数据模板：

1. 基本数据类型

// 字符串
"name": "@cname" // 中文姓名
"email": "@email" // 邮箱地址

// 数字
"age|18-60": 1 // 18-60之间的随机整数
"price|10-100.2": 1 // 10-100之间的随机数，保留2位小数

// 布尔值
"isActive": "@boolean" // 随机布尔值

2. 数组和对象

// 固定数量数组
"tags|3": ["@word"] // 包含3个随机单词的数组

// 数量范围数组
"list|5-10": [{ // 5-10个对象的数组
"id": "@id",
"name": "@cname"
}]

// 嵌套对象
"user": {
"basic": {
"name": "@cname",
"age|18-60": 1
},
"contact": {
"email": "@email",
"phone": "@string('number', 11)"
}
}

3. 常用占位符

"@id" // 随机ID
"@cname" // 中文姓名
"@cword(2,4)" // 2-4个中文字符
"@csentence(5,10)" // 5-10个中文词语的句子
"@cparagraph(2,5)" // 2-5个中文段落
"@integer(1,100)" // 1-100的整数
"@float(10,100,2,2)" // 10-100的浮点数，整数2位，小数2位
"@date" // 随机日期
"@datetime" // 随机日期时间
"@image('200x100')" // 随机图片URL
"@color" // 随机颜色
"@url" // 随机URL
"@email" // 随机邮箱
"@pick(['a','b','c'])" // 从数组中随机选取一个值
"@string('number', 11)" // 11位数字字符串（可用于手机号）

使用说明

使用我们的Mock数据生成工具非常简单：

  • 选择预设模板：从左侧选择适合的模板类型
  • 自定义模板：切换到自定义标签页，输入Mock.js语法模板
  • 生成数据：点击生成按钮，工具将根据模板生成模拟数据
  • 操作结果：可以复制、下载或重新生成数据
  • 修改调整：根据需要调整模板，再次生成数据

常见问题解答

问：Mock数据与真实数据有什么区别？
答：Mock数据是根据预定规则生成的模拟数据，而真实数据来自实际业务操作。Mock数据用于开发和测试阶段，真实数据用于生产环境。

问：如何确保Mock数据的质量？
答：确保Mock数据质量的方法包括：遵循真实数据结构、覆盖各种边界情况、保持数据一致性、定期更新模板以匹配业务变化。

问：如何在Mock.js中生成特定格式的数据？
答：可以使用Mock.js提供的各种占位符和规则语法，或者使用字符串操作函数来生成特定格式的数据。

最佳实践

为了充分发挥Mock数据的作用，建议遵循以下最佳实践：

  • 保持Mock数据与API文档的一致性
  • 模拟各种业务场景和边界情况
  • 使用有意义的示例数据，便于理解和调试
  • 定期审查和更新Mock数据模板
  • 在团队中共享和维护Mock数据规范