Aplikasi Timbunan MERN| Bahagian 2

Dalam konteks aplikasi e-dagang yang dibina dengan tindanan MERN, mari kita lihat cara kitaran tindak balas permintaan berfungsi apabila pengguna cuba mengambil butiran produk.

1. Interaksi Pengguna di Bahagian Hadapan (React)

Seorang pengguna membuka tapak e-dagang dan ingin melihat butiran produk. Mereka mungkin mengklik pada penyenaraian produk atau mencari item tertentu.

React, yang bertanggungjawab untuk UI bahagian hadapan, mengesan interaksi ini dan mencetuskan permintaan untuk mengambil data produk.

React membuat permintaan HTTP (menggunakan axios, fetch, atau serupa) ke bahagian belakang, menyasarkan titik akhir seperti /api/products/:id, dengan :id ialah pengecam unik produk.

1. Permintaan HTTP Dihantar ke Backend (Node.js/Express)

Pelayan bahagian belakang, dibina dengan Node.js dan Express, mendengar permintaan HTTP masuk pada laluan yang ditentukan.

Apabila permintaan untuk /api/products/:id tiba, Express mengenali laluan dan memajukan permintaan itu kepada pengendali laluan yang sepadan.

1. Pemprosesan Pertengahan (Pilihan)

Sebelum permintaan diproses, ia mungkin melalui fungsi perisian tengah.

Sebagai contoh, perisian tengah mungkin log butiran permintaan, menyemak sama ada pengguna disahkan atau mengesahkan parameter permintaan.

Jika semuanya baik-baik saja, permintaan diteruskan kepada pengendali laluan. Jika tidak, perisian tengah boleh mengembalikan respons ralat (cth., "Akses tidak dibenarkan").

1. Interaksi dengan Pangkalan Data (MongoDB)

Setelah permintaan mencapai pengendali laluan yang sesuai, Express menggunakan pemacu MongoDB seperti Mongoose untuk menanyakan pangkalan data.

Pertanyaan mungkin kelihatan seperti ini: Product.findById(productId), di mana productId diekstrak daripada URL.

MongoDB mendapatkan semula butiran produk, termasuk nama, harga, penerangan, imej dan ketersediaannya, daripada pangkalan data.

1. Menyedia dan Menghantar Maklum Balas

Selepas mengambil butiran produk daripada MongoDB, Express memproses data.

Data diformatkan menjadi objek JSON, mengandungi semua maklumat yang diperlukan tentang produk.

Express menghantar respons JSON ini kembali ke bahagian hadapan React.

1. React Menerima dan Mengemas kini UI

React menerima butiran produk dalam respons.

Ia menggunakan data untuk mengemas kini antara muka pengguna, menunjukkan nama produk, harga, imej, penerangan dan maklumat lain yang berkaitan.

Jika produk tidak ditemui atau ralat berlaku (cth., "Produk tidak tersedia"), React memaparkan mesej yang sesuai kepada pengguna.

Contoh Aliran Permintaan-Respons

1. Tindakan Pengguna (React): Pengguna mengklik pada produk bernama "Fon Kepala Wayarles" pada halaman utama.

2. Permintaan HTTP: React menghantar permintaan GET ke /api/products/12345, dengan 12345 ialah ID produk untuk "Fon Kepala Wayarles."

3. Pengendalian Laluan Ekspres: Ekspres menerima permintaan dan menyemak sama ada terdapat laluan untuk /api/products/:id. Ia kemudian menyerahkan permintaan kepada pengendali yang berkaitan.

4. Pertanyaan Pangkalan Data (MongoDB): Express menggunakan Mongoose untuk menanyakan MongoDB, melaksanakan Product.findById("12345") untuk mendapatkan butiran "Fon Kepala Wayarles."

5. Pembentukan Respons: Jika produk ditemui, Express menghantar respons JSON dengan butiran seperti:

{
"id": "12345",
"name": "Fon Kepala Wayarles",
"harga": 59.99,
"description": "Fon kepala wayarles berkualiti tinggi dengan pembatalan hingar.",
"images": ["image1.jpg", "image2.jpg"],
"stok": 20
}

1. UI Kemas Kini React: React menerima data ini dan memaparkannya, menunjukkan kepada pengguna segala-galanya tentang "Fon Kepala Wayarles." Jika terdapat ralat (cth., "Produk tidak ditemui"), React akan menunjukkan mesej yang sesuai.

Konsep Utama yang Diilustrasikan dalam Aliran Ini

Permintaan Asynchronous: React mengendalikan permintaan secara tidak segerak, membenarkan pengguna berinteraksi dengan apl sambil menunggu jawapan.

Aliran Data Konsisten: Semua komponen (React, Express, MongoDB) berkomunikasi melalui JSON, memastikan aliran data lancar merentas tindanan.

Skalabiliti: Setiap komponen boleh diskalakan secara bebas, menjadikannya lebih mudah untuk mengendalikan trafik yang semakin meningkat atau sejumlah besar produk.

Kitaran tindak balas permintaan ini menunjukkan dengan berkesan cara tapak e-dagang yang dibina pada timbunan MERN mendapatkan maklumat produk, memberikan pengalaman yang lancar untuk pengguna.

Atas ialah kandungan terperinci Aplikasi Timbunan MERN| Bahagian 2. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!