Katika uundaji wa wavuti, kuonyesha data kutoka kwa seva kwenye kurasa za wavuti ni muhimu kwa kuunda uzoefu shirikishi na wa nguvu wa watumiaji. Hapa ndipo Template Engine katika Express.js kuja kuwaokoa. A Template Engine ni zana inayokuruhusu kuunda violezo vinavyobadilika vya HTML kwa kuingiza data kutoka kwa seva hadi kwenye msimbo wa HTML.
Kwa nini Utumie Template Engine ?
Template Engine kusaidia kutenganisha alama za HTML kutoka kwa data inayotoka kwa seva. Hii hukuruhusu kudhibiti msimbo wa HTML kwa urahisi zaidi bila kupachika data kwenye kila mstari wa msimbo. Badala yake, utaunda "vishika nafasi" au "lebo" ndani ya msimbo wa HTML, ambayo Template Engine baadaye itajaza data ya upande wa seva.
Kutumia Template Engine katika Express.js
Express.js inasaidia anuwai template engine, kama vile Pug(zamani ikijulikana kama Jade) na EJS(JavaScript Iliyopachikwa). Ifuatayo ni mifano ya kutumia Pug na EJS katika Express.js:
Kutumia Pug Template Engine
Sakinisha Pug: Unahitaji kusakinisha pug kifurushi kupitia npm.
npm install pug --save
Sanidi Template Engine: Katika faili ya usanidi ya programu yako(kwa mfano, app.js), fafanua Pug kama template engine.
app.set('view engine', 'pug');
Unda Kiolezo cha Pug: Unda faili za Pug kwenye views saraka. Kwa mfano, tengeneza index.pug faili:
doctype html
html
head
title My Express App
body
h1 Welcome to My Express App
p #{message}
Ushughulikiaji wa Njia na Utoaji wa Data: Katika kushughulikia njia, unaweza kupitisha data kwa template engine utumiaji res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Kwa kutumia EJS Template Engine
Sakinisha EJS: Sakinisha ejs kifurushi kupitia npm.
npm install ejs --save
Sanidi Template Engine: Bainisha EJS kama template engine usanidi wa programu yako.
app.set('view engine', 'ejs');
Unda Kiolezo cha EJS: Unda faili za EJS kwenye views saraka. Kwa mfano, tengeneza index.ejs faili:
<!DOCTYPE html>
<html>
<head>
<title>My Express App</title>
</head>
<body>
<h1>Welcome to My Express App</h1>
<p><%= message %></p>
</body>
</html>
Ushughulikiaji wa Njia na Utoaji wa Data: Katika kushughulikia njia, pitisha data kwa template engine matumizi res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Hitimisho
Kutumia Template Engine ndani Express.js hukuruhusu kuunda kurasa za wavuti zinazobadilika na kuonyesha habari kutoka kwa seva kwenye kivinjari cha mtumiaji. Kwa kutumia Pug, EJS, au nyinginezo template engine, unaweza kuunda kurasa za wavuti zinazoingiliana na zinazonyumbulika ambazo hutoa matumizi bora ya mtumiaji na kuboresha usimamizi wa msimbo na data ya HTML.