Das MVC-Muster mit Node.js verstehen

Das Model-View-Controller (MVC)-Muster ist eines der beliebtesten Architekturmuster in der Webentwicklung. Durch die Aufteilung einer Anwendung in drei miteinander verbundene Komponenten – Modell, Ansicht und Controller – fördert MVC organisierten, wartbaren und skalierbaren Code. Node.js ist mit seiner asynchronen Verarbeitung und seinem umfangreichen Ökosystem eine ausgezeichnete Wahl für die Erstellung von MVC-basierten Anwendungen, insbesondere für die Web- und API-Entwicklung. Dieser Leitfaden untersucht das MVC-Muster mit Node.js und führt Sie durch seine Vorteile und eine praktische Implementierung.

---

Was ist das MVC-Muster?

Das MVC-Muster unterteilt eine Anwendung in drei verschiedene Teile:

1. Modell: Stellt die Daten und Geschäftslogik der Anwendung dar. Es interagiert mit der Datenbank und verarbeitet Daten unabhängig von der Benutzeroberfläche.
2. Ansicht: Verwaltet die Präsentationsebene der Anwendung. Es zeigt dem Benutzer Daten an und sendet Benutzerbefehle an den Controller.
3. Controller: Fungiert als Vermittler zwischen dem Modell und der Ansicht. Es nimmt Benutzereingaben entgegen, interagiert mit dem Modell und aktualisiert die Ansicht entsprechend.

Diese Trennung von Belangen hilft dabei, Code so zu organisieren, dass er einfach zu verwalten, zu testen und zu erweitern ist.

---

Vorteile der Verwendung von MVC in Node.js

1. Wartbarkeit: MVC erleichtert die Verwaltung komplexer Anwendungen durch die Organisation von Code in Ebenen.
2. Skalierbarkeit: Die Struktur ermöglicht die unabhängige Skalierung oder Änderung einzelner Komponenten.
3. Wiederverwendbarer Code: Mit MVC sind Komponenten oft über mehrere Ansichten oder Teile der Anwendung hinweg wiederverwendbar.
4. Effiziente Teamzusammenarbeit: Frontend- und Backend-Entwickler können gleichzeitig mit minimaler Überschneidung arbeiten.

---

Einrichten eines MVC-Projekts mit Node.js

Hier erstellen wir eine einfache MVC-Anwendung mit Node.js und Express. Unser Beispiel wird ein einfacher „Task-Manager“ sein, der es Benutzern ermöglicht, Aufgaben anzuzeigen, hinzuzufügen und zu löschen.

---

Schritt 1: Initialisieren Sie das Projekt

Erstellen Sie zunächst ein neues Node.js-Projekt und installieren Sie die erforderlichen Abhängigkeiten.

# 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: Ein minimalistisches Webframework für Node.js, ideal zum Einrichten von Controllern und Routen.
• EJS: Eine Template-Engine, mit der Sie dynamische HTML-Ansichten rendern können.
• Mongoose: Eine beliebte Bibliothek für MongoDB zur Modellierung unserer Daten in der Datenbank.
• Body-Parser: Middleware zum Parsen eingehender Anforderungstexte in einer Middleware.

Schritt 2: Richten Sie die Projektstruktur ein

Organisieren Sie die Anwendung in Modell-, Ansichten- und Controller-Ordnern. Diese Struktur ist für ein MVC-Muster unerlässlich.

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

Schritt 3: Konfigurieren Sie das Modell

Das Modell repräsentiert die Datenstruktur in Ihrer Anwendung. Für diesen Task-Manager definieren wir mithilfe von Mongoose ein Task-Modell in MongoDB.

// 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);

Hier definiert taskSchema unser Aufgabenmodell mit Feldern für Titel, Beschreibung und abgeschlossen.

Schritt 4: Erstellen Sie den Controller

Der Controller verwaltet die Anwendungslogik, verarbeitet Benutzereingaben, interagiert mit dem Modell und weist die Ansicht an, die Daten zu rendern.

// 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');
};

Dieser Controller definiert drei Hauptaktionen:

• getTasks: Holt alle Aufgaben aus der Datenbank.
• createTask: Fügt der Datenbank eine neue Aufgabe hinzu.
• deleteTask: Löscht eine Aufgabe anhand ihrer ID.

Schritt 5: Richten Sie die Ansicht ein

In diesem Beispiel verwenden wir EJS, um HTML-Ansichten zu rendern. Dadurch können wir Aufgabendaten dynamisch im Browser anzeigen.

Erstellen Sie eine index.ejs-Datei für die Homepage und eine task.ejs-Datei zum Anzeigen von Aufgaben.

<!-- 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>

Die Datei „tasks.ejs“ rendert eine Liste von Aufgaben und stellt Formulare zum Hinzufügen oder Löschen von Aufgaben bereit.

<!-- 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>

Schritt 6: Routen einrichten

Definieren Sie Routen in der Hauptdatei app.js, um jeden URL-Endpunkt mit der relevanten Controller-Funktion zu verbinden.

// 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}`));

---

Schritt 7: Styling mit CSS

Um ein wenig Stil hinzuzufügen, erstellen Sie eine Datei „styles.css“ im Ordner „public/css/“. Sie können grundlegende Stile hinzufügen, um Ihre Anwendung optisch ansprechend zu gestalten.

---

Schritt 8: Führen Sie die Anwendung aus und testen Sie sie

Starten Sie die Anwendung mit:

node app.js

Besuchen Sie http://localhost:3000 in Ihrem Browser. Mithilfe der MVC-Architektur können Sie zwischen Ansichten navigieren, neue Aufgaben hinzufügen und Aufgaben löschen.

---

Best Practices für die MVC-Architektur in Node.js

1. Controller dünn halten: Die Geschäftslogik sollte in erster Linie im Modell liegen.
2. Middleware für wiederverwendbaren Code verwenden: Verwenden Sie beispielsweise Middleware für die Authentifizierung oder Anforderungsprotokollierung.
3. Routen von Controllern trennen: Um Controller sauber und konzentriert zu halten, sollten Sie Routen in einer separaten Datei definieren.
4. Modularisieren Sie Ihren Code: Bewahren Sie Modelle, Ansichten und Controller in separaten Dateien und Ordnern auf, um die Struktur beizubehalten.

---

Das obige ist der detaillierte Inhalt vonDas MVC-Muster mit Node.js verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!