Wenn Sie jemals von architektonischen Mustern in der Programmierung gehört haben, dann haben Sie wahrscheinlich auch von MVC. 😎 Aber was ist das und warum braucht man das überhaupt? Lassen Sie es uns gemeinsam herausfinden, und ich werde versuchen, es so einfach und klar wie möglich zu machen.
/
Was ist MVC? 🤔
MVC steht für Model-View-Controller (Model-View-Controller). Dies ist ein Architekturmuster, mit dem Sie Ihren Code so organisieren können, dass er einfacher zu entwickeln und zu warten ist.
MVC unterteilt die Anwendung in drei Hauptkomponenten:
Modell — speichert Daten und die Logik der Arbeit mit ihnen.
Ansicht — ist für die Anzeige von Daten für den Benutzer verantwortlich.
Controller (Controller) - verbindet Modell und Ansicht, steuert Benutzeraktionen und bestimmt, welche Daten an View gesendet werden sollen.
Warum brauchen wir MVC? 🤓
Das Hauptziel von MVC ist es, den Code verständlich zu machen und die Verantwortung zu teilen. Wenn Sie beispielsweise die Logik der Datenverarbeitung ändern müssen, werden Änderungen an Model, und der Code, der für die Anzeige auf dem Bildschirm verantwortlich ist (View), bleibt unberührt. Dies vereinfacht die Entwicklung und macht den Code lesbarer und wartbarer.
MVC wird häufig in der Webentwicklung verwendet, um die Benutzeroberfläche von der Geschäftslogik zu trennen. Diese Trennung ermöglicht es mehreren Entwicklern, parallel an einem System zu arbeiten: jemand beschäftigt sich mit der Schnittstelle, jemand mit der Logik der Arbeit mit Daten.
MVC-Analoga
Neben MVC gibt es weitere Architekturmuster wie:
MVP (Model-View-Presenter): Ähnlich wie MVC, aber der Controller wurde ersetzt Presenter — Es arbeitet enger mit View zusammen.
MVVM (Model-View-ViewModel): Ein Muster, das häufig in Desktop- und mobilen Anwendungen verwendet wird, insbesondere mit Frameworks wie Angular oder Vue.
Alle diese Muster haben ein Ziel: die Verantwortung zwischen den Teilen des Codes aufzuteilen, um dessen Unterstützung zu vereinfachen.
Wie funktioniert MVC? 🔍
Lassen Sie uns anhand eines einfachen Beispiels herausfinden, wie die Hauptkomponenten von MVC funktionieren.
Stellen Sie sich eine Notizen-App vor. Mit dieser können Sie Notizen erstellen, anzeigen und löschen.
1. Modell
Das Modell ist für die Speicherung und Verwaltung von Daten zuständig. In unserem Beispiel ist dies eine Liste von Notizen:
class NoteModel {
constructor() {
this.notes = [];
}
addNote(note) {
this.notes.push(note);
}
getNotes() {
return this.notes;
}
deleteNote(index) {
this.notes.splice(index, 1);
}
}Hier haben wir Klasse NoteModel, mit dem Sie Notizen hinzufügen, löschen und empfangen können.
2. View (Ansicht)
Die Ansicht ist für die Anzeige von Daten für den Benutzer verantwortlich. Zum Beispiel werden unsere Notizen auf dem Bildschirm angezeigt:
<div id="app">
<input type="text" id="noteInput" placeholder="Enter a note...">
<button onclick="addNote()">Добавить заметку</button>
<ul id="noteList"></ul>
</div>View ist normalerweise HTML, in dem Daten angezeigt werden und in das der Benutzer neue Daten eingibt.
3. Controller (Controller)
Der Controller verbindet alles miteinander. Er nimmt Eingaben von Benutzer:innen entgegen und interagiert mit dem Modell, um Daten zu ändern oder anzuzeigen.
const model = new NoteModel();
function addNote() {
const input = document.getElementById('noteInput');
const note = input.value;
if (note) {
model.addNote(note);
input.value = '';
updateView();
}
}
function updateView() {
const noteList = document.getElementById('noteList');
noteList.innerHTML = '';
model.getNotes().forEach((note, index) => {
const li = document.createElement('li');
li.textContent = note;
li.onclick = () => {
model.deleteNote(index);
updateView();
};
noteList.appendChild(li);
});
}Hier Steuerung steuert die Interaktion zwischen View und Model. Wenn ein Benutzer eine Notiz hinzufügt, Controller ruft Modellmethoden auf und aktualisiert die Ansicht.
MVC in Frameworks 📚
Viele beliebte Frameworks verwenden die MVC-Architektur. Schauen wir uns einige Beispiele an, wie MVC in modernen Frameworks implementiert wird.
1. Backend: Ruby on Rails
Ruby on Rails — ist ein beliebtes Framework für die Entwicklung von Server-seitigen Webanwendungen, das den MVC-Prinzipien folgt.
Model: In Rails sind Modelle normalerweise mit einer Datenbank verbunden und verwalten Anwendungsdaten.
View: Ansichten sind HTML-Vorlagen, die dem Benutzer Daten anzeigen.
Controller: Controller nehmen Anfragen von Benutzern entgegen, verarbeiten sie mithilfe von Modellen und geben Ansichten zurück.
Beispiel für einen Controller in Ruby on Rails:
class NotesController < ApplicationController
def index
@notes = Note.all
end
def create
@note = Note.new(note_params)
if @note.save
redirect_to notes_path
else
render :new
end
end
private
def note_params
params.require(:note).permit(:content)
end
end2. Frontend: Angular
Angular — ist ein Framework für die Entwicklung des Client-Teils, das auch die MVC-Architektur durch MVVM (Model-View-ViewModel) implementiert, was dem MVC ähnlich ist.
Model: Anwendungsdaten werden in Diensten oder direkt in Komponenten gespeichert.
View: HTML-Vorlagen zeigen Daten an.
Controller/ViewModel: Komponenten in Angular fungieren als Controller, die Daten mit der Ansicht verknüpfen.
Beispiel für eine Komponente in Angular:
import { Component } from '@angular/core';
@Component({
selector: 'app-notes',
template: `
<div>
<input [(ngModel)]="note" placeholder="Enter a note...">
<button (click)="addNote()">Add a note</button>
<ul>
<li *ngFor="let note of notes; let i = index" (click)="deleteNote(i)">{{ note }}</li>
</ul>
</div>
`
export class NotesComponent {
note: string = '';
notes: string[] = [];
addNote() {
if (this.note) {
this.notes.push(this.note);
this.note = '';
}
}
deleteNote(index: number) {
this.notes.splice(index, 1);
}
}3. Frontend: React
React — ist eine beliebte Bibliothek für die Entwicklung von Benutzeroberflächen, die bei richtiger Code-Organisation den MVC-Prinzipien folgen kann.
Model: Daten können im Zustand (state) von Komponenten oder in separaten Zustandsmanagern wie Redux gespeichert werden.
View: React-Komponenten sind eine Benutzeroberfläche, die Daten anzeigt.
Controller: Der Controller kann als die Logik der Komponenten betrachtet werden, die den Zustand steuert und die Ansicht aktualisiert.
Beispiel für eine Komponente in React:
import React, { useState } from 'react';
function NotesApp() {
const [note, setNote] = useState('');
const [notes, setNotes] = useState([]);
const addNote = () => {
if (note) {
setNotes([...notes, note]);
setNote('');
}
};
const deleteNote = (index) => {
setNotes(notes.filter((_, i) => i !== index));
};
return (
<div>
<input
type="text"
value={note}
onChange={(e) => setNote(e.target.value)}
placeholder="Enter a note..."
/>
<button onClick={addNote}>Добавить заметку</button>
<ul>
{notes.map((note, index) => (
<li key={index} onClick={() => deleteNote(index)}>{note}</li>
))}
</ul>
</div>
);
}
export default NotesApp;4. Backend: Laravel (PHP)
Laravel — ist ein PHP-Framework, das ebenfalls der MVC-Architektur folgt.
Model: Modelle in Laravel interagieren mit der Datenbank und verwalten Daten.
View: Ansichten (Views) sind Blade-Vorlagen, die dem Benutzer Daten anzeigen.
Controller: Controller nehmen Benutzeranfragen entgegen, verarbeiten sie und geben die entsprechende Ansicht zurück.
Beispiel für einen Controller in Laravel:
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Note;
class NotesController extends Controller
{
public function index()
{
$notes = Note::all();
return view('notes.index', compact('notes'));
}
public function store(Request $request)
{
$request->validate(['content' => 'required']);
Note::create($request->all());
return redirect()->route('notes.index');
}
public function destroy(Note $note)
{
$note->delete();
return redirect()->route('notes.index');
}
}5. Backend: Django (Python)
Django ist ein Python-Framework, das den MTV-Ansatz (Model-Template-View) verwendet, ähnlich wie MVC.
Model: Modelle in Django verwalten Daten und beschreiben die Datenbankstruktur.
Template (View): Vorlagen sind für die Anzeige von Daten für den Benutzer verantwortlich.
View (Controller): Ansichten nehmen Anfragen vom Benutzer entgegen und geben die entsprechende Antwort zurück.
Beispiel für die Darstellung in Django:
from django.shortcuts import render, redirect
from .models import Note
# Ansicht zum Anzeigen der Notizenliste
def notes_list(request):
notes = Note.objects.all()
return render(request, 'notes/notes_list.html', {'notes': notes})
# Ansicht zum Erstellen einer neuen Notiz
def add_note(request):
if request.method == 'POST':
content = request.POST.get('content')
if content:
Note.objects.create(content=content)
return redirect('notes_list')
return render(request, 'notes/add_note.html')
# Ansicht zum Löschen einer Notiz
def delete_note(request, note_id):
note = Note.objects.get(id=note_id)
note.delete()
return redirect('notes_list')Vorteile der Verwendung von MVC
Vereinfachung der Entwicklung: Es ist einfach, an einzelnen Teilen der Anwendung zu arbeiten.
Verbesserte Wartbarkeit: Die Aufteilung der Anwendungslogik in unabhängige Teile vereinfacht das Einbringen von Änderungen.
Parallelbetrieb: Mehrere Entwickler können gleichzeitig an verschiedenen Teilen des Systems arbeiten.
Code wiederverwenden: Modell- und Ansichtskomponenten können in anderen Teilen der Anwendung verwendet werden, was die Entwicklungseffizienz erhöht.
Andere Frameworks, die MVC verwenden
ASP.NET MVC: Microsoft-Framework für die Entwicklung von Webanwendungen mit C#. Es trennt klar Model, View und Controller, was die Entwicklung transparent und einfach macht.
Django: Ein Python-Framework, das den MTV-Ansatz (Model-Template-View) verwendet, der dem MVC ähnelt. Model in Django verwaltet Daten, Template ist verantwortlich für die Präsentation, und View funktioniert als Controller.
Laravel: Ein PHP-Framework, das ebenfalls der MVC-Architektur folgt. Model verwaltet die Interaktion mit der Datenbank, View ist für die Anzeige verantwortlich, und Controller verarbeitet Benutzeranfragen.
Fazit 🎉
MVC - Dies ist eine großartige Möglichkeit, den Code zu strukturieren, sauberer und unterstützter zu machen. Mit seiner Hilfe können Sie die Arbeit an einem Projekt zwischen Entwicklern aufteilen und den zukünftigen Support vereinfachen. Am Beispiel der Notizen haben wir gesehen, wie einfach es ist, eine Anwendung zu organisieren, indem sie in Modell, Ansicht und Controller unterteilt wird.
Versuchen Sie, etwas Einfaches mit MVC zu implementieren! Dies wird Ihnen helfen, besser zu verstehen, wie dieses Muster funktioniert. Viel Glück bei Ihren Projekten! 🚀