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(ఎంబెడెడ్ జావాస్క్రిప్ట్) వంటి వివిధ రకాలకు మద్దతు ఇస్తుంది. పగ్ మరియు EJSని ఉపయోగించే ఉదాహరణలు క్రింద ఉన్నాయి Express.js:

పగ్ ఉపయోగించి Template Engine

పగ్‌ని ఇన్‌స్టాల్ చేయండి: మీరు ప్యాకేజీని npm ద్వారా ఇన్‌స్టాల్ చేయాలి pug.

npm install pug --save

కాన్ఫిగర్ చేయండి Template Engine: మీ అప్లికేషన్ యొక్క కాన్ఫిగరేషన్ ఫైల్‌లో(ఉదా, app.js), పగ్‌ని ఇలా నిర్వచించండి 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 కోడ్ మరియు డేటా నిర్వహణను ఆప్టిమైజ్ చేసే ఇంటరాక్టివ్ మరియు సౌకర్యవంతమైన వెబ్ పేజీలను రూపొందించవచ్చు.