JSON 產生器

相關推薦

關於 JSON 產生器與 Mock 測試資料

適用場景

• 前端開發元件渲染時需要穩定可重複的 Mock 資料，構造使用者列表、商品卡片、訂單詳情等場景
• 後端 API 尚未開發完成，前端工程師需要造資料聯調頁面，避免等待後端回傳
• QA 撰寫 API 自動化測試案例時，批次構造不同欄位值的資料驅動測試場景
• 撰寫 API 文件、Swagger / OpenAPI 範例時，用產生器快速產出符合結構的請求 / 回應範例
• 壓測和效能測試前準備大量結構化測試資料，驗證系統在高併發下的穩定性
• 資料庫遷移腳本、資料清洗工具開發時構造樣本 JSON 驗證業務邏輯
• 教學與展示場景：技術部落格、PPT 截圖、教育訓練教材中需要結構整齊的 JSON 範例
• 前端表單驗證、本地快取邏輯撰寫時，構造邊界值測試（極小 / 極大 / 空 / 異常類型）

使用方法

1. 在左側「模式建構器」中查看預設範例 Schema（id / name / email / age / active / createdAt / bio 共 7 欄位），或點選「+」新增自訂欄位
2. 為每個欄位設定欄位名稱（自訂）和欄位類型（13 種下拉選單）；數值與段落類型可填 min / max，Enum 類型可填逗號分隔的候選值
3. 勾選「產生為陣列」並設定數量（1-1000），或取消勾選只產生單筆 JSON 物件
4. 點選右上角「產生」按鈕，右側編輯器即時顯示格式化好的 JSON 結果，並顯示欄位數和產生筆數
5. 點選「複製」把結果貼到程式碼 / API 工具，或點選「下載」儲存為 generated.json 檔案

功能特點

• 13 種內建欄位類型：String / Integer / Number / Boolean / Email / Name / UUID / Date / URL / Phone / Paragraph / Enum / Array，開箱即用無需記憶範本語法
• 視覺化欄位建構器：透過圖形介面新增刪除欄位、設定欄位名稱與類型，所見即所得，無需手寫 JSON 範本
• 數值與段落範圍控制：Integer、Number 與 Paragraph 類型支援自訂最小值與最大值，產生更貼近業務的資料
• Enum 自訂列舉值：可輸入逗號分隔的值清單（如 admin,user,guest），產生受控的離散選項
• 單物件 / 陣列一鍵切換：透過勾選「產生為陣列」+ 數量輸入（1-1000），可在單筆 JSON 與陣列形式之間自由切換
• 範例 Schema 快速載入：內建 7 欄位範例（id / name / email / age / active / createdAt / bio），點擊即可產生完整樣本
• 程式碼高亮輸出面板：右側 CodeMirror 編輯器即時顯示產生結果，支援 JSON 語法高亮、行號與唯讀瀏覽
• 一鍵複製與下載：產生結果可一鍵複製到剪貼簿，也可直接下載為 generated.json 檔案
• 純本地瀏覽器執行：所有欄位構造與資料產生完全在你的瀏覽器內完成，資料零上傳，敏感業務欄位可放心使用
• 桌面與行動端適配：PC 端左右分欄可調，行動端自動切換輸入/輸出分頁，操作順手

程式碼範例

// 把 generated.json 放到 /public/mock/users.json
// 然後用 fetch 獲取作為 Mock 資料
async function fetchMockUsers() {
  const res = await fetch('/mock/users.json');
  const users = await res.json();
  console.log(`載入了 ${users.length} 個使用者`);
  return users;
}

// 直接內嵌到程式碼裡使用（適合測試案例）
const mockUsers = [
  { id: 1, name: 'Jennifer Martinez', email: 'jennifer.martinez382@example.com', age: 42, active: true },
  { id: 2, name: 'Robert Smith', email: 'robert.smith918@test.org', age: 67, active: false }
];

// 或在 Jest / Vitest 中作為 fixture 引入
import users from './fixtures/users.json';
test('渲染使用者列表', () => {
  render(<UserList users={users} />);
  expect(screen.getAllByRole('listitem')).toHaveLength(users.length);
});

# 安裝: pip install faker
from faker import Faker
import json

fake = Faker('zh_TW')  # 中文本地化

# 產生單一使用者
def gen_user():
    return {
        "id": fake.random_int(min=1, max=99999),
        "name": fake.name(),
        "email": fake.email(),
        "phone": fake.phone_number(),
        "address": fake.address(),
        "company": fake.company(),
        "created_at": fake.iso8601()
    }

# 批次產生 100 筆並寫入 generated.json
users = [gen_user() for _ in range(100)]
with open('generated.json', 'w', encoding='utf-8') as f:
    json.dump(users, f, ensure_ascii=False, indent=2)

print(f"已產生 {len(users)} 筆使用者資料")

# 假設 generated.json 在當前目錄，目標 API 為 POST /api/users
# 批次初始化資料
for i in $(seq 1 10); do
  curl -X POST https://api.example.com/users \
    -H "Content-Type: application/json" \
    -d @generated.json | jq '.'
done

# 或者用 jq 抽取單筆再 POST
cat generated.json | jq '.[0]' | \
  curl -X POST https://api.example.com/users \
    -H "Content-Type: application/json" \
    -d @-

常見問題

故障排查

術語表

JSON

JavaScript Object Notation，輕量級的資料交換格式，由鍵值對和陣列構成，是 Web API 和前後端資料傳輸的事實標準。

Mock 資料

模擬真實業務場景的偽造資料，用於前端開發、API 聯調、自動化測試等尚未對接真實後端的場景，要求結構與真實 API 一致。

Schema

描述資料結構的定義，例如「使用者包含 id、name、email 三個欄位」。本工具中 Schema 指左側欄位建構器中定義的欄位名稱與類型集合。

UUID (v4)

通用唯一識別碼，RFC 4122 標準定義的 128 位元字串。v4 基於隨機數產生（含 13/8/9/a/b 變體位），幾乎不會重複，常用於分散式主鍵。

欄位類型 (Field Type)

本工具中每個欄位必須指定的資料類型，決定該欄位會產生何種格式的隨機值。例如 Email 類型產生電子郵件格式字串，Integer 類型產生整數。

Enum（列舉）

從預先定義的離散值集合中隨機抽取一個的欄位類型。例如定義 admin,user,guest 三選一，適合角色、狀態、等級欄位。

min / max

欄位取值範圍限制，僅對 Integer、Number、Paragraph 三種類型生效。設定後隨機數將在該閉區間內產生，避免出現明顯造假的邊界值。

單物件 vs 陣列輸出

本工具支援兩種輸出形式：取消勾選「產生為陣列」時輸出單一 JSON 物件 {}（適合 API 單筆除錯），勾選並填入數量時輸出物件陣列 [...]（適合批次資料）。

RFC 4122

UUID 的國際標準規範，定義 UUID 的格式、版本（v1-v5）和變體位。本工具產生的 UUID 符合 v4 規範。

CodeMirror

瀏覽器端程式碼編輯器元件，本工具右側輸出區使用 CodeMirror 提供 JSON 語法高亮、行號顯示與唯讀瀏覽能力。

本地處理

所有欄位構造和資料產生完全在使用者瀏覽器內透過 JavaScript 執行，不上傳到任何伺服器，更快也更安全，適合處理敏感業務欄位。

Fixture

測試中固定使用的樣本資料檔案。產生器輸出可儲存為 generated.json 作為後續回歸測試的 fixture，確保測試結果可重現。

欄位類型與產生規則速查表

本工具 13 種內建欄位類型的取值範圍、典型用途與範例：

常見 JSON 產生場景與推薦欄位組合

下面列出幾種最常見的 API 測試資料場景及其推薦欄位組合，可直接參考新增：

Privacy & Security

本 JSON 產生器所有欄位建構、隨機資料產生、複製下載操作完全在你的瀏覽器本地透過 JavaScript 完成，你定義的 Schema、產生的隨機資料、欄位名稱和數量都不會被上傳到任何伺服器，也不會被記錄、快取或儲存到雲端。包含內部 API 欄位、未上線業務結構、敏感測試場景可以放心使用，不存在資料外洩風險。

Authoritative References

• IETFRFC 4122 - UUID 通用唯一識別碼規範
• OfficialJSON 官方網站（含語法規範）
• LibraryMock.js - 前端專用 Mock 資料庫
• LibraryFaker.js / Faker Python - 更豐富的假資料產生函式庫
• MDNMDN - JSON.parse / JSON.stringify