MERN Stack പഠനത്തിന്റെ 37-ാം ദിവസം
എന്റെ MERN stack പഠനയാത്രയുടെ 37-ാം ദിവസമാണിന്ന്.
ഇന്നലെ, /about, /contact തുടങ്ങിയ പേജുകൾക്കായി ക്ലീൻ റൂട്ടിംഗ് (clean routing) ഞാൻ സജ്ജമാക്കി. ഇന്ന്, ഞാൻ ബാക്കെൻഡ് ഡാറ്റാ കമ്മ്യൂണിക്കേഷനിൽ (backend data communication) ശ്രദ്ധ കേന്ദ്രീകരിച്ചു. ഞാൻ URL parsing-നെക്കുറിച്ചും query parameters-നെക്കുറിച്ചും പഠിച്ചു.
ഒരു വെബ്സൈറ്റിൽ നിങ്ങൾ ഉൽപ്പന്നങ്ങൾ തിരയുമ്പോൾ, സൈറ്റ് URL വഴി ഡാറ്റ അയക്കുന്നു. അഡ്രസ് ബാറിലെ ചോദ്യചിഹ്നത്തിന് (question mark) ശേഷം അധികമായി ചില ടെക്സ്റ്റുകൾ കാണാറുണ്ട്. ഇതാണ് query data.
ഈ ഡാറ്റ വായിക്കാൻ Node.js url module എങ്ങനെ ഉപയോഗിക്കാമെന്ന് ഞാൻ പഠിച്ചു. ഈ മോഡ്യൂൾ ഒരു നീളമുള്ള URL സ്ട്രിംഗിനെ ഒരു സ്ട്രക്ചർഡ് ഒബ്ജക്റ്റായി (structured object) മാറ്റുന്നു.
ഡാറ്റ എങ്ങനെ വിഭജിക്കപ്പെടുന്നു എന്ന് താഴെ നൽകുന്നു:
- Pathname: ഇത് /search അല്ലെങ്കിൽ /api/products പോലുള്ള പ്രധാന ലൊക്കേഷനാണ്.
- Query: ചോദ്യചിഹ്നത്തിന് ശേഷമുള്ള key-value ജോഡികളാണിവ, ഉദാഹരണത്തിന് ?name=ali&id=7.
url module ഈ ഡാറ്റ നിങ്ങളുടെ കോഡിൽ എളുപ്പത്തിൽ ഉപയോഗിക്കാൻ സഹായിക്കുന്നു. ഇത് സ്ട്രിംഗിനെ ഒരു 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 ചെയ്യാൻ പഠിക്കുന്നത് ഡൈനാമിക് വെബ്സൈറ്റുകൾ നിർമ്മിക്കാൻ നിങ്ങളെ സഹായിക്കും. വെബ് അഡ്രസ്സിൽ നിന്ന് നേരിട്ട് ഉപയോക്താവിന്റെ ഇൻപുട്ട് (user input) സ്വീകരിക്കാൻ നിങ്ങൾക്ക് ഇപ്പോൾ സാധിക്കും.
Source: https://dev.to/ali_hamza_589ec7b3eb6688d/day-37-of-learning-mern-stack-4758