recherche
Maisoninterface Webjs tutorielComment construire et structurer une application Node.js MVC

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:

mkdir notes-board
cd notes-board
npm init -y
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:

npm install @hapi/hapi@18.4.0

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:

"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();

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:

const dbSettings = Settings[Settings.env].db;

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:

// 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"
    }
  }
};

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

mkdir notes-board
cd notes-board
npm init -y

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
Python vs JavaScript: Quelle langue devez-vous apprendre?Python vs JavaScript: Quelle langue devez-vous apprendre?May 03, 2025 am 12:10 AM

Le choix de Python ou JavaScript doit être basé sur le développement de carrière, la courbe d'apprentissage et l'écosystème: 1) le développement de carrière: Python convient à la science des données et au développement de back-end, tandis que JavaScript convient au développement frontal et complet. 2) Courbe d'apprentissage: la syntaxe Python est concise et adaptée aux débutants; La syntaxe JavaScript est flexible. 3) Ecosystème: Python possède de riches bibliothèques informatiques scientifiques, et JavaScript a un puissant cadre frontal.

Frameworks javascript: alimenter le développement Web moderneFrameworks javascript: alimenter le développement Web moderneMay 02, 2025 am 12:04 AM

La puissance du cadre JavaScript réside dans la simplification du développement, l'amélioration de l'expérience utilisateur et les performances des applications. Lorsque vous choisissez un cadre, considérez: 1. Taille et complexité du projet, 2. Expérience d'équipe, 3. Écosystème et soutien communautaire.

La relation entre JavaScript, C et BrowsersLa relation entre JavaScript, C et BrowsersMay 01, 2025 am 12:06 AM

INTRODUCTION Je sais que vous pouvez le trouver étrange, que doit faire exactement JavaScript, C et Browser? Ils semblent sans rapport, mais en fait, ils jouent un rôle très important dans le développement Web moderne. Aujourd'hui, nous discuterons du lien étroit entre ces trois. Grâce à cet article, vous apprendrez comment JavaScript fonctionne dans le navigateur, le rôle de C dans le moteur du navigateur et comment ils fonctionnent ensemble pour stimuler le rendu et l'interaction des pages Web. Nous connaissons tous la relation entre JavaScript et Browser. JavaScript est la langue principale du développement frontal. Il fonctionne directement dans le navigateur, rendant les pages Web vives et intéressantes. Vous êtes-vous déjà demandé pourquoi javascr

Node.js diffuse avec dactylographieNode.js diffuse avec dactylographieApr 30, 2025 am 08:22 AM

Node.js excelle dans des E / S efficaces, en grande partie grâce aux flux. Streams traite les données progressivement, en évitant la surcharge de mémoire - idéal pour les fichiers volumineux, les tâches réseau et les applications en temps réel. Combiner les flux avec la sécurité de type dactylographié crée un powe

Python vs JavaScript: considérations de performance et d'efficacitéPython vs JavaScript: considérations de performance et d'efficacitéApr 30, 2025 am 12:08 AM

Les différences de performance et d'efficacité entre Python et JavaScript se reflètent principalement dans: 1) comme un langage interprété, Python fonctionne lentement mais a une efficacité de développement élevée et convient au développement rapide des prototypes; 2) JavaScript est limité au thread unique dans le navigateur, mais les E / S multi-threading et asynchrones peuvent être utilisées pour améliorer les performances dans Node.js, et les deux ont des avantages dans les projets réels.

Les origines de JavaScript: explorer son langage d'implémentationLes origines de JavaScript: explorer son langage d'implémentationApr 29, 2025 am 12:51 AM

JavaScript est originaire de 1995 et a été créé par Brandon Ike, et a réalisé que la langue en langue C. 1.C offre des capacités de programmation élevées et au niveau du système pour JavaScript. 2. La gestion de la mémoire de JavaScript et l'optimisation des performances reposent sur le langage C. 3. La fonctionnalité multiplateforme du langage C aide JavaScript à s'exécuter efficacement sur différents systèmes d'exploitation.

Dans les coulisses: quel langage alimente JavaScript?Dans les coulisses: quel langage alimente JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript s'exécute dans les navigateurs et les environnements Node.js et s'appuie sur le moteur JavaScript pour analyser et exécuter du code. 1) Générer une arborescence de syntaxe abstraite (AST) au stade d'analyse; 2) Convertir AST en bytecode ou code machine à l'étape de compilation; 3) Exécutez le code compilé à l'étape d'exécution.

L'avenir de Python et Javascript: tendances et prédictionsL'avenir de Python et Javascript: tendances et prédictionsApr 27, 2025 am 12:21 AM

Les tendances futures de Python et JavaScript incluent: 1. Python consolidera sa position dans les domaines de l'informatique scientifique et de l'IA, 2. JavaScript favorisera le développement de la technologie Web, 3. Le développement de plate-forme multiplié deviendra un sujet brûlant, et 4. L'optimisation des performances sera le focus. Les deux continueront d'étendre les scénarios d'application dans leurs champs respectifs et de faire plus de percées dans les performances.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

SublimeText3 version anglaise

SublimeText3 version anglaise

Recommandé : version Win, prend en charge les invites de code !

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

SublimeText3 Linux nouvelle version

SublimeText3 Linux nouvelle version

Dernière version de SublimeText3 Linux

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Puissant environnement de développement intégré PHP