MERN Stack ਸਿੱਖਣ ਦਾ 46ਵਾਂ ਦਿਨ
ਮੈਂ ਆਪਣੀ MERN stack ਯਾਤਰਾ ਦੇ 46 ਦਿਨ ਪੂਰੇ ਕਰ ਲਏ ਹਨ।
ਕੱਲ੍ਹ ਮੈਂ Tailwind CSS ਸੈੱਟਅੱਪ ਕੀਤਾ ਸੀ। ਅੱਜ ਮੈਂ EJS templating engine ਸਿੱਖਿਆ।
ਅੱਜ ਤੋਂ ਪਹਿਲਾਂ ਮੇਰੇ HTML ਪੇਜ ਸਟੈਟਿਕ ਸਨ। ਉਹ ਸਰਵਰ ਤੋਂ ਹੋਣ ਵਾਲੀਆਂ ਤਬਦੀਲੀਆਂ ਨੂੰ ਨਹੀਂ ਦਿਖਾ ਸਕਦੇ ਸਨ।
EJS server-side rendering ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। ਇਹ ਤੁਹਾਡੇ backend ਤੋਂ ਲਾਈਵ ਡੇਟਾ ਦੀ ਵਰਤੋਂ ਕਰਕੇ HTML ਬਣਾਉਂਦਾ ਹੈ। ਤੁਸੀਂ ਆਪਣੀ HTML ਦੇ ਅੰਦਰ ਸਿੱਧਾ JavaScript logic ਲਿਖ ਸਕਦੇ ਹੋ।
ਅੱਜ ਮੈਂ ਇਸਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸੈੱਟਅੱਪ ਕੀਤਾ:
- ਮੈਂ Express ਨੂੰ EJS ਨੂੰ view engine ਵਜੋਂ ਵਰਤਣ ਲਈ ਕਿਹਾ।
- ਮੈਂ ਆਪਣੇ templates ਲਈ ਇੱਕ views directory ਬਣਾਈ।
- ਮੈਂ frontend ਨੂੰ ਡੇਟਾ ਭੇਜਣ ਲਈ res.render method ਦੀ ਵਰਤੋਂ ਕੀਤੀ।
ਕੋਡ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ:
const express = require("express");
const app = express();
const users = require("./MOCK_DATA.json");
app.set("view engine", "ejs");
app.get("/users-list", (req, res) => {
res.render("users", { allUsers: users });
});
app.listen(8000);
ਇਹ ਤਰੀਕਾ ਮੇਰੇ ਡੇਟਾ ਨੂੰ ਮੇਰੇ UI ਨਾਲ ਤੁਰੰਤ ਜੋੜ ਦਿੰਦਾ ਹੈ।
ਸਰੋਤ: https://dev.to/ali_hamza_589ec7b3eb6688d/day-46-of-learning-mern-stack-15dh