Rumah > Artikel > hujung hadapan web > Cara melaksanakan lompatan berbilang halaman dalam Node.js
Cara melaksanakan lompatan berbilang halaman dalam Node.js
- PHPzasal
- 2023-04-06 08:53:16958semak imbas
Dengan perkembangan pesat pembangunan bahagian hadapan, aplikasi web moden bukan lagi aplikasi satu halaman (SPA). Sebaliknya, ia menjadi lebih kompleks, termasuk banyak halaman dan komponen. Untuk menyokong aplikasi web sedemikian, kami memerlukan rangka kerja web yang fleksibel dan berkuasa yang boleh menyokong navigasi dan responsif berbilang halaman. Node.js menyediakan banyak rangka kerja yang sangat baik untuk ini, seperti Express.js, Koa.js, dsb. Dalam artikel ini, kita akan mempelajari cara menggunakan rangka kerja Node.js untuk melaksanakan fungsi lompat berbilang halaman.
- Buat projek Node.js baharu
Pertama, kita perlu mencipta projek Node.js baharu. Jika anda sudah mempunyai projek sedia ada, anda boleh melangkau langkah ini. Dalam baris arahan, masukkan arahan berikut:
mkdir myproject cd myproject npm init
Selepas menjalankan arahan ini, satu siri gesaan akan muncul, meminta anda memasukkan nama projek, nombor versi, penerangan dan maklumat lain. Setelah selesai, kami akan mendapat fail package.json, iaitu fail yang menyimpan maklumat projek. Dalam fail package.json kami akan melihat semua kebergantungan yang kami pasang.
- Pasang Express.js
Seperti yang dinyatakan sebelum ini, Express.js ialah rangka kerja aplikasi web Node.js yang biasa digunakan yang menyediakan cara yang pantas dan fleksibel untuk Mencipta aplikasi web . Kami akan menggunakan Express.js untuk melaksanakan fungsi lompat berbilang halaman. Memasang Express.js adalah mudah, hanya taip perintah berikut:
npm install express --save
Perintah ini akan memasang Express.js dan menambahkannya pada kebergantungan projek kami.
- Buat halaman
Sekarang kita perlu mencipta halaman mudah untuk menguji fungsi lompat berbilang halaman kami. Dalam direktori akar projek, cipta fail yang dipanggil "index.html" dan tambah kandungan berikut:
<!DOCTYPE html> <html> <head> <title>Express.js Multiple Pages</title> </head> <body> <h1>Hello World!</h1> <p>Welcome to my Express.js app.</p> </body> </html>
Ini adalah halaman yang sangat mudah dengan hanya tajuk dan beberapa teks. Kami akan menggunakan halaman ini dalam langkah seterusnya.
- Buat aplikasi Express.js
Dalam direktori akar projek, buat fail yang dipanggil "app.js" di mana kami akan menulis aplikasi kami.
Pertama, kami perlu membawa masuk modul Express.js yang diperlukan:
const express = require('express')
const app = express()
Seterusnya, kami perlu menentukan enjin paparan kami. Enjin lihat akan membantu kami memaparkan halaman HTML pada bahagian pelayan. Kami akan menggunakan EJS (JavaScript Terbenam) sebagai enjin paparan kami. Sila ambil perhatian bahawa sebelum menggunakan EJS kita perlu memasangnya. EJS boleh dipasang menggunakan arahan berikut:
npm install ejs --save
Setelah selesai, tambah kod berikut di bahagian atas app.js:
app.set('view engine', 'ejs')
Sekarang kita perlu memberitahu Express. js bagaimana untuk mengendalikan Fail statik seperti helaian gaya dan skrip. Untuk melakukan ini, kami akan menggunakan perisian tengah terbina dalam Express.js. Tambahkan kod berikut di bahagian atas fail app.js:
app.use(express.static('public'))
Kod ini akan memberitahu Express.js untuk menganggap folder awam sebagai folder sumber statik. Semua fail yang disimpan di dalamnya boleh diakses melalui pelayan HTTP.
Sekarang kita perlu mencipta laluan pertama kita. Penghalaan akan menentukan perkara yang akan berlaku apabila kami melawat URL tertentu. Kami akan membuat laluan yang menjadikan halaman index.html kami pada bahagian pelayan apabila pengguna melawat URL akar.
Tambahkan kod berikut dalam app.js:
app.get('/', (req, res) => {
res.render('index')
})
Kod ini akan memberitahu Express.js untuk membuat laluan GET yang menghasilkan paparan nama " indeks".
- Tambah lebih banyak halaman
Sekarang kami telah melengkapkan halaman pertama dan laluan pertama kami. Seterusnya, kami akan menambah lebih banyak halaman dan laluan.
Buat fail bernama "about.html" yang akan mengandungi maklumat tentang aplikasi kami. Tambahkan yang berikut:
<!DOCTYPE html> <html> <head> <title>About</title> </head> <body> <h1>About Us</h1> <p>We are a team of Node.js developers.</p> </body> </html>
Kemudian, tambahkan kod berikut dalam app.js:
app.get('/about', (req, res) => {
res.render('about')
})
Kod ini akan memberitahu Express.js untuk membuat laluan GET apabila pengguna mengakses " / about" URL, menjadikan paparan bernama "about" di sebelah pelayan.
Kami juga boleh menambah lebih banyak halaman, cuma buat fail HTML untuk setiap halaman dan buat laluan untuk setiap halaman.
- Pautan ke halaman lain
Sekarang kami telah mencipta berbilang halaman dan laluan, kami perlu menambah pautan supaya pengguna boleh menavigasi ke halaman lain. Dalam index.html, tambahkan kod berikut sebelum teks:
<a href="/about">About Us</a>
Pautan ini akan membawa pengguna ke halaman Perihal Kami. Teruskan menambah halaman tambahan.
Kini kami telah melaksanakan fungsi lompat berbilang halaman. Apabila pengguna mengklik pautan, mereka akan menavigasi ke halaman lain dan aplikasi akan memaparkan bahagian pelayan halaman HTML.
Ringkasan
Dalam artikel ini, kami mempelajari cara menggunakan rangka kerja Node.js (terutama Express.js) untuk melaksanakan fungsi lompat berbilang halaman. Kami mencipta berbilang halaman dan laluan serta menyediakan pautan untuk navigasi pengguna. Ini adalah pelaksanaan yang sangat asas, tetapi ia boleh membantu anda membina aplikasi berbilang halaman dengan cepat. Cuba kod ini, dan lain-lain, untuk membantu anda memahami dengan lebih baik cara membangunkan aplikasi web menggunakan rangka kerja Node.js.
Atas ialah kandungan terperinci Cara melaksanakan lompatan berbilang halaman dalam Node.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!