𝗗𝗮𝘆 𝟯𝟳 𝗼𝗳 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸

MERN Stack ਸਿੱਖਣ ਦਾ 37ਵਾਂ ਦਿਨ

ਮੈਂ ਆਪਣੀ MERN stack ਯਾਤਰਾ ਦੇ 37ਵੇਂ ਦਿਨ 'ਤੇ ਹਾਂ।

ਕੱਲ੍ਹ, ਮੈਂ /about ਅਤੇ /contact ਵਰਗੇ ਪੇਜਾਂ ਲਈ clean routing ਸੈੱਟਅੱਪ ਕੀਤੀ ਸੀ। ਅੱਜ, ਮੈਂ backend data communication 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕੀਤਾ। ਮੈਂ URL parsing ਅਤੇ query parameters ਬਾਰੇ ਪੜ੍ਹਾਈ ਕੀਤੀ।

ਜਦੋਂ ਤੁਸੀਂ ਕਿਸੇ ਵੈੱਬਸਾਈਟ 'ਤੇ products ਦੀ ਖੋਜ ਕਰਦੇ ਹੋ, ਤਾਂ ਸਾਈਟ URL ਰਾਹੀਂ ਡੇਟਾ ਭੇਜਦੀ ਹੈ। ਤੁਸੀਂ ਅਕਸਰ ਐਡਰੈੱਸ ਬਾਰ ਵਿੱਚ ਪ੍ਰਸ਼ਨ ਚਿੰਨ੍ਹ (?) ਤੋਂ ਬਾਅਦ ਵਾਧੂ ਟੈਕਸਟ ਦੇਖਦੇ ਹੋ। ਇਹ query data ਹੁੰਦਾ ਹੈ।

ਮੈਂ ਇਸ ਡੇਟਾ ਨੂੰ ਪੜ੍ਹਨ ਲਈ Node.js url module ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਸਿੱਖਿਆ। ਇਹ ਮੋਡਿਊਲ ਇੱਕ ਲੰਬੀ URL string ਨੂੰ ਇੱਕ structured object ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ।

ਡੇਟਾ ਇਸ ਤਰ੍ਹਾਂ ਵੰਡਿਆ ਜਾਂਦਾ ਹੈ:

• Pathname: ਇਹ ਮੁੱਖ ਸਥਾਨ ਹੈ, ਜਿਵੇਂ ਕਿ /search ਜਾਂ /api/products।
• Query: ਇਹ ਪ੍ਰਸ਼ਨ ਚਿੰਨ੍ਹ ਤੋਂ ਬਾਅਦ ਦੇ key-value pairs ਹਨ, ਜਿਵੇਂ ਕਿ ?name=ali&id=7।

url module ਇਸ ਡੇਟਾ ਨੂੰ ਤੁਹਾਡੇ ਕੋਡ ਵਿੱਚ ਵਰਤਣਾ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ। ਇਹ string ਨੂੰ JavaScript object ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ।

Example code:

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

URL parse ਕਰਨਾ ਸਿੱਖਣ ਨਾਲ ਤੁਹਾਨੂੰ dynamic websites ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਮਿਲਦੀ ਹੈ। ਹੁਣ ਤੁਸੀਂ ਵੈੱਬ ਐਡਰੈੱਸ ਤੋਂ ਸਿੱਧੇ ਤੌਰ 'ਤੇ user input ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹੋ।

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