V spletnem razvoju je prikaz podatkov s strežnika na spletnih straneh ključnega pomena za ustvarjanje interaktivnih in dinamičnih uporabniških izkušenj. Tukaj Template Engine priskoči Express.js na pomoč. A Template Engine je orodje, ki vam omogoča ustvarjanje dinamičnih predlog HTML z vstavljanjem podatkov s strežnika v kodo HTML.
Zakaj uporabljati Template Engine ?
Template Engine pomagajo pri ločevanju oznak HTML od podatkov, ki prihajajo s strežnika. To vam omogoča lažje upravljanje kode HTML, ne da bi morali v vsako vrstico kode vdelati podatke. Namesto tega boste znotraj kode HTML ustvarili "placeholders" ali "tags", ki jih boste Template Engine kasneje napolnili s podatki na strani strežnika.
Uporaba Template Engine v Express.js
Express.js podpira različne template engine, kot sta Pug(prej znan kot Jade) in EJS(vdelan JavaScript). Spodaj so primeri uporabe Pug in EJS v Express.js:
Uporaba Pug Template Engine
Namestite Pug: Paket morate namestiti pug prek npm.
npm install pug --save
Konfiguriraj Template Engine: v konfiguracijski datoteki vaše aplikacije(npr. app.js) definirajte Pug kot template engine.
app.set('view engine', 'pug');
Ustvarite predlogo Pug: ustvarite datoteke Pug v views imeniku. Ustvarite na primer index.pug datoteko:
doctype html
html
head
title My Express App
body
h1 Welcome to My Express App
p #{message}
Obdelava poti in upodabljanje podatkov: Pri obdelavi poti lahko podatke posredujete z template engine uporabo res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Uporaba EJS Template Engine
Namestite EJS: namestite ejs paket prek npm.
npm install ejs --save
Konfiguriraj Template Engine: definirajte EJS kot template engine v konfiguraciji vaše aplikacije.
app.set('view engine', 'ejs');
Ustvarite predlogo EJS: Ustvarite datoteke EJS v views imeniku. Ustvarite na primer index.ejs datoteko:
<!DOCTYPE html>
<html>
<head>
<title>My Express App</title>
</head>
<body>
<h1>Welcome to My Express App</h1>
<p><%= message %></p>
</body>
</html>
Obdelava poti in upodabljanje podatkov: Pri obdelavi poti prenesite podatke v template engine uporabo res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Zaključek
Uporaba Template Engine v Express.js vam omogoča ustvarjanje dinamičnih spletnih strani in prikaz informacij s strežnika v uporabnikovem brskalniku. Z uporabo Pug, EJS ali drugega template engine lahko ustvarite interaktivne in prilagodljive spletne strani, ki zagotavljajo boljšo uporabniško izkušnjo in optimizirajo upravljanje kode HTML in podatkov.