W tworzeniu stron internetowych wyświetlanie danych z serwera na stronach internetowych ma kluczowe znaczenie dla tworzenia interaktywnych i dynamicznych doświadczeń użytkownika. To gdzie Template Engine w Express.js przyjść na ratunek. A Template Engine to narzędzie, które umożliwia tworzenie dynamicznych szablonów HTML poprzez wstrzykiwanie danych z serwera do kodu HTML.
Dlaczego używać Template Engine ?
Template Engine pomagają oddzielić znaczniki HTML od danych pochodzących z serwera. Pozwala to łatwiej zarządzać kodem HTML bez konieczności osadzania danych w każdym wierszu kodu. Zamiast tego utworzysz „symbole zastępcze” lub „tagi” w kodzie HTML, który Template Engine później zostanie wypełniony danymi po stronie serwera.
Używanie Template Engine w Express.js
Express.js obsługuje różne template engine, takie jak Pug(wcześniej znany jako Jade) i EJS(Embedded JavaScript). Poniżej znajdują się przykłady użycia Pug i EJS w Express.js:
Korzystanie z Mopsa Template Engine
Zainstaluj Pug: Musisz zainstalować pug pakiet przez npm.
npm install pug --save
Skonfiguruj Template Engine: W pliku konfiguracyjnym aplikacji(np. app.js) zdefiniuj Pug jako plik template engine.
app.set('view engine', 'pug');
Utwórz szablon mopsa: Utwórz pliki mopsa w views katalogu. Na przykład utwórz index.pug plik:
doctype html
html
head
title My Express App
body
h1 Welcome to My Express App
p #{message}
Obsługa tras i renderowanie danych: Podczas obsługi tras można przekazywać dane do metody template engine using res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Korzystanie z EJS Template Engine
Zainstaluj EJS: Zainstaluj ejs pakiet przez npm.
npm install ejs --save
Konfiguruj Template Engine: Zdefiniuj EJS jako w template engine konfiguracji aplikacji.
app.set('view engine', 'ejs');
Utwórz szablon EJS: Utwórz pliki EJS w views katalogu. Na przykład utwórz index.ejs plik:
<!DOCTYPE html>
<html>
<head>
<title>My Express App</title>
</head>
<body>
<h1>Welcome to My Express App</h1>
<p><%= message %></p>
</body>
</html>
Obsługa tras i renderowanie danych: Podczas obsługi tras przekaż dane do metody template engine using res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Wniosek
Wykorzystanie Template Engine w Express.js umożliwia tworzenie dynamicznych stron internetowych oraz wyświetlanie informacji z serwera w przeglądarce użytkownika. Wykorzystując Pug, EJS lub inne template engine, możesz tworzyć interaktywne i elastyczne strony internetowe, które zapewniają lepszą obsługę i optymalizują zarządzanie kodem HTML i danymi.