Dans le développement Web, l'affichage des données du serveur sur les pages Web est crucial pour créer des expériences utilisateur interactives et dynamiques. C'est là qu'il Template Engine faut Express.js venir à la rescousse. A Template Engine est un outil qui permet de créer des modèles HTML dynamiques en injectant des données du serveur dans du code HTML.
Pourquoi utiliser Template Engine ?
Template Engine aider à séparer le balisage HTML des données provenant du serveur. Cela vous permet de gérer plus facilement le code HTML sans avoir à incorporer des données dans chaque ligne de code. Au lieu de cela, vous créerez des "espaces réservés" ou des "balises" dans le code HTML, qui seront Template Engine ensuite remplis avec des données côté serveur.
Utilisation Template Engine dans Express.js
Express.js prend en charge divers template engine, tels que Pug(anciennement connu sous le nom de Jade) et EJS(Embedded JavaScript). Vous trouverez ci-dessous des exemples d'utilisation de Pug et EJS dans Express.js :
Utiliser le carlin Template Engine
Installer Pug: Vous devez installer le pug package via npm.
npm install pug --save
Configurer Template Engine: Dans le fichier de configuration de votre application(par exemple, app.js), définissez Pug comme template engine.
app.set('view engine', 'pug');
Créer un modèle Pug: Créez des fichiers Pug dans le views répertoire. Par exemple, créez un index.pug fichier :
doctype html
html
head
title My Express App
body
h1 Welcome to My Express App
p #{message}
Gestion des routes et rendu des données : dans la gestion des routes, vous pouvez transmettre des données à l' template engine aide de res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Utiliser EJS Template Engine
Installez EJS : installez le ejs package via npm.
npm install ejs --save
Configurer Template Engine: Définissez EJS comme template engine dans la configuration de votre application.
app.set('view engine', 'ejs');
Créer un modèle EJS: créez des fichiers EJS dans le views répertoire. Par exemple, créez un index.ejs fichier :
<!DOCTYPE html>
<html>
<head>
<title>My Express App</title>
</head>
<body>
<h1>Welcome to My Express App</h1>
<p><%= message %></p>
</body>
</html>
Gestion des routes et rendu des données : dans la gestion des routes, transmettez les données à l' template engine aide de res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Conclusion
L'utilisation Template Engine de in Express.js vous permet de créer des pages Web dynamiques et d'afficher des informations à partir du serveur sur le navigateur de l'utilisateur. En utilisant Pug, EJS ou autre template engine, vous pouvez créer des pages Web interactives et flexibles qui offrent une meilleure expérience utilisateur et optimisent la gestion du code HTML et des données.