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
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 nodemon1
- 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
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 nodemon2
const path = require("path");Kemudian Anda dapat merender file HTML itu menggunakan perintah berikut
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 hbsKemudian, 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 nodemon7 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 nodemon8
Jadi mari kita lihat cara merender file dengan ekstensi berbeda
Anda hanya perlu melakukan beberapa perubahan pada kode npm install express nodemon9 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 nodemon0RingkasanKami 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 LegoBit 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