hujung hadapan webSoal Jawab bahagian hadapanBagaimana untuk memindahkan data nodejs ke bahagian hadapan
Dengan populariti Node.js, semakin ramai pembangun mula menggunakan teknologi ini untuk mencipta aplikasi web. Sebagai teknologi bahagian belakang, Node.js boleh menghantar data ke halaman hujung hadapan dalam pelbagai cara. Berikut ialah beberapa teknik untuk memindahkan data Node.js ke bahagian hadapan:
- RESTful API
RESTful API ialah salah satu seni bina perkhidmatan web yang paling popular pada masa ini. Node.js boleh menggunakan rangka kerja seperti Express.js atau Hapi untuk membangunkan API RESTful. API RESTful adalah berdasarkan protokol HTTP, yang boleh menghantar data kepada klien melalui kaedah GET, POST, PUT atau DELETE. Bahagian hadapan meminta API ini melalui AJAX, dan kemudian pelayan mengembalikan data dalam format JSON (JavaScript Object Notation) untuk digunakan oleh bahagian hadapan.
Berikut ialah contoh mudah:
Mula-mula, kita perlu mencipta kod sebelah pelayan, menggunakan rangka kerja Express.js:
const express = require('express');
const app = express();
app.get('/api/users', (req, res) => {
const users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Chris', age: 35 },
];
res.json(users);
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});Di sini kita menggunakan Express. rangka kerja js Cipta API RESTful. Apabila klien meminta /api/users, pelayan akan mengembalikan data JSON yang mengandungi maklumat pengguna.
Menggunakan jQuery untuk panggilan AJAX:
$.ajax({
url: '/api/users',
type: 'GET',
success: function(data) {
console.log(data);
},
error: function(xhr, textStatus, error) {
console.log(xhr.statusText);
}
});- WebSockets
WebSocket ialah protokol komunikasi masa nyata yang membenarkan komunikasi antara penyemak imbas dan pelayan Komunikasi dua hala. Node.js boleh menggunakan perpustakaan socket.io untuk melaksanakan fungsi WebSocket. Menggunakan WebSockets, pelayan boleh menolak data masa nyata kepada pelanggan, yang lebih cekap daripada kaedah pengundian pendek dan pengundian panjang (polling).
Berikut ialah contoh mudah:
Pertama, kita perlu mencipta kod sisi pelayan, menggunakan perpustakaan socket.io:
const app = require('http').createServer(handler);
const io = require('socket.io')(app);
const fs = require('fs');
app.listen(3000, () => {
console.log('Server started on port 3000');
});
function handler(req, res) {
fs.readFile(__dirname + '/index.html', function(err, data) {
if (err) {
res.writeHead(500);
return res.end('Error loading index.html');
}
res.writeHead(200);
res.end(data);
});
}
io.on('connection', function(socket) {
setInterval(() => {
const number = Math.floor(Math.random() * 10);
socket.emit('number', number);
}, 1000);
});Di sini kita menggunakan soket. io perpustakaan untuk mencipta pelayan WebSocket. Apabila klien menyambung ke pelayan, pelayan akan memulakan pemasa dengan selang 1 saat dan menghantar nombor rawak kepada klien.
Kod pelanggan (index.html):
<!doctype html>
<html>
<head>
<title>WebSockets Example</title>
</head>
<body>
<div id="container"></div>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script>
var socket = io.connect('http://localhost:3000');
socket.on('number', (data) => {
document.getElementById('container').innerHTML = 'Random number: ' + data;
});
</script>
</body>
</html>Di sini kami menggunakan perpustakaan socket.io untuk mewujudkan sambungan WebSocket dengan pelayan dan mendaftarkan pendengar acara 'nombor'. Apabila pelayan menghantar nombor, pelanggan akan memaparkan nombor tersebut.
- Acara Dihantar Pelayan
Acara Dihantar Pelayan (SSE) ialah teknologi yang menolak aliran acara kepada pelanggan. SSE membenarkan pelayan menghantar data kepada klien dalam masa nyata tanpa pelanggan membuat permintaan kepada pelayan. Node.js boleh menggunakan pustaka EventSource untuk menyokong penstriman acara tolak pelayan.
Berikut ialah contoh mudah:
Kod pelayan:
const http = require('http');
http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
});
setInterval(() => {
const data = { time: new Date().toTimeString() };
res.write(`event: time
`);
res.write(`data: ${JSON.stringify(data)}
`);
}, 1000);
}).listen(3000);
console.log('Server started on port 3000');Di sini kami menggunakan modul HTTP Node.js untuk mencipta pelayan SSE. Apabila pelanggan menyambung ke pelayan, pelayan akan menghantar aliran acara dan menghantar mesej yang mengandungi masa semasa setiap 1 saat.
Kod pelanggan:
<!doctype html>
<html>
<head>
<title>Server-Sent Events Example</title>
</head>
<body>
<div id="container"></div>
<script>
const eventSource = new EventSource('http://localhost:3000');
eventSource.addEventListener('time', (event) => {
const data = JSON.parse(event.data);
document.getElementById('container').innerHTML = data.time;
});
</script>
</body>
</html>Di sini kami menggunakan objek EventSource JavaScript untuk mendengar strim acara yang ditolak oleh pelayan. Apabila terdapat acara 'masa' dalam aliran acara, pelanggan akan memaparkan masa semasa.
Kesimpulan
Dengan menggunakan teknologi di atas, kami boleh memindahkan data dengan mudah dalam Node.js ke halaman hujung hadapan. API RESTful, WebSockets dan Acara Dihantar Pelayan ialah cara terbaik untuk mencapai matlamat ini.
Atas ialah kandungan terperinci Bagaimana untuk memindahkan data nodejs ke bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
React Inside HTML: Mengintegrasikan JavaScript untuk laman web dinamikApr 16, 2025 am 12:06 AMUntuk mengintegrasikan React ke HTML, ikuti langkah -langkah ini: 1. Memperkenalkan React dan Reactdom dalam fail HTML. 2. Tentukan komponen React. 3. Mengadakan komponen ke dalam elemen HTML menggunakan ReactDom. Melalui langkah -langkah ini, halaman HTML statik dapat diubah menjadi pengalaman yang dinamik dan interaktif.
Faedah bertindak balas: prestasi, kebolehgunaan semula, dan banyak lagiApr 15, 2025 am 12:05 AMPopulariti React termasuk pengoptimuman prestasi, penggunaan semula komponen dan ekosistem yang kaya. 1. Pengoptimuman prestasi mencapai kemas kini yang cekap melalui mekanisme maya dan mekanisme yang berbeza. 2. Penggunaan semula komponen mengurangkan kod pendua oleh komponen yang boleh diguna semula. 3. Ekosistem yang kaya dan aliran data sehala meningkatkan pengalaman pembangunan.
React: Membuat antara muka pengguna yang dinamik dan interaktifApr 14, 2025 am 12:08 AMReact adalah alat pilihan untuk membina antara muka pengguna yang dinamik dan interaktif. 1) Komponen dan JSX membuat UI berpecah dan menggunakan semula mudah. 2) Pengurusan negeri dilaksanakan melalui cangkuk UseState untuk mencetuskan kemas kini UI. 3) Mekanisme pemprosesan acara bertindak balas terhadap interaksi pengguna dan meningkatkan pengalaman pengguna.
Rangka Kerja Backend: PerbandinganApr 13, 2025 am 12:06 AMReact adalah rangka kerja front-end untuk membina antara muka pengguna; Rangka kerja back-end digunakan untuk membina aplikasi sisi pelayan. React menyediakan kemas kini UI yang komponen dan cekap, dan Rangka Kerja Backend menyediakan penyelesaian perkhidmatan backend lengkap. Apabila memilih timbunan teknologi, keperluan projek, kemahiran pasukan, dan skalabiliti harus dipertimbangkan.
HTML dan React: Hubungan antara markup dan komponenApr 12, 2025 am 12:03 AMHubungan antara HTML dan React adalah teras pembangunan front-end, dan mereka bersama-sama membina antara muka pengguna aplikasi web moden. 1) HTML mentakrifkan struktur kandungan dan semantik, dan React membina antara muka dinamik melalui komponenisasi. 2) Komponen React Gunakan sintaks JSX untuk membenamkan HTML untuk mencapai rendering pintar. 3) Kitaran Hayat Komponen Menguruskan Rendering HTML dan Kemas kini secara dinamik mengikut keadaan dan atribut. 4) Gunakan komponen untuk mengoptimumkan struktur HTML dan meningkatkan keupayaan. 5) Pengoptimuman prestasi termasuk mengelakkan penyampaian yang tidak perlu, menggunakan atribut utama, dan menjaga tanggungjawab tunggal komponen.
React and the Frontend: Membina Pengalaman InteraktifApr 11, 2025 am 12:02 AMReact adalah alat pilihan untuk membina pengalaman front-end interaktif. 1) React memudahkan pembangunan UI melalui komponen dan DOM maya. 2) Komponen dibahagikan kepada komponen fungsi dan komponen kelas. Komponen fungsi adalah lebih mudah dan komponen kelas menyediakan lebih banyak kaedah kitaran hayat. 3) Prinsip kerja React bergantung kepada algoritma DOM dan perdamaian maya untuk meningkatkan prestasi. 4) Pengurusan negeri menggunakan useState atau ini. Kaedah kitaran hayat seperti ComponentDidMount digunakan untuk logik tertentu. 5) Penggunaan asas termasuk membuat komponen dan pengurusan negeri, dan penggunaan lanjutan melibatkan cangkuk tersuai dan pengoptimuman prestasi. 6) Kesalahan biasa termasuk kemas kini status yang tidak betul dan isu prestasi, kemahiran debugging termasuk menggunakan reactdevtools dan sangat baik
React and the Frontend Stack: Alat dan TeknologiApr 10, 2025 am 09:34 AMReact adalah perpustakaan JavaScript untuk membina antara muka pengguna, dengan komponen terasnya dan pengurusan negeri. 1) Memudahkan pembangunan UI melalui komponen dan pengurusan negeri. 2) Prinsip kerja termasuk perdamaian dan rendering, dan pengoptimuman dapat dilaksanakan melalui React.Memo dan Usememo. 3) Penggunaan asas adalah untuk membuat dan membuat komponen, dan penggunaan lanjutan termasuk menggunakan cangkuk dan konteksapi. 4) Kesalahan biasa seperti kemas kini status yang tidak betul, anda boleh menggunakan ReactDevTools untuk debug. 5) Pengoptimuman prestasi termasuk menggunakan react.memo, senarai virtualisasi dan codesplitting, dan menyimpan kod yang boleh dibaca dan dikekalkan adalah amalan terbaik.
Peranan React dalam HTML: Meningkatkan Pengalaman PenggunaApr 09, 2025 am 12:11 AMReact menggabungkan JSX dan HTML untuk meningkatkan pengalaman pengguna. 1) JSX membenamkan HTML untuk menjadikan pembangunan lebih intuitif. 2) Mekanisme DOM maya mengoptimumkan prestasi dan mengurangkan operasi DOM. 3) UI pengurusan berasaskan komponen untuk meningkatkan kebolehkerjaan. 4) Pengurusan negeri dan pemprosesan acara meningkatkan interaktiviti.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),
Penyesuai Pelayan SAP NetWeaver untuk Eclipse
Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.
Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna
MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.
VSCode Windows 64-bit Muat Turun
Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft
