工具指南27-在线Mock数据生成器

GeraldChen
2 阅读9分钟

前端联调接口没准备好，后端还在写，测试环境数据库是空的——这大概是每个开发者都遇到过的场景。手动编造测试数据既无聊又容易暴露模式单一的问题（全用 "张三" 和 "test@test.com" 的举手）。

本文介绍 anyfreetools.com 的 Mock 数据生成器，打开浏览器就能批量生成结构化假数据，支持 6 种数据类型和 2 种输出格式。

为什么需要 Mock 数据

在实际开发中，Mock 数据的需求贯穿整个开发周期：

前后端并行开发：前端不用等后端接口完成，先用 Mock 数据把页面和交互跑通。这在团队协作中能显著减少阻塞时间。

UI 边界测试：真实数据的长度和格式差异很大。用户名可能是 2 个字，也可能是 20 个字符的英文名。价格可能是 0.01，也可能是 999999.99。只用固定数据测试，上线后 UI 错位是早晚的事。

数据库填充：演示环境、压测环境都需要批量数据。手动插入 10 条可以忍，1000 条就不现实了。

单元测试和集成测试：测试用例需要可重复、多样化的输入数据。硬编码测试数据会导致测试覆盖面窄，且维护成本高。

传统方案是在项目里安装 Faker.js 等库来生成 Mock 数据，但有时候你只是临时需要一批数据填充 Postman 请求或数据库，不值得为此配置一个 Node.js 环境。在线工具在这类场景下更高效。

支持的数据类型

这款工具基于 Faker.js 实现，支持 6 种数据类型，每种类型会生成一组相关联的字段。

个人信息 (Person)

生成完整的人物档案数据：

{
  "id": "a3f2b1c4-5d6e-7f8a-9b0c-1d2e3f4a5b6c",
  "firstName": "Alice",
  "lastName": "Johnson",
  "email": "alice.johnson@example.com",
  "phone": "555-0123",
  "birthDate": "1995-03-15",
  "address": "742 Evergreen Terrace",
  "city": "Springfield",
  "country": "United States"
}

包含 UUID、姓名、邮箱、电话、出生日期、地址、城市和国家。适合用户管理系统、通讯录、CRM 等场景的测试。

公司信息 (Company)

生成企业相关数据：

{
  "id": "b4c5d6e7-8f9a-0b1c-2d3e-4f5a6b7c8d9e",
  "name": "Acme Technologies",
  "industry": "infrastructure",
  "employees": 3500,
  "founded": 2008,
  "website": "https://acme-tech.example.com",
  "email": "contact@acme-tech.example.com"
}

包含公司名称、行业、员工数、成立年份、网站和联系邮箱。适合 B2B 平台、企业目录等场景。

地址信息 (Address)

生成包含经纬度的完整地址：

{
  "id": "c5d6e7f8-9a0b-1c2d-3e4f-5a6b7c8d9e0f",
  "street": "456 Oak Avenue",
  "city": "Portland",
  "state": "Oregon",
  "zipCode": "97201",
  "country": "United States",
  "latitude": 45.5231,
  "longitude": -122.6765
}

适合物流系统、地图应用、配送服务等需要地理位置数据的场景。

网络信息 (Internet)

生成与网络账户相关的数据：

{
  "id": "d6e7f8a9-0b1c-2d3e-4f5a-6b7c8d9e0f1a",
  "email": "john_doe42@example.com",
  "username": "john_doe42",
  "password": "xK9#mP2vLq",
  "url": "https://example-site.com",
  "ipv4": "192.168.1.100",
  "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64)..."
}

包含邮箱、用户名、密码、URL、IPv4 地址和 User-Agent。适合网络安全测试、用户系统、日志分析等场景。

金融信息 (Finance)

生成金融交易相关的数据：

{
  "id": "e7f8a9b0-1c2d-3e4f-5a6b-7c8d9e0f1a2b",
  "accountNumber": "12345678",
  "iban": "DE89370400440532013000",
  "creditCard": "4111-1111-1111-1111",
  "currency": "USD",
  "amount": "1234.56",
  "transactionType": "payment"
}

包含账号、IBAN、信用卡号（测试用假数据）、货币代码、金额和交易类型。适合支付系统、财务软件、银行应用的开发测试。

商品信息 (Product)

生成电商相关的商品数据：

{
  "id": "f8a9b0c1-2d3e-4f5a-6b7c-8d9e0f1a2b3c",
  "name": "Ergonomic Cotton Chair",
  "description": "The slim & simple design...",
  "price": "299.00",
  "category": "Furniture",
  "color": "azure",
  "material": "Cotton"
}

包含商品名、描述、价格、分类、颜色和材质。适合电商平台、库存管理、商品展示页面等场景。

输出格式

工具支持两种输出格式：

JSON 格式

默认输出格式，生成标准的 JSON 数组。适合直接粘贴到 API 测试工具（如 Postman、Insomnia）的请求体中，或作为前端 Mock 数据源：

// 将生成的 JSON 直接用作 Mock 数据
const mockUsers = [
  {
    "id": "a3f2b1c4-...",
    "firstName": "Alice",
    // ...
  }
];

// 模拟 API 响应
function getMockUsers() {
  return new Promise(resolve => {
    setTimeout(() => resolve(mockUsers), 300);
  });
}

CSV 格式

以逗号分隔的表格格式输出，第一行是字段名（Header）。适合导入数据库、Excel 或其他数据处理工具：

id,firstName,lastName,email,phone,birthDate,address,city,country
"a3f2b1c4-...","Alice","Johnson","alice@example.com","555-0123","1995-03-15","742 Evergreen Terrace","Springfield","United States"

CSV 格式特别适合批量导入测试数据库。大多数数据库管理工具（如 DBeaver、DataGrip）都支持 CSV 直接导入。

实际使用场景

场景一：前端列表页开发

开发一个用户管理后台，需要展示用户列表。接口还没准备好，用 Mock 数据先把分页、搜索、排序做好：

  1. 打开 Mock 数据生成器
  2. 选择 "个人信息" 类型
  3. 数量设为 50
  4. 格式选 JSON
  5. 点击生成，复制结果到项目的 mock/users.json
// src/mock/api.ts
import users from "./users.json";

export function fetchUsers(page: number, pageSize: number) {
  const start = (page - 1) * pageSize;
  return {
    data: users.slice(start, start + pageSize),
    total: users.length,
  };
}

这样前端开发完全不依赖后端进度，联调时只需把 Mock 数据源替换为真实接口。

场景二：数据库压测数据填充

需要在测试环境准备大量订单数据：

  1. 选择 "商品信息" 类型，生成 1000 条 CSV 数据
  2. 用数据库工具导入
-- MySQL 导入 CSV
LOAD DATA INFILE '/tmp/products.csv'
INTO TABLE products
FIELDS TERMINATED BY ','
ENCLOSED BY '"'
LINES TERMINATED BY '
'
IGNORE 1 ROWS;

场景三：Postman 接口测试

测试一个创建公司的 API 接口：

  1. 选择 "公司信息" 类型，生成 1 条 JSON 数据
  2. 复制到 Postman 的 Body 中
  3. 根据接口字段要求做少量调整后发送请求

比手动编造 {"name": "测试公司", "industry": "测试行业"} 更接近真实数据的分布特征。

与代码库方案的对比

如果项目里已经有完整的 Mock 方案，在线工具的意义在哪？

在线工具适合：

  • 临时需要一批数据，不想在项目里加依赖
  • 非技术人员（产品、测试）需要准备测试数据
  • 快速验证 UI 布局，几秒钟就要看到效果
  • 数据库填充，导出 CSV 直接导入

代码库方案适合：

  • 需要与项目测试框架集成
  • 数据字段有自定义业务逻辑
  • 需要可重复的种子数据（seed-based）
  • CI/CD 流水线中自动化生成

两者不冲突。在线工具解决的是"快速拿到一批数据"的即时需求，代码库方案解决的是工程化、可重复的测试数据管理。

使用技巧

选择合适的数据量：UI 测试通常 20-50 条就够了，性能测试可能需要 500-1000 条。不要一次性生成太多，浏览器渲染大量文本会变慢。

组合多种类型：一个电商项目可能同时需要用户数据、商品数据和地址数据。分别生成后，用脚本把它们关联起来（比如给每个订单随机分配一个用户 ID 和商品 ID）。

CSV 导入数据库前检查编码：生成的 CSV 是 UTF-8 编码。如果目标数据库使用其他编码（如 GBK），导入前需要做转换，否则中文字段会出现乱码。

JSON 数据做接口 Mock：配合 json-server 等工具，可以在几分钟内搭建一个完整的 RESTful Mock API：

# 安装 json-server
npm install -g json-server

# 用生成的 JSON 文件启动 Mock 服务
json-server --watch mock-users.json --port 3001

这样前端项目直接请求 http://localhost:3001/users 就能拿到 Mock 数据，支持分页、排序、过滤等功能。

相关阅读：

本系列其他文章

原文发布于 陈广亮的技术博客，欢迎关注获取更多前端与 AI 开发内容。

avatar
文章
阅读
粉丝