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');
});Copier après la connexion
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>
Copier après la connexion
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');
});Copier après la connexion
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
Copier après la connexion
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');
});Copier après la connexion
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()
Ensuite, nous utilisons la méthode
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>Copier après la connexion
Dans Node.js, nous avons créé une instance de serveur HTTP et écouté le port 3000. Lorsqu'une requête est détectée, nous déterminons d'abord le type de requête. Pour les requêtes GET, nous utilisons le moteur de modèle ejs pour afficher la page ; pour les requêtes POST, nous traitons la logique de connexion et renvoyons les résultats de la réponse au format JSON. Par exemple, lorsque l'utilisateur saisit « admin » et « 123456 », nous renverrons { code : 200, message : 'Connexion réussie' } au format JSON. Lorsque l'utilisateur saisit un autre nom de compte ou mot de passe, nous renverrons { code : 400, message : 'Nom d'utilisateur ou mot de passe incorrect' } au format JSON. #🎜🎜##🎜🎜#Ce qui suit est le principal processus d'implémentation du code back-end Node.js : #🎜🎜#
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');
});Copier après la connexion
通过以上代码，我们可以在前后端相分离的情况下，使用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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
