Maison >interface Web >Questions et réponses frontales >Comment combiner nodejs avec HTML

Comment combiner nodejs avec HTML

王林original: 2023-05-18 15:06:081651parcourir

Avec le développement continu de la technologie de développement front-end, de plus en plus de développeurs commencent à utiliser Node.js pour créer des applications côté serveur. Node.js fournit un moyen pratique de gérer des tâches telles que les requêtes HTTP et l'interaction avec les bases de données. Dans le même temps, Node.js fournit également un moyen pratique d'intégrer des données côté serveur dans des pages HTML frontales. Cet article explique comment utiliser Node.js combiné avec HTML pour développer des applications Web.

1. Présentation de Node.js

Node.js est un langage de programmation côté serveur très populaire, développé sur la base du langage JavaScript. Le plus grand avantage de Node.js est qu'il peut exécuter du code JavaScript directement côté serveur. Cette fonctionnalité a autrefois attiré beaucoup d'attention sur Node.js. Node.js propose un large éventail de scénarios d'application, non seulement pour le développement de serveurs Web, mais également pour les outils de ligne de commande, les applications de bureau et d'autres domaines.

2. Présentation de HTML

HTML est un langage de balisage utilisé pour créer des pages Web. HTML est la structure de base et la définition du style d'une page Web. Il peut définir le titre, le paragraphe, le lien, le tableau, l'image, la vidéo et d'autres éléments de la page. Les pages HTML peuvent être analysées et restituées par un navigateur, et les utilisateurs peuvent afficher et interagir avec la page sur le navigateur.

3. Utilisez Node.js pour combiner avec HTML

Il existe de nombreuses façons de combiner Node.js avec HTML. La méthode la plus courante consiste à intégrer des données côté serveur dans des pages HTML via un moteur de modèle. Un moteur de modèles est un outil de génération de pages HTML dynamiques. Il permet aux développeurs de générer des pages HTML côté serveur et d'intégrer des données dynamiques dans les pages HTML.

Regardons un exemple utilisant Node.js combiné avec un moteur de modèles. Tout d’abord, nous devons installer une bibliothèque de moteur de modèles, ici nous choisissons d’utiliser le moteur de modèles EJS.

1. Installez le moteur de modèles EJS

npm install ejs --save

2. Créez un programme Node.js simple

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

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

app.get('/', (req, res) => {
  res.render('index', { title: 'Hello World', message: 'Hello World from Node.js!' })
})

app.listen(port, () => {
  console.log(`Server is running on port ${port}.`)
})

Dans ce code, nous utilisons un framework express pour créer une application Web et afficher le nom sur l'index du chemin racine code> fichier modèle EJS. Dans le fichier modèle, nous pouvons utiliser des balises de modèle pour insérer des données dynamiques, comme indiqué ci-dessous : <code>index的EJS模板文件。在模板文件中，我们可以使用模板标记来插入动态数据，如下所示：

<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= message %></h1>
  </body>
</html>

在这个模板文件中，我们添加了两个模板标记：44c34822019924d007e4a1ff13fc9691 用于显示页面标题，bd32bebd6efcb505b1edd31fc3cf82f9

node index.js

Dans ce fichier modèle, nous avons ajouté deux balises de modèle : 44c34822019924d007e4a1ff13fc9691 est utilisé pour afficher le titre de la page, et bd32bebd6efcb505b1edd31fc3cf82f9 est utilisé pour afficher le contenu de la page. Ces balises seront rendues côté serveur et rempliront le fichier modèle avec des données dynamiques.

3. Démarrez l'application

rrreee

4. Visitez la page

Visitez http://localhost:3000 dans le navigateur, vous verrez une page simple qui contient les données dynamiques que vous avez définies côté serveur.

Grâce aux étapes ci-dessus, nous avons réussi à combiner Node.js et HTML pour créer une application Web simple. Dans le développement réel, nous pouvons utiliser davantage de moteurs et de frameworks de modèles pour implémenter des fonctions plus complexes.

4. Résumé

Cet article explique comment utiliser Node.js et HTML pour créer des applications Web et intégrer des données dynamiques côté serveur dans des pages HTML via un moteur de modèle. Cette approche est très courante dans le développement d’applications Web et nous permet de construire rapidement une application complète. Il convient de noter que dans le développement réel, nous devons choisir un moteur de modèle et un framework appropriés pour répondre aux besoins du projet. 🎜

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!

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：jquery cliquez pour agrandir réduire le remplacement du texteArticle suivant：jquery cliquez pour agrandir réduire le remplacement du texte

Articles Liés

Voir plus