Mock 数据生成
随机 JSON · 模板占位 · 批量生成
Mock 生成
就绪
ABOUT
关于 Mock 数据生成
定义带占位符的 JSON 模板，一键生成多条随机测试数据。
前端不应被后端进度阻塞。Mock 生成器根据模板批量产出结构正确的 JSON，让列表页、表单、图表组件在真实 API 就绪前就能开发联调与视觉验收。
DEEP DIVE
深入了解 Mock 数据生成
前端开发常因后端接口未就绪而阻塞。Mock 数据生成器根据 JSON 模板与占位符语法，批量产出随机但结构正确的测试 JSON。JSONSort Mock 工具在本地生成，支持字符串、数字、布尔、数组长度等随机化规则。
占位符可嵌套在 JSON 结构任意层级，一次定义模板，生成 N 条记录组成数组，直接作为 Mock Server 或组件 props 的数据源。
占位符语法在 JSON 字符串值内生效，生成器按字段名语义选择随机策略（name → 人名、email → 邮箱格式等）。固定字段不写占位符即可在每条记录中重复，适合 status、type 等枚举常量。
FEATURES
核心能力
模板占位符
在 JSON 模板中使用占位符语法，生成随机值。
批量生成
指定数量，一次产出多条 Mock 记录组成数组。
类型随机
字符串、整数、浮点、布尔、UUID、日期等随机类型。
结构保持
生成数据严格遵循模板定义的 JSON 结构。
即时预览
修改模板或数量后立即重新生成。
本地生成
Mock 数据不经过服务器，原型阶段可放心使用。
批量条数
指定 N 条一次生成，模拟分页 total 数据量。
结构约束
输出严格符合模板 JSON Schema 形状，无多余键。
HOW TO USE
使用步骤
-
1
编写或粘贴 JSON 模板
-
2
设置生成数量
-
3
复制 Mock 数据数组
-
4
使用示例数据按钮快速了解输入输出格式
-
5
复制结果到剪贴板，或与其他 JSONSort 工具串联使用
WORKFLOW
典型工作流
从导入数据到导出结果的完整流程，帮助团队统一 Mock 数据生成 的使用方式。
定义模板
写一个 JSON 对象，字符串值改为 {{field}} 占位符。
设置数量
指定生成条数，预览数组输出。
微调模板
根据 UI 需求调整字段与占位符类型。
导出 fixtures
复制到 src/mocks/ 或 MSW handler。
USE CASES
适用场景
前端开发
UI 开发阶段生成列表页、详情页的 Mock 数据。
测试工程师
构造边界测试数据：空数组、超长字符串、特殊字符。
产品演示
Demo 环境填充 realistic 假数据，避免空白页面。
后端开发
API 文档示例数据批量生成，嵌入 Swagger 描述。
UI 开发
Storybook stories 填充 20 条列表 Mock 数据。
压力测试
生成大量 JSON 测试前端虚拟滚动与内存表现。
TIPS
使用技巧
- 先用「代码生成」从真实 API 样本得到结构，再改字段为占位符做 Mock 模板。
- 列表页 Mock 建议一次生成 10-20 条，覆盖分页与滚动测试。
- 占位符名称暗示类型，如 {{name}}、{{age}}、{{email}} 等。
- 生成后可复制到格式化工具检查结构，再导入 Mock Server。
- 与 JSON 格式化联动：Mock 输出 → 格式化 → 复制到项目 fixtures 目录。
- 避免在 Mock 数据中使用真实用户 PII，即使用于本地开发。
- 模板先从代码生成工具得到，再改值为 {{placeholder}}。
- id 字段用 {{uuid}} 避免列表 key 冲突。
- 边界测试：生成 0 条、1 条、1000 条分别验证 UI。
- Mock 数据加前缀 fake_ 避免与真实数据混淆。
LOCAL VS ONLINE
本地 vs 在线工具
JSONSort 坚持纯前端架构，以下对比说明为何本地化工具更适合处理开发数据。
TROUBLESHOOTING
常见误区与排查
实际使用中容易遇到的问题及建议处理方式，减少反复试错的时间。
占位符没替换
建议：必须是字符串值内的 {{name}}；非字符串不会替换。
类型不对
建议：数字字段若用占位符需在模板中写字符串再后处理，或固定数字。
数组结构不一致
建议：模板定义单条结构，生成器包装为数组。
PII 合规
建议：即使用 Mock 也不要用真实姓名/手机号作模板。
FAQ
常见问题
占位符语法是什么？
在字符串值中使用 {{fieldName}} 形式，生成器替换为随机值。
能固定某个字段吗？
不使用占位符的字段值会原样保留在每条记录中。
生成数量上限？
取决于浏览器内存，通常数百条记录无压力。
随机种子固定吗？
每次刷新页面重新随机；需固定 seed 请保存生成结果。
嵌套数组能 Mock 吗？
可以。在嵌套对象内同样使用占位符字符串。
数据会上传到服务器吗？
不会。JSONSort 所有工具均在浏览器本地运行，您的输入内容不会发送到任何后端服务器。
需要注册或安装吗？
不需要。打开页面即可使用，无需账号、无需下载客户端，也支持 PWA 离线缓存。
支持多大的文件？
取决于浏览器内存，通常可流畅处理数 MB 级别的数据。超大文件建议先拆分或使用合并清理工具。