interface Web
Questions et réponses frontales
Comment implémenter plusieurs sauts de page dans nodejs
Comment implémenter plusieurs sauts de page dans nodejs
Ces dernières années, Node.js est devenu un outil puissant pour les développeurs front-end avec ses performances efficaces, ses fonctions riches et son écosystème puissant. En tant qu'environnement d'exécution côté serveur, Node.js peut être utilisé pour implémenter des applications Web complexes et constitue également un choix idéal pour implémenter des sauts de plusieurs pages.
Cet article expliquera en détail comment utiliser Node.js pour réaliser des sauts multi-pages, notamment le transfert de requêtes, le rendu des pages, la gestion du routage, etc.
1. Demande de transfert
À l'ère de la séparation du front-end et du back-end, nous développons généralement le code front-end et le code back-end séparément pour atteindre l'objectif. but du découplage. Dans ce cas, le code front-end est généralement stocké dans un dossier séparé et le code back-end est réparti sur plusieurs fichiers. Cela nous oblige à transmettre la demande frontale au back-end pour traitement.
Node.js fournit de puissantes capacités de développement d'applications Web via des modules de base tels que http et fs. Il nous suffit de surveiller les requêtes HTTP dans l'application back-end de Node.js et de transmettre les requêtes au correspondant. Faites-le simplement dans la logique de traitement. De cette manière, les requêtes peuvent être transmises en interne entre le front-end et le back-end, permettant au code front-end d'appeler l'API back-end pour obtenir l'effet de sauts de plusieurs pages.
Regardons un exemple simple pour transférer des requêtes front-end dans 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');
});Dans cet exemple, nous le créons via la méthode createServer du module http An Instance de serveur HTTP et écoute sur le port 3000. Lors du traitement de la demande, nous déterminons si l'URL demandée est /login. Si tel est le cas, la logique de connexion est traitée sinon, « Hello World ! »
2. Rendu des pages
Il y a généralement de nombreuses pages dans nos applications Web Afin d'améliorer l'efficacité du développement, nous utilisons généralement un moteur de modèles pour rendre les pages. Node.js fournit de nombreux moteurs de modèles, tels que ejs, jade, handlebars, etc. Prenons ejs comme exemple pour présenter comment rendre la page.
ejs est un moteur de modèles simple qui peut générer rapidement du code HTML. En utilisant ejs, il nous suffit d'écrire des pages HTML et des sources de données pour afficher rapidement la page.
Jetons d'abord un coup d'œil au code suivant. Il définit une page HTML simple et utilise la syntaxe du modèle ejs :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title><%= title %></title> </head> <body> <h1><%= title %></h1> <p><%= content %></p> </body> </html>
Dans cette page, nous utilisons la syntaxe du modèle ejs. Par exemple, utilisez <%= %> pour générer des variables dans la source de données afin que la page puisse être affichée.
Regardons un exemple complet ci-dessous, utilisant ejs pour rendre la page :
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');
});Dans cet exemple, nous lisons deux fichiers de modèle ejs via le module fs, puis utilisons le Méthode ejs.render pour restituer le contenu de la source de données sur la page. Enfin, nous affichons le code HTML rendu au navigateur.
3. Gestion du routage
Dans le développement actuel, nous devons gérer le routage de plusieurs pages afin de pouvoir trouver rapidement la page correspondante. Node.js fournit des frameworks Web tels qu'Express, qui peuvent nous aider à mettre en œuvre la gestion du routage plus facilement et plus rapidement.
Prenons le framework express comme exemple pour voir comment mettre en œuvre la gestion du routage.
Tout d'abord, nous devons installer le module express :
npm install express --save
Ensuite, voyons comment utiliser express pour implémenter la gestion des itinéraires :
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');
});In Dans cet exemple, nous utilisons d'abord la fonction require() pour introduire le module express, puis appelons la fonction express() pour créer une nouvelle instance express. require()函数引入express模块，然后调用express()函数来创建一个新的express实例。
接下来，我们使用app.get()方法，给每个路由定义一个相应的处理方法。例如，当用户请求‘/’时，我们将会向浏览器返回“Hello World!”。当用户请求‘/about’时，我们将会向浏览器返回“About Us!”。
最后，我们使用app.listen()
app.get() pour définir une méthode de traitement correspondante pour chaque route. Par exemple, lorsque l'utilisateur demande « / », nous renverrons « Hello World ! » au navigateur. Lorsque l'utilisateur demande « /about », nous renverrons « À propos de nous ! » au navigateur. Enfin, nous utilisons la méthode app.listen() pour spécifier le port sur lequel le service souhaite écouter. Dans cet exemple, nous définissons le numéro de port d'écoute sur 3000. 4. Pratique de saut de plusieurs pages Nous avons déjà compris comment Node.js implémente le transfert de requêtes, le rendu des pages et la gestion du routage. plongez dans les détails de mise en œuvre des sauts multipages. Cet exemple est principalement divisé en deux parties, à savoir la page front-end et le code Node.js back-end. Dans la page front-end, nous utilisons jQuery pour envoyer des requêtes à l'API back-end Node.js. Lorsque l'utilisateur clique sur le bouton « Connexion », nous enverrons le nom de compte et le mot de passe de l'utilisateur à l'API back-end et effectuerons différentes opérations de saut en fonction des résultats de réponse de l'API. Ce qui suit est le principal processus d'implémentation du code front-end :
<!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>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多页面跳转的简单介绍，还有很多要学习和了解的地方，相信有了这篇文章的帮助，你在学习和实践中也会有所收获。
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Qu'est-ce que l'utilisation Effecte? Comment l'utilisez-vous pour effectuer des effets secondaires?
Mar 19, 2025 pm 03:58 PM
L'article traite de l'utilisation Effecte dans React, un crochet pour gérer les effets secondaires comme la récupération des données et la manipulation DOM dans les composants fonctionnels. Il explique l'utilisation, les effets secondaires courants et le nettoyage pour éviter des problèmes comme les fuites de mémoire.
Expliquez le concept de chargement paresseux.
Mar 13, 2025 pm 07:47 PM
Le chargement paresseux retarde le chargement du contenu jusqu'à ce qu'il soit nécessaire, améliorant les performances du Web et l'expérience utilisateur en réduisant les temps de chargement initiaux et la charge du serveur.
Comment fonctionne l'algorithme de réconciliation React?
Mar 18, 2025 pm 01:58 PM
L'article explique l'algorithme de réconciliation de React, qui met à jour efficacement le DOM en comparant les arbres DOM virtuels. Il traite des avantages de la performance, des techniques d'optimisation et des impacts sur l'expérience utilisateur. Compte de charge: 159
Comment fonctionne le currying en JavaScript et quels sont ses avantages?
Mar 18, 2025 pm 01:45 PM
L'article traite du curry dans JavaScript, une technique transformant les fonctions mulguments en séquences de fonctions à argument unique. Il explore la mise en œuvre du currying, des avantages tels que des applications partielles et des utilisations pratiques, améliorant le code
Quelles sont les fonctions d'ordre supérieur en JavaScript, et comment peuvent-ils être utilisés pour écrire du code plus concis et réutilisable?
Mar 18, 2025 pm 01:44 PM
Les fonctions d'ordre supérieur dans JavaScript améliorent la concision du code, la réutilisabilité, la modularité et les performances par abstraction, modèles communs et techniques d'optimisation.
Qu'est-ce que UseContext? Comment l'utilisez-vous pour partager l'état entre les composants?
Mar 19, 2025 pm 03:59 PM
L'article explique UseContext dans React, qui simplifie la gestion de l'État en évitant le forage des accessoires. Il traite des avantages tels que les améliorations centralisées de l'État et des performances grâce à des redevances réduites.
Comment connectez-vous les composants React au magasin Redux à l'aide de Connect ()?
Mar 21, 2025 pm 06:23 PM
L'article discute de la connexion des composants React à Redux Store à l'aide de Connect (), expliquant MapStateToproprop, MapDispatchToprops et des impacts de performances.
Comment empêchez-vous le comportement par défaut dans les gestionnaires d'événements?
Mar 19, 2025 pm 04:10 PM
L'article discute de la prévention des comportements par défaut dans les gestionnaires d'événements à l'aide de la méthode empêchée dedEfault (), de ses avantages tels que une expérience utilisateur améliorée et des problèmes potentiels tels que les problèmes d'accessibilité.
