Maison > Article > interface Web > Comment modifier dynamiquement le HTML dans nodejs
Comment modifier dynamiquement le HTML dans nodejs
- PHPzoriginal
- 2023-04-26 09:10:53806parcourir
À mesure que les applications Web mûrissent et se développent, de plus en plus de développeurs commencent à utiliser Node.js pour créer des applications back-end. Node.js est un environnement JavaScript open source côté serveur permettant de créer des applications Web hautes performances et évolutives. Il fournit des modules et bibliothèques très utiles, notamment un moteur de modèles capable de générer du HTML.
Dans cet article, nous explorerons comment modifier dynamiquement du HTML à l'aide de Node.js. Nous présenterons d'abord quelques moteurs de modèles couramment utilisés, puis discuterons de la manière de les utiliser avec Node.js. Enfin, nous démontrerons quelques exemples pratiques pour vous aider à mieux comprendre et mettre en pratique ces techniques.
Moteurs de modèles couramment utilisés
Avant de commencer à utiliser les moteurs de modèles, nous devons comprendre les différences entre les différents moteurs de modèles ainsi que leurs avantages et inconvénients. Voici quelques moteurs de modèles couramment utilisés :
- EJS : EJS est un moteur de modèles basé sur JavaScript qui peut nous aider à intégrer des données dynamiques dans du code HTML à l'aide de la syntaxe JavaScript. Son principal avantage est qu’il est facile à apprendre et à utiliser, tandis que vous pouvez également l’utiliser pour le rendu côté client et côté serveur.
- Handlebars : Guidon est un autre moteur de modèle basé sur JavaScript qui nous permet d'intégrer des données dynamiques dans du code HTML à l'aide de la syntaxe du guidon. Ses principaux avantages sont une grande compatibilité, car il peut être utilisé à la fois pour le rendu côté client et côté serveur, et offre de très bonnes performances.
- Jade : Jade est un moteur de modèles basé sur des caractères qui nous aide à intégrer des données dynamiques dans du code HTML à l'aide de l'indentation et des espaces. Ses avantages sont une syntaxe concise et une maintenance facile.
Utiliser des moteurs de modèles avec Node.js
Maintenant que nous comprenons les différents moteurs de modèles, nous pouvons commencer à les utiliser pour modifier dynamiquement le HTML. Voici quelques étapes pour utiliser un moteur de modèle avec Node.js :
- Installer le moteur de modèle : Vous devez d'abord installer le moteur de modèle de votre choix. Dans cet exemple, nous utiliserons EJS comme moteur de modèles. Pour installer EJS, exécutez la commande suivante :
npm install ejs --save
- Configurer l'application Express : Pour créer notre application, nous utiliserons le framework Express pour Node.js. Pour commencer à utiliser Express, vous devez l'installer puis le configurer dans votre application. Voici l'exemple de code :
const express = require('express');
const app = express();
app.set('views', './views');
app.set('view engine', 'ejs');
app.get('/users', (req, res) => {
const users = [
{ name: 'Alice', email: 'alice@example.com' },
{ name: 'Bob', email: 'bob@example.com' },
{ name: 'Charlie', email: 'charlie@example.com' },
];
res.render('users', { users });
});
app.listen(3000, () => {
console.log('listening on port 3000');
});
Dans cette application, nous configurons le répertoire de vue et le moteur de vue de l'application et fournissons un gestionnaire de route simple qui restituera une vue appelée "utilisateurs" et transmettra un objet à la vue contenant un tableau nommé "utilisateurs".
- Créer un fichier de vue : Ensuite, nous devons créer un fichier de vue nommé « users.ejs ». Ce fichier contiendra des données dynamiques et du code HTML. Voici l'exemple de code :
<!doctype html>
<html>
<head>
<title>Users</title>
</head>
<body>
<h1>Users</h1>
<ul>
<% users.forEach(user => { %>
<li><%= user.name %> - <%= user.email %></li>
<% }); %>
</ul>
</body>
</html>
Dans ce fichier de vue, nous utilisons la syntaxe du moteur de modèle EJS pour intégrer des données dynamiques. Nous avons utilisé une boucle forEach pour parcourir le tableau des utilisateurs et utilisé la balise <% %> dans le code HTML pour exécuter le code JavaScript. Nous utilisons également la balise <%= %> pour intégrer les données utilisateur.
- Exécutez l'application : Enfin, nous devons exécuter notre application. Pour exécuter l'application, exécutez la commande suivante :
node app.js
Ensuite, ouvrez un navigateur et visitez http://localhost:3000/users. Vous devriez pouvoir voir une page avec trois utilisateurs, chacun comprenant un nom et une adresse e-mail.
Résumé
Dans cet article, nous avons exploré comment modifier dynamiquement du HTML à l'aide de Node.js et d'un moteur de modèles. Nous avons présenté certains moteurs de modèles couramment utilisés et montré comment utiliser EJS pour les combiner. En utilisant ces technologies, vous pouvez facilement générer du HTML dynamique à partir de vos applications Web et offrir une expérience utilisateur puissante.
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!