我的 React 之旅：第 19 天

使用 JSON API 和模擬伺服器進行練習

使用 json-server 是模擬後端伺服器並練習 GET、POST、PUT、PATCH 和 DELETE 等 API 互動的好方法。

什麼是 json-server？

• 一個工具，允許您快速建立一個模擬伺服器來使用JSON資料庫。
• 非常適合原型設計和測試 API，無需功能齊全的後端。

設定和安裝

1。先決條件：Node.js

• 確保您的系統上安裝了 Node.js。驗證使用：

node -v
npm -v

2。安裝 json-server

• 使用 npm 全域安裝：

npm install -g json-server@0.17.4

如何使用 json-server

1。啟動伺服器
使用一些初始資料在工作目錄中建立 db.json 檔案。例：

{
  "posts": [
    { "id": 1, "title": "First Post", "content": "Hello World!" },
    { "id": 2, "title": "Second Post", "content": "Learning JSON-Server" }
  ]
}

• 啟動伺服器並觀察 db.json 檔案中的變更：

json-server --watch db.json

• 預設情況下，伺服器將在 http://localhost:3000 運作。

2。探索端點
伺服器會自動為 db.json 中的每個集合建立 RESTful 端點：

• GET /posts → 取得所有貼文
• GET /posts/1 → 取得 ID 為 1 的貼文
• POST /posts → 新增新貼文
• PUT /posts/1 → 將整個貼文替換為 ID 1
• PATCH /posts/1 → 更新貼文中 ID 為 1 的特定欄位
• DELETE /posts/1 → 刪除 ID 為 1 的貼文

使用郵差

Postman 是用來發出HTTP 請求來測試API的工具。以下是如何使用 Postman 執行每個操作：

1。 GET（取得數據）

• 請求類型：GET
• 網址：http://localhost:3000/posts
• 取得貼文清單。

2。 POST（新增資料）

• 請求類型：POST
• 網址：http://localhost:3000/posts
• 標頭：內容類型：application/json
• 正文（JSON）：

{
  "id": 3,
  "title": "New Post",
  "content": "This is a new post"
}

• 將新貼文加入貼文集合。

3。 PUT（取代整個資源）

• 請求類型：PUT
• 網址：http://localhost:3000/posts/2
• 標頭：內容類型：application/json

• 正文（JSON）：
  {
  "title": "更新標題"
  }

• 結果：用提供的資料取代整個資源。

之前：

{
  "id": 2,
  "title": "Second Post",
  "content": "Learning JSON-Server"
}

之後：

{
  "title": "Updated Title"
}

4。 PATCH（更新特定欄位）

• 請求類型：PATCH
• 網址：http://localhost:3000/posts/1
• 標頭：內容類型：application/json
• 正文（JSON）：

node -v
npm -v

結果： 僅更新資源中的指定欄位。

之前：

npm install -g json-server@0.17.4

之後：

{
  "posts": [
    { "id": 1, "title": "First Post", "content": "Hello World!" },
    { "id": 2, "title": "Second Post", "content": "Learning JSON-Server" }
  ]
}

5。 DELETE（刪除資料）

• 請求類型：刪除
• 網址：http://localhost:3000/posts/1
• 刪除 ID 為 1 的貼文。

PUT 與 PATCH 之間的主要差異

放置

• 替換整個資源。
• 省略正文中未包含的任何欄位。

補丁

• 僅更新指定欄位。
• 保留正文中未提及的欄位。

結論

我學到了什麼：

• 安裝並使用 json-server 建立模擬 API 伺服器。
• 練習了基本的 API 操作：GET、POST、PUT、PATCH、DELETE。
• 了解 PUT 和 PATCH 之間的差異。

第 19 天崩潰了。

以上是我的 React 之旅：第 19 天的詳細內容。更多資訊請關注PHP中文網其他相關文章！