close

Brug Template Engine i Express.js

I webudvikling er visning af data fra serveren på websider afgørende for at skabe interaktive og dynamiske brugeroplevelser. Det er her Template Engine, man Express.js kommer til undsætning. A Template Engine er et værktøj, der giver dig mulighed for at skabe dynamiske HTML-skabeloner ved at injicere data fra serveren i HTML-kode.

Hvorfor bruge Template Engine ?

Template Engine hjælpe med at adskille HTML-markering fra data, der kommer fra serveren. Dette giver dig mulighed for lettere at administrere HTML-kode uden at skulle integrere data i hver linje kode. I stedet vil du oprette "pladsholdere" eller "tags" i HTML-koden, som Template Engine senere vil fylde med server-side data.

Brug Template Engine i Express.js

Express.js understøtter forskellige template engine, såsom Pug(tidligere kendt som Jade) og EJS(Embedded JavaScript). Nedenfor er eksempler på brug af Pug og EJS i Express.js:

Brug af Pug Template Engine

Installer Pug: Du skal installere pug pakken via npm.

npm install pug --save

Konfigurer Template Engine: I din applikations konfigurationsfil(f.eks. app.js), skal du definere Pug som template engine.

app.set('view engine', 'pug');

Opret en Pug-skabelon: Opret Pug-filer i views mappen. Opret for eksempel en index.pug fil:

doctype html  
html  
  head  
    title My Express App  
  body  
    h1 Welcome to My Express App  
    p #{message}

Rutehåndtering og datagengivelse: I rutehåndtering kan du videregive data til ved template engine hjælp af res.render().

app.get('/',(req, res) => {  
  const message = 'Hello from Express!';  
  res.render('index', { message });  
});

Bruger EJS Template Engine

Installer EJS: Installer ejs pakken via npm.

npm install ejs --save

Konfigurer Template Engine: Definer EJS som i template engine din applikations konfiguration.

app.set('view engine', 'ejs');

Opret en EJS-skabelon: Opret EJS-filer i views mappen. Opret for eksempel en index.ejs fil:

<!DOCTYPE html>  
<html>  
<head>  
  <title>My Express App</title>  
</head>  
<body>  
  <h1>Welcome to My Express App</h1>  
  <p><%= message %></p>  
</body>  
</html>

Rutehåndtering og datagengivelse: Ved rutehåndtering skal du videregive data til den template engine ved hjælp af res.render().

app.get('/',(req, res) => {  
  const message = 'Hello from Express!';  
  res.render('index', { message });  
});

 

Konklusion

Ved at bruge Template Engine in Express.js kan du oprette dynamiske websider og vise information fra serveren på brugerens browser. Ved at bruge Pug, EJS eller andet template engine kan du bygge interaktive og fleksible websider, der giver en bedre brugeroplevelse og optimerer håndteringen af ​​HTML-kode og data.