Eine Einführung in die MVC-Architektur: Beispiele erklärt

Die Model-View-Controller (MVC)-Architektur ist eines der beliebtesten Softwareentwicklungsmuster. Die Logik hinter der MVC-Architektur nutzt das Designprinzip der Trennung von Bedenken. Dieses Prinzip zielt darauf ab, einen Antrag in Bezirksabschnitte zu unterteilen, wobei jeder Abschnitt ein spezifisches und separates Thema behandelt.

Die MVC-Architektur folgt buchstabengetreu dem Prinzip der Trennung von Interessen. Tatsächlich stellt jeder Buchstabe im Akronym MVC einen wesentlichen Abschnitt Ihrer Bewerbung dar. Dieser Artikel untersucht jeden Abschnitt der MVC-Architektur im Detail und zeigt Ihnen, wie Sie sie zum Entwickeln von Software verwenden.

Was ist das Modell?

Das Modell der MVC-Architektur ist eine Hauptkomponente des Entwurfsmusters. Dies liegt daran, dass das Modell Ihrer Anwendung die Datenlogik speichert. Das Modell bestimmt, wie Sie Ihre Daten speichern und abrufen.

Für eine Anwendung, die die MVC-Controller-Architektur verwendet, sind Daten eine wesentliche Komponente ihres Betriebs.

Was ist die Aussicht?

Die View of MVC-Architektur ist die Benutzeroberfläche (UI) Ihrer Anwendung. Die Benutzeroberfläche ist das, was ein Benutzer auf seinem Gerät sieht, wenn er mit Ihrem Programm interagiert. Der Zustand der Ansicht basiert auf den Daten, die mithilfe des Modells gespeichert wurden.

Was ist der Controller?

Sie können sich den Controller als Brücke zwischen den Model- und View-Komponenten vorstellen.

Wenn ein Benutzer Daten über Ihre Benutzeroberfläche (die Ansicht) bereitstellt, leitet die Ansicht diese Daten an den Controller weiter. Der Controller verwendet diese Daten, um die Datenbank (über das Modell) zu aktualisieren. Der Controller zieht auch Daten aus der Datenbank (über das Modell) und gibt sie an die Ansicht zurück.

Der Controller ist nicht nur ein Datenkanal, sondern auch das Gehirn der Operation. Es entscheidet, welche Operation mit welchen Daten durchgeführt wird und welche Daten an die Benutzeroberfläche zurückgegeben werden.

Wie kommt alles zusammen?

Die MVC-Architektur schafft einen halbgeschlossenen Kreislauf, der darauf angewiesen ist, dass alle Komponenten ordnungsgemäß funktionieren. Die folgende Abbildung zeigt, wie die MVC-Architektur funktioniert.

Wie Sie der obigen Abbildung entnehmen können, empfängt die MVC-Anwendung eine anfängliche Eingabe von Daten von einem Benutzer über die Benutzeroberfläche. Dann leitet die Anwendung diese Daten durch die verschiedenen Komponenten der MVC-Architektur und manipuliert diese Daten in einigen Fällen in der Controller-Komponente.

Anwenden der MVC-Architektur

Angenommen, Sie entwickeln eine Anwendung für eine Tankstelle, die Aufzeichnungen über das gesamte an der Tankstelle verkaufte Benzin erstellen und den Tankwarten bei der Preisberechnung helfen möchte. Bei Verwendung der MVC-Architektur würden Sie mit dem Modell beginnen, dann zum Controller übergehen, und nachdem Sie die gesamte Logik Ihrer Anwendung herausgefunden haben, können Sie die Ansicht implementieren.

Beim Erstellen eines Modells für Ihre Anwendung müssen Sie wissen, welche Art von Daten Sie speichern möchten, wie Sie diese Daten speichern möchten und wie zugänglich diese Daten sein sollen.

Erstellen des Anwendungsmodells

//Java-Bibliothek
importieren java.io. Serialisierbar;
allgemeinKlasse GasPriceModel implementiert Serialisierbar{
 //attributes
PrivatgeländestatischFinalelangserialVersionUID = 1 Liter;
Privatgelände Zeichenfolge Fahrername;
Privatgeländeschweben gasMenge;
Privatgelände Zeichenfolge Gastyp;
Privatgeländeschweben Kosten;
// Standardkonstruktor
allgemein GasPriceModel() {
Dies.driverName = "";
Dies.gasAmount = 0.00f;
Dies.gasType = "";
Dies.Kosten = 0,00f;
 }
 //primäre Konstruktoren
allgemein GasPriceModel (Zeichenfolge Treibername, schweben gasAmount, String gasType, schweben Kosten) {
Dies.driverName = Fahrername;
Dies.gasAmount = gasAmount;
Dies.gasType = gasType;
Dies.Kosten = Kosten;
 }
 //Getter und Setter, die Daten abrufen und bearbeiten
allgemein String getDriverName() {
Rückkehr Fahrername;
 }
allgemeinLeere setDriverName (String Fahrername) {
Dies.driverName = Fahrername;
 }
allgemeinschweben getGasAmount() {
Rückkehr gasMenge;
 }
allgemeinLeere setGasMenge(schweben Gasmenge) {
Dies.gasAmount = gasAmount;
 }
allgemein Zeichenfolge getGasType() {
Rückkehr gasTyp;
 }
allgemeinLeere setGasType (String gasType) {
Dies.gasType = gasType;
 }
allgemeinschweben getCost() {
Rückkehr Kosten;
 }
allgemeinLeere setCost(schweben Kosten) {
Dies.Kosten = Kosten;
 }
}

Es gibt mehrere wichtige Dinge, die im obigen Modellcode identifiziert werden müssen. Das erste ist, dass es die Serializable-Schnittstelle implementiert. Mit dieser Schnittstelle können Sie den Status jedes Objekts speichern, das mit erstellt wurde GasPriceModel Klasse, indem Sie sie in einen Bytestrom konvertieren. Die Implementierung der Serializable-Schnittstelle bedeutet, dass Sie auch eine Versions-ID erstellen müssen, was das erste Attribut in der obigen Klasse tut.

Verwandt: Erfahren Sie, wie Sie Klassen in Java erstellen Die anderen vier Attribute in der GasPriceModel -Klasse sind ebenso wichtig, weil sie Ihnen mitteilen, wer auf die Daten zugreifen wird, die dieses Modell erstellt. Es sagt Ihnen auch, welche Art von Daten das Modell speichern wird (Strings und Floats).

Erstellen des Anwendungscontrollers

//Java-Bibliotheken
importieren java.io. Datei;
importieren java.io. FileNotFoundException;
importieren java.io. FileOutputStream;
importieren java.io. IOException;
importieren java.io. ObjectOutputStream;
allgemeinKlasse GasPriceController {
 //berechnet die Kosten für das Gas eines Kunden und gibt es zurück
allgemeinschweben berechnenKosten(schweben Menge, String gasType){
schweben Kosten = 0,00f;
Finaleschweben Dieselpreis = 4,925 f;
Finaleschweben premiumPrice = 5.002f;
Finaleschweben regulärerPreis = 4.680f;
wenn (gasType == "Diesel")
 Kosten = Betrag * Dieselpreis;
wenn (gasType == "Premium")
 Kosten = Betrag * Prämienpreis;
wenn (gasType == "Normal")
 Kosten = Betrag * regulärer Preis;
Rückkehr Kosten;
 }
//Speichert die Daten von jedem Verkauf mithilfe des Modells in einer Datei
allgemeinboolesch saveEntry (GasPriceModel-Daten){
Versuchen {
FileOutputStream fs = Neu FileOutputStream(Neu Datei ("data.dat"), wahr);
 ObjectOutputStream os = Neu ObjectOutputStream (fs);
 os.writeObject (Daten);
 os.flush();
 os.close();
Rückkehrwahr;
 } Fang (FileNotFoundException e) {
 e.printStackTrace();
 } Fang (IOException e) {
 e.printStackTrace();
 }
Rückkehrfalsch;
 }
}

Der obige Controller führt zwei Dinge aus, er führt eine Berechnung mit den von der Ansicht empfangenen Daten durch und entscheidet, welche Daten zurückgegeben werden. Der obige Controller verwendet auch das Anwendungsmodell, um die aus der Ansichtseingabe erstellten Objekte zu speichern, indem er die verwendet saveEntry() Methode.

Erstellen der Anwendungsansicht

//Java-Bibliotheken
java.awt importieren. BorderLayout;
java.awt importieren. Gitterstruktur;
java.awt.event importieren. Aktionsereignis;
java.awt.event importieren. ActionListener;
javax.swing importieren. JButton;
javax.swing importieren. JComboBox;
javax.swing importieren. JRahmen;
javax.swing importieren. JLabel;
javax.swing importieren. JOptionPane;
javax.swing importieren. JPanel;
javax.swing importieren. JTextField;
öffentliche Klasse GasPriceView erweitert JFrame implementiert ActionListener {
//attributes
 privat statisch final long serialVersionUID = 1L;
 privater GasPriceController-Controller;
 privater JLabel Treibername;
 privates JTextField nameField;
 privates JLabel gasAmount;
 privates JTextField betragsfeld;
 privates JLabel gasType;
 private JComboBox TypCombo;
 privater JButton btnClear;
 privater JButton btnSave;
 privat statisch final String[] type =
 {"Diesel", "Premium", "Normal"};
//Standardkonstruktor
 öffentliche GasPriceView() {
 this (neuer GasPriceController());
 }
//Primärer Konstruktor, der die Benutzeroberfläche verursacht
 public GasPriceView (GasPriceController-Controller) {
super("Gasverkaufsanwendung");
 setDefaultCloseOperation (JFrame. EXIT_ON_CLOSE);
 setSize (400.500);
 setVisible (wahr);
this.controller = Controller;
configureView();
 }
//Generieren Sie die Benutzeroberfläche für die Anwendung
 private void configureView() {
setLayout (neues BorderLayout());
 JPanel pnl = neues JPanel (neues GridLayout (4,2,2,2));
driverName = new JLabel("Name des Fahrers:");
 pnl.add (Treibername);
 nameField = neues JTextField();
 pnl.add (Namensfeld);
 gasAmount = new JLabel("Gasmenge (Gallone):");
 pnl.add (gasAmount);
 BetragFeld = neues JTextField();
 pnl.add (BetragFeld);
 gasType = new JLabel ("Gastyp:");
 pnl.add (Gastyp);
 typeCombo = neue JComboBox(Typ);
 pnl.add (TypCombo);
 btnClear = new JButton("Clear");
 pnl.add (btnClear);
 btnSave = new JButton("Speichern");
 pnl.add (btnSave);
hinzufügen (pnl, BorderLayout. CENTER);
ActionListener();
}
 //hört auf das Klicken einer von zwei Schaltflächen
 öffentlich void ActionListener() {
 btnClear.addActionListener (dies);
btnSave.addActionListener (dies);
 }
//führt eine Aktion aus, wenn auf eine bestimmte Schaltfläche geklickt wird
 @Überschreiben
 public void actionPerformed (ActionEvent ev) {
if (ev.getSource().equals (btnClear)) {
 nameField.setText("");
 BetragFeld.setText("");
 }
if (ev.getSource().equals (btnSave)){
String gasType = (String) typeCombo.getSelectedItem();
 float gasAmount = Float.parseFloat (amountField.getText());
 float driverTotal = controller.calculateCost (gasAmount, gasType);
 String Treibername = nameField.getText();
 JOptionPane.showMessageDialog (null, driverName +" sollte $ zahlen" + driverTotal );
GasPriceModel customer = new GasPriceModel (driverName, gasAmount, gasType, driverTotal);
controller.saveEntry (Kunde);
 }
}
}

Die obige Ansicht erstellt eine Benutzeroberfläche mit der configureView() Methode. Es sammelt dann Daten, nachdem ein Ereignis eintritt (über einen Aktions-Listener). Die obige Ansicht sendet dann die gesammelten Daten an den Controller, der dann einige Berechnungen durchführt und Daten an die Ansicht zurückgibt.

Ausführen der MVC-Anwendung

importieren java.awt. Ereigniswarteschlange;
allgemeinKlasse Anwendung {
allgemeinstatischLeere main (String args[]) {
 Ereigniswarteschlange.später aufrufen(
Neu Lauffähig() {
@Überschreiben
allgemeinLeere Lauf() { 
 GasPriceController-Steuerung = Neu GasPriceController(); 
Neu GasPriceView (Controller); 
 }
 });
 }
}

Ausführung der App Die obige Klasse generiert die folgende Benutzeroberfläche:

Wenn Sie die Benutzeroberfläche mit den relevanten Daten füllen, wird die folgende Popup-Benutzeroberfläche generiert:

Wenn Sie sich das Bild oben links ansehen, sehen Sie, dass die Anwendung auch eine neue Datei mit dem Namen erstellt hat „Daten.dat.“ Diese MVC-Anwendung sammelt also Daten von einem Benutzer über eine Benutzeroberfläche (Ansicht), die diese Daten an die sendet Regler. Der Controller manipuliert die Daten, indem er einige Berechnungen durchführt, und speichert diese Daten dann unter Verwendung des Modells in einer Datei. Verwandt: Java-Eingabe und -Ausgabe: Ein Leitfaden für Anfänger

Java-Eingabe und -Ausgabe: Ein Leitfaden für Anfänger

Wenn Sie sich die in diesem Artikel erstellte Anwendung genau ansehen, gibt es mehrere offensichtliche Vorteile. Einige dieser Vorteile umfassen:

• Skalierbarkeit
• Einfacheres Code-Testen
• Die Erstellung von prägnanterem Code

Aber die MVC-Architektur ist nicht das einzige nützliche Entwurfsmuster, das Ihren Entwicklungsprozess verbessern kann.

So erstellen Sie wiederverwendbaren Code in JavaScript mithilfe von Entwurfsmustern

Wenn Sie verstehen, wie Designmuster verwendet werden, können Sie wiederverwendbaren Code in JavaScript verwenden. Hier ist, was Sie wissen müssen.

Lesen Sie weiter

Über den Autor