前端開發輔助神器：json-server功能介紹及使用指南

JSON Server 是一個用于建立模拟 RESTful API 的工具，它可以幫助前端開發人員在沒有後端服務的情況下進行開發和測試。

JSON Server 功能介紹

1. 快速設定：使用 JSON Server 可以快速設定一個虛拟的 API 伺服器，無需編寫複雜的後端代碼和配置。

2. 自動建立 API：JSON Server 根據提供的 JSON 資料自動生成符合 RESTful 風格的 API 接口，包括對資源的增删改查操作。

3. 資料持久化：您可以将資料儲存在一個 JSON 檔案中，并且 JSON Server 在每次啟動時都會讀取該檔案，保證資料的持久性。

4. 資料關聯：JSON Server 支援在資料中定義關聯關系，例如一對一、一對多和多對多的關聯，以模拟複雜的資料結構和關聯查詢。

5. 路由和過濾：您可以通過定義自定義路由規則和查詢參數來進行進階的路由和資料過濾操作，以滿足不同的業務需求。

6. 排序和分頁：JSON Server 支援對資料進行排序和分頁，以便在開發和測試中模拟真實的分頁效果。

7. 延遲響應和錯誤模拟：您可以通過設定延遲響應時間和模拟錯誤來模拟真實的網絡環境和異常情況，以測試前端應用的處理能力。

8. 中間件支援：JSON Server 允許使用中間件來自定義請求和響應的處理過程，以實作更進階的功能和拓展性。

9. 支援擴充：JSON Server 提供了豐富的插件和擴充機制，可以根據需要進行功能的擴充和定制。

通過 JSON Server，您可以在開發和測試階段快速建立一個符合 RESTful API 規範的模拟伺服器，使前端開發人員能夠獨立進行工作并有效地調試和測試應用程式。它是一個簡單而強大的工具，提供了大部分常見的 API 操作和特性，使開發人員能夠更專注地進行前端開發工作。

JSON Server 使用指南

1. 安裝 JSON Server

確定您已經安裝了 Node.js 環境。在指令行中運作以下指令以全局安裝 JSON Server：

npm install -g json-server           

2. 建立資料源

在您的項目目錄中建立一個 JSON 檔案作為資料源。例如，建立一個名為 `db.json` 的檔案，并在其中定義您的資料。

{

"users": [

{ "id": 1, "name": "John Doe", "email": "[email protected]" },

{ "id": 2, "name": "Jane Smith", "email": "[email protected]" }

],

"posts": [

{ "id": 1, "title": "Hello World", "content": "This is the first post." },

{ "id": 2, "title": "JSON Server", "content": "A great tool for mocking APIs." }

]

}           

3. 啟動 JSON Server

在指令行中，導航到您的項目目錄，并運作以下指令以啟動 JSON Server：

json-server --watch db.json           

JSON Server 将會啟動，并監聽預設的端口号（3000）。

4. 測試 API

JSON Server 啟動後，您可以使用任何支援 HTTP 請求的用戶端工具（如浏覽器、Postman 或 cURL）來測試您的 API。

• GET 請求示例：在浏覽器中通路 `http://localhost:3000/users`，将傳回所有使用者的 JSON 數組。
• POST 請求示例：使用用戶端工具向 `http://localhost:3000/users` 發送一個 POST 請求，将建立一個新的使用者。
• PUT/DELETE 請求示例：使用用戶端工具向 `http://localhost:3000/users/1` 發送一個 PUT 或 DELETE 請求，可以更新或删除 ID 為 1 的使用者。
• JSON Server 根據路由規則自動處理請求，并傳回相應的資料或執行相應的操作。

5. 自定義路由和過濾器

JSON Server 允許您自定義路由規則和過濾器來滿足特定的需求。您可以在啟動 JSON Server 時使用 `--routes` 參數指定一個自定義的路由配置檔案，并使用 `--filter` 參數添加過濾器。例如，建立一個名為 `routes.json` 的檔案，并定義路由規則：

{

"/api/posts/:id/comments": "/comments?postId=:id"

}           

在啟動 JSON Server 時，使用以下指令來指定路由配置和過濾器：

json-server --watch db.json --routes routes.json --filter /api/           

這将建立一個路由 `/api/posts/:id/comments`，它将傳回與特定文章 ID 相關聯的評論。

6. 更多進階功能

JSON Server 還提供了其他一些進階功能，如設定延遲響應時間、模拟錯誤響應、使用中間件等，可以在https://github.com/typicode/json-server查詢、學習。