Halaman html dinamis node js

Question

Nodejs dapat merender konten statis dan dinamis. Untuk merender konten statis, kami hanya mengembalikan file HTML sebagai respons. Menggunakan express, dimungkinkan hanya dengan beberapa baris kode seperti yang ditunjukkan di bawah ini

Table of Contents Show

Fitur penting dari EJS
Render file statis dengan Node. js dan ekspres
Render file dinamis
Render file dengan ekstensi berbeda
Bagaimana cara membuat halaman HTML dinamis di node JS?
Bisakah node JS menghasilkan konten halaman dinamis?
Bagaimana cara mengarahkan ulang ke halaman HTML di node JS?
Bagaimana cara menampilkan konten dinamis dalam HTML?

const express = require('express')
app = new express()
app.listen(3000, () => {
console.log('NodeJS started listening on port 3000')
})
const path = require('path')
app.get('/', (req, res) => {
res.sendFile( path.join(__dirname,'/index.html'))
})

Namun, untuk mengembalikan konten dinamis, kita perlu menggunakan template. Ada beberapa mesin template yang tersedia untuk digunakan. Dari semuanya, template Embedded JavaScript atau EJS adalah yang paling populer

Menggunakan EJS, kita dapat merender a. ejs ke klien. Itu. ejs adalah HTML sederhana dengan beberapa skrip untuk mewakili nilai atau konten dinamis

Ikuti langkah demi langkah untuk menerapkan EJS

Langkah 1. Instal ejs dan ekspres

npm install ejs
npm install express

_

Langkah 2. Tulis kode dasar untuk yang pertama. js file, biasanya bernama index. js

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("server started on port 3000");
});

Langkah 3. Tentukan mesin render dengan menyetel "mesin tampilan" sebagai "ejs"



const express = require("express");
const app = express();

app.set("view engine", "ejs");

app.listen(3000, () => {
  console.log("server started on port 3000");
});

Langkah 4. Render a. ejs ke Klien



const express = require("express");
const app = express();

app.set("view engine", "ejs");

app.post("/currentTemperature", (req, res) => {

res.render("showCurrentTemp", {
    celsiusValue: 30,
    fahrenheitValue: 86
})

})

app.listen(3000, () => {
  console.log("server started on port 3000");
});

_

Dalam kode di atas, atas permintaan dari klien dengan URI /currentTemperature, kami merender sebuah file bernama showCurrentTemp. ejs

Perhatikan bahwa kami tidak perlu menyebutkan ekstensi file, karena kami telah mendefinisikan "mesin tampilan" sebagai "ejs"

Selain itu, kami meneruskan objek sebagai argumen kedua ke fungsi render. Kunci objek itu, dapat digunakan sebagai nilai dinamis di showCurrentTemp. ejs

Mari kita lihat showCurrentTemp. ej sekarang

Langkah 5. Tulis showCurrentTemp. ejs dan letakkan di bawah "tampilan" di direktori root. Nodejs akan mencari file di bawah "tampilan" secara default

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p style="font-size: 60px; color: blue;">Current Room Temperature in Celsius - <%=celsiusValue%></p>
    <p style="font-size: 60px; color: rgb(50, 50, 65);">Current Room Temperature in Fahrenheit - <%=fahrenheitValue%></p>
</body>
</html>

Lihat bagaimana. File ejs merender nilai dinamis dari celsiusValue dan fahrenheitValue. Inilah hasilnya

Fitur penting dari EJS

Alih-alih menempatkan HTML lengkap menjadi satu. ejs, praktik terbaik adalah membaginya menjadi 3 bagian

tajuk. ejs
footer. ejs
showCurrentTemp. ejs [Ini termasuk tajuk. ejs dan footer. ejs dengan menyertakan pernyataan]

Ini sangat nyaman, terutama untuk menghindari kode berulang

Berikut tampilan 3 file di atas

tajuk. ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

_

footer. ejs

</body>
</html>

showCurrentTemp. ejs

Lihat bagaimana headernya. ejs dan footer. ejs disertakan dalam file ini

<%- include('header.ejs') %>
<p style="font-size: 60px; color: blue;">Current Room Temperature in Celsius - <%=celsiusValue%></p>
<p style="font-size: 60px; color: rgb(50, 50, 65);">Current Room Temperature in Fahrenheit - <%=fahrenheitValue%></p>
<%- include('footer.ejs') %>

_

Membagi template menjadi beberapa bagian sepenuhnya opsional, dan itu tidak mengubah cara Anda merender final. ejs dengan semua termasuk di tempat

Statis berarti halaman web yang telah dirender sebelumnya yang tidak berubah tepat waktu. Dinamis berarti dihasilkan secara real-time pada saat permintaan oleh server

Sepanjang artikel ini Anda akan belajar

Render file statis, cukup gunakan modul node
Render file dinamis dengan paket
```
npm install express nodemon
```
1
Render file dengan ekstensi berbeda

Untuk ini, Anda perlu memiliki pengetahuan tentang JavaScript dan HTML, dan harus tahu cara membuat aplikasi dengan Node.js. js dan Ekspres. Jika Anda tidak terbiasa dengan itu, silakan merujuk ke artikel saya sebelumnya

Namun, mari berikan rekap cepat di sini

Mulai NPM untuk proyek Anda

npm init

2. Instal paket yang diperlukan (Express, nodemon)

npm install express nodemon

_

3. Mulai server pada port 5000

app.listen(5000, ()=> {     console.log(`server is running in port 5000`);})

Render file statis dengan Node. js dan ekspres

Pertama-tama, buat folder bernama views di direktori root untuk meletakkan file Anda yang akan dirender. Kemudian, buat file HTML yang ingin Anda render

indeks. html

Saya tidak khawatir tentang frontend, karena kami fokus pada backend

Setelah membuat file ini, Anda perlu mengimpor modul node

npm install express nodemon

2

const path = require("path");

Kemudian Anda dapat merender file HTML itu menggunakan perintah berikut

app.use(express.static(path.join(__dirname, “/views”)));

Outputnya akan terlihat seperti ini

indeks. js

Render file dinamis

Ada beberapa template seperti pug, handlebars, ejs, dll untuk merender halaman web yang dinamis. Tapi kami akan menggunakan setang untuk proyek kami

Jadi, kita perlu menginstal paket

npm install express nodemon

_1

npm install hbs

Kemudian, impor paket

const hbs = require('hbs');

Mesin tampilan memungkinkan rendering halaman web dinamis menggunakan template tertentu

Kita perlu menyetel mesin tampilan sebagai hbs

app.set("view engine", "hbs");

Untuk menghindari kebingungan, kita perlu memberi tahu mesin tampilan tentang jalur tampilan

app.set("views", path.join(__dirname,"/public"));

Di sini, publik adalah nama folder yang kami gunakan untuk menyimpan file kami. Jadi, buat file baru bernama index dengan ekstensi. hbs

hbs adalah kepanjangan dari setang

Sekarang, struktur foldernya terlihat seperti ini

Tambahkan segmen kode di bawah ini ke index. berkas hbs

Kemudian, buat rute dengan metode

npm install express nodemon

_4 untuk merender index. berkas hbs

Anda dapat menggunakan fungsi

npm install express nodemon

_5 untuk merender file dan dengan itu, Anda harus meneruskan data dinamis

Menurut

npm install express nodemon

_6 dan

npm install express nodemon

7 ini

app.get("/", (req, res) => {    res.render("index", {    name: "Kushan", age: 24});});

Keluaran

indeks. js

Render file dengan ekstensi berbeda

Sejauh ini, kami hanya menunjukkan untuk merender file dengan ekstensi

npm install express nodemon

8

Jadi mari kita lihat cara merender file dengan ekstensi berbeda

Anda hanya perlu melakukan beberapa perubahan pada kode

npm install express nodemon

9 di atas. Kemudian buat file di folder publik bernama

app.listen(5000, ()=> {     console.log(`server is running in port 5000`);})

0 (dengan. ekstensi html). Ketik apa pun yang ingin Anda tampilkan di file itu

npm install express nodemon

0Ringkasan

Kami memulai artikel dengan menyebutkan perbedaan antara file statis dan dinamis. Kemudian, kami berbicara tentang merender file statis tanpa paket apa pun. Setelah kita mempelajari cara merender file dinamis dengan handlebars dan kemudian merender file dengan a. ekstensi html

Menjadi dapat disusun. Buat aplikasi lebih cepat seperti Lego

Bit adalah alat sumber terbuka untuk membuat aplikasi dengan cara modular dan kolaboratif. Jadikan komposisi untuk mengirim lebih cepat, lebih konsisten, dan mudah diskalakan

→ Pelajari lebih lanjut

Buat aplikasi, halaman, pengalaman pengguna, dan UI sebagai komponen mandiri. Gunakan mereka untuk menyusun aplikasi dan pengalaman baru dengan lebih cepat. Bawa kerangka kerja dan alat apa pun ke dalam alur kerja Anda. Bagikan, gunakan kembali, dan berkolaborasi untuk membangun bersama

Bagaimana cara membuat halaman HTML dinamis di node JS?

Mengonversi Situs Statis menjadi Node Dinamis. .

Menginstal Node. js. .

Menguji Instal. .

Membuat Server Pertama Anda. .

Langkah selanjutnya. .

Dasar-dasar Template. .

Mengubah Halaman Statis menjadi File EJS. .

Menggunakan Kembali Kode - Membuat Parsial EJS Pertama Anda. .

Merender Halaman EJS

Bisakah node JS menghasilkan konten halaman dinamis?

Hal ini memungkinkan kita untuk menginjeksi data dinamis saat runtime. Kita dapat membangun seluruh front-end hanya dengan menggunakan template di Node. js tanpa menggunakan pustaka front-end. Kita dapat menghasilkan html dinamis dan menyimpan konten yang dihasilkan secara dinamis dalam file .

Bagaimana cara mengarahkan ulang ke halaman HTML di node JS?

Cara Mengarahkan Halaman Web dengan Node. .

Gunakan metode createServer. Contoh

Gunakan modul url untuk mengalihkan semua posting di bagian /blog. Contoh

Untuk meminta halaman-c. html mengirim respons pengalihan (untuk mencari halaman-b. html) ke klien web. Contoh

Sumber Daya Terkait

Bagaimana cara menampilkan konten dinamis dalam HTML?

Gunakan jQuery untuk menampilkan/menyembunyikan konten dinamis . Anda dapat menambahkan kondisi sebanyak yang Anda inginkan, pastikan Anda selalu menyertakan konten default untuk berjaga-jaga jika parameter salah eja atau tidak ada di URL.

kode html