好用的前端測試工具JSON-Server

前端在串接 API 時，最常遇到的卡點不是畫面寫不出來，而是後端還沒好、規格還在變，或測試資料不夠穩。這種時候如果還硬等正式 API，開發節奏通常會被拖慢很多。JSON-Server 就是一個很實用的過渡工具。

JSON-Server 是什麼

JSON-Server 是一個 Node.js 工具，可以把一份 JSON 檔快速變成可操作的 REST API。對前端來說，它的價值不是要取代正式後端，而是讓你在 API 尚未完善前，先把畫面流程和資料互動跑起來。

為什麼它好用

這類工具最方便的地方在於：

1. 啟動快。
2. 學習成本低。
3. 很適合做 CRUD 假資料測試。
4. 前後端可以先平行處理。

如果只是要快速模擬列表查詢、單筆查詢、新增修改刪除，它通常很夠用。

基本用法

先安裝：

1

npm install -g json-server

接著準備一個 db.json：

1
2
3
4
5
6

{
  "users": [
    { "id": 1, "name": "Alice" },
    { "id": 2, "name": "Bob" }
  ]
}

啟動：

1

json-server -w db.json

之後它就會自動提供對應的 API 路由，例如 /users。

適合什麼情境

我會把它用在下面幾種場合：

1. 前端元件開發先行。
2. Demo 或 prototype。
3. 驗證查詢條件、分頁、列表畫面。
4. 在正式 API 還沒交付前先跑整體流程。

注意事項

1. 它不是正式後端

JSON-Server 很方便，但不要把它當成正式環境方案。它比較像測試與開發輔助工具。

2. 假資料結構要先對齊未來 API

如果你用 JSON-Server 時的欄位命名、回傳格式和未來正式 API 差太多，最後還是會多一次重改成本。

3. 複雜商業邏輯它幫不了太多

一旦牽涉驗證規則、權限、交易流程或特殊錯誤情境，它就比較偏示意用途，不會完全等於真實後端。

小結

JSON-Server 很適合前端開發前期用來快速模擬 REST API，讓畫面和互動先跑起來。只要你清楚它是 Mock 工具，不是正式後端，就能在專案初期幫你省下不少等待和卡關時間。

其他文章

保哥直播