Nello sviluppo web, la visualizzazione dei dati dal server sulle pagine web è fondamentale per creare esperienze utente interattive e dinamiche. È qui Template Engine che Express.js vengo in soccorso. A Template Engine è uno strumento che consente di creare modelli HTML dinamici inserendo i dati dal server nel codice HTML.
Perché usare Template Engine ?
Template Engine aiuta a separare il markup HTML dai dati provenienti dal server. Ciò consente di gestire il codice HTML più facilmente senza dover incorporare i dati in ogni riga di codice. Invece, creerai "segnaposto" o "tag" all'interno del codice HTML, che Template Engine successivamente riempirà con dati lato server.
Usando Template Engine dentro Express.js
Express.js supporta vari template engine, come Pug(precedentemente noto come Jade) ed EJS(Embedded JavaScript). Di seguito sono riportati esempi di utilizzo di Pug ed EJS in Express.js:
Usando Pug Template Engine
Installa Pug: è necessario installare il pug pacchetto tramite npm.
npm install pug --save
Configure Template Engine: nel file di configurazione della tua applicazione(ad es. app.js), definisci Pug come template engine.
app.set('view engine', 'pug');
Crea un modello Pug: crea i file Pug nella views directory. Ad esempio, crea un index.pug file:
doctype html
html
head
title My Express App
body
h1 Welcome to My Express App
p #{message}
Gestione del percorso e rendering dei dati: nella gestione del percorso, puoi passare i dati al template engine file res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Utilizzo di EJS Template Engine
Installa EJS: installa il ejs pacchetto tramite npm.
npm install ejs --save
Configure Template Engine: definisce EJS come nella template engine configurazione dell'applicazione.
app.set('view engine', 'ejs');
Crea un modello EJS: crea i file EJS nella views directory. Ad esempio, crea un index.ejs file:
<!DOCTYPE html>
<html>
<head>
<title>My Express App</title>
</head>
<body>
<h1>Welcome to My Express App</h1>
<p><%= message %></p>
</body>
</html>
Gestione del percorso e rendering dei dati: nella gestione del percorso, passa i dati al template engine file res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Conclusione
L'utilizzo Template Engine in Express.js consente di creare pagine Web dinamiche e visualizzare informazioni dal server sul browser dell'utente. Utilizzando Pug, EJS o altri template engine, puoi creare pagine Web interattive e flessibili che forniscono una migliore esperienza utente e ottimizzano la gestione del codice e dei dati HTML.