วันที่ 37 ของการเรียนรู้ MERN Stack

ผมเดินทางมาถึงวันที่ 37 ของการเรียนรู้ MERN stack แล้ว

เมื่อวานนี้ ผมได้ตั้งค่าการทำ routing ที่สะอาดตาสำหรับหน้าต่างๆ เช่น /about และ /contact ส่วนวันนี้ ผมมุ่งเน้นไปที่การสื่อสารข้อมูลฝั่ง backend โดยได้ศึกษาเรื่อง URL parsing และ query parameters

เมื่อคุณค้นหาสินค้าบนเว็บไซต์ เว็บไซต์จะส่งข้อมูลผ่าน URL คุณมักจะเห็นข้อความเพิ่มเติมหลังเครื่องหมายคำถามในแถบที่อยู่ (address bar) ซึ่งนี่คือข้อมูล query

ผมได้เรียนรู้วิธีการใช้ url module ของ Node.js เพื่ออ่านข้อมูลนี้ โดย module นี้จะเปลี่ยน URL string ที่ยาวๆ ให้กลายเป็น object ที่มีโครงสร้าง

นี่คือรายละเอียดการแยกส่วนของข้อมูล:

url module ช่วยให้การนำข้อมูลนี้ไปใช้ในโค้ดของคุณเป็นเรื่องง่าย โดยมันจะแปลง string ให้เป็น JavaScript object

ตัวอย่างโค้ด:

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);

การเรียนรู้วิธีการ parse URL ช่วยให้คุณสามารถสร้างเว็บไซต์แบบ dynamic ได้ ซึ่งตอนนี้คุณสามารถรับข้อมูลจากผู้ใช้ได้โดยตรงจากที่อยู่เว็บ (web address)

Source: https://dev.to/ali_hamza_589ec7b3eb6688d/day-37-of-learning-mern-stack-4758