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 級別的資料。超大檔案建議先拆分或使用合併清理工具。