Në zhvillimin e uebit, shfaqja e të dhënave nga serveri në faqet e internetit është thelbësore për krijimin e përvojave interaktive dhe dinamike të përdoruesit. Kjo është ajo ku Template Engine vjen Express.js në shpëtim. A Template Engine është një mjet që ju lejon të krijoni shabllone dinamike HTML duke injektuar të dhëna nga serveri në kodin HTML.
Pse Përdorni Template Engine ?
Template Engine ndihmojnë në ndarjen e shënimit HTML nga të dhënat që vijnë nga serveri. Kjo ju lejon të menaxhoni kodin HTML më lehtë pa pasur nevojë të futni të dhëna në çdo rresht kodi. Në vend të kësaj, ju do të krijoni "mbajtësit e vendeve" ose "etiketat" brenda kodit HTML, të cilat Template Engine më vonë do të mbushen me të dhëna nga ana e serverit.
Duke përdorur Template Engine në Express.js
Express.js mbështet të ndryshme template engine, të tilla si Pug(i njohur më parë si Jade) dhe EJS(Embedded JavaScript). Më poshtë janë shembuj të përdorimit të Pug dhe EJS në Express.js:
Duke përdorur Pug Template Engine
Instaloni Pug: Duhet të instaloni pug paketën përmes npm.
npm install pug --save
Konfiguro Template Engine: Në skedarin e konfigurimit të aplikacionit tuaj(p.sh., app.js), përcaktoni Pug si template engine.
app.set('view engine', 'pug');
Krijo një model Pug: Krijo skedarë Pug në views drejtori. Për shembull, krijoni një index.pug skedar:
doctype html
html
head
title My Express App
body
h1 Welcome to My Express App
p #{message}
Trajtimi i rrugës dhe transmetimi i të dhënave: Në trajtimin e itinerarit, ju mund t'i kaloni të dhënat duke template engine përdorur res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Duke përdorur EJS Template Engine
Instaloni EJS: Instaloni ejs paketën përmes npm.
npm install ejs --save
Konfiguro Template Engine: Përcaktoni EJS si në template engine konfigurimin e aplikacionit tuaj.
app.set('view engine', 'ejs');
Krijo një shabllon EJS: Krijo skedarë EJS në views drejtori. Për shembull, krijoni një index.ejs skedar:
<!DOCTYPE html>
<html>
<head>
<title>My Express App</title>
</head>
<body>
<h1>Welcome to My Express App</h1>
<p><%= message %></p>
</body>
</html>
Trajtimi i rrugës dhe dhënia e të dhënave: Në trajtimin e rrugës, kaloni të dhënat në template engine përdorimin e res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
konkluzioni
Përdorimi Template Engine në Express.js ju lejon të krijoni faqe dinamike në internet dhe të shfaqni informacione nga serveri në shfletuesin e përdoruesit. Duke përdorur Pug, EJS ose të tjera template engine, ju mund të ndërtoni faqe interneti interaktive dhe fleksibël që ofrojnë një përvojë më të mirë të përdoruesit dhe optimizojnë menaxhimin e kodit dhe të dhënave HTML.