U web razvoju, prikazivanje podataka s poslužitelja na web stranicama ključno je za stvaranje interaktivnih i dinamičnih korisničkih iskustava. Ovdje Template Engine priskaču Express.js u pomoć. A Template Engine je alat koji vam omogućuje stvaranje dinamičkih HTML predložaka ubacivanjem podataka s poslužitelja u HTML kod.
Zašto koristiti Template Engine ?
Template Engine pomažu odvojiti HTML oznake od podataka koji dolaze s poslužitelja. To vam omogućuje lakše upravljanje HTML kodom bez potrebe za ugrađivanjem podataka u svaki redak koda. Umjesto toga, stvorit ćete "placeholders" ili "tagove" unutar HTML koda, koji će se Template Engine kasnije ispuniti podacima sa strane poslužitelja.
Korištenje Template Engine u Express.js
Express.js podržava različite template engine, kao što su Pug(prije poznat kao Jade) i EJS(Embedded JavaScript). Ispod su primjeri korištenja Pug i EJS u Express.js:
Korištenje Pug Template Engine
Instalirajte Pug: morate instalirati pug paket putem npm-a.
npm install pug --save
Konfiguracija Template Engine: U konfiguracijskoj datoteci vaše aplikacije(npr. app.js), definirajte Pug kao template engine.
app.set('view engine', 'pug');
Stvorite Pug predložak: Stvorite Pug datoteke u views direktoriju. Na primjer, stvorite index.pug datoteku:
doctype html
html
head
title My Express App
body
h1 Welcome to My Express App
p #{message}
Rukovanje rutom i prikaz podataka: U rukovanju rutom možete proslijediti podatke template engine pomoću res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Korištenje EJS-a Template Engine
Instalirajte EJS: Instalirajte ejs paket putem npm-a.
npm install ejs --save
Konfiguracija Template Engine: definirajte EJS kao u template engine konfiguraciji svoje aplikacije.
app.set('view engine', 'ejs');
Stvorite EJS predložak: Stvorite EJS datoteke u views direktoriju. Na primjer, stvorite index.ejs datoteku:
<!DOCTYPE html>
<html>
<head>
<title>My Express App</title>
</head>
<body>
<h1>Welcome to My Express App</h1>
<p><%= message %></p>
</body>
</html>
Rukovanje rutom i prikaz podataka: U rukovanju rutom proslijedite podatke template engine pomoću res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Zaključak
Korištenje Template Engine ina Express.js vam omogućuje stvaranje dinamičkih web stranica i prikaz informacija s poslužitelja na korisničkom pregledniku. Korištenjem Pug-a, EJS-a ili drugih template engine, možete izgraditi interaktivne i fleksibilne web stranice koje pružaju bolje korisničko iskustvo i optimiziraju upravljanje HTML kodom i podacima.