Maison > Article > interface Web > Comment implémenter plusieurs sauts de page dans Node.js

Comment implémenter plusieurs sauts de page dans Node.js

PHPzoriginal: 2023-04-06 08:53:16975parcourir

Avec le développement rapide du développement front-end, les applications Web modernes ne sont plus des applications à page unique (SPA). Au lieu de cela, ils deviennent plus complexes, comprenant de nombreuses pages et composants. Afin de prendre en charge de telles applications Web, nous avons besoin d'un cadre Web flexible et puissant capable de prendre en charge la navigation et la réactivité de plusieurs pages. Node.js fournit de nombreux excellents frameworks pour cela, tels que Express.js, Koa.js, etc. Dans cet article, nous apprendrons comment utiliser le framework Node.js pour implémenter la fonctionnalité de saut multipage.

Créer un nouveau projet Node.js

Tout d'abord, nous devons créer un nouveau projet Node.js. Si vous avez déjà un projet existant, vous pouvez ignorer cette étape. Dans la ligne de commande, entrez la commande suivante :

mkdir myproject
cd myproject
npm init

Après avoir exécuté cette commande, une série d'invites apparaîtra, vous demandant de saisir le nom du projet, le numéro de version, la description et d'autres informations. Une fois terminé, nous obtiendrons un fichier package.json, qui est un fichier qui stocke les informations sur le projet. Dans le fichier package.json, nous verrons toutes les dépendances que nous avons installées.

Installez Express.js

Comme mentionné précédemment, Express.js est un framework d'application Web Node.js couramment utilisé qui offre un moyen rapide et flexible de créer des applications Web. Nous utiliserons Express.js pour implémenter la fonction de saut multipage. Installer Express.js est simple, tapez simplement la commande suivante :

npm install express --save

Cette commande installera Express.js et l'ajoutera aux dépendances de notre projet.

Créer une page

Maintenant, nous devons créer une page simple pour tester notre fonction de saut multi-pages. Dans le répertoire racine du projet, créez un fichier appelé "index.html" et ajoutez le contenu suivant :

<!DOCTYPE html>
<html>
<head>
    <title>Express.js Multiple Pages</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>Welcome to my Express.js app.</p>
</body>
</html>

Il s'agit d'une page très simple avec juste un titre et du texte. Nous utiliserons cette page dans les prochaines étapes.

Créer une application Express.js

Dans le répertoire racine du projet, créez un fichier appelé "app.js" dans lequel nous écrirons notre application.

Tout d'abord, nous devons importer les modules Express.js requis :

const express = require('express')
const app = express()

Ensuite, nous devons spécifier notre moteur d'affichage. Le moteur de visualisation nous aidera à restituer les pages HTML côté serveur. Nous utiliserons EJS (Embedded JavaScript) comme moteur d'affichage. Veuillez noter qu'avant d'utiliser EJS, nous devons l'installer. EJS peut être installé à l'aide de la commande suivante :

npm install ejs --save

Une fois terminé, ajoutez le code suivant en haut de app.js :

app.set('view engine', 'ejs')

Nous devons maintenant indiquer à l'application Express.js comment gérer les fichiers statiques tels que les feuilles de style et les scripts. . Pour ce faire, nous utiliserons le middleware intégré d’Express.js. Ajoutez le code suivant en haut de votre fichier app.js :

app.use(express.static('public'))

Ce code indiquera à Express.js de traiter le dossier public comme un dossier de ressources statiques. Tous les fichiers qui y sont stockés seront accessibles via le serveur HTTP.

Maintenant, nous devons créer notre premier itinéraire. Le routage déterminera ce qui se passera lorsque nous visiterons une URL spécifique. Nous allons créer une route qui restitue notre page index.html côté serveur lorsqu'un utilisateur visite l'URL racine.

Ajoutez le code suivant dans app.js :

app.get('/', (req, res) => {
  res.render('index')
})

Ce code indiquera à Express.js de créer une route GET qui restitue une vue nommée "index" côté serveur lorsque l'utilisateur visite l'URL racine.

Ajout de pages supplémentaires

Nous avons maintenant terminé notre première page et notre premier itinéraire. Ensuite, nous ajouterons d'autres pages et itinéraires.

Créez un fichier appelé "about.html" qui contiendra des informations sur notre application. Ajoutez ce qui suit :

<!DOCTYPE html>
<html>
<head>
    <title>About</title>
</head>
<body>
    <h1>About Us</h1>
    <p>We are a team of Node.js developers.</p>
</body>
</html>

Ensuite, ajoutez le code suivant dans app.js :

app.get('/about', (req, res) => {
  res.render('about')
})

Ce code indiquera à Express.js de créer une route GET qui restitue le nom de la vue "à propos".

Nous pouvons également ajouter plus de pages, il suffit de créer un fichier HTML pour chaque page et de créer un itinéraire pour chaque page.

Liens vers d'autres pages

Maintenant que nous avons créé plusieurs pages et itinéraires, nous devons ajouter des liens afin que les utilisateurs puissent naviguer vers d'autres pages. Dans index.html, ajoutez le code suivant avant le texte :

<a href="/about">About Us</a>

Ce lien amènera l'utilisateur vers la page À propos de nous. Continuez à ajouter des pages supplémentaires.

Nous avons désormais implémenté la fonction de saut multipage. Lorsque l'utilisateur clique sur le lien, il accède à une autre page et l'application affichera la page HTML côté serveur.

Résumé

Dans cet article, nous avons appris à utiliser le framework Node.js (en particulier Express.js) pour implémenter la fonctionnalité de saut multipage. Nous avons créé plusieurs pages et itinéraires et fourni des liens pour la navigation des utilisateurs. Il s'agit d'une implémentation très basique, mais elle peut vous aider à créer rapidement des applications multipages. Essayez ce code, ainsi que d'autres, pour vous aider à mieux comprendre comment développer des applications Web à l'aide du framework Node.js.

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!

JavaScript node.js 中间件 json html express public JS 样式表 http

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment installer Node.js sur le lecteur D et définir la source npm sur le miroir TaobaoArticle suivant：Comment installer Node.js sur le lecteur D et définir la source npm sur le miroir Taobao

Articles Liés

Voir plus