Bij webontwikkeling is het weergeven van gegevens van de server op webpagina's cruciaal voor het creëren van interactieve en dynamische gebruikerservaringen. Dit is waar Template Engine je Express.js te hulp komt. A Template Engine is een tool waarmee u dynamische HTML-sjablonen kunt maken door gegevens van de server in HTML-code te injecteren.
Waarom gebruiken Template Engine ?
Template Engine help HTML-opmaak te scheiden van gegevens die van de server komen. Hierdoor kunt u HTML-code eenvoudiger beheren zonder dat u gegevens in elke coderegel hoeft in te sluiten. In plaats daarvan maakt u "placeholders" of "tags" in de HTML-code, die Template Engine later worden gevuld met gegevens aan de serverzijde.
Template Engine Binnen gebruiken Express.js
Express.js ondersteunt verschillende template engine, zoals Pug(voorheen bekend als Jade) en EJS(Embedded JavaScript). Hieronder staan voorbeelden van het gebruik van Pug en EJS in Express.js:
Pug gebruiken Template Engine
Pug installeren: u moet het pug pakket installeren via npm.
npm install pug --save
Configureren Template Engine: definieer in het configuratiebestand van uw toepassing(bijv. app.js), Pug als het template engine.
app.set('view engine', 'pug');
Maak een Pug-sjabloon: maak Pug-bestanden in de views map. Maak bijvoorbeeld een index.pug bestand aan:
doctype html
html
head
title My Express App
body
h1 Welcome to My Express App
p #{message}
Routeafhandeling en gegevensrendering: bij routeafhandeling kunt u gegevens doorgeven aan het template engine gebruik van res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
EJS gebruiken Template Engine
EJS installeren: Installeer het ejs pakket via npm.
npm install ejs --save
Configureren Template Engine: definieer EJS als template engine in de configuratie van uw toepassing.
app.set('view engine', 'ejs');
Een EJS-sjabloon maken: maak EJS-bestanden in de views directory. Maak bijvoorbeeld een index.ejs bestand aan:
<!DOCTYPE html>
<html>
<head>
<title>My Express App</title>
</head>
<body>
<h1>Welcome to My Express App</h1>
<p><%= message %></p>
</body>
</html>
Routeafhandeling en gegevensrendering: geef bij routeafhandeling gegevens door aan het template engine gebruik van res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Conclusie
Met behulp Template Engine van in Express.js kunt u dynamische webpagina's maken en informatie van de server weergeven in de browser van de gebruiker. Door Pug, EJS of andere te gebruiken template engine, kunt u interactieve en flexibele webpagina's bouwen die een betere gebruikerservaring bieden en het beheer van HTML-code en gegevens optimaliseren.