close

Använder Template Engine i Express.js

Inom webbutveckling är visning av data från servern på webbsidor avgörande för att skapa interaktiva och dynamiska användarupplevelser. Det är här Template Engine man Express.js kommer till undsättning. A Template Engine är ett verktyg som låter dig skapa dynamiska HTML-mallar genom att injicera data från servern i HTML-kod.

Varför använda Template Engine ?

Template Engine hjälpa till att skilja HTML-uppmärkning från data som kommer från servern. Detta gör att du lättare kan hantera HTML-kod utan att behöva bädda in data i varje kodrad. Istället skapar du "platshållare" eller "taggar" i HTML-koden, som Template Engine senare kommer att fylla med data på serversidan.

Använder Template Engine i Express.js

Express.js stöder olika template engine, såsom Pug(tidigare känd som Jade) och EJS(Embedded JavaScript). Nedan finns exempel på hur Pug och EJS används i Express.js:

Använder Pug Template Engine

Installera Pug: Du måste installera pug paketet via npm.

npm install pug --save

Konfigurera Template Engine: I programmets konfigurationsfil(t.ex. app.js), definiera Pug som template engine.

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

Skapa en mopsmall: Skapa mopsfiler i views katalogen. Skapa till exempel en index.pug fil:

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

Rutthantering och datarendering: Vid rutthantering kan du skicka data template engine till res.render().

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

Använder EJS Template Engine

Installera EJS: Installera ejs paketet via npm.

npm install ejs --save

Konfigurera Template Engine: Definiera EJS som template engine i din applikations konfiguration.

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

Skapa en EJS-mall: Skapa EJS-filer i katalogen views. Skapa till exempel 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>

Rutthantering och datarendering: Vid rutthantering skickar du data template engine till res.render().

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

 

Slutsats

Genom att använda Template Engine in Express.js kan du skapa dynamiska webbsidor och visa information från servern i användarens webbläsare. Genom att använda Pug, EJS eller annat template engine kan du bygga interaktiva och flexibla webbsidor som ger en bättre användarupplevelse och optimerar hanteringen av HTML-kod och data.