hujung hadapan web
Soal Jawab bahagian hadapan
Bagaimana untuk melaksanakan lompatan berbilang halaman dalam nodejs
Bagaimana untuk melaksanakan lompatan berbilang halaman dalam nodejs
Dalam beberapa tahun kebelakangan ini, Node.js telah menjadi alat yang berkuasa untuk pembangun bahagian hadapan dengan prestasi yang cekap, fungsi yang kaya dan ekosistem yang berkuasa. Sebagai persekitaran berjalan sebelah pelayan, Node.js boleh digunakan untuk melaksanakan aplikasi web yang kompleks dan juga merupakan pilihan ideal untuk melaksanakan lompatan berbilang halaman.
Artikel ini akan menerangkan secara terperinci cara menggunakan Node.js untuk mencapai lompatan berbilang halaman, termasuk pemajuan permintaan, pemaparan halaman, pengurusan penghalaan, dsb.
1. Minta pemajuan
Dalam era pemisahan bahagian hadapan dan belakang, kami biasanya membangunkan kod hadapan dan kod belakang secara berasingan untuk mencapai tujuan penyahgandingan. Dalam kes ini, kod bahagian hadapan biasanya disimpan dalam folder yang berasingan dan kod bahagian belakang tersebar merentasi berbilang fail. Ini memerlukan kami memajukan permintaan bahagian hadapan ke bahagian belakang untuk diproses.
Node.js menyediakan keupayaan pembangunan aplikasi web yang berkuasa melalui modul teras seperti http dan fs Kami hanya perlu memantau permintaan HTTP dalam aplikasi bahagian belakang Node.js dan memajukan permintaan kepada logik pemprosesan yang sepadan. Pukul saja. Dengan cara ini, permintaan boleh dimajukan secara dalaman antara bahagian hadapan dan bahagian belakang, membenarkan kod bahagian hadapan memanggil API bahagian belakang untuk mencapai kesan lompatan berbilang halaman.
Mari kita lihat contoh mudah untuk memajukan permintaan bahagian hadapan dalam Node.js:
const http = require('http');
http.createServer((req, res) => {
// 设置跨域
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
// 处理请求
if (req.url === '/login') {
// 获取参数
let body = '';
req.on('data', (chunk) => {
body += chunk;
});
req.on('end', () => {
const { username, password } = JSON.parse(body);
// 处理登录逻辑
if (username === 'admin' && password === '123456') {
// 登录成功
res.end(JSON.stringify({ code: 200, message: '登录成功' }));
} else {
// 登录失败
res.end(JSON.stringify({ code: 400, message: '用户名或密码错误' }));
}
});
} else {
// 处理其他请求
res.end('Hello World!');
}
}).listen(3000, () => {
console.log('Server is running on port 3000');
});Dalam contoh ini, kami mencipta HTTP melalui kaedah createServer bagi contoh Pelayan modul http dan dengar pada port 3000. Semasa memproses permintaan, kami menentukan sama ada URL yang diminta adalah /login Jika ya, logik log masuk diproses sebaliknya, "Hello World!"
2. Halaman pemaparan
Biasanya terdapat banyak halaman dalam aplikasi web kami untuk meningkatkan kecekapan pembangunan, kami biasanya menggunakan enjin templat untuk memaparkan halaman. Node.js menyediakan banyak enjin templat, seperti ejs, jed, bar hendal, dll. Mari kita ambil ejs sebagai contoh untuk memperkenalkan cara membuat halaman.
ejs ialah enjin templat ringkas yang boleh menjana kod HTML dengan cepat. Menggunakan ejs, kami hanya perlu menulis halaman HTML dan sumber data untuk memaparkan halaman dengan cepat.
Mari kita lihat kod berikut dahulu ia mentakrifkan halaman HTML yang ringkas dan menggunakan sintaks templat ejs:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title><%= title %></title> </head> <body> <h1><%= title %></h1> <p><%= content %></p> </body> </html>
Dalam halaman ini, kami menggunakan sintaks templat ejs: Sintaks templat. Contohnya, gunakan <%= %> untuk mengeluarkan pembolehubah dalam sumber data supaya halaman boleh dipaparkan.
Mari kita lihat contoh lengkap di bawah, menggunakan ejs untuk memaparkan halaman:
const http = require('http');
const fs = require('fs');
const ejs = require('ejs');
http.createServer((req, res) => {
// 设置跨域
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
// 渲染页面
if (req.url === '/') {
fs.readFile('./template/index.ejs', (err, data) => {
if (err) {
console.log(err);
res.end('页面不存在');
} else {
const template = data.toString();
const content = { title: '首页', content: '欢迎访问首页' };
const html = ejs.render(template, content);
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(html);
}
});
} else if (req.url === '/about') {
fs.readFile('./template/about.ejs', (err, data) => {
if (err) {
console.log(err);
res.end('页面不存在');
} else {
const template = data.toString();
const content = { title: '关于我们', content: '我们是一家IT公司' };
const html = ejs.render(template, content);
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(html);
}
});
} else {
res.end('页面不存在');
}
}).listen(3000, () => {
console.log('Server is running on port 3000');
});Dalam contoh ini, kita membaca dua fail templat ejs melalui modul fs, dan kemudian menggunakan The ejs Kaedah .render memaparkan kandungan daripada sumber data ke halaman. Akhir sekali, kami mengeluarkan kod HTML yang diberikan kepada penyemak imbas.
3. Pengurusan penghalaan
Dalam pembangunan sebenar, kami perlu menguruskan penghalaan untuk berbilang halaman supaya kami dapat mencari halaman yang sepadan dengan cepat. Node.js menyediakan rangka kerja web seperti ekspres, yang boleh membantu kami melaksanakan pengurusan penghalaan dengan lebih mudah dan cepat.
Mari kita ambil rangka kerja ekspres sebagai contoh untuk melihat cara melaksanakan pengurusan penghalaan.
Pertama, kita perlu memasang modul ekspres:
npm install express --save
Kemudian, mari lihat cara menggunakan ekspres untuk melaksanakan pengurusan laluan:
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.get('/about', (req, res) => {
res.send('About Us!');
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});Dalam contoh ini , Kami mula-mula menggunakan fungsi require() untuk memperkenalkan modul ekspres, dan kemudian memanggil fungsi express() untuk mencipta contoh ekspres baharu.
Seterusnya, kami menggunakan kaedah app.get() untuk menentukan kaedah pemprosesan yang sepadan untuk setiap laluan. Sebagai contoh, apabila pengguna meminta '/', kami akan mengembalikan "Hello World!" Apabila pengguna meminta '/about', kami akan mengembalikan "About Us!"
Akhir sekali, kami menggunakan kaedah app.listen() untuk menentukan port yang ingin didengari oleh perkhidmatan. Dalam contoh ini, kami menetapkan nombor port pendengaran kepada 3000.
4. Amalan lompat berbilang halaman
Kami telah pun memahami cara Node.js melaksanakan pemajuan permintaan, pemaparan halaman dan pengurusan penghalaan butiran lompatan berbilang halaman.
Contoh ini terbahagi terutamanya kepada dua bahagian, iaitu halaman hujung hadapan dan kod Node.js bahagian belakang.
Di halaman hujung hadapan, kami menggunakan jQuery untuk menghantar permintaan ke API Node.js bahagian belakang. Apabila pengguna mengklik butang 'Log Masuk', kami akan menghantar nama akaun dan kata laluan pengguna ke API bahagian belakang, dan membuat operasi lompatan yang berbeza berdasarkan hasil tindak balas API.
Berikut ialah proses pelaksanaan utama kod bahagian hadapan:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
</head>
<body>
<h1>登录</h1>
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
<button id="loginBtn">登录</button>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$('#loginBtn').click(function() {
// 获取用户名和密码
const username = $('input[name=username]').val();
const password = $('input[name=password]').val();
// 发送请求
$.ajax({
type: 'POST',
url: 'http://localhost:3000/login',
data: JSON.stringify({ username, password }),
contentType: 'application/json',
success: function(res) {
if (res.code === 200) {
// 登录成功，跳转到首页
window.location.href = 'http://localhost:3000';
} else {
alert(res.message);
}
},
error: function() {
alert('请求出错');
}
});
});
});
</script>
</html>Dalam Node.js, kami mencipta tika pelayan HTTP dan mendengar port 3000. Apabila permintaan dikesan, kami mula-mula menentukan jenis permintaan Untuk permintaan GET, kami menggunakan enjin templat ejs untuk memaparkan halaman untuk permintaan POST, kami memproses logik log masuk dan mengembalikan hasil respons dalam format JSON. Sebagai contoh, apabila pengguna memasukkan 'admin' dan '123456', kami akan mengembalikan { code: 200, message: 'Login successful' } dalam format JSON. Apabila pengguna memasukkan nama akaun atau kata laluan lain, kami akan mengembalikan { kod: 400, mesej: 'Nama pengguna atau kata laluan salah' } dalam format JSON.
Berikut ialah proses pelaksanaan utama kod Node.js bahagian belakang:
const http = require('http');
const fs = require('fs');
const ejs = require('ejs');
http.createServer((req, res) => {
// 设置跨域
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
// 渲染页面
if (req.url === '/') {
fs.readFile('./template/index.ejs', (err, data) => {
if (err) {
console.log(err);
res.end('页面不存在');
} else {
const template = data.toString();
const content = { title: '首页', content: '欢迎访问首页' };
const html = ejs.render(template, content);
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(html);
}
});
} else if (req.url === '/login') {
// 获取参数
let body = '';
req.on('data', (chunk) => {
body += chunk;
});
req.on('end', () => {
const { username, password } = JSON.parse(body);
// 处理登录逻辑
if (username === 'admin' && password === '123456') {
// 登录成功
res.end(JSON.stringify({ code: 200, message: '登录成功' }));
} else {
// 登录失败
res.end(JSON.stringify({ code: 400, message: '用户名或密码错误' }));
}
});
} else {
res.end('页面不存在');
}
}).listen(3000, () => {
console.log('Server is running on port 3000');
});通过以上代码，我们可以在前后端相分离的情况下，使用Node.js来实现多页面跳转的功能。本文只是对于nodejs多页面跳转的简单介绍，还有很多要学习和了解的地方，相信有了这篇文章的帮助，你在学习和实践中也会有所收获。
Atas ialah kandungan terperinci Bagaimana untuk melaksanakan lompatan berbilang halaman dalam nodejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
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
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
1376
52
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.
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 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
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?
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.
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?
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?
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.
