Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Mari kita bincangkan tentang cara nodejs menambah html pada halaman permintaan

Mari kita bincangkan tentang cara nodejs menambah html pada halaman permintaan

PHPz
Lepaskan: 2023-04-07 10:45:19
asal
792 orang telah melayarinya

Node.js ialah masa jalan JavaScript berdasarkan enjin Chrome V8 yang memudahkan untuk membina aplikasi web berprestasi tinggi dan berskala. Dalam Node.js, kami boleh menggunakan pelbagai modul dan pakej untuk melanjutkan aplikasi kami untuk mencapai fungsi yang lebih berkuasa. Dalam artikel ini, kami akan menerangkan cara menambah HTML pada halaman permintaan.

  1. Menggunakan enjin templat

Enjin templat ialah alat yang menggabungkan data dan templat untuk menjana HTML. Terdapat banyak enjin templat untuk dipilih dalam Node.js, seperti EJS, Handlebars dan Pug. Gunakannya untuk memaparkan data secara dinamik ke dalam halaman HTML dengan mudah.

Berikut ialah contoh menggunakan enjin templat EJS:

Mula-mula, pasang modul EJS:

npm install ejs
Salin selepas log masuk

Kemudian, gunakan kod berikut untuk menambah EJS pada anda aplikasi :

const express = require('express');
const app = express();
const ejs = require('ejs');
app.set('view engine', 'ejs');
Salin selepas log masuk

Dalam kod, kami menggunakan kaedah app.set untuk mentakrifkan EJS sebagai enjin paparan kami supaya kami boleh menggunakan templat EJS dalam aplikasi.

Seterusnya, kita boleh mencipta templat EJS ringkas untuk menjadikan data ke dalam HTML:

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1><%= message %></h1>
</body>
</html>
Salin selepas log masuk

Dalam templat EJS, kita boleh menghantar "<%= %>" untuk mengakses Pembolehubah JavaScript dan logik. Dalam contoh ini, "tajuk" dan "mesej" ialah data yang dihantar ke templat daripada pelayan.

Akhir sekali, kami boleh memaparkan data ke dalam paparan menggunakan kod berikut:

app.get('/', (req, res) => {
    res.render('index', { title: 'Node.js', message: 'Hello World!' });
});
Salin selepas log masuk
  1. Menggunakan strim

Dalam Node.js, kami Anda boleh menggunakan strim untuk menambahkan data secara dinamik pada dokumen HTML. Antaranya, aliran Boleh Dibaca digunakan untuk membaca data daripada sumber, dan kemudian aliran Boleh Ditulis digunakan untuk menulis data kepada sasaran. Dengan cara ini kita boleh menukar dokumen HTML dengan mudah kepada strim yang boleh dibaca, dan memasukkan data HTML yang perlu dimasukkan ke dalam strim boleh tulis.

Berikut ialah contoh mudah:

const http = require('http');
const fs = require('fs');

http.createServer(function (req, res) {
  res.writeHead(200, { 'Content-Type': 'text/html' });
  const readable = fs.createReadStream(__dirname + '/index.html');
  readable.pipe(res);
}).listen(3000);
Salin selepas log masuk

Dalam contoh di atas, kita mula-mula mencipta strim boleh dibaca menggunakan kaedah createReadStream dan kemudian menghantar dokumen HTML ke dalam strim. Kami kemudian menggunakan kaedah pipe untuk menulis strim ke dalam respons, dengan itu menambahkan kandungan daripada fail HTML ke halaman yang diminta secara dinamik.

Ringkasan:

Node.js menjadikannya sangat mudah untuk menambahkan HTML pada halaman yang diminta. Kaedah enjin templat boleh digunakan untuk memaparkan data secara dinamik ke dalam halaman HTML, manakala strim boleh digunakan untuk menambahkan fail HTML secara dinamik pada halaman yang diminta. Anda boleh memilih kaedah yang sesuai untuk menyelesaikan tugasan berdasarkan keperluan anda.

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara nodejs menambah html pada halaman permintaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan