Verkkokehityksessä palvelimelta tulevan datan näyttäminen verkkosivuilla on ratkaisevan tärkeää interaktiivisten ja dynaamisten käyttökokemusten luomiseksi. Tässä Template Engine tulee Express.js avuksi. A Template Engine on työkalu, jonka avulla voit luoda dynaamisia HTML-malleja syöttämällä tietoja palvelimelta HTML-koodiin.
Miksi käyttää Template Engine ?
Template Engine auttaa erottamaan HTML-merkinnät palvelimelta tulevasta tiedosta. Tämän avulla voit hallita HTML-koodia helpommin ilman, että sinun tarvitsee upottaa tietoja jokaiselle koodiriville. Sen sijaan luot HTML-koodiin "paikkamerkit" tai "tunnisteet", jotka Template Engine myöhemmin täytetään palvelinpuolen tiedoilla.
Käyttö Template Engine sisään Express.js
Express.js tukee useita template engine, kuten Mopsi(aiemmin Jade) ja EJS(Embedded JavaScript). Alla on esimerkkejä Mopsin ja EJS:n käytöstä Express.js:
Mopsia käyttämällä Template Engine
Asenna Pug: Sinun on asennettava pug paketti npm:n kautta.
npm install pug --save
Määritä Template Engine: Määritä sovelluksesi asetustiedostossa(esim. app.js) Mopsi muotoon template engine.
app.set('view engine', 'pug');
Luo mopsimalli: Luo mopsitiedostoja hakemistoon views. Luo esimerkiksi tiedosto index.pug:
doctype html
html
head
title My Express App
body
h1 Welcome to My Express App
p #{message}
Reitinkäsittely ja tietojen renderöinti: Reitinkäsittelyssä voit välittää tietoja template engine käyttämällä res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
EJS:n käyttö Template Engine
Asenna EJS: Asenna ejs paketti npm:n kautta.
npm install ejs --save
Määritä Template Engine: Määritä EJS template engine sovelluksesi asetuksissa.
app.set('view engine', 'ejs');
Luo EJS-malli: Luo EJS-tiedostoja hakemistoon views. Luo esimerkiksi tiedosto index.ejs:
<!DOCTYPE html>
<html>
<head>
<title>My Express App</title>
</head>
<body>
<h1>Welcome to My Express App</h1>
<p><%= message %></p>
</body>
</html>
Reitinkäsittely ja tietojen renderöinti: Reitinkäsittelyssä välitä tiedot template engine käyttämällä res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Johtopäätös
Template Engine In-toiminnon avulla Express.js voit luoda dynaamisia verkkosivuja ja näyttää tietoja palvelimelta käyttäjän selaimessa. Käyttämällä Mopsia, EJS:ää tai muuta template engine voit rakentaa interaktiivisia ja joustavia verkkosivuja, jotka tarjoavat paremman käyttökokemuksen ja optimoivat HTML-koodin ja -tietojen hallinnan.