Rumah > Artikel > hujung hadapan web > Bagaimana untuk mengubah suai html secara dinamik dalam nodejs
Bagaimana untuk mengubah suai html secara dinamik dalam nodejs
- PHPzasal
- 2023-04-26 09:10:53807semak imbas
Apabila aplikasi web matang dan berkembang, semakin ramai pembangun mula menggunakan Node.js untuk membina aplikasi back-end. Node.js ialah persekitaran JavaScript sisi pelayan sumber terbuka untuk membina aplikasi web berprestasi tinggi dan berskala. Ia menyediakan beberapa modul dan perpustakaan yang sangat berguna, termasuk enjin templat yang mampu menjana HTML.
Dalam artikel ini, kami akan meneroka cara mengubah suai HTML secara dinamik menggunakan Node.js. Mula-mula kami akan memperkenalkan beberapa enjin templat yang biasa digunakan dan kemudian membincangkan cara menggunakannya dengan Node.js. Akhir sekali, kami akan menunjukkan beberapa contoh praktikal untuk membantu anda memahami dan mempraktikkan teknik ini dengan lebih baik.
Enjin templat yang biasa digunakan
Sebelum mula menggunakan enjin templat, kita perlu memahami perbezaan antara enjin templat yang berbeza serta kelebihan dan kekurangannya. Berikut ialah beberapa enjin templat yang biasa digunakan:
- EJS: EJS ialah enjin templat berasaskan JavaScript yang boleh membantu kami membenamkan data dinamik dalam kod HTML menggunakan sintaks JavaScript. Kelebihan utamanya ialah ia mudah dipelajari dan digunakan, sementara anda juga boleh menggunakannya untuk pemaparan bahagian klien dan pelayan.
- Hendal: Handlebar ialah satu lagi enjin templat berasaskan JavaScript yang membolehkan kami membenamkan data dinamik dalam kod HTML menggunakan sintaks hendal. Kelebihan utamanya ialah keserasian yang hebat, kerana ia boleh digunakan untuk pemaparan sisi klien dan pelayan, dan mempunyai prestasi yang sangat baik.
- Jade: Jade ialah enjin templat berasaskan aksara yang membantu kami membenamkan data dinamik dalam kod HTML menggunakan lekukan dan ruang. Kelebihannya ialah sintaks ringkas dan penyelenggaraan yang mudah.
Menggunakan enjin templat dengan Node.js
Sekarang kita memahami enjin templat yang berbeza, kita boleh mula menggunakannya untuk mengubah suai HTML secara dinamik. Berikut ialah beberapa langkah untuk menggunakan enjin templat dengan Node.js:
- Pasang enjin templat: Anda perlu memasang enjin templat pilihan anda terlebih dahulu. Dalam contoh ini, kami akan menggunakan EJS sebagai enjin templat kami. Untuk memasang EJS, jalankan arahan berikut:
npm install ejs --save
- Konfigurasi aplikasi Express: Untuk mencipta aplikasi kami, kami akan menggunakan rangka kerja Express untuk Node.js. Untuk mula menggunakan Express, anda perlu memasangnya dan kemudian menyediakannya dalam aplikasi anda. Berikut ialah kod contoh:
const express = require('express');
const app = express();
app.set('views', './views');
app.set('view engine', 'ejs');
app.get('/users', (req, res) => {
const users = [
{ name: 'Alice', email: 'alice@example.com' },
{ name: 'Bob', email: 'bob@example.com' },
{ name: 'Charlie', email: 'charlie@example.com' },
];
res.render('users', { users });
});
app.listen(3000, () => {
console.log('listening on port 3000');
});
Dalam aplikasi ini kami menyediakan direktori paparan dan enjin paparan aplikasi dan menyediakan pengendali laluan mudah yang akan memberikan paparan bernama "pengguna" dan dihantar ke melihat objek yang mengandungi tatasusunan bernama "pengguna".
- Buat fail paparan: Seterusnya, kita perlu mencipta fail paparan bernama "users.ejs". Fail ini akan mengandungi data dinamik dan kod HTML. Berikut ialah kod sampel:
<!doctype html>
<html>
<head>
<title>Users</title>
</head>
<body>
<h1>Users</h1>
<ul>
<% users.forEach(user => { %>
<li><%= user.name %> - <%= user.email %></li>
<% }); %>
</ul>
</body>
</html>
Dalam fail paparan ini, kami menggunakan sintaks enjin templat EJS untuk membenamkan data dinamik. Kami menggunakan gelung forEach untuk menggelungkan melalui tatasusunan pengguna dan menggunakan teg <% %> dalam kod HTML untuk melaksanakan kod JavaScript. Kami juga menggunakan teg <%= %>
- Jalankan aplikasi: Akhirnya, kami perlu menjalankan aplikasi kami. Untuk menjalankan aplikasi, jalankan arahan berikut:
node app.js
Kemudian buka pelayar dan lawati http://localhost:3000/users. Anda sepatutnya dapat melihat halaman dengan tiga pengguna, setiap satu termasuk nama dan alamat e-mel.
Ringkasan
Dalam artikel ini, kami meneroka cara mengubah suai HTML secara dinamik menggunakan Node.js dan enjin templat. Kami memperkenalkan beberapa enjin templat yang biasa digunakan dan menunjukkan cara menggunakan EJS untuk menggabungkannya. Dengan menggunakan teknologi ini, anda boleh menjana HTML dinamik dengan mudah daripada aplikasi web anda dan memberikan pengalaman pengguna yang hebat.
Atas ialah kandungan terperinci Bagaimana untuk mengubah suai html secara dinamik dalam nodejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!