dev-resources.site

for different kinds of informations.

Comprendre le Design Pattern MVC avec Node.js, Express et MongoDB

Published at

1/6/2025

Categories

4 categories in total

Author

9 person written this

jethron22

open

Comprendre le Design Pattern MVC avec Node.js, Express et MongoDB

Le design pattern MVC (Model-View-Controller) est une approche populaire pour organiser le code des applications web. Il permet de séparer les responsabilités, rendant le code plus propre, maintenable et évolutif. Dans cet article, nous allons expliquer le concept de MVC et construire un exemple simple avec Node.js, Express, et MongoDB.

Qu'est-ce que le pattern MVC ? Le pattern MVC divise une application en trois parties principales :

Model (Modèle) : Gère les données, les règles métier et la logique. Il interagit souvent avec une base de données.
View (Vue) : Gère l'affichage et l'interface utilisateur. Elle reçoit les données du contrôleur pour les présenter.
Controller (Contrôleur) : Sert de pont entre le modèle et la vue. Il reçoit les requêtes de l'utilisateur, appelle les méthodes du modèle, et envoie les données à la vue.

Exemple visuel d'un flux MVC :

L'utilisateur envoie une requête HTTP via le navigateur.
Le Controller reçoit la requête, interagit avec le Model pour obtenir des données.

Le Model retourne les données au Controller, qui les passe à la View pour l'affichage.

Mise en œuvre de MVC avec Node.js, Express et MongoDB

Nous allons créer une simple application de gestion de tâches. L'utilisateur pourra ajouter, afficher et supprimer des tâches.

Étape 1 : Configuration du projet

Créez un dossier pour votre projet et initialisez un projet Node.js.

Terminal

mkdir mvc-tasks
cd mvc-tasks
npm init -y

Installez les dépendances nécessaires :

Terminal
npm install express mongoose ejs body-parser

Étape 2 : Structure du projet

Organisez votre projet comme suit :

Structure du projet

mvc-tasks/
├── models/        // Contient les fichiers pour le modèle (base de données)
├── views/         // Contient les fichiers pour la vue (HTML, EJS, etc.)
├── controllers/   // Contient les fichiers pour les contrôleurs
├── public/        // Contient les fichiers statiques (CSS, JS, images)
├── app.js         // Point d'entrée de l'application
└── package.json

Étape 3 : Créer le modèle (Model)

Dans le dossier models, créez un fichier Task.js :

code Javascript

import mongoose from "mongoose";

// Définir le schéma
const taskSchema = new mongoose.Schema({
  title: { type: String, required: true },
  completed: { type: Boolean, default: false },
});

// Exporter le modèle
export default mongoose.model("Task", taskSchema)

Étape 4 : Créer le contrôleur (Controller)

Dans le dossier controllers, créez un fichier taskController.js :

code javascript

import Task from "../models/Task");

// Afficher toutes les tâches depuis la base de donnée

export const getAllTasks = async (req, res) => {
  try {
    const tasks = await Task.find();
    res.render("index", { tasks });
  } catch (error) {
    res.status(500).send("Erreur lors de la récupération des tâches");
  }
};

// Ajouter une nouvelle tâche
code Javascript

export const addTask = async (req, res) => {
  try {
    const { title } = req.body;
    await Task.create({ title });
    res.redirect("/");
  } catch (error) {
    res.status(500).send("Erreur lors de l'ajout de la tâche");
  }
};

// Supprimer une tâche
code Javascript

export const deleteTask = async (req, res) => {
  try {
    const { id } = req.params;
    await Task.findByIdAndDelete(id);
    res.redirect("/");
  } catch (error) {
    res.status(500).send("Erreur lors de la suppression de la tâche");
  }
};

Étape 5 : Créer la vue (View)

Dans le dossier views, créez un fichier index.ejs :

code html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gestion des tâches</title>
</head>
<body>
  <h1>Liste des tâches</h1>

  <form action="/tasks" method="POST">
    <input type="text" name="title" placeholder="Ajouter une tâche" required />
    <button type="submit">Ajouter</button>
  </form>

  <ul>
    <% tasks.forEach(task => { %>
      <li>
        <%= task.title %> 
        <a href="/tasks/delete/<%= task._id %>">Supprimer</a>
      </li>
    <% }); %>
  </ul>
</body>
</html>

Étape 6 : Configurer Express (dans le fichier App.js)

Voici le contenu de app.js :

code javascript

import express from "express";
import mongoose from "mongoose"
import bodyParser from "body-parser";
import taskController from "./controllers");
import {getAllTasks, addTask, deleteTask } from "../controllers/taskController.js"

const app = express();

// Configuration de la base de données
mongoose
  .connect("mongodb://127.0.0.1:27017/mvc-tasks", 
{ 
  useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log("Connecté à MongoDB"))
  .catch((error) => console.log("Erreur de connexion à MongoDB :", error));

// Configuration de l'application
app.use(bodyParser.urlencoded({ extended: true }));
app.set("view engine", "ejs");

// Routes
app.get("/", getAllTasks);
app.post("/tasks", addTask);
app.get("/tasks/delete/:id", deleteTask);

// Démarrage du serveur
app.listen(3000, () => console.log("Serveur démarré sur http://localhost:3000"));

Nous avons séparé les responsabilités de notre application :

Model : **Gestion des données (MongoDB).
**Controller : **Logique de l'application.
**View : Interface utilisateur (EJS).

Cette structure rend votre code plus clair et plus facile à maintenir. Vous pouvez étendre cette application en ajoutant des fonctionnalités comme la modification des tâches ou la gestion des utilisateurs.

J'espère que vous avez aimé.. Des questions ? Mettez-les en commentaire.

mongodb Article's

30 articles in total