close

Template Engine ਵਿੱਚ ਵਰਤ ਰਿਹਾ ਹੈ Express.js

ਵੈੱਬ ਵਿਕਾਸ ਵਿੱਚ, ਇੰਟਰਐਕਟਿਵ ਅਤੇ ਗਤੀਸ਼ੀਲ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਬਣਾਉਣ ਲਈ ਵੈਬ ਪੇਜਾਂ 'ਤੇ ਸਰਵਰ ਤੋਂ ਡੇਟਾ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਇਹ ਉਹ ਥਾਂ ਹੈ Template Engine ਜਿੱਥੇ Express.js ਬਚਾਅ ਲਈ ਆਉਂਦੇ ਹਨ. A Template Engine ਇੱਕ ਅਜਿਹਾ ਟੂਲ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਸਰਵਰ ਤੋਂ HTML ਕੋਡ ਵਿੱਚ ਡਾਟਾ ਇੰਜੈਕਟ ਕਰਕੇ ਡਾਇਨਾਮਿਕ HTML ਟੈਂਪਲੇਟ ਬਣਾਉਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।

ਕਿਉਂ ਵਰਤੋ Template Engine ?

Template Engine ਸਰਵਰ ਤੋਂ ਆਉਣ ਵਾਲੇ ਡੇਟਾ ਤੋਂ HTML ਮਾਰਕਅੱਪ ਨੂੰ ਵੱਖ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰੋ। ਇਹ ਤੁਹਾਨੂੰ ਕੋਡ ਦੀ ਹਰੇਕ ਲਾਈਨ ਵਿੱਚ ਡੇਟਾ ਨੂੰ ਏਮਬੈਡ ਕੀਤੇ ਬਿਨਾਂ HTML ਕੋਡ ਨੂੰ ਹੋਰ ਆਸਾਨੀ ਨਾਲ ਪ੍ਰਬੰਧਿਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। ਇਸਦੀ ਬਜਾਏ, ਤੁਸੀਂ HTML ਕੋਡ ਦੇ ਅੰਦਰ "ਪਲੇਸਹੋਲਡਰ" ਜਾਂ "ਟੈਗ" ਬਣਾਉਗੇ, ਜੋ Template Engine ਬਾਅਦ ਵਿੱਚ ਸਰਵਰ-ਸਾਈਡ ਡੇਟਾ ਨਾਲ ਭਰ ਦੇਵੇਗਾ।

Template Engine ਵਿੱਚ ਵਰਤ ਰਿਹਾ ਹੈ Express.js

Express.js ਕਈ ਤਰ੍ਹਾਂ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ template engine, ਜਿਵੇਂ ਕਿ Pug(ਪਹਿਲਾਂ ਜੇਡ ਵਜੋਂ ਜਾਣਿਆ ਜਾਂਦਾ ਸੀ) ਅਤੇ EJS(ਏਮਬੈਡਡ JavaScript)। ਹੇਠਾਂ Pug ਅਤੇ EJS ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀਆਂ ਉਦਾਹਰਣਾਂ ਹਨ Express.js:

ਪੱਗ ਦੀ ਵਰਤੋਂ ਕਰਨਾ Template Engine

Pug ਇੰਸਟਾਲ ਕਰੋ: ਤੁਹਾਨੂੰ pug npm ਦੁਆਰਾ ਪੈਕੇਜ ਨੂੰ ਸਥਾਪਿਤ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। 

npm install pug --save

ਸੰਰਚਨਾ ਕਰੋ Template Engine: ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਸੰਰਚਨਾ ਫਾਈਲ(ਜਿਵੇਂ ਕਿ, app.js) ਵਿੱਚ Pug ਨੂੰ template engine.

app.set('view engine', 'pug');

ਇੱਕ ਪੱਗ ਟੈਂਪਲੇਟ ਬਣਾਓ: views ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਪੱਗ ਫਾਈਲਾਂ ਬਣਾਓ। ਉਦਾਹਰਨ ਲਈ, ਇੱਕ index.pug ਫਾਈਲ ਬਣਾਓ:

doctype html  
html  
  head  
    title My Express App  
  body  
    h1 Welcome to My Express App  
    p #{message}

ਰੂਟ ਹੈਂਡਲਿੰਗ ਅਤੇ ਡੇਟਾ ਰੈਂਡਰਿੰਗ: ਰੂਟ ਹੈਂਡਲਿੰਗ ਵਿੱਚ, ਤੁਸੀਂ ਡੇਟਾ ਦੀ template engine ਵਰਤੋਂ ਕਰਕੇ ਪਾਸ ਕਰ ਸਕਦੇ ਹੋ res.render() । 

app.get('/',(req, res) => {  
  const message = 'Hello from Express!';  
  res.render('index', { message });  
});

EJS ਦੀ ਵਰਤੋਂ ਕਰਨਾ Template Engine

EJS ਸਥਾਪਿਤ ਕਰੋ: ejs npm ਦੁਆਰਾ ਪੈਕੇਜ ਨੂੰ ਸਥਾਪਿਤ ਕਰੋ। 

npm install ejs --save

ਕੌਂਫਿਗਰ ਕਰੋ Template Engine: template engine ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਸੰਰਚਨਾ ਵਿੱਚ EJS ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ। 

app.set('view engine', 'ejs');

ਇੱਕ EJS ਟੈਂਪਲੇਟ ਬਣਾਓ: views ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ EJS ਫਾਈਲਾਂ ਬਣਾਓ। ਉਦਾਹਰਨ ਲਈ, ਇੱਕ index.ejs ਫਾਈਲ ਬਣਾਓ:

<!DOCTYPE html>  
<html>  
<head>  
  <title>My Express App</title>  
</head>  
<body>  
  <h1>Welcome to My Express App</h1>  
  <p><%= message %></p>  
</body>  
</html>

ਰੂਟ ਹੈਂਡਲਿੰਗ ਅਤੇ ਡੇਟਾ ਰੈਂਡਰਿੰਗ: ਰੂਟ ਹੈਂਡਲਿੰਗ ਵਿੱਚ, template engine ਵਰਤੋਂ ਵਿੱਚ ਡੇਟਾ ਪਾਸ ਕਰੋ res.render() । 

app.get('/',(req, res) => {  
  const message = 'Hello from Express!';  
  res.render('index', { message });  
});

 

ਸਿੱਟਾ

Template Engine ਵਿੱਚ ਵਰਤਣਾ Express.js ਤੁਹਾਨੂੰ ਗਤੀਸ਼ੀਲ ਵੈਬ ਪੇਜ ਬਣਾਉਣ ਅਤੇ ਉਪਭੋਗਤਾ ਦੇ ਬ੍ਰਾਉਜ਼ਰ 'ਤੇ ਸਰਵਰ ਤੋਂ ਜਾਣਕਾਰੀ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। Pug, EJS, ਜਾਂ ਹੋਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ template engine, ਤੁਸੀਂ ਇੰਟਰਐਕਟਿਵ ਅਤੇ ਲਚਕਦਾਰ ਵੈਬ ਪੇਜ ਬਣਾ ਸਕਦੇ ਹੋ ਜੋ ਇੱਕ ਬਿਹਤਰ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ ਅਤੇ HTML ਕੋਡ ਅਤੇ ਡੇਟਾ ਦੇ ਪ੍ਰਬੰਧਨ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਂਦੇ ਹਨ।