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 पग(पूर्वी जेड म्हणून ओळखले जाणारे) आणि EJS(एम्बेडेड JavaScript) सारख्या विविध चे समर्थन करते. खाली पग आणि ईजेएस वापरण्याची उदाहरणे आहेत Express.js:

पग वापरणे Template Engine

पग स्थापित करा: तुम्हाला npm द्वारे पॅकेज स्थापित करणे आवश्यक आहे pug.

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 टेम्पलेट तयार करा: निर्देशिकेत EJS फाइल्स तयार करा views. उदाहरणार्थ, एक 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 कोड आणि डेटाचे व्यवस्थापन ऑप्टिमाइझ करतात.