În dezvoltarea web, afișarea datelor de pe server pe paginile web este crucială pentru crearea unor experiențe interactive și dinamice ale utilizatorilor. Aici venim Template Engine la Express.js salvare. A Template Engine este un instrument care vă permite să creați șabloane HTML dinamice prin injectarea datelor de pe server în codul HTML.
De ce să folosiți Template Engine ?
Template Engine ajuta la separarea de markup HTML de datele care vin de la server. Acest lucru vă permite să gestionați codul HTML mai ușor, fără a fi nevoie să încorporați date în fiecare linie de cod. În schimb, veți crea „substituenți” sau „etichete” în codul HTML, pe care Template Engine ulterior îl va completa cu date de pe server.
Folosind Template Engine în Express.js
Express.js acceptă diverse template engine, cum ar fi Pug(cunoscut anterior ca Jade) și EJS(Embedded JavaScript). Mai jos sunt exemple de utilizare a Pug și EJS în Express.js:
Folosind Pug Template Engine
Instalați Pug: trebuie să instalați pug
pachetul prin npm.
Configurare Template Engine: în fișierul de configurare al aplicației dvs.(de exemplu, app.js
), definiți Pug ca template engine.
Creați un șablon Pug: creați fișiere Pug în views
director. De exemplu, creați un index.pug
fișier:
Gestionarea rutelor și redarea datelor: în gestionarea rutei, puteți transmite date template engine utilizând res.render()
.
Folosind EJS Template Engine
Instalați EJS: Instalați ejs
pachetul prin npm.
Configurare Template Engine: definiți EJS ca în template engine configurația aplicației dvs.
Creați un șablon EJS: creați fișiere EJS în views
director. De exemplu, creați un index.ejs
fișier:
Gestionarea rutelor și redarea datelor: în gestionarea rutei, transmiteți date către template engine utilizatorul res.render()
.
Concluzie
Utilizarea Template Engine în Express.js vă permite să creați pagini web dinamice și să afișați informații de pe server în browserul utilizatorului. Utilizând Pug, EJS sau alte template engine, puteți crea pagini web interactive și flexibile care oferă o experiență mai bună pentru utilizator și să optimizeze gestionarea codului HTML și a datelor.