Rumah hujung hadapan web Soal Jawab bahagian hadapan nodejs melaksanakan bahagian web

nodejs melaksanakan bahagian web

May 08, 2023 pm 01:08 PM

Nodejs ialah persekitaran masa jalan JavaScript yang berjalan pada bahagian pelayan Ia membenarkan pembangun menulis kod bahagian pelayan dalam JavaScript untuk berinteraksi dengan bahagian hadapan Web.

Nodejs telah menjadi semakin popular sejak beberapa tahun kebelakangan ini kerana ia menyediakan persekitaran pembangunan yang cekap, berskala dan mudah digunakan. Banyak syarikat dan organisasi telah menggunakan nodej, seperti LinkedIn, Walmart dan PayPal.

Dalam artikel ini, kami akan memperkenalkan cara menggunakan nodej untuk melaksanakan pembangunan sisi web, termasuk penggunaan aplikasi web, penghalaan dan perisian tengah serta penggunaan enjin templat untuk memaparkan data sisi pelayan.

  1. Pasang nodejs

Pertama, kita perlu memasang nodejs. Kami boleh mendapatkan pautan muat turun untuk sistem pengendalian yang berbeza di tapak web rasmi nodejs.

Selepas pemasangan selesai, kami boleh memasukkan nod -v dalam terminal untuk mengesahkan sama ada pemasangan berjaya. Jika berjaya, nombor versi nodejs akan dipaparkan.

  1. Membuat aplikasi web

Seterusnya, kita boleh mencipta aplikasi web mudah menggunakan nodejs. Buka terminal, pergi ke folder kosong dan masukkan arahan berikut:

npm init -y
Salin selepas log masuk

Arahan ini akan mencipta fail package.json baharu yang mengandungi metadata projek kami.

Seterusnya, kita perlu memasang modul ekspres, yang merupakan salah satu rangka kerja aplikasi web paling popular dalam nodejs. Kami boleh memasangnya menggunakan arahan berikut:

npm install express
Salin selepas log masuk

Selepas pemasangan selesai, kami boleh mencipta fail index.js, yang akan mengandungi kod nodejs kami. Dalam index.js, kami akan mengimport modul ekspres dan mencipta contoh baharu:

const express = require('express');  
const app = express();  
Salin selepas log masuk

Ini bermakna aplikasi kami kini boleh menggunakan kaedah dan sifat yang disediakan oleh ekspres. Seterusnya, kami perlu memberitahu aplikasi port yang hendak didengari untuk menerima permintaan http.

const port = 3000; 
app.listen(port, () => {  
  console.log(`Server started on port ${port}`);  
});
Salin selepas log masuk

Di sini kami memberitahu aplikasi untuk mendengar pada port 3000. Dan gunakan console.log() untuk mencetak mesej supaya kita tahu pelayan telah bermula.

  1. Tambah Laluan

Sekarang kami mempunyai rangka kerja asas yang disediakan untuk aplikasi kami, kami perlu mula menambah laluan untuk menavigasi ke halaman yang berbeza. Secara ekspres, laluan menentukan cara aplikasi bertindak balas kepada permintaan pelanggan.

Kami boleh mencipta laluan dinamik mudah menggunakan kod berikut:

app.get('/', (req, res) => {  
  res.send('Hello, World!');  
})
Salin selepas log masuk

Laluan ini mentakrifkan permintaan GET yang akan mengembalikan mesej "Hello, World!" .

Kami juga boleh menggunakan penghalaan statik untuk menentukan halaman statik dan fail aplikasi.

app.use(express.static('public'));  
Salin selepas log masuk

Di sini, kami memberitahu pelayan untuk mencari fail statik dalam folder "awam". Ini termasuk HTML, CSS, JavaScript, imej dan sumber statik lain.

  1. Middleware

Middleware ialah kod yang dilaksanakan sebelum atau selepas laluan. Ia boleh digunakan untuk memproses dan mengubah suai objek permintaan dan respons, dengan itu menyediakan lebih banyak fungsi kepada aplikasi.

Sebagai contoh, kami boleh menambah perisian tengah pengelogan untuk semua laluan menggunakan kod berikut:

app.use((req, res, next) => {  
  console.log(`${req.method} ${req.url}`);  
  next();  
});
Salin selepas log masuk

Di sini, kami mentakrifkan fungsi perisian tengah yang dipanggil "logger" yang merekodkan kaedah HTTP dan URL, dan lulus permintaan dan tindak balas objek kepada perisian tengah seterusnya.

  1. Enjin Templat

Dalam kebanyakan aplikasi web, kita perlu menjana halaman HTML secara dinamik pada bahagian pelayan. Untuk mencapai fungsi ini, kita boleh menggunakan enjin templat.

Enjin templat membolehkan kami memaparkan HTML daripada pelayan dan bukannya memaparkan daripada klien. Ini biasanya bermakna masa memuatkan lebih cepat dan pengoptimuman enjin carian (SEO) yang lebih baik.

Dalam nodejs, terdapat banyak enjin templat berbeza untuk dipilih, seperti Pug, Handlebars dan EJS.

Berikut ialah contoh pemaparan pembolehubah menggunakan enjin templat EJS:

app.set('view engine', 'ejs');  
app.get('/', (req, res) => {  
  const data = {  
    title: 'Hello, World!',  
    message: 'This is the home page.'  
  };  
  res.render('index', data);  
});
Salin selepas log masuk

Di sini, kami mula-mula menetapkan enjin templat kepada EJS. Kemudian, kami mentakrifkan objek data yang sifatnya termasuk tajuk dan mesej. Akhir sekali, kami memberikan templat EJS bernama "indeks" menggunakan kaedah res.render() dan menghantar objek data ke templat.

Dalam templat EJS kami, kami boleh mengakses pembolehubah ini menggunakan kod berikut:

<h1><%= title %></h1>  
<p><%= message %></p>
Salin selepas log masuk

Di sini, kami menggunakan sintaks <%= %> Apabila templat diberikan, pembolehubah ini akan digantikan dengan data sebenar.

  1. Gunakan aplikasi

Selepas kami menyelesaikan pembangunan aplikasi web, kami boleh menggunakan ia pada pelayan web supaya ia boleh diakses oleh sesiapa sahaja.

Kaedah yang popular ialah menggunakan perkhidmatan pengkomputeran awan seperti Perkhidmatan Web Amazon (AWS) atau Microsoft Azure. Perkhidmatan ini menyediakan contoh komputer maya, bekas dan platform aplikasi yang boleh digunakan untuk menggunakan dan mengehoskan aplikasi web.

Kami juga boleh menggunakan platform seperti Heroku sebagai sasaran penggunaan. Platform ini menyediakan alatan baris arahan yang mudah dan proses penggunaan yang boleh digunakan untuk menggunakan kod ke pelayan jauh.

Ringkasan

Dalam artikel ini, kami memperkenalkan cara menggunakan nodejs untuk melaksanakan pembangunan web. Kami belajar cara membuat aplikasi web asas, menambah penghalaan dan perisian tengah serta menggunakan enjin templat untuk memaparkan data sebelah pelayan. Selain itu, kami membincangkan cara untuk menggunakan aplikasi pada pelayan Web supaya ia boleh digunakan secara meluas.

Atas ialah kandungan terperinci nodejs melaksanakan bahagian web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan? Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan? Mar 19, 2025 pm 03:58 PM

Artikel ini membincangkan useeffect dalam React, cangkuk untuk menguruskan kesan sampingan seperti pengambilan data dan manipulasi DOM dalam komponen berfungsi. Ia menerangkan penggunaan, kesan sampingan yang biasa, dan pembersihan untuk mencegah masalah seperti kebocoran memori.

Terangkan konsep pemuatan malas. Terangkan konsep pemuatan malas. Mar 13, 2025 pm 07:47 PM

Lazy memuatkan kelewatan memuatkan kandungan sehingga diperlukan, meningkatkan prestasi web dan pengalaman pengguna dengan mengurangkan masa beban awal dan beban pelayan.

Bagaimanakah kari bekerja di JavaScript, dan apakah faedahnya? Bagaimanakah kari bekerja di JavaScript, dan apakah faedahnya? Mar 18, 2025 pm 01:45 PM

Artikel ini membincangkan kari dalam JavaScript, teknik yang mengubah fungsi multi-argumen ke dalam urutan fungsi argumen tunggal. Ia meneroka pelaksanaan kari, faedah seperti aplikasi separa, dan kegunaan praktikal, meningkatkan kod baca

Apakah fungsi pesanan yang lebih tinggi dalam JavaScript, dan bagaimana mereka boleh digunakan untuk menulis lebih banyak kod ringkas dan boleh diguna semula? Apakah fungsi pesanan yang lebih tinggi dalam JavaScript, dan bagaimana mereka boleh digunakan untuk menulis lebih banyak kod ringkas dan boleh diguna semula? Mar 18, 2025 pm 01:44 PM

Fungsi pesanan yang lebih tinggi dalam JavaScript meningkatkan ketabahan kod, kebolehgunaan semula, modulariti, dan prestasi melalui abstraksi, corak umum, dan teknik pengoptimuman.

Bagaimanakah algoritma Rekonsiliasi React berfungsi? Bagaimanakah algoritma Rekonsiliasi React berfungsi? Mar 18, 2025 pm 01:58 PM

Artikel ini menerangkan algoritma perdamaian React, yang dengan cekap mengemas kini DOM dengan membandingkan pokok DOM maya. Ia membincangkan manfaat prestasi, teknik pengoptimuman, dan kesan terhadap pengalaman pengguna. Kira -kira: 159

Bagaimana anda menyambungkan komponen React ke kedai Redux menggunakan Connect ()? Bagaimana anda menyambungkan komponen React ke kedai Redux menggunakan Connect ()? Mar 21, 2025 pm 06:23 PM

Artikel membincangkan penyambungan komponen reaksi ke kedai redux menggunakan Connect (), menerangkan MapStateToprops, MapdispatchToprops, dan kesan prestasi.

Apakah useContext? Bagaimana anda menggunakannya untuk berkongsi keadaan antara komponen? Apakah useContext? Bagaimana anda menggunakannya untuk berkongsi keadaan antara komponen? Mar 19, 2025 pm 03:59 PM

Artikel ini menerangkan USEContext dalam React, yang memudahkan pengurusan negara dengan mengelakkan penggerudian prop. Ia membincangkan faedah seperti keadaan terpusat dan penambahbaikan prestasi melalui pengurangan semula yang dikurangkan.

Bagaimana anda mengelakkan tingkah laku lalai di pengendali acara? Bagaimana anda mengelakkan tingkah laku lalai di pengendali acara? Mar 19, 2025 pm 04:10 PM

Artikel membincangkan menghalang tingkah laku lalai dalam pengendali acara menggunakan kaedah pencegahanDefault (), faedahnya seperti pengalaman pengguna yang dipertingkatkan, dan isu -isu yang berpotensi seperti kebimbangan aksesibiliti.

See all articles