Hari ke-37 Mempelajari MERN Stack
Saya kini berada di hari ke-37 dalam perjalanan MERN stack saya.
Semalam, saya telah menyediakan routing yang bersih untuk halaman seperti /about dan /contact. Hari ini, saya memberi tumpuan kepada komunikasi data backend. Saya telah mempelajari tentang URL parsing dan query parameters.
Apabila anda mencari produk di sesebuah laman web, laman tersebut menghantar data melalui URL. Anda sering melihat teks tambahan selepas tanda soal di bar alamat. Ini adalah query data.
Saya telah mempelajari cara menggunakan modul url Node.js untuk membaca data ini. Modul tersebut menukarkan string URL yang panjang kepada objek yang berstruktur.
Berikut adalah pecahan datanya:
- Pathname: Ini adalah lokasi utama, seperti /search atau /api/products.
- Query: Ini adalah pasangan kunci-nilai (key-value pairs) selepas tanda soal, seperti ?name=ali&id=7.
Modul url memudahkan penggunaan data ini dalam kod anda. Ia menukarkan string tersebut kepada objek JavaScript.
Contoh kod:
const http = require("http"); const url = require("url");
const server = http.createServer((req, res) => { let parsedUrl = url.parse(req.url, true); let pathname = parsedUrl.pathname; let queryData = parsedUrl.query;
if (pathname === "/search") {
res.writeHead(200, { "Content-Type": "text/plain" });
res.end(`Searching logs for user: ${queryData.name} with ID: ${queryData.id}`);
} else {
res.end("Standard Endpoint View");
}
}); server.listen(8000);
Mempelajari cara melakukan parsing URL membantu anda membina laman web yang dinamik. Anda kini boleh menangkap input pengguna secara terus daripada alamat web.
Sumber: https://dev.to/ali_hamza_589ec7b3eb6688d/day-37-of-learning-mern-stack-4758