A webfejlesztésben a szerverről származó adatok weboldalakon való megjelenítése döntő fontosságú az interaktív és dinamikus felhasználói élmény megteremtéséhez. Itt Template Engine jön Express.js a segítség. Az A Template Engine egy olyan eszköz, amely lehetővé teszi dinamikus HTML-sablonok létrehozását a szerverről származó adatok HTML-kódba való beillesztésével.
Miért használja Template Engine ?
Template Engine segít elválasztani a HTML-jelölést a szerverről érkező adatoktól. Ez lehetővé teszi a HTML-kód egyszerű kezelését anélkül, hogy adatokat kellene ágyaznia minden kódsorba. Ehelyett "helyőrzőket" vagy "címkéket" kell létrehoznia a HTML-kódon belül, amelyeket Template Engine később szerveroldali adatokkal tölt meg.
Használata Template Engine be Express.js
Express.js különböző szolgáltatásokat támogat template engine, mint például a Pug(korábbi nevén Jade) és az EJS(Embedded JavaScript). Az alábbiakban példák találhatók a Mopsz és az EJS használatára Express.js:
Mopsz használata Template Engine
Pug telepítése: A csomagot npm-en keresztül kell telepítenie pug.
npm install pug --save
Konfigurálás Template Engine: Az alkalmazás konfigurációs fájljában(pl. app.js) adja meg a Pug-ot a template engine.
app.set('view engine', 'pug');
Mopsz-sablon létrehozása: Hozzon létre Pug fájlokat a könyvtárban views. Például hozzon létre egy index.pug fájlt:
doctype html
html
head
title My Express App
body
h1 Welcome to My Express App
p #{message}
Útvonalkezelés és adatmegjelenítés: Az útvonalkezelés során adatokat adhatunk át a template engine felhasználónak res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
EJS használata Template Engine
EJS telepítése: Telepítse a ejs csomagot az npm-en keresztül.
npm install ejs --save
Konfigurálás Template Engine: Határozza meg az EJS-t az template engine alkalmazás konfigurációjában.
app.set('view engine', 'ejs');
EJS-sablon létrehozása: Hozzon létre EJS-fájlokat a views könyvtárban. Például hozzon létre egy index.ejs fájlt:
<!DOCTYPE html>
<html>
<head>
<title>My Express App</title>
</head>
<body>
<h1>Welcome to My Express App</h1>
<p><%= message %></p>
</body>
</html>
Útvonalkezelés és adatmegjelenítés: Az útvonalkezelésben adja át az adatokat a template engine használónak res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Következtetés
Template Engine Az in használatával Express.js dinamikus weboldalakat hozhat létre, és információkat jeleníthet meg a szerverről a felhasználó böngészőjében. A Pug, az EJS vagy más eszközök használatával template engine interaktív és rugalmas weboldalakat készíthet, amelyek jobb felhasználói élményt biztosítanak, és optimalizálják a HTML-kód és adatok kezelését.