Web geliştirmede, sunucudan gelen verileri web sayfalarında görüntülemek, etkileşimli ve dinamik kullanıcı deneyimleri oluşturmak için çok önemlidir. Burası kurtarmaya geldiği Template Engine yer. Express.js A Template Engine, sunucudan HTML koduna veri enjekte ederek dinamik HTML şablonları oluşturmanıza izin veren bir araçtır.
Neden Kullanılır Template Engine ?
Template Engine HTML işaretlemesini sunucudan gelen verilerden ayırmaya yardımcı olur. Bu, her bir kod satırına veri gömmek zorunda kalmadan HTML kodunu daha kolay yönetmenizi sağlar. Template Engine Bunun yerine, HTML kodu içinde daha sonra sunucu tarafı verileriyle doldurulacak "yer tutucular" veya "etiketler" oluşturacaksınız .
kullanarak Template Engine _ Express.js
Express.js template engine Pug(eski adıyla Jade) ve EJS(Gömülü JavaScript) gibi çeşitli dosyaları destekler. Aşağıda, Pug ve EJS'nin kullanımına ilişkin örnekler yer almaktadır Express.js:
Pug kullanma Template Engine
pug Pug Kurulumu: Paketi npm üzerinden kurmanız gerekmektedir .
npm install pug --save
Yapılandır Template Engine: Uygulamanızın yapılandırma dosyasında(örn. app.js), Pug'ı template engine.
app.set('view engine', 'pug');
Bir Pug Şablonu Oluşturun: Dizinde Pug dosyaları oluşturun views. Örneğin, bir index.pug dosya oluşturun:
doctype html
html
head
title My Express App
body
h1 Welcome to My Express App
p #{message}
template engine Rota İşleme ve Veri Oluşturma: Rota işlemede, res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
EJS'yi kullanma Template Engine
EJS'yi Kurun: ejs Paketi npm aracılığıyla kurun.
npm install ejs --save
Yapılandır Template Engine: EJS'yi template engine uygulamanızın yapılandırmasında olduğu gibi tanımlayın.
app.set('view engine', 'ejs');
Bir EJS Şablonu Oluşturun: Dizinde EJS dosyaları oluşturun views. Örneğin, bir index.ejs dosya oluşturun:
<!DOCTYPE html>
<html>
<head>
<title>My Express App</title>
</head>
<body>
<h1>Welcome to My Express App</h1>
<p><%= message %></p>
</body>
</html>
Rota İşleme ve Veri Oluşturma: Rota işlemede, verileri template engine kullanarak res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Çözüm
Template Engine in kullanmak, Express.js dinamik web sayfaları oluşturmanıza ve sunucudan gelen bilgileri kullanıcının tarayıcısında görüntülemenize olanak tanır. Pug, EJS veya diğerlerini kullanarak template engine, daha iyi bir kullanıcı deneyimi sağlayan ve HTML kodunun ve verilerinin yönetimini optimize eden etkileşimli ve esnek web sayfaları oluşturabilirsiniz.