Dalam pembangunan web, memaparkan data daripada pelayan pada halaman web adalah penting untuk mencipta pengalaman pengguna yang interaktif dan dinamik. Di sinilah Template Engine datang Express.js untuk menyelamatkan. A Template Engine ialah alat yang membolehkan anda membuat templat HTML dinamik dengan menyuntik data daripada pelayan ke dalam kod HTML.
Kenapa Guna Template Engine ?
Template Engine membantu memisahkan penanda HTML daripada data yang datang daripada pelayan. Ini membolehkan anda mengurus kod HTML dengan lebih mudah tanpa perlu membenamkan data ke dalam setiap baris kod. Sebaliknya, anda akan membuat "tempat letak" atau "teg" dalam kod HTML, yang Template Engine kemudiannya akan diisi dengan data sebelah pelayan.
Menggunakan Template Engine dalam Express.js
Express.js menyokong pelbagai template engine, seperti Pug(dahulunya dikenali sebagai Jade) dan EJS(JavaScript Terbenam). Di bawah ialah contoh penggunaan Pug dan EJS dalam Express.js:
Menggunakan Pug Template Engine
Pasang Pug: Anda perlu memasang pug pakej melalui npm.
npm install pug --save
Konfigurasi Template Engine: Dalam fail konfigurasi aplikasi anda(cth, app.js), takrifkan Pug sebagai template engine.
app.set('view engine', 'pug');
Cipta Templat Pug: Cipta fail Pug dalam views direktori. Sebagai contoh, buat index.pug fail:
doctype html
html
head
title My Express App
body
h1 Welcome to My Express App
p #{message}
Pengendalian Laluan dan Rendering Data: Dalam pengendalian laluan, anda boleh menghantar data kepada template engine menggunakan res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Menggunakan EJS Template Engine
Pasang EJS: Pasang ejs pakej melalui npm.
npm install ejs --save
Konfigurasi Template Engine: Tentukan EJS sebagai template engine dalam konfigurasi aplikasi anda.
app.set('view engine', 'ejs');
Cipta Templat EJS: Cipta fail EJS dalam views direktori. Sebagai contoh, buat 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>
Pengendalian Laluan dan Rendering Data: Dalam pengendalian laluan, hantar data kepada template engine menggunakan res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Kesimpulan
Menggunakan Template Engine dalam Express.js membolehkan anda membuat halaman web dinamik dan memaparkan maklumat daripada pelayan pada penyemak imbas pengguna. Dengan menggunakan Pug, EJS atau lain-lain template engine, anda boleh membina halaman web interaktif dan fleksibel yang memberikan pengalaman pengguna yang lebih baik dan mengoptimumkan pengurusan kod dan data HTML.