Maison >interface Web >js tutoriel >Comment construire et structurer une application Node.js MVC

Comment construire et structurer une application Node.js MVC

Lisa Kudrow
Lisa Kudroworiginal
2025-02-10 10:32:17685parcourir

How to Build and Structure a Node.js MVC Application

Lors de la création d'applications complexes, la conception de l'architecture est aussi importante que la qualité du code. Même si le code est bien écrit, mais n'a pas une bonne structure organisationnelle, le maintien et l'échelle deviennent extrêmement difficiles à mesure que la complexité augmente. Par conséquent, la meilleure pratique consiste à planifier l'architecture avant le début du projet, à guider les objectifs du projet et à faire des choix éclairés.

Contrairement aux cadres tels que Ruby sur Rails, Node.js n'a pas de framework standard de facto pour appliquer des architectures spécifiques et une organisation de code. Cela rend le choix d'architecture relativement gratuit lors de la création d'une application Web complète Node.js, mais ajoute également des défis.

Ce didacticiel utilisera l'architecture MVC pour créer une application de base de notes, démontrant comment utiliser le framework hapi.js de Node.js, la base de données SQLite (fonctionnant via Sequelize.js) et le moteur de modèle PUG pour atteindre efficace développement.

Points de base:

  • Organisez efficacement les applications Node.js à l'aide de l'architecture MVC (modèle-View-Controller) pour améliorer la maintenabilité et l'évolutivité.
  • Initialisez le projet avec NPM et créez des fichiers package.json pour gérer les dépendances.
  • Créez un serveur à l'aide du framework HAPI.js et gérez les données à l'aide de la base de données SQLite et séqueliste.js.
  • Définir les routes Node.js, clarifier la fonctionnalité de l'application et s'assurer que chaque itinéraire est associé à la méthode HTTP et au gestionnaire HTTP corrects.
  • Définissez le modèle à l'aide de séquelle.js pour assurer l'intégrité des données et fournir une couche d'abstraction.
  • Implémentez le contrôleur pour traiter la logique métier, connecter des modèles et des vues, obtenir des données et déterminer le format de sortie.
  • Créer des vues à l'aide du moteur de modèle de carburant pour rendre les réponses HTTP plus lisibles et structurées.
  • Utilisez le plugin inerte de HAPI.js pour fournir des services de fichiers statiques et gérer efficacement les fichiers CSS et JavaScript.

Qu'est-ce que MVC?

Model-View-Controller (MVC) est probablement l'une des architectures d'application les plus populaires. Le modèle MVC a été initialement conçu dans PARC pour le langage SmallTalk afin de résoudre les problèmes organisationnels des applications d'interface utilisateur graphique. Bien qu'utilisée à l'origine dans les applications de bureau, le concept a été appliqué avec succès au développement Web.

En termes simples, l'architecture MVC comprend:

  • Modèle: parties de la base de données de traitement ou de toute fonction liée aux données.
  • Affichage (View): Tout ce que l'utilisateur voit - la page envoyée au client.
  • Contrôleur: La logique du site Web et le pont entre le modèle et la vue. Le contrôleur appelle le modèle pour obtenir les données, puis transmet les données à la vue et l'envoie finalement à l'utilisateur.

Cette application permettra la création, la visualisation, l'édition et la suppression de notes de texte brut. Bien que les fonctionnalités soient simples, l'architecture solide facilitera l'ajout de nouvelles fonctionnalités à l'avenir.

Ce tutoriel suppose que vous avez installé la dernière version de Node.js sur votre machine. Sinon, veuillez vous référer au tutoriel pertinent pour l'installation.

Le code d'application final a été téléchargé dans le référentiel GitHub, et vous pouvez afficher la structure du projet complète.

atterrir la fondation

La première étape de la création de n'importe quelle application Node.js consiste à créer un fichier package.json avec toutes les dépendances et scripts. Ce fichier peut être généré automatiquement à l'aide de la commande init de NPM:

<code class="language-bash">mkdir notes-board
cd notes-board
npm init -y</code>
Une fois

terminé, vous aurez un fichier package.json disponible.

Remarque: Si vous n'êtes pas familier avec ces commandes, veuillez consulter notre guide de démarrage NPM.

Ensuite, installez le framework hapi.js:

<code class="language-bash">npm install @hapi/hapi@18.4.0</code>

Cette commande téléchargera hapi.js et l'ajoutera aux dépendances dans le fichier package.json.

Remarque: Nous avons spécifié la version V18.4.0 de HAPI.js car elle est compatible avec les versions Node 8, 10 et 12. Si vous utilisez Node 12, vous pouvez choisir d'installer la dernière version (HAPI V19.1.0).

Maintenant, créez le fichier d'entrée - démarrez le serveur Web avec tout. Créez un fichier server.js dans le répertoire des applications et ajoutez le code suivant:

<code class="language-javascript">"use strict";

const Hapi = require("@hapi/hapi");
const Settings = require("./settings");

const init = async () => {
  const server = new Hapi.Server({ port: Settings.port });

  server.route({
    method: "GET",
    path: "/",
    handler: (request, h) => {
      return "Hello, world!";
    }
  });

  await server.start();
  console.log(`Server running at: ${server.info.uri}`);
};

process.on("unhandledRejection", err => {
  console.log(err);
  process.exit(1);
});

init();</code>

C'est la base de l'application. Tout d'abord, nous utilisons le mode strict; alors, nous introduisons les dépendances et instancons un nouvel objet serveur, définissant le port de connexion sur 3000 (le port peut être un nombre entre 1023 et 65535); Le message du monde! "est suffisant; Enfin, nous commençons le serveur en utilisant la méthode server.start().

Paramètres de stockage

La meilleure pratique consiste à stocker des variables de configuration dans un fichier dédié. Ce fichier exporte un objet JSON contenant des données, où chaque clé se voit attribuer une variable d'environnement indépendante, mais n'oubliez pas les valeurs alternatives.

Dans ce fichier, nous pouvons également avoir des paramètres différents en fonction de l'environnement (comme le développement ou la production). Par exemple, nous pouvons utiliser des instances de mémoire de SQLite à des fins de développement, mais utiliser des fichiers de base de données SQLite réels dans des environnements de production.

La sélection des paramètres basée sur l'environnement actuel est très simple. Étant donné que nous avons également une variable Env dans le fichier qui contiendra le développement ou la production, nous pouvons effectuer ce qui suit pour obtenir les paramètres de la base de données:

<code class="language-javascript">const dbSettings = Settings[Settings.env].db;</code>

Par conséquent, lorsque la variable Env est le développement, DBSettings contiendra les paramètres de la base de données en mémoire;

De plus, nous pouvons ajouter la prise en charge des fichiers .env où les variables d'environnement locales peuvent être stockées à des fins de développement. Cela peut être fait via un package Node.js comme Dotenv, qui lira le fichier .env à la racine du projet et ajoutera automatiquement les valeurs trouvées à l'environnement.

Remarque: Si vous décidez également d'utiliser le fichier .env, assurez-vous d'installer le package à l'aide de npm install dotenv et ajoutez-les à .gitignore pour éviter de publier des informations sensibles.

Notre fichier settings.js est le suivant:

<code class="language-javascript">// This will load our .env file and add the values to process.env,
// IMPORTANT: Omit this line if you don't want to use this functionality
require("dotenv").config({ silent: true });

module.exports = {
  port: process.env.PORT || 3000,
  env: process.env.NODE_ENV || "development",

  // Environment-dependent settings
  development: {
    db: {
      dialect: "sqlite",
      storage: ":memory:"
    }
  },
  production: {
    db: {
      dialect: "sqlite",
      storage: "db/database.sqlite"
    }
  }
};</code>

Maintenant, nous pouvons démarrer l'application en exécutant la commande suivante et en naviguant vers http://localhost:3000 dans notre navigateur Web:

<code class="language-bash">mkdir notes-board
cd notes-board
npm init -y</code>

Remarque: Ce projet a été testé sur le nœud v12.15.0. Si vous rencontrez des erreurs, assurez-vous que vous avez installé une version mise à jour.

(Les étapes suivantes, en raison des limites de l'espace, le contenu suivant sera brièvement résumé. Veuillez vous référer au texte d'origine pour des détails d'implémentation spécifiques)

Définir les itinéraires: Définir les routes pour les applications dans les fichiers lib/routes.js, y compris les méthodes Get, Publier, mettre et supprimer pour gérer la création, la lecture, la mise à jour et la suppression des notes.

Créez un modèle: Créez un Note en utilisant Sequelize.js et Sqlite pour définir la structure de données des notes (date, titre, contenu, etc.). Définissez le modèle dans lib/models/note.js.

Créez le contrôleur: Créez le contrôleur pour gérer les demandes de routage. lib/controllers/home.js Page d'accueil de traitement, lib/controllers/note.js Traitement des opérations CRUD liées aux notes.

Construire des vues: Créer des vues à l'aide du moteur de modèle de carburant. lib/views/home.pug Afficher la liste des notes, lib/views/note.pug Afficher les détails des notes individuelles. lib/views/components/note.pug Définissez le composant de note.

Fichiers statiques du service: Utilisez le plugin inerte de HAPI.js pour servir des fichiers statiques (JavaScript et CSS). Enregistrez le plugin inerte dans server.js et ajoutez des routes de fichiers statiques dans routes.js.

Client JavaScript: Écrivez le code JavaScript client pour gérer les fenêtres Modal Affichage / masquer et soumettre des formulaires à l'aide d'Ajax.

Résumé

Ce tutoriel construit une application de base de notes de base basée sur HAPI.js et MVC Architecture. Bien qu'il y ait encore de nombreux détails à affiner (tels que la validation des entrées, la gestion des erreurs, etc.), cela fournit une base pour l'apprentissage et la construction d'applications Node.js. Vous pouvez ajouter l'authentification des utilisateurs, l'interface utilisateur plus complexe et d'autres fonctions sur cette base.

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