


Mencipta Aplikasi Timbunan Penuh Mudah dengan React dan Node.js
Dec 28, 2024 pm 10:35 PMDalam blog saya sebelum ini, saya memperkenalkan React dan Node.js. Sekarang, mari kita kumpulkan mereka untuk membina sesuatu yang lebih menarik: aplikasi tindanan penuh yang mudah! Anda mungkin menganggap apl tindanan penuh hanya untuk projek yang lebih besar, dengan berbilang pangkalan data dan struktur yang kompleks. Walaupun dari segi konsep itu benar, secara praktikalnya, aplikasi tindanan penuh boleh semudah bahagian hadapan kecil dengan hujung belakang asas. Jadi, mari kita pecahkan dan lihat betapa mudahnya untuk mencipta apl tindanan penuh dengan React dan Node.js.
Langkah 1: Backend dengan Node.js dan Express
Mari kita mulakan dengan membuat bahagian belakang. Kami akan menggunakan Express sebagai pelayan kami untuk menghantar respons mesej JSON yang mudah ke bahagian hadapan.
- Pasang Express: Untuk bermula, mula-mula pasang Express dengan menjalankan arahan ini dalam terminal anda:
npm install express
- Buat pelayan: Sekarang, mari buat pelayan dengan laluan mudah yang akan mengembalikan mesej ucapan.
const express = require('express'); const app = express(); const PORT = 3000; app.get('/greet', (req, res) => { res.status(200).json({ message: "Zee here..." }); }); app.listen(PORT, () => console.log(`Server is running at http://localhost:${PORT}`));
Penjelasan:
- Kami mengimport modul ekspres dan mencipta contoh dengan ekspres().
- Kami menyediakan laluan GET mudah di /greet yang membalas dengan objek JSON yang mengandungi mesej ucapan.
- Kami memulakan pelayan pada port 3000, dan konsol akan log bahawa pelayan sedang berjalan.
Langkah 2: Bahagian hadapan dengan React
Sekarang, mari buat bahagian hadapan menggunakan React. Kami akan menggunakan dua cangkuk: useState dan useEffect untuk mengambil data dari bahagian belakang.
- Buat apl React: Jika anda belum menyediakan apl React anda, anda boleh membuat apl menggunakan create-react-app dengan menjalankan:
npx create-react-app my-fullstack-app cd my-fullstack-app
- Tulis kod bahagian hadapan: Sekarang, mari kita ubah suai fail App.js untuk mengambil data dari bahagian belakang kami dan memaparkannya.
import { useState, useEffect } from 'react'; export function App() { const [response, setResponse] = useState(null); useEffect(() => { const controller = new AbortController(); // This is used to abort the fetch request if the component is unmounted const fetchData = async () => { try { const response = await fetch('http://localhost:3000/greet', { signal: controller.signal, }); if (!response.ok) throw new Error("Couldn't fetch data"); const data = await response.json(); setResponse(data.message); // Corrected the response property here } catch (error) { console.error(error); } }; fetchData(); // Clean up function to abort the fetch request if needed return () => controller.abort(); }, []); return ( <div> {response ? <p>{response}</p> : <p>Loading...</p>} </div> ); }
Penjelasan:
- useState digunakan untuk menyimpan data respons dari bahagian belakang.
- useEffect digunakan untuk mencetuskan permintaan pengambilan apabila komponen dipasang.
- Kami menggunakan API fetch() untuk menghantar permintaan ke http://localhost:3000/greet dan mengendalikan respons. Jika pengambilan berjaya, kami mengemas kini keadaan respons dengan mesej dari hujung belakang.
- Kami memaparkan respons dalam komponen, menunjukkan "Memuatkan..." semasa permintaan sedang dijalankan.
Langkah 3: Menjalankan Apl
- Mulakan bahagian belakang: Dalam folder bahagian belakang (tempat fail server.js anda berada), jalankan:
npm install express
- Mulakan bahagian hadapan: Dalam folder bahagian hadapan (tempat apl React anda berada), jalankan:
const express = require('express'); const app = express(); const PORT = 3000; app.get('/greet', (req, res) => { res.status(200).json({ message: "Zee here..." }); }); app.listen(PORT, () => console.log(`Server is running at http://localhost:${PORT}`));
Sekarang, buka penyemak imbas anda dan pergi ke http://localhost:3000. Anda sepatutnya melihat mesej ringkas yang diambil dari bahagian belakang, dan ia akan memaparkan "Zee di sini...".
Kesimpulan
Dan itu sahaja! Anda baru sahaja mencipta aplikasi tindanan penuh yang mudah menggunakan React dan Express. Ia adalah permulaan yang hebat, dan dengan asas ini, anda boleh mengembangkan dan membina aplikasi yang lebih kompleks. Selamat mengekod!
Pengambilan Utama:
- Aplikasi tindanan penuh tidak perlu rumit. Bahagian hadapan dan hujung belakang yang ringkas boleh dianggap tindanan penuh.
- Kait useState dan useEffect React sangat bagus untuk mengambil data daripada API bahagian belakang.
- Express ialah rangka kerja yang ringkas dan berkuasa untuk membina API bahagian belakang.
Atas ialah kandungan terperinci Mencipta Aplikasi Timbunan Penuh Mudah dengan React dan Node.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undress AI Tool
Gambar buka pakaian secara percuma

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Java dan JavaScript adalah bahasa pengaturcaraan yang berbeza, masing -masing sesuai untuk senario aplikasi yang berbeza. Java digunakan untuk pembangunan aplikasi perusahaan dan mudah alih yang besar, sementara JavaScript digunakan terutamanya untuk pembangunan laman web.

JavaScriptcommentsareessentialformaintaining,reading,andguidingcodeexecution.1)Single-linecommentsareusedforquickexplanations.2)Multi-linecommentsexplaincomplexlogicorprovidedetaileddocumentation.3)Inlinecommentsclarifyspecificpartsofcode.Bestpractic

Titik berikut harus diperhatikan apabila tarikh pemprosesan dan masa di JavaScript: 1. Terdapat banyak cara untuk membuat objek tarikh. Adalah disyorkan untuk menggunakan rentetan format ISO untuk memastikan keserasian; 2. Dapatkan dan tetapkan maklumat masa boleh diperoleh dan tetapkan kaedah, dan ambil perhatian bahawa bulan bermula dari 0; 3. Tarikh pemformatan secara manual memerlukan rentetan, dan perpustakaan pihak ketiga juga boleh digunakan; 4. Adalah disyorkan untuk menggunakan perpustakaan yang menyokong zon masa, seperti Luxon. Menguasai perkara -perkara utama ini secara berkesan dapat mengelakkan kesilapan yang sama.

PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl

JavaScriptispreferredforwebdevelopment, whersjavaisbetterforlarge-scalebackendsystemsandandroidapps.1) javascriptexcelsinceleatinginteractiveWebexperienceswithitsdynamicnatureanddommanipulation.2) javaoffersstrongyblectionandobjection

JavascripthassevenfundamentalDatypes: nombor, rentetan, boolean, undefined, null, objek, andsymbol.1) numberuseadouble-precisionformat, bergunaforwidevaluangesbutbecautiouswithfloating-pointarithmetic.2)

Penangkapan dan gelembung acara adalah dua peringkat penyebaran acara di Dom. Tangkap adalah dari lapisan atas ke elemen sasaran, dan gelembung adalah dari elemen sasaran ke lapisan atas. 1. Penangkapan acara dilaksanakan dengan menetapkan parameter useCapture addeventlistener kepada benar; 2. Bubble acara adalah tingkah laku lalai, useCapture ditetapkan kepada palsu atau ditinggalkan; 3. Penyebaran acara boleh digunakan untuk mencegah penyebaran acara; 4. Acara menggelegak menyokong delegasi acara untuk meningkatkan kecekapan pemprosesan kandungan dinamik; 5. Penangkapan boleh digunakan untuk memintas peristiwa terlebih dahulu, seperti pemprosesan pembalakan atau ralat. Memahami kedua -dua fasa ini membantu mengawal masa dan bagaimana JavaScript bertindak balas terhadap operasi pengguna.

Java dan JavaScript adalah bahasa pengaturcaraan yang berbeza. 1.Java adalah bahasa yang ditaip dan disusun secara statik, sesuai untuk aplikasi perusahaan dan sistem besar. 2. JavaScript adalah jenis dinamik dan bahasa yang ditafsirkan, terutamanya digunakan untuk interaksi web dan pembangunan front-end.
