Een inleiding tot MVC-architectuur: voorbeelden uitgelegd

De Model-View-Controller (MVC)-architectuur is een van de meest populaire patronen voor softwareontwikkeling. De logica achter MVC-architectuur maakt gebruik van het ontwerpprincipe van scheiding van zorgen. Dit principe heeft tot doel een aanvraag op te splitsen in wijksecties, waarbij elke sectie een specifiek en afzonderlijk vraagstuk behandelt.

MVC-architectuur volgt het principe van de scheiding van zorgen tot op de letter. In feite vertegenwoordigt elke letter in het MVC-acroniem een ​​essentieel onderdeel van uw aanvraag. Dit artikel onderzoekt elk onderdeel van de MVC-architectuur in detail en laat zien hoe je ze kunt gebruiken om software te ontwikkelen.

Wat is het model?

Het Model van MVC-architectuur is een belangrijk onderdeel van het ontwerppatroon. Dit komt omdat het model van uw toepassing de gegevenslogica opslaat. Het model bepaalt hoe u uw gegevens opslaat en ophaalt.

Voor een toepassing die de MVC-controllerarchitectuur gebruikt, zijn gegevens een essentieel onderdeel van de werking ervan.

Wat is het uitzicht?

De View of MVC-architectuur is de gebruikersinterface (UI) van uw applicatie. De gebruikersinterface is wat een gebruiker op zijn apparaat ziet wanneer hij interactie heeft met uw programma. De status van de weergave is afhankelijk van de gegevens die zijn opgeslagen met behulp van het model.

Wat is de controleur?

Je kunt de Controller zien als een brug tussen de Model- en View-componenten.

Wanneer een gebruiker gegevens aanlevert via uw gebruikersinterface (de View), geeft de View die gegevens door aan de Verwerkingsverantwoordelijke. De Verantwoordelijke gebruikt die gegevens om de database bij te werken (via het Model). De Controller haalt ook gegevens uit de database (via het Model) en stuurt deze terug naar de View.

De Controller is naast een datakanaal ook het brein van de operatie. Het bepaalt welke bewerking op welke gegevens moet worden uitgevoerd en welke gegevens naar de gebruikersinterface moeten worden teruggestuurd.

Hoe komt het allemaal samen?

MVC-architectuur creëert een semi-gesloten lus die erop vertrouwt dat alle componenten adequaat kunnen functioneren. De volgende afbeelding laat zien hoe MVC-architectuur werkt.

Zoals u in de bovenstaande afbeelding kunt zien, ontvangt de MVC-toepassing een eerste invoer van gegevens van een gebruiker via de gebruikersinterface. Vervolgens geeft de applicatie die gegevens door aan de verschillende componenten van de MVC-architectuur en in sommige gevallen manipuleert de toepassing die gegevens in de Controller-component.

MVC-architectuur toepassen

Stel dat u een applicatie ontwikkelt voor een tankstation dat een overzicht wil maken van al het gas dat op het station wordt verkocht en de gasbedienden wil helpen bij het berekenen van de prijs. Als je MVC-architectuur gebruikt, begin je met het model, ga je verder met de controller en nadat je alle logica van je toepassing hebt doorgrond, kun je de weergave implementeren.

Wanneer u een model voor uw toepassing maakt, moet u weten welk type gegevens u wilt opslaan, hoe u die gegevens wilt opslaan en hoe toegankelijk u wilt dat die gegevens zijn.

Het toepassingsmodel maken

//Java-bibliotheek
importeren java.io. serialiseerbaar;
openbaarklas GasPrijsModel implementeert serialiseerbaar{
 //attributes
privaatstatischlaatstelangserialVersionUID = 1L;
privaat String stuurprogrammanaam;
privaatvlot gasBedrag;
privaat String gasType;
privaatvlot kosten;
// standaard constructor
openbaar GasPrijsModel() {
deze.driverName = "";
deze.gasBedrag = 0.00f;
deze.gasType = "";
deze.kosten = 0.00f;
 }
 //primaire constructeurs
openbaar GasPriceModel (String driverName, vlot gasBedrag, String gasType, vlot kosten) {
deze.stuurprogrammanaam = stuurprogrammanaam;
deze.gasBedrag = gasBedrag;
deze.gasType = gasType;
deze.kosten = kosten;
 }
 //getters en setters die gegevens ophalen en manipuleren
openbaar Tekenreeks getDriverName() {
opbrengst naam van de bestuurder;
 }
openbaarleegte setDriverName (String driverName) {
deze.stuurprogrammanaam = stuurprogrammanaam;
 }
openbaarvlot getGasBedrag() {
opbrengst gasBedrag;
 }
openbaarleegte setGasBedrag(vlot gasBedrag) {
deze.gasBedrag = gasBedrag;
 }
openbaar Tekenreeks getGasType() {
opbrengst gasType;
 }
openbaarleegte setGasType (String gasType) {
deze.gasType = gasType;
 }
openbaarvlot getCost() {
opbrengst kosten;
 }
openbaarleegte setkosten(vlot kosten) {
deze.kosten = kosten;
 }
}

Er zijn verschillende belangrijke dingen om te identificeren in de bovenstaande modelcode. De eerste is dat het de Serializable-interface implementeert. Met deze interface kunt u de status opslaan van elk object dat is gemaakt met behulp van de GasPrijsModel class door deze om te zetten in een bytestream. Het implementeren van de Serializable-interface betekent dat u ook een versie-ID moet maken, wat het eerste kenmerk in de bovenstaande klasse doet.

Verwant: Leer hoe u klassen in Java kunt maken De andere vier attributen in de GasPrijsModel class zijn even belangrijk omdat ze u vertellen wie toegang krijgt tot de gegevens die dit model zal maken. Het vertelt u ook welk type gegevens het model zal opslaan (strings en floats).

De applicatiecontroller maken

//Java-bibliotheken
importeren java.io. Bestand;
importeren java.io. FileNotFoundException;
importeren java.io. FileOutputStream;
importeren java.io. IOUitzondering;
importeren java.io. ObjectOutputStream;
openbaarklas GasPriceController {
 // berekent de kosten van het gas van een klant en geeft het terug
openbaarvlot berekenKosten(vlot hoeveelheid, String gasType){
vlot kosten = 0.00f;
laatstevlot dieselPrijs = 4.925f;
laatstevlot premiumPrijs = 5.002f;
laatstevlot normale prijs = 4.680f;
als (gastype == "Diesel")
 kosten = bedrag * dieselPrijs;
als (gastype == "Premium")
 kosten = bedrag * premiePrijs;
als (gasType == "Normaal")
 kosten = bedrag * regulierePrijs;
opbrengst kosten;
 }
// slaat de gegevens van elke verkoop op in een bestand met behulp van het model
openbaarbooleaans saveEntry (GasPriceModel-gegevens){
poging {
FileOutputStream fs = nieuwe BestandsuitvoerStream(nieuwe Bestand("data.dat"), waar);
 ObjectOutputStream os = nieuwe ObjectOutputStream (fs);
 os.writeObject (gegevens);
 os.flush();
 os.sluiten();
opbrengstwaar;
 } vangst (FileNotFoundException e) {
 e.printStackTrace();
 } vangst (IOUitzondering e) {
 e.printStackTrace();
 }
opbrengstvals;
 }
}

De bovenstaande controller doet twee dingen: hij voert een berekening uit op de gegevens die uit de weergave worden ontvangen en beslist welke gegevens moeten worden geretourneerd. De controller hierboven gebruikt ook het applicatiemodel om de objecten op te slaan die zijn gemaakt op basis van de weergave-invoer, met behulp van de saveEntry() methode.

De toepassingsweergave maken

//Java-bibliotheken
java.awt importeren. GrensIndeling;
java.awt importeren. Rasterindeling;
java.awt.event importeren. ActieEvent;
java.awt.event importeren. ActieLuisteraar;
javax.swing importeren. JKnop;
javax.swing importeren. JComboBox;
javax.swing importeren. JFrame;
javax.swing importeren. JLabel;
javax.swing importeren. JOptionPaan;
javax.swing importeren. JPanel;
javax.swing importeren. JTextVeld;
openbare klasse GasPriceView breidt JFrame uit en implementeert ActionListener {
//attributes
 privé statisch definitief lang serialVersionUID = 1L;
 particuliere GasPriceController-controller;
 privé JLabel driverName;
 privé JTextField nameField;
 privé JLabel gasBedrag;
 privé JTextField bedragField;
 privé JLabel gasType;
 privé JComboBox typeCombo;
 privé JButton btnClear;
 privé JButton btnSave;
 privé statische laatste String [] type =
 {"Diesel", "Premium", "Normaal"};
// standaard constructor
 openbare GasPriceView() {
 dit (nieuwe GasPriceController());
 }
//primaire constructor die de gebruikersinterface veroorzaakt
 openbare GasPriceView (GasPriceController-controller) {
super("Toepassing gasverkoop");
 setDefaultCloseOperation (JFrame. EXIT_ON_CLOSE);
 setSize (400.500);
 setVisible (waar);
deze.controller = controller;
configureView();
 }
// genereer de gebruikersinterface voor de toepassing
 privé ongeldig configureView() {
setLayout (nieuwe BorderLayout());
 JPanel pnl = nieuw JPanel (nieuwe GridLayout (4,2,2,2));
driverName = new JLabel("Naam van de bestuurder:");
 pnl.add (stuurprogrammanaam);
 nameField = nieuw JTextField();
 pnl.add (naamVeld);
 gasAmount = new JLabel("Gasbedrag (gallon):");
 pnl.add (gasBedrag);
 bedragField = nieuw JTextField();
 pnl.add (amountField);
 gasType = nieuw JLabel ("Gastype:");
 pnl.add (gasType);
 typeCombo = nieuwe JComboBox(type);
 pnl.add (typeCombo);
 btnClear = nieuwe JButton("Clear");
 pnl.add (btnClear);
 btnSave = nieuwe JButton("Opslaan");
 pnl.add (btnSave );
add (pnl, BorderLayout. CENTRUM);
ActieListener();
}
 // luistert naar de klik van een van de twee knoppen
 public void ActionListener() {
 btnClear.addActionListener (dit);
btnSave.addActionListener (dit);
 }
//voert een actie uit als er op een specifieke knop wordt geklikt
 @Override
 public void actionPerformed (ActionEvent ev) {
if (ev.getSource().is gelijk aan (btnClear)) {
 naamVeld.setText("");
 bedragField.setText("");
 }
if (ev.getSource().is gelijk aan (btnSave)){
String gasType = (String) typeCombo.getSelectedItem();
 float gasAmount = Float.parseFloat (amountField.getText());
 float driverTotal = controller.calculateCost (gasAmount, gasType);
 String driverName = naamVeld.getText();
 JOptionPane.showMessageDialog (null, driverName +" zou $" + driverTotal moeten betalen;
GasPriceModel-klant = nieuw GasPriceModel (driverName, gasAmount, gasType, driverTotal);
controller.saveEntry (klant);
 }
}
}

De bovenstaande weergave maakt een gebruikersinterface met behulp van de configurerenView() methode. Het verzamelt vervolgens gegevens nadat een gebeurtenis heeft plaatsgevonden (via een actielistener). De bovenstaande weergave stuurt vervolgens de verzamelde gegevens naar de controller, die vervolgens enkele berekeningen uitvoert en gegevens terugstuurt naar de weergave.

De MVC-toepassing uitvoeren

importeren java.awt. EvenementWachtrij;
openbaarklas app {
openbaarstatischleegte main (Stringargs[]) {
 EvenementWachtrij.later aanroepen(
nieuwe uitvoerbaar() {
@Override
openbaarleegte loop() { 
 GasPriceController-controller = nieuwe GasPriceController(); 
nieuwe GasPriceView (controller); 
 }
 });
 }
}

Het uitvoeren van de App class hierboven genereert de volgende gebruikersinterface:

Door de gebruikersinterface te vullen met de relevante gegevens, wordt de volgende pop-upgebruikersinterface gegenereerd:

Als u naar de linkerkant van de afbeelding hierboven kijkt, ziet u dat de toepassing ook een nieuw bestand heeft gemaakt met de naam “gegevens.dat.” Deze MVC-applicatie verzamelt dus gegevens van een gebruiker via een gebruikersinterface (View), die die gegevens naar de controleur. De controller manipuleert de gegevens door enkele berekeningen uit te voeren en slaat die gegevens vervolgens op in een bestand met behulp van het model. Verwant: Java-invoer en -uitvoer: een beginnershandleiding

Java-invoer en -uitvoer: een beginnershandleiding

Als u de toepassing die in dit artikel is gemaakt, van dichtbij bekijkt, zijn er verschillende duidelijke voordelen. Enkele van deze voordelen zijn:

• schaalbaarheid
• Eenvoudiger code testen
• Het maken van meer beknopte code

Maar MVC-architectuur is niet het enige bruikbare ontwerppatroon dat uw ontwikkelingsproces kan verbeteren.

Herbruikbare code maken in JavaScript met behulp van ontwerppatronen

Als u begrijpt hoe u ontwerppatronen gebruikt, kunt u herbruikbare code in JavaScript gebruiken. Dit is wat u moet weten.

Lees volgende

Over de auteur