Kuriant žiniatinklį, duomenų iš serverio rodymas tinklalapiuose yra labai svarbus kuriant interaktyvią ir dinamišką vartotojo patirtį. Štai čia Template Engine ateina Express.js į pagalbą. A Template Engine yra įrankis, leidžiantis kurti dinaminius HTML šablonus įterpiant duomenis iš serverio į HTML kodą.
Kodėl Naudoti Template Engine ?
Template Engine padėti atskirti HTML žymėjimą nuo duomenų, gaunamų iš serverio. Tai leidžia lengviau valdyti HTML kodą, neįterpiant duomenų į kiekvieną kodo eilutę. Vietoj to, HTML kode sukursite „vietos žymas“ arba „žymas“, kurios Template Engine vėliau bus užpildytos serverio duomenimis.
Naudojant Template Engine in Express.js
Express.js palaiko įvairius template engine, tokius kaip Mopsas(anksčiau žinomas kaip Jade) ir EJS(įdėtasis JavaScript). Žemiau pateikiami Mopso ir EJS naudojimo pavyzdžiai Express.js:
Naudojant Mopsą Template Engine
Įdiegti Mopsą: turite įdiegti pug paketą per npm.
npm install pug --save
Konfigūruoti Template Engine: programos konfigūracijos faile(pvz., app.js) apibrėžkite Mopsą kaip template engine.
app.set('view engine', 'pug');
Sukurkite Mopso šabloną: sukurkite Mopso failus kataloge views. Pavyzdžiui, sukurkite index.pug failą:
doctype html
html
head
title My Express App
body
h1 Welcome to My Express App
p #{message}
Maršruto tvarkymas ir duomenų atvaizdavimas: Tvarkydami maršrutą duomenis galite perduoti template engine naudojant res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Naudojant EJS Template Engine
Įdiekite EJS: įdiekite ejs paketą per npm.
npm install ejs --save
Konfigūruoti Template Engine: apibrėžkite EJS kaip template engine savo programos konfigūracijoje.
app.set('view engine', 'ejs');
Sukurkite EJS šabloną: sukurkite EJS failus kataloge views. Pavyzdžiui, sukurkite index.ejs failą:
<!DOCTYPE html>
<html>
<head>
<title>My Express App</title>
</head>
<body>
<h1>Welcome to My Express App</h1>
<p><%= message %></p>
</body>
</html>
Maršruto tvarkymas ir duomenų atvaizdavimas: tvarkydami maršrutą, perduokite duomenis template engine naudojant res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Išvada
Naudodami Template Engine in Express.js leidžia kurti dinamiškus tinklalapius ir vartotojo naršyklėje rodyti informaciją iš serverio. Naudodami Mopsą, EJS ar kitus template engine, galite kurti interaktyvius ir lanksčius tinklalapius, kurie suteikia geresnę vartotojo patirtį ir optimizuoja HTML kodo ir duomenų valdymą.