close

Używanie Template Engine w Express.js

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.