Meningkatkan Tahap dengan Node.js: Menambah Pelayan pada Perpustakaan Pose Yoga Saya

Meningkatkan Tahap dengan Node.js: Menambah Pelayan pada Perpustakaan Pose Yoga Saya

Selepas selesa dengan React melalui membina Perpustakaan Pose Yoga yang ringkas, saya ingin membawa projek saya ke peringkat seterusnya dengan menambahkan beberapa fungsi bahagian belakang. Di situlah Node.js masuk. Node.js ialah persekitaran masa jalan yang membolehkan kami menjalankan kod JavaScript pada bahagian pelayan. Dalam catatan blog ini, saya akan membincangkan cara saya menambahkan pelayan Node.js pada apl Perpustakaan Yoga Pose saya. Ia adalah cara yang hebat untuk berlatih bekerja dengan kedua-dua teknologi bahagian hadapan dan bahagian belakang, dan ia memberi saya pemahaman yang lebih mendalam tentang cara aplikasi tindanan penuh berfungsi.

Mengapa Tambah Node.js pada Apl Reaksi Saya?

Motivasi utama untuk menambahkan pelayan Node.js pada Pustaka Yoga Pose saya adalah untuk menyediakan aplikasi React dan bersedia untuk ciri yang lebih maju kemudian, seperti mendapatkan semula data pose daripada pangkalan data atau mengendalikan pengesahan pengguna. Buat masa ini, saya ingin menumpukan pada menyediakan pelayan dan menyediakan fail statik saya (apl React) daripadanya. Dengan cara ini, saya boleh mengehoskan apl itu dengan cara yang mudah untuk skala kemudian.

Bermula dengan Node.js

Sebelum menyelam ke dalam kod, saya memasang Node.js dan memulakan projek saya dengan npm, pengurus pakej Node. Jika anda tidak memasang Node.js, ia semudah menuju ke tapak web Node.js dan memuat turun versi terkini. Setelah selesai, saya menyediakan pelayan Node.js asas.

npm init -y 
npm install express 

Saya menggunakan Express.js, rangka kerja web minimalis untuk Node.js, untuk mengendalikan penghalaan dan menyediakan fail statik. Ia sesuai untuk aplikasi ringan seperti ini.

Memperkenalkan server.js

Sekarang, mari kita lihat pada server.js, yang bertanggungjawab untuk menyediakan pelayan. Inilah kod yang lengkap:

// Importing the Express framework
const express = require('express'); 
// Importing the path module to handle file paths
const path = require('path'); 
// Creating an Express App
const app = express(); 
// Setting the PORT
const PORT = process.env.PORT || 3000; 

// Serve static files from the React app app.use(express.static(path.join(__dirname, 'build'))); 

// For any request that doesn't match an API route 
// serve the React app's index.html. 
app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'build', 'index.html')); 
}); 

// Start the server
app.listen(PORT, () => { 
console.log(`Server is running on port ${PORT}`); 
}); 

Memecahkan Kod

Sekarang, mari kita pecahkan server.js satu langkah pada satu masa.

Mengimport Ketergantungan:

const express = require('express'); 
const path = require('path'); 

Di sini, kami mengimport ekspres, yang merupakan rangka kerja web untuk Node.js, dan laluan, modul Node.js terbina dalam yang membantu kami bekerja dengan laluan fail dan direktori, supaya pelayan dapat mengesan fail yang kita nak layan.

Membuat Aplikasi Ekspres:

const app = express();  

Kami mencipta contoh aplikasi Express, yang akan mengendalikan permintaan dan respons pelayan kami.

Menetapkan Port:

const PORT = process.env.PORT || 3000; 

Kami menentukan nombor port yang akan didengari oleh pelayan kami. Kami menyemak PORT pembolehubah persekitaran, yang berguna untuk penggunaan dengan perkhidmatan pengehosan, dan kembali ke port 3000 jika ia tidak ditetapkan.

Menyajikan Fail Statik:

app.use(express.static(path.join(__dirname, 'build')));

Barisan ini memberitahu Express untuk menyampaikan fail statik daripada direktori binaan, yang mengandungi fail tersusun apl React kami.

Laluan Tangkap Semua:

app.get('*', (req, res) => { 
  res.sendFile(path.join(__dirname, 'build', 
'index.html')); 
}); 

Laluan tangkap semua ini memastikan bahawa sebarang permintaan yang tidak dikendalikan oleh laluan sebelumnya akan bertindak balas dengan index.html. Ini penting untuk penghalaan pihak pelanggan berfungsi dengan betul dengan Penghala Reaksi.

Memulakan Pelayan:

app.listen(PORT, () => { 
console.log(`Server is running on port ${PORT}`); 
});

Akhir sekali, kami memulakan pelayan dan mendengar pada port yang ditentukan, mengelog mesej ke konsol apabila ia sudah sedia.

Kesimpulan: Asas Teguh untuk Ciri Masa Depan

Menambahkan Node.js pada apl Perpustakaan Yoga Pose saya telah memberi saya asas yang kukuh untuk membina lebih banyak ciri lanjutan. Dengan menyediakan apl daripada pelayan Node.js, saya telah menetapkan diri saya untuk mengendalikan data yang lebih dinamik, input pengguna dan juga fungsi masa nyata dengan mudah pada masa hadapan. Ini merupakan latihan yang hebat dalam menggabungkan teknologi bahagian hadapan dan bahagian belakang, dan saya teruja untuk meneroka lebih banyak Node.js dan Express sambil saya terus membina.

Dalam catatan blog saya yang seterusnya, saya bercadang untuk mendalami cara saya boleh melanjutkan persediaan ini dengan pangkalan data, tetapi buat masa ini, saya teruja dengan betapa banyak yang saya pelajari dengan menggunakan Node.js!

Atas ialah kandungan terperinci Meningkatkan Tahap dengan Node.js: Menambah Pelayan pada Perpustakaan Pose Yoga Saya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!