私の 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 は、API をテストするための HTTP リクエストを作成するためのツールです。 Postman を使用して各操作を実行する方法は次のとおりです:

1. GET (データの取得)

• リクエストタイプ: GET
• URL: http://localhost:3000/posts
• 投稿のリストを取得します。

2. POST (新しいデータの追加)

• リクエストタイプ: POST
• URL: http://localhost:3000/posts
• ヘッダー: Content-Type: application/json
• 本文(JSON):

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

• 投稿コレクションに新しい投稿を追加します。

3. PUT (リソース全体を置換)

• リクエストタイプ: PUT
• URL: http://localhost:3000/posts/2
• ヘッダー: Content-Type: application/json

• 本体 (JSON):
  {
  "title": "更新されたタイトル"
  }

• 結果: リソース全体を提供されたデータで置き換えます。

前:

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

後:

{
  "title": "Updated Title"
}

4. PATCH (特定のフィールドを更新)

• リクエストタイプ: PATCH
• URL: http://localhost:3000/posts/1
• ヘッダー: Content-Type: 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 (データの削除)

• リクエストの種類: 削除
• URL: http://localhost:3000/posts/1
• ID 1 の投稿を削除します。

PUT と PATCH の主な違い

置く

• リソース全体を置き換えます。
• 本文に含まれないフィールドは省略します。

パッチ

• 指定されたフィールドのみを更新します。
• 本文で言及されていないフィールドは保持されます。

結論

学んだこと:

• json-server をインストールし、使用してモック API サーバーを作成しました。
• 基本的な API 操作: GET、POST、PUT、PATCH、DELETE を練習しました。
• PUT と PATCH の違いを理解しました。

19 日目は潰れました。

以上が私の React の旅: 19 日目の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。