Bevezetés az MVC architektúrába: példák magyarázata

A Model-View-Controller (MVC) architektúra az egyik legnépszerűbb szoftverfejlesztési minta. Az MVC architektúra mögött meghúzódó logika az aggodalmak szétválasztásának tervezési elvét használja. Ennek az elvnek az a célja, hogy a kérelmeket kerületi szakaszokra bontsák, ahol minden szekció egy konkrét és különálló kérdéssel foglalkozik.

Az MVC architektúra szó szerint követi az aggodalmak szétválasztásának elvét. Valójában az MVC mozaikszó minden betűje az alkalmazás lényeges részét jelenti. Ez a cikk részletesen megvizsgálja az MVC architektúra egyes szakaszait, és bemutatja, hogyan használhatja őket szoftverfejlesztésre.

Mi a Modell?

Az MVC architektúra modellje a tervezési minta fő összetevője. Ennek az az oka, hogy az alkalmazás modellje tárolja az adatlogikát. A modell határozza meg, hogyan tárolja és kérje le adatait.

Az MVC vezérlő architektúrát használó alkalmazások esetében az adatok a működésük alapvető összetevői.

Mi a kilátás?

Az MVC architektúra nézete az alkalmazás felhasználói felülete (UI). A felhasználói felület az, amit a felhasználó az eszközén lát, amikor interakcióba lép a programjával. A Nézet állapota a modell segítségével tárolt adatokon alapul.

Mi az a vezérlő?

A Vezérlőt hídnak tekintheti a Modell és a Nézet összetevők között.

Amikor egy felhasználó adatokat szolgáltat a felhasználói felületen (a nézeten) keresztül, a nézet továbbítja ezeket az adatokat a vezérlőnek. A Vezérlő ezeket az adatokat az adatbázis frissítésére használja (a modellen keresztül). A Vezérlő emellett adatokat gyűjt az adatbázisból (a modellen keresztül), és visszaküldi a nézetbe.

Amellett, hogy adatcsatorna, a Controller a művelet agya is. Ez dönti el, hogy mely adatokon milyen műveletet hajtson végre, és milyen adatokat küldjön vissza a felhasználói felületre.

Hogyan jön mindez össze?

Az MVC architektúra félig zárt hurkot hoz létre, amely minden összetevőre támaszkodik a megfelelő működéshez. Az alábbi ábra bemutatja az MVC architektúra működését.

Amint az a fenti ábrán látható, az MVC alkalmazás a felhasználói felületen keresztül kap egy kezdeti adatbevitelt a felhasználótól. Ezután az alkalmazás átadja ezeket az adatokat az MVC architektúra különböző összetevőinek, és bizonyos esetekben manipulálja ezeket az adatokat a Controller összetevőben.

MVC architektúra alkalmazása

Tegyük fel, hogy alkalmazást fejleszt egy benzinkút számára, amely nyilvántartást szeretne készíteni az állomáson eladott összes gázról, és segíteni szeretne a gázkezelőknek az ár kiszámításában. Az MVC architektúra használatával kezdje a modellel, majd lépjen tovább a vezérlőre, és miután kitalálta az alkalmazás logikáját, megvalósíthatja a nézetet.

Amikor modellt hoz létre az alkalmazáshoz, tudnia kell, milyen típusú adatokat szeretne tárolni, hogyan kívánja tárolni ezeket az adatokat, és mennyire szeretné hozzáférhetővé tenni ezeket az adatokat.

Alkalmazásmodell létrehozása

//Java könyvtár
import java.io. Sorozatozható;
nyilvánososztály GasPriceModel megvalósítja Sorozatozható{
 //attributes
magánstatikusvégsőhosszúserialVersionUID = 1 liter;
magán String driverName;
magánúszó gasAmount;
magán String gasType;
magánúszó költség;
// alapértelmezett konstruktor
nyilvános GasPriceModel() {
ez.driverName = "";
ez.gasAmount = 0,00f;
ez.gasType = "";
ez.cost = 0.00f;
 }
 //elsődleges konstruktorok
nyilvános GasPriceModel (String driverName, úszó gasAmount, String gasType, úszó költség) {
ez.driverName = illesztőprogramNév;
ez.gasAmount = gasAmount;
ez.gasType = gasType;
ez.cost = költség;
 }
 //getterek és beállítók, amelyek lekérik és kezelik az adatokat
nyilvános String getDriverName() {
Visszatérés driverName;
 }
nyilvánosüres setDriverName (String driverName) {
ez.driverName = illesztőprogramNév;
 }
nyilvánosúszó getGasAmount() {
Visszatérés gasAmount;
 }
nyilvánosüres setGasAmount(úszó gasAmount) {
ez.gasAmount = gasAmount;
 }
nyilvános String getGasType() {
Visszatérés gasType;
 }
nyilvánosüres setGasType (String gasType) {
ez.gasType = gasType;
 }
nyilvánosúszó getCost() {
Visszatérés költség;
 }
nyilvánosüres setCost(úszó költség) {
ez.cost = költség;
 }
}

A fenti modellkódban számos fontos dolgot azonosítani kell. Az első az, hogy megvalósítja a Serializable interfészt. Ez az interfész lehetővé teszi minden objektum állapotának mentését, amelyet a GasPriceModel osztály bájtfolyammá alakításával. A Serializable felület megvalósítása azt jelenti, hogy létre kell hozni egy verzióazonosítót is, amit a fenti osztály első attribútuma tesz.

Összefüggő: Ismerje meg, hogyan hozhat létre osztályokat Java nyelven A másik négy attribútum a GasPriceModel osztály ugyanolyan fontosak, mert megmondják, hogy ki fog hozzáférni a modell által létrehozott adatokhoz. Azt is megmondja, hogy a modell milyen típusú adatokat fog tárolni (karakterláncok és lebegő adatok).

Alkalmazásvezérlő létrehozása

//Java könyvtárak
import java.io. Fájl;
import java.io. FileNotFoundException;
import java.io. FileOutputStream;
import java.io. IOException;
import java.io. ObjectOutputStream;
nyilvánososztály GasPriceController {
 //kiszámolja az ügyfél gázköltségét és visszaadja
nyilvánosúszó kalkulálniköltség(úszó mennyiség, String gasType){
úszó költség = 0,00 f;
végsőúszó dízelÁr = 4.925f;
végsőúszó prémiumÁr = 5,002 f;
végsőúszó normálár = 4,680 f;
ha (gasType == "Dízel")
 költség = összeg * gázolajár;
ha (gasType == "prémium")
 költség = összeg * prémiumÁr;
ha (gasType == "Rendszeres")
 költség = összeg * normálár;
Visszatérés költség;
 }
//az egyes eladások adatait egy fájlba menti a modell segítségével
nyilvánoslogikai érték saveEntry (GasPriceModel adatok){
próbáld ki {
FileOutputStream fs = új FileOutputStream(új Fájl("data.dat"), igaz);
 ObjectOutputStream os = új ObjectOutputStream (fs);
 os.writeObject (adatok);
 os.flush();
 os.close();
Visszatérésigaz;
 } fogás (FileNotFoundException e) {
 e.printStackTrace();
 } fogás (IOKivétel e) {
 e.printStackTrace();
 }
Visszatéréshamis;
 }
}

A fenti Controller két dolgot csinál: számítást végez a nézetből kapott adatokon, és eldönti, hogy milyen adatokat adjon vissza. A fenti Vezérlő is az alkalmazásmodellt használja a nézetbemenetből létrehozott objektumok tárolására, a segítségével saveEntry() módszer.

Alkalmazásnézet létrehozása

//Java könyvtárak
import java.awt. BorderLayout;
import java.awt. Rácsszerkezet;
import java.awt.event. ActionEvent;
import java.awt.event. ActionListener;
import javax.swing. JButton;
import javax.swing. JComboBox;
import javax.swing. JFrame;
import javax.swing. JLabel;
import javax.swing. JOptionPane;
import javax.swing. JPanel;
import javax.swing. JTextField;
public class A GasPriceView kiterjeszti a JFrame-et az ActionListener {
//attributes
 privát statikus végső hosszú sorozatVersionUID = 1L;
 privát GasPriceController vezérlő;
 privát JLabel illesztőprogramNév;
 privát JTextField névMező;
 privát JLabel gasAmount;
 privát JTextField mennyiségMező;
 privát JLabel gasType;
 privát JComboBox TypeCombo;
 privát JButton btnClear;
 privát JButton btnSave;
 private static final String[] type =
 {"Dízel", "Prémium", "Normál"};
//alapértelmezett konstruktor
 public GasPriceView() {
 ez (új GasPriceController());
 }
//elsődleges konstruktor, amely a felhasználói felületet okozza
 nyilvános GasPriceView (GasPriceController vezérlő) {
super("Gázértékesítési alkalmazás");
 setDefaultCloseOperation (JFrame. EXIT_ON_CLOSE);
 setSize (400 500);
 setVissible (igaz);
this.controller = vezérlő;
configureView();
 }
//generálja az alkalmazás felhasználói felületét
 private void configureView() {
setLayout (új BorderLayout());
 JPanel pnl = új JPanel (új GridLayout (4,2,2,2));
driverName = new JLabel("Illesztőprogram neve:");
 pnl.add (illesztőprogramnév);
 nameField = new JTextField();
 pnl.add (névMező);
 gasAmount = new JLabel("Gázmennyiség (gallon):");
 pnl.add (gasAmount);
 summaField = new JTextField();
 pnl.add (amountField);
 gasType = new JLabel("Gáztípus:");
 pnl.add (gasType);
 typeCombo = új JComboBox(típus);
 pnl.add (typeCombo);
 btnClear = new JButton("Törlés");
 pnl.add (btnClear);
 btnSave = new JButton("Mentés");
 pnl.add (btnSave );
add (pnl, BorderLayout. KÖZPONT);
ActionListener();
}
 //figyel a két gomb valamelyikének kattintására
 public void ActionListener() {
 btnClear.addActionListener (ez);
btnSave.addActionListener (ez);
 }
//műveletet hajt végre, ha egy adott gombra kattintanak
 @Felülbírálás
 public void actionPerformed (ActionEvent ev) {
if (ev.getSource().equals (btnClear)) {
 nameField.setText("");
 summaField.setText("");
 }
if (ev.getSource().equals (btnSave)){
String gasType = (String) typeCombo.getSelectedItem();
 float gasAmount = Float.parseFloat (amountField.getText());
 float driverTotal = controller.calculateCost (gasAmount, gasType);
 String driverName = névField.getText();
 JOptionPane.showMessageDialog (null, driverName +" kell fizetnie $" + driverTotal );
GasPriceModel ügyfél = új GasPriceModel (vezetőNév, gasAmount, gasType, driverTotal);
controller.saveEntry (ügyfél);
 }
}
}

A fenti nézet felhasználói felületet hoz létre a configureView() módszer. Ezután egy esemény bekövetkezte után adatokat gyűjt (egy műveletfigyelőn keresztül). A fenti Nézet ezután elküldi az összegyűjtött adatokat a Vezérlőnek, amely ezután elvégzi a számításokat, és visszaküldi az adatokat a Nézetnek.

Az MVC alkalmazás végrehajtása

import java.awt. EventQueue;
nyilvánososztály App {
nyilvánosstatikusüres main (String args[]) {
 EventQueue.invokeLater(
új Futható() {
@Felülbírálás
nyilvánosüres fuss() { 
 GasPriceController vezérlő = új GasPriceController(); 
új GasPriceView (vezérlő); 
 }
 });
 }
}

Végrehajtása a App A fenti osztály a következő felhasználói felületet hozza létre:

A felhasználói felület megfelelő adatokkal való feltöltése a következő felugró felhasználói felületet generálja:

Ha megnézi a fenti kép bal oldalát, látni fogja, hogy az alkalmazás létrehozott egy új fájlt is "data.dat." Tehát ez az MVC alkalmazás adatokat gyűjt a felhasználótól egy UI-n (View) keresztül, amely elküldi ezeket az adatokat a Vezérlő. A vezérlő néhány számítás elvégzésével manipulálja az adatokat, majd ezeket az adatokat a Modell segítségével egy fájlban tárolja. Összefüggő: Java bemenet és kimenet: Útmutató kezdőknek

Java bemenet és kimenet: Útmutató kezdőknek

Ha alaposan megnézi az ebben a cikkben létrehozott alkalmazást, számos nyilvánvaló előnye van. Néhány ilyen előny a következőket tartalmazza:

• Méretezhetőség
• Könnyebb kódtesztelés
• Tömörebb kód létrehozása

De az MVC architektúra nem az egyetlen hasznos tervezési minta, amely javíthatja a fejlesztési folyamatot.

Újrafelhasználható kód létrehozása JavaScriptben tervezési minták használatával

A tervezési minták használatának megértése lehetővé teszi az újrafelhasználható kód használatát a JavaScriptben. Íme, amit tudnod kell.

Olvassa el a következőt

A szerzőről