Při vývoji webu je zobrazení dat ze serveru na webových stránkách zásadní pro vytváření interaktivních a dynamických uživatelských zkušeností. Tady Template Engine přichází Express.js na pomoc. A Template Engine je nástroj, který vám umožňuje vytvářet dynamické šablony HTML vložením dat ze serveru do kódu HTML.
Proč používat Template Engine ?
Template Engine pomáhají oddělit značky HTML od dat přicházejících ze serveru. To vám umožní snadněji spravovat kód HTML, aniž byste museli vkládat data do každého řádku kódu. Místo toho vytvoříte v kódu HTML „zástupné symboly“ nebo „značky“, které se Template Engine později vyplní daty na straně serveru.
Použití Template Engine v Express.js
Express.js podporuje různé template engine, jako je Pug(dříve známý jako Jade) a EJS(Embedded JavaScript). Níže jsou uvedeny příklady použití Pug a EJS v Express.js:
Pomocí Pug Template Engine
Install Pug: Balíček musíte nainstalovat pug přes npm.
npm install pug --save
Configure Template Engine: V konfiguračním souboru vaší aplikace(např. app.js) definujte Pug jako template engine.
app.set('view engine', 'pug');
Vytvořit šablonu Pug: Vytvořte soubory Pug v views adresáři. Vytvořte například index.pug soubor:
doctype html
html
head
title My Express App
body
h1 Welcome to My Express App
p #{message}
Manipulace s trasou a vykreslování dat: Při zpracování tras můžete data předávat template engine pomocí res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Pomocí EJS Template Engine
Instalace EJS: Nainstalujte ejs balíček přes npm.
npm install ejs --save
Configure Template Engine: Definujte EJS jako template engine v konfiguraci vaší aplikace.
app.set('view engine', 'ejs');
Vytvoření šablony EJS: Vytvořte soubory EJS v views adresáři. Vytvořte například index.ejs soubor:
<!DOCTYPE html>
<html>
<head>
<title>My Express App</title>
</head>
<body>
<h1>Welcome to My Express App</h1>
<p><%= message %></p>
</body>
</html>
Manipulace s trasou a vykreslování dat: Při zpracování tras předávejte data template engine pomocí res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Závěr
Použití Template Engine in Express.js vám umožňuje vytvářet dynamické webové stránky a zobrazovat informace ze serveru v prohlížeči uživatele. Využitím Pug, EJS nebo jiných template engine, můžete vytvářet interaktivní a flexibilní webové stránky, které poskytují lepší uživatelskou zkušenost a optimalizují správu HTML kódu a dat.