Úvod do architektúry MVC: Vysvetlenie príkladov

Architektúra Model-View-Controller (MVC) je jedným z najpopulárnejších modelov vývoja softvéru. Logika architektúry MVC využíva princíp dizajnu oddelenia záujmov. Tento princíp má za cieľ rozdeliť aplikáciu do okresných sekcií, kde každá sekcia rieši špecifickú a samostatnú problematiku.

Architektúra MVC do bodky dodržiava princíp oddelenia záujmov. V skutočnosti každé písmeno v skratke MVC predstavuje základnú časť vašej aplikácie. Tento článok podrobne skúma každú časť architektúry MVC a ukazuje vám, ako ich použiť na vývoj softvéru.

čo je model?

Model architektúry MVC je hlavnou súčasťou návrhového vzoru. Je to preto, že model vašej aplikácie ukladá dátovú logiku. Model určuje, ako budete ukladať a získavať svoje údaje.

Pre aplikáciu, ktorá využíva architektúru radiča MVC, sú dáta základnou súčasťou jej fungovania.

Aký je pohľad?

Pohľad architektúry MVC je používateľské rozhranie (UI) vašej aplikácie. Používateľské rozhranie je to, čo používateľ vidí na svojom zariadení pri interakcii s vaším programom. Stav zobrazenia závisí od údajov uložených pomocou modelu.

Čo je to ovládač?

Ovládač si môžete predstaviť ako most medzi komponentmi Model a View.

Keď používateľ dodá údaje cez vaše používateľské rozhranie (Zobrazenie), Pohľad odovzdá tieto údaje Kontrolórovi. Správca používa tieto údaje na aktualizáciu databázy (prostredníctvom modelu). Kontrolér tiež stiahne údaje z databázy (cez model) a vráti ich do zobrazenia.

Okrem toho, že je ovládač dátovým kanálom, je aj mozgom operácie. Rozhoduje, akú operáciu vykonať s akými údajmi a aké údaje vrátiť do používateľského rozhrania.

Ako sa to všetko spája?

Architektúra MVC vytvára polouzatvorenú slučku, ktorá sa spolieha na správne fungovanie všetkých komponentov. Nasledujúci obrázok ukazuje, ako funguje architektúra MVC.

Ako môžete vidieť na obrázku vyššie, aplikácia MVC prijíma počiatočný vstup údajov od používateľa prostredníctvom používateľského rozhrania. Potom aplikácia prenesie tieto údaje cez rôzne komponenty architektúry MVC a v niektorých prípadoch s týmito údajmi manipuluje v komponente Controller.

Aplikácia architektúry MVC

Povedzme, že vyvíjate aplikáciu pre čerpaciu stanicu, ktorá chce vytvoriť evidenciu všetkého predaného plynu na čerpacej stanici a pomôcť obsluhe plynu s výpočtom ceny. Použitím architektúry MVC by ste začali s modelom, potom prešli k ovládaču a potom, čo ste prišli na všetku logiku vašej aplikácie, môžete implementovať zobrazenie.

Pri vytváraní modelu pre vašu aplikáciu musíte vedieť, aký typ údajov chcete uložiť, ako chcete tieto údaje uložiť a ako prístupné chcete, aby tieto údaje boli.

Vytvorenie modelu aplikácie

//Java knižnica
importovať java.io. Serializovateľné;
verejnostitrieda GasPriceModel náradia Serializovateľné{
 //attributes
súkromnéstatickéfinálnydlhýserialVersionUID = 1 1;
súkromné String driverName;
súkromnéplavák množstvo plynu;
súkromné String gasType;
súkromnéplavák náklady;
// predvolený konštruktor
verejnosti GasPriceModel() {
toto.driverName = "";
toto.plynSuma = 0,00f;
toto.gasType = "";
toto.náklady = 0,00f;
 }
 //primárne konštruktory
verejnosti GasPriceModel (String driverName, plavák gasAmount, String gasType, plavák cena) {
toto.driverName = názov vodiča;
toto.plynAmount = gasAmount;
toto.gasType = gasType;
toto.náklady = náklady;
 }
 //getery a nastavovače, ktoré získavajú údaje a manipulujú s nimi
verejnosti Reťazec getDriverName() {
vrátiť meno vodiča;
 }
verejnostineplatné setDriverName (String driverName) {
toto.driverName = názov vodiča;
 }
verejnostiplavák getGasAmount() {
vrátiť množstvo plynu;
 }
verejnostineplatné setGasAmount(plavák množstvo plynu) {
toto.plynAmount = gasAmount;
 }
verejnosti String getGasType() {
vrátiť gasType;
 }
verejnostineplatné setGasType (String gasType) {
toto.gasType = gasType;
 }
verejnostiplavák getCost() {
vrátiť náklady;
 }
verejnostineplatné setCost(plavák cena) {
toto.náklady = náklady;
 }
}

V kóde modelu vyššie je potrebné identifikovať niekoľko dôležitých vecí. Prvým je, že implementuje serializovateľné rozhranie. Toto rozhranie vám umožňuje uložiť stav každého objektu vytvoreného pomocou GasPriceModel triedy jej konverziou na bajtový prúd. Implementácia rozhrania Serializable znamená, že musíte tiež vytvoriť ID verzie, čo robí prvý atribút v triede vyššie.

Súvisiace: Zistite, ako vytvoriť triedy v jazyku Java Ďalšie štyri atribúty v GasPriceModel triedy sú rovnako dôležité, pretože vám povedia, kto bude mať prístup k údajom, ktoré tento model vytvorí. Tiež vám povie, aký typ údajov bude model uchovávať (reťazce a plávajúce objekty).

Vytvorenie aplikačného ovládača

//Java Knižnice
importovať java.io. Súbor;
importovať java.io. FileNotFoundException;
importovať java.io. FileOutputStream;
importovať java.io. IOException;
importovať java.io. ObjectOutputStream;
verejnostitrieda GasPriceController {
 //vypočíta cenu plynu odberateľa a vráti ho
verejnostiplavák vypočítaťCost(plavák množstvo, String gasType){
plavák náklady = 0,00f;
finálnyplavák dieselCena = 4,925f;
finálnyplavák premiumPrice = 5,002f;
finálnyplavák bežná cena = 4,680f;
ak (gasType == "Diesel")
 cena = množstvo * cena nafty;
ak (gasType == "Premium")
 cena = suma * prémiaCena;
ak (gasType == "Regular")
 cena = suma * bežná cena;
vrátiť náklady;
 }
//uloží údaje z každého predaja do súboru pomocou modelu
verejnostiboolovská hodnota saveEntry (údaje modelu GasPriceModel){
skúste {
FileOutputStream fs = Nový FileOutputStream(Nový Súbor("data.dat"), pravda);
 ObjectOutputStream os = Nový ObjectOutputStream (fs);
 os.writeObject (údaje);
 os.flush();
 os.close();
vrátiťpravda;
 } chytiť (FileNotFoundException e) {
 e.printStackTrace();
 } chytiť (IOException e) {
 e.printStackTrace();
 }
vrátiťfalošné;
 }
}

Vyššie uvedený ovládač robí dve veci, vykonáva výpočet údajov prijatých zo zobrazenia a rozhoduje o tom, ktoré údaje sa majú vrátiť. Vyššie uvedený ovládač tiež používa model aplikácie na ukladanie objektov vytvorených zo vstupu zobrazenia pomocou saveEntry() metóda.

Vytvorenie zobrazenia aplikácie

//Java knižnice
importovať java.awt. BorderLayout;
importovať java.awt. GridLayout;
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 GasPriceView rozširuje JFrame implementuje ActionListener {
//attributes
 private static final long serialVersionUID = 1L;
 súkromný ovládač GasPriceController;
 súkromný názov ovládača JLabel;
 private JTextField nameField;
 súkromný JLabel plynMnožstvo;
 súkromné ​​JTextField množstvoPole;
 súkromný typ plynu JLabel;
 súkromný JComboBox typeCombo;
 private JButton btnClear;
 private JButton btnSave;
 private static final String[] typ =
 {"Diesel", "Premium", "Bežný"};
//predvolený konštruktor
 public GasPriceView() {
 toto (nový GasPriceController());
 }
//primárny konštruktor, ktorý spôsobuje používateľské rozhranie
 public GasPriceView (ovládač GasPriceController) {
super("Žiadosť o predaj plynu");
 setDefaultCloseOperation (JFrame. EXIT_ON_CLOSE);
 setSize (400 500);
 setVisible (pravda);
this.controller = kontrolór;
configureView();
 }
//vygenerovanie používateľského rozhrania pre aplikáciu
 private void configureView() {
setLayout (new BorderLayout());
 JPanel pnl = nový JPanel (nový GridLayout (4,2,2,2));
driverName = new JLabel("Meno drivera:");
 pnl.add (meno ovládača);
 nameField = new JTextField();
 pnl.add (menoPole);
 gasAmount = new JLabel("Množstvo plynu (galón):");
 pnl.add (gasAmount);
 množstvopole = new JTextField();
 pnl.add (amountField);
 gasType = new JLabel("Typ plynu:");
 pnl.add (gasType);
 typeCombo = nový JComboBox(typ);
 pnl.add (typeCombo);
 btnClear = new JButton("Clear");
 pnl.add (btnClear);
 btnSave = new JButton("Uložiť");
 pnl.add (btnSave);
pridať (pnl, BorderLayout. CENTRUM);
ActionListener();
}
 //počúva kliknutie na jedno z dvoch tlačidiel
 public void ActionListener() {
 btnClear.addActionListener (toto);
btnSave.addActionListener (toto);
 }
//po kliknutí na konkrétne tlačidlo vykoná akciu
 @Prepísať
 public void actionPerformed (ActionEvent ev) {
if (ev.getSource().equals (btnClear)) {
 nameField.setText("");
 sumaField.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 = nameField.getText();
 JOptionPane.showMessageDialog (null, driverName +" by mal platiť $" + driverTotal );
GasPriceModel zákazník = nový GasPriceModel (meno vodiča, množstvo plynu, typ plynu, celkom);
controller.saveEntry (zákazník);
 }
}
}

Zobrazenie vyššie vytvára používateľské rozhranie pomocou configureView() metóda. Potom zhromažďuje údaje po výskyte udalosti (prostredníctvom prijímača akcií). Zobrazenie vyššie potom odošle zozbierané údaje do kontroléra, ktorý potom vykoná nejaké výpočty a vráti údaje do zobrazenia.

Spustenie aplikácie MVC

importovať java.awt. EventQueue;
verejnostitrieda Aplikácia {
verejnostistatickéneplatné main (String args[]) {
 EventQueue.invokeNeskôr(
Nový Runnable() {
@Prepísať
verejnostineplatné spustiť() { 
 Ovládač GasPriceController = Nový GasPriceController(); 
Nový GasPriceView (ovládač); 
 }
 });
 }
}

Vykonanie App trieda vyššie vygeneruje nasledujúce používateľské rozhranie:

Vyplnenie používateľského rozhrania relevantnými údajmi vygeneruje nasledujúce kontextové používateľské rozhranie:

Ak sa pozriete na ľavú časť obrázku vyššie, uvidíte, že aplikácia vytvorila aj nový súbor s názvom "data.dat." Táto aplikácia MVC teda zhromažďuje údaje od používateľa prostredníctvom používateľského rozhrania (View), ktoré tieto údaje odosiela do Ovládač. Kontrolér manipuluje s údajmi vykonaním niektorých výpočtov a potom tieto údaje uloží do súboru pomocou modelu. Súvisiace: Vstup a výstup Java: Príručka pre začiatočníkov

Vstup a výstup Java: Príručka pre začiatočníkov

Ak sa bližšie pozriete na aplikáciu vytvorenú v tomto článku, existuje niekoľko zjavných výhod. Niektoré z týchto výhod zahŕňajú:

• Škálovateľnosť
• Jednoduchšie testovanie kódu
• Vytvorenie stručnejšieho kódu

Architektúra MVC však nie je jediným užitočným návrhovým vzorom, ktorý môže zlepšiť váš vývojový proces.

Ako vytvoriť opakovane použiteľný kód v JavaScripte pomocou návrhových vzorov

Pochopenie toho, ako používať dizajnové vzory, vám umožní používať opakovane použiteľný kód v JavaScripte. Tu je to, čo potrebujete vedieť.

Prečítajte si ďalej

O autorovi