Comprendre le modèle MVC avec Node.js

Le modèle Model-View-Controller (MVC) est l'un des modèles architecturaux les plus populaires dans le développement Web. En divisant une application en trois composants interconnectés : modèle, vue et contrôleur, MVC favorise un code organisé, maintenable et évolutif. Node.js, avec son traitement asynchrone et son vaste écosystème, est un excellent choix pour créer des applications basées sur MVC, en particulier pour le développement Web et d'API. Ce guide explore le modèle MVC avec Node.js, vous présentant ses avantages et une mise en œuvre pratique.

---

Qu'est-ce que le modèle MVC ?

Le modèle MVC divise une application en trois parties distinctes :

1. Modèle : représente les données et la logique métier de l'application. Il interagit avec la base de données et traite les données indépendamment de l'interface utilisateur.
2. Vue : Gère la couche de présentation de l'application. Il affiche les données à l'utilisateur et envoie les commandes utilisateur au contrôleur.
3. Contrôleur : Agit comme intermédiaire entre le Modèle et la Vue. Il prend en compte les entrées de l'utilisateur, interagit avec le modèle et met à jour la vue en conséquence.

Cette séparation des préoccupations permet d'organiser le code de manière à ce qu'il soit facile à gérer, à tester et à développer.

---

Avantages de l'utilisation de MVC dans Node.js

1. Maintenabilité : MVC facilite la gestion des applications complexes en organisant le code en couches.
2. Évolutivité : La structure permet aux composants individuels d'être mis à l'échelle ou modifiés indépendamment.
3. Code réutilisable : avec MVC, les composants sont souvent réutilisables dans plusieurs vues ou parties de l'application.
4. Collaboration d'équipe efficace : les développeurs frontend et backend peuvent travailler simultanément avec un chevauchement minimal.

---

Configurer un projet MVC avec Node.js

Ici, nous allons créer une application MVC simple à l'aide de Node.js et Express. Notre exemple sera un « Gestionnaire de tâches » de base qui permet aux utilisateurs d'afficher, d'ajouter et de supprimer des tâches.

---

Étape 1 : initialiser le projet

Commencez par créer un nouveau projet Node.js et installez les dépendances nécessaires.

# Create a project folder
mkdir mvc-task-manager
cd mvc-task-manager

# Initialize Node.js
npm init -y

# Install Express and other dependencies
npm install express ejs mongoose body-parser

• Express : Un framework web minimaliste pour Node.js, idéal pour mettre en place des contrôleurs et des routes.
• EJS : un moteur de création de modèles qui vous permet de restituer des vues HTML dynamiques.
• Mongoose : Une bibliothèque populaire pour MongoDB pour modéliser nos données dans la base de données.
• Body-parser : Middleware pour analyser les corps des requêtes entrantes dans un middleware.

Étape 2 : Configurer la structure du projet

Organisez l'application en dossiers de modèles, de vues et de contrôleurs. Cette structure est essentielle pour un modèle MVC.

mvc-task-manager/
│
├── models/
│   └── Task.js
│
├── views/
│   ├── index.ejs
│   └── tasks.ejs
│
├── controllers/
│   └── taskController.js
│
├── public/
│   └── css/
│       └── styles.css
│
├── app.js
└── package.json

Étape 3 : configurer le modèle

Le Modèle représente la structure des données de votre application. Pour ce gestionnaire de tâches, nous définirons un modèle de tâche dans MongoDB en utilisant Mongoose.

// models/Task.js

const mongoose = require('mongoose');

const taskSchema = new mongoose.Schema({
    title: { type: String, required: true },
    description: { type: String },
    completed: { type: Boolean, default: false }
});

module.exports = mongoose.model('Task', taskSchema);

Ici, taskSchema définit notre modèle de tâche avec des champs pour le titre, la description et complété.

Étape 4 : Créer le contrôleur

Le Contrôleur gère la logique de l'application, traite les entrées de l'utilisateur, interagit avec le modèle et dirige la vue pour restituer les données.

// controllers/taskController.js

const Task = require('../models/Task');

exports.getTasks = async (req, res) => {
    const tasks = await Task.find();
    res.render('tasks', { tasks });
};

exports.createTask = async (req, res) => {
    const { title, description } = req.body;
    await Task.create({ title, description });
    res.redirect('/tasks');
};

exports.deleteTask = async (req, res) => {
    await Task.findByIdAndDelete(req.params.id);
    res.redirect('/tasks');
};

Ce contrôleur définit trois actions principales :

• getTasks : récupère toutes les tâches de la base de données.
• createTask : ajoute une nouvelle tâche à la base de données.
• deleteTask : supprime une tâche par son ID.

Étape 5 : configurer la vue

Dans cet exemple, nous utilisons EJS pour restituer les vues HTML. Cela nous permettra d'afficher les données des tâches de manière dynamique dans le navigateur.

Créez un fichier index.ejs pour la page d'accueil et un fichier tâches.ejs pour afficher les tâches.

<!-- views/index.ejs -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task Manager</title>
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
    <h1>Welcome to Task Manager</h1>
    <a href="/tasks">View Tasks</a>
</body>
</html>

Le fichier tâches.ejs affichera une liste de tâches et fournira des formulaires pour ajouter ou supprimer des tâches.

<!-- views/tasks.ejs -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task List</title>
</head>
<body>
    <h1>Tasks</h1>

    <ul>
        <% tasks.forEach(task => { %>
            <li><%= task.title %> - <a href="/delete/<%= task._id %>">Delete</a></li>
        <% }) %>
    </ul>

    <form action="/add" method="POST">
        <input type="text" name="title" placeholder="Task Title" required>
        <input type="text" name="description" placeholder="Description">
        <button type="submit">Add Task</button>
    </form>
</body>
</html>

Étape 6 : Configurer des itinéraires

Définissez des routes dans le fichier app.js principal pour connecter chaque point de terminaison d'URL à la fonction de contrôleur appropriée.

// app.js

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const taskController = require('./controllers/taskController');

const app = express();
app.set('view engine', 'ejs');

mongoose.connect('mongodb://localhost:27017/taskDB', { useNewUrlParser: true, useUnifiedTopology: true });

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));

// Routes
app.get('/', (req, res) => res.render('index'));
app.get('/tasks', taskController.getTasks);
app.post('/add', taskController.createTask);
app.get('/delete/:id', taskController.deleteTask);

const PORT = 3000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

---

Étape 7 : Styliser avec CSS

Pour ajouter un peu de style, créez un fichier styles.css dans le dossier public/css/. Vous pouvez ajouter un style de base pour rendre votre application visuellement attrayante.

---

Étape 8 : Exécuter et tester l'application

Démarrez l'application en utilisant :

node app.js

Visitez http://localhost:3000 dans votre navigateur. Vous pourrez naviguer entre les vues, ajouter de nouvelles tâches et supprimer des tâches à l'aide de l'architecture MVC.

---

Meilleures pratiques pour l'architecture MVC dans Node.js

1. Gardez les contrôleurs minces : la logique métier doit résider principalement dans le modèle.
2. Utiliser un middleware pour le code réutilisable : par exemple, utilisez un middleware pour l'authentification ou la journalisation des demandes.
3. Séparez les routes des contrôleurs : pour garder les contrôleurs propres et concentrés, envisagez de définir des routes dans un fichier séparé.
4. Modularisez votre code : conservez les modèles, les vues et les contrôleurs dans des fichiers et des dossiers séparés pour conserver la structure.

---

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!