MERN スタックアプリケーション|パート 2-jsチュートリアル-php.cn

MERN スタックアプリケーション|パート 2

Patricia Arquette

リリース： 2024-10-23 21:26:02

オリジナル

279 人が閲覧しました

MERN Stack Application| Part 2

MERN スタックで構築された e コマースアプリケーションのコンテキストで、ユーザーが商品の詳細を取得しようとしたときに要求と応答のサイクルがどのように機能するかを見てみましょう。

ユーザーは電子商取引サイトを開いて、商品の詳細を表示したいと考えています。製品リストをクリックしたり、特定の商品を検索したりする可能性があります。

フロントエンド UI を担当する React は、このインタラクションを検出し、製品データを取得するリクエストをトリガーします。

React は、/api/products/:id のようなエンドポイントをターゲットとして、(axios、fetch などを使用して) バックエンドに HTTP リクエストを作成します。ここで、:id は製品の一意の識別子です。

Node.js と Express で構築されたバックエンドサーバーは、定義されたルートで受信 HTTP リクエストをリッスンします。

/api/products/:id へのリクエストが到着すると、Express はルートを認識し、リクエストを対応するルートハンドラーに転送します。

リクエストが処理される前に、ミドルウェア機能が通過する可能性があります。

たとえば、ミドルウェアはリクエストの詳細をログに記録したり、ユーザーが認証されているかどうかを確認したり、リクエストパラメータを検証したりする場合があります。

すべてが正常であれば、リクエストはルートハンドラーに進みます。それ以外の場合、ミドルウェアはエラー応答 (例: 「不正アクセス」) を返す可能性があります。

リクエストが適切なルートハンドラーに到達すると、Express は Mongoose などの MongoDB ドライバーを使用してデータベースにクエリを実行します。

クエリは次のようになります: Product.findById(productId)。productId は URL から抽出されます。

MongoDB は、名前、価格、説明、画像、在庫状況などの製品の詳細をデータベースから取得します。

MongoDB から製品の詳細を取得した後、Express はデータを処理します。

データは JSON オブジェクトにフォーマットされ、製品に関する必要な情報がすべて含まれます。

Express は、この JSON 応答を React フロントエンドに送り返します。

React は応答で製品の詳細を受け取ります。

データを使用してユーザーインターフェースを更新し、製品の名前、価格、画像、説明、その他の関連情報を表示します。

製品が見つからない場合、またはエラーが発生した場合 (「製品が利用できません」など)、React はユーザーに適切なメッセージを表示します。

リクエストとレスポンスのフローの例

ユーザーアクション (反応): ユーザーは、ホームページで「ワイヤレスヘッドフォン」という名前の製品をクリックします。
HTTP リクエスト: React は GET リクエストを /api/products/12345 に送信します。12345 は「ワイヤレスヘッドフォン」の製品 ID です。
Express ルート処理: Express はリクエストを受信し、/api/products/:id のルートがあるかどうかを確認します。次に、リクエストを関連するハンドラーに渡します。
データベースクエリ (MongoDB): Express は Mongoose を使用して MongoDB にクエリを実行し、Product.findById("12345") を実行して「ワイヤレスヘッドフォン」の詳細を取得します。
応答の形式: 製品が見つかった場合、Express は次のような詳細を含む JSON 応答を送信します:

{
"id": "12345",
"name": "ワイヤレスヘッドフォン",
「価格」: 59.99、
"description": "ノイズキャンセリング機能を備えた高品質ワイヤレスヘッドフォン。",
"画像": ["画像1.jpg", "画像2.jpg"],
「ストック」: 20
}