close

Használata Template Engine be Express.js

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.