close

Bruker Template Engine i Express.js

I webutvikling er visning av data fra serveren på nettsider avgjørende for å skape interaktive og dynamiske brukeropplevelser. Det er her Template Engine man Express.js kommer til unnsetning. A Template Engine er et verktøy som lar deg lage dynamiske HTML-maler ved å injisere data fra serveren i HTML-kode.

Hvorfor bruke Template Engine ?

Template Engine hjelpe å skille HTML-oppmerking fra data som kommer fra serveren. Dette lar deg administrere HTML-kode enklere uten å måtte legge inn data i hver linje med kode. I stedet oppretter du "plassholdere" eller "tagger" i HTML-koden, som Template Engine senere vil fylles med data på serversiden.

Bruker Template Engine i Express.js

Express.js støtter forskjellige template engine, for eksempel Pug(tidligere kjent som Jade) og EJS(Embedded JavaScript). Nedenfor er eksempler på bruk av Pug og EJS i Express.js:

Bruker Pug Template Engine

Installer Pug: Du må installere pug pakken via npm.

npm install pug --save

Konfigurer Template Engine: I programmets konfigurasjonsfil(f.eks. app.js), definer Pug som template engine.

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

Lag en Pug-mal: Lag Pug-filer i katalogen views. Lag 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 datagjengivelse: I rutehåndtering kan du sende data til ved template engine hjelp av res.render().

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

Bruker EJS Template Engine

Installer EJS: Installer ejs pakken via npm.

npm install ejs --save

Konfigurer Template Engine: Definer EJS som i template engine programmets konfigurasjon.

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

Lag en EJS-mal: Lag EJS-filer i katalogen views. Lag 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 datagjengivelse: Ved rutehåndtering sender du data til template engine brukeren res.render().

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

 

Konklusjon

Ved å bruke Template Engine i Express.js kan du lage dynamiske nettsider og vise informasjon fra serveren i brukerens nettleser. Ved å bruke Pug, EJS eller annet template engine kan du bygge interaktive og fleksible nettsider som gir en bedre brukeropplevelse og optimaliserer håndteringen av HTML-kode og data.