În dezvoltarea web, afișarea datelor de pe server pe paginile web este crucială pentru crearea unor experiențe interactive și dinamice ale utilizatorilor. Aici venim Template Engine la Express.js salvare. A Template Engine este un instrument care vă permite să creați șabloane HTML dinamice prin injectarea datelor de pe server în codul HTML.
De ce să folosiți Template Engine ?
Template Engine ajuta la separarea de markup HTML de datele care vin de la server. Acest lucru vă permite să gestionați codul HTML mai ușor, fără a fi nevoie să încorporați date în fiecare linie de cod. În schimb, veți crea „substituenți” sau „etichete” în codul HTML, pe care Template Engine ulterior îl va completa cu date de pe server.
Folosind Template Engine în Express.js
Express.js acceptă diverse template engine, cum ar fi Pug(cunoscut anterior ca Jade) și EJS(Embedded JavaScript). Mai jos sunt exemple de utilizare a Pug și EJS în Express.js:
Folosind Pug Template Engine
Instalați Pug: trebuie să instalați pug pachetul prin npm.
npm install pug --save
Configurare Template Engine: în fișierul de configurare al aplicației dvs.(de exemplu, app.js), definiți Pug ca template engine.
app.set('view engine', 'pug');
Creați un șablon Pug: creați fișiere Pug în views director. De exemplu, creați un index.pug fișier:
doctype html
html
head
title My Express App
body
h1 Welcome to My Express App
p #{message}
Gestionarea rutelor și redarea datelor: în gestionarea rutei, puteți transmite date template engine utilizând res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Folosind EJS Template Engine
Instalați EJS: Instalați ejs pachetul prin npm.
npm install ejs --save
Configurare Template Engine: definiți EJS ca în template engine configurația aplicației dvs.
app.set('view engine', 'ejs');
Creați un șablon EJS: creați fișiere EJS în views director. De exemplu, creați un index.ejs fișier:
<!DOCTYPE html>
<html>
<head>
<title>My Express App</title>
</head>
<body>
<h1>Welcome to My Express App</h1>
<p><%= message %></p>
</body>
</html>
Gestionarea rutelor și redarea datelor: în gestionarea rutei, transmiteți date către template engine utilizatorul res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Concluzie
Utilizarea Template Engine în Express.js vă permite să creați pagini web dinamice și să afișați informații de pe server în browserul utilizatorului. Utilizând Pug, EJS sau alte template engine, puteți crea pagini web interactive și flexibile care oferă o experiență mai bună pentru utilizator și să optimizeze gestionarea codului HTML și a datelor.