O introducere în arhitectura MVC: exemple explicate

Arhitectura Model-View-Controller (MVC) este unul dintre cele mai populare modele de dezvoltare software. Logica din spatele arhitecturii MVC utilizează principiul de proiectare al separării preocupărilor. Acest principiu urmărește separarea unei cereri în secțiuni raionale, în care fiecare secțiune abordează o problemă specifică și separată.

Arhitectura MVC urmează principiul separării preocupărilor la litera. De fapt, fiecare literă din acronimul MVC reprezintă o secțiune esențială a aplicației dvs. Acest articol explorează fiecare secțiune a arhitecturii MVC în detaliu și vă arată cum să le utilizați pentru a dezvolta software.

Care este modelul?

Modelul arhitecturii MVC este o componentă principală a modelului de proiectare. Acest lucru se datorează faptului că modelul aplicației dvs. stochează logica datelor. Modelul dictează modul în care vă stocați și recuperați datele.

Pentru o aplicație care utilizează arhitectura controlerului MVC, datele sunt o componentă esențială a funcționării acesteia.

Care este vederea?

Vizualizarea arhitecturii MVC este interfața cu utilizatorul (UI) a aplicației dvs. Interfața de utilizare este ceea ce un utilizator vede pe dispozitivul său atunci când interacționează cu programul dvs. Starea vizualizării se bazează pe datele stocate folosind modelul.

Ce este controlerul?

Vă puteți gândi la controler ca la o punte între componentele Model și View.

Atunci când un utilizator furnizează date prin interfața dumneavoastră cu utilizatorul (Vizualizarea), vizualizarea transmite acele date către Controlor. Controlorul folosește acele date pentru a actualiza baza de date (prin Model). Controller-ul extrage, de asemenea, date din baza de date (prin Model) și le returnează în vizualizare.

Pe lângă faptul că este un canal de date, controlerul este și creierul operațiunii. Acesta decide ce operațiune să efectueze pe ce date și ce date să revină la UI.

Cum se adună totul?

Arhitectura MVC creează o buclă semi-închisă care se bazează pe toate componentele pentru a funcționa corespunzător. Următoarea ilustrație demonstrează cum funcționează arhitectura MVC.

După cum puteți vedea din ilustrația de mai sus, aplicația MVC primește o intrare inițială de date de la un utilizator prin interfața de utilizare. Apoi, aplicația trece acele date prin diferitele componente ale arhitecturii MVC și, în unele cazuri, manipulează acele date în componenta Controller.

Aplicarea arhitecturii MVC

Să presupunem că dezvoltați o aplicație pentru o benzinărie care dorește să creeze o înregistrare a tuturor gazelor vândute la stație și să îi ajute pe însoțitorii de benzină cu calcularea prețului. Folosind arhitectura MVC, veți începe cu Modelul, apoi veți trece la Controller și, după ce v-ați dat seama de toată logica aplicației dvs., puteți implementa View.

Când creați un model pentru aplicația dvs., va trebui să știți ce tip de date doriți să stocați, cum doriți să stocați acele date și cât de accesibile doriți să fie acele date.

Crearea modelului de aplicație

//Biblioteca Java
import java.io. Serializabil;
publicclasă GasPriceModel unelte Serializabil{
 //attributes
privatstaticfinallungserialVersionUID = 1L;
privat String driverName;
privatpluti gaz Cantitate;
privat String gasType;
privatpluti cost;
// constructor implicit
public GasPriceModel() {
acest.driverName = "";
acest.gasAmount = 0,00f;
acest.gasType = "";
acest.cost = 0,00f;
 }
 //constructori primari
public GasPriceModel (String driverName, pluti gazAmount, String gasType, pluti cost) {
acest.driverName = driverName;
acest.gasAmount = gazAmount;
acest.gasType = gasType;
acest.cost = cost;
 }
 //getters și setters care preiau și manipulează date
public String getDriverName() {
întoarcere driverName;
 }
publicvid setDriverName (String driverName) {
acest.driverName = driverName;
 }
publicpluti getGasAmount() {
întoarcere gaz Cantitate;
 }
publicvid setGasAmount(pluti gazAmount) {
acest.gasAmount = gazAmount;
 }
public String getGasType() {
întoarcere gazType;
 }
publicvid setGasType (String gasType) {
acest.gasType = gasType;
 }
publicpluti getCost() {
întoarcere cost;
 }
publicvid setCost(pluti cost) {
acest.cost = cost;
 }
}

Există câteva lucruri importante de identificat în codul de model de mai sus. Primul este că implementează interfața Serializable. Această interfață vă permite să salvați starea fiecărui obiect creat folosind GasPriceModel clasa prin conversia acesteia într-un flux de octeți. Implementarea interfeței Serializable înseamnă că trebuie să creați și un ID de versiune, ceea ce face primul atribut din clasa de mai sus.

Legate de: Aflați cum să creați clase în Java Celelalte patru atribute din GasPriceModel clasa sunt la fel de importante, deoarece vă spun cine va accesa datele pe care le va crea acest model. De asemenea, vă spune ce tip de date va stoca modelul (șiruri și floats).

Crearea controlerului de aplicație

//Biblioteci Java
import java.io. Fişier;
import java.io. FileNotFoundException;
import java.io. FileOutputStream;
import java.io. IOException;
import java.io. ObjectOutputStream;
publicclasă GasPriceController {
 //calculează costul gazului unui client și îl returnează
publicpluti calculateCost(pluti cantitate, String gasType){
pluti cost = 0,00f;
finalpluti motorinăPreț = 4.925f;
finalpluti premiumPrice = 5.002f;
finalpluti RegularPrice = 4.680f;
dacă (gasType == „Diesel”)
 cost = suma * motorinaPret;
dacă (gasType == „Premium”)
 cost = suma * premiumPret;
dacă (gasType == „Obișnuit”)
 cost = suma * regularPrice;
întoarcere cost;
 }
//salvează datele de la fiecare vânzare într-un fișier folosind modelul
publicboolean saveEntry (date GasPriceModel){
încerca {
FileOutputStream fs = nou FileOutputStream(nou Fișier ("data.dat"), Adevărat);
 ObjectOutputStream os = nou ObjectOutputStream (fs);
 os.writeObject (date);
 os.flush();
 os.close();
întoarcereAdevărat;
 } captură (FileNotFoundException e) {
 e.printStackTrace();
 } captură (IOException e) {
 e.printStackTrace();
 }
întoarcerefals;
 }
}

Controllerul de mai sus face două lucruri, efectuează un calcul pe datele primite din vizualizare și decide ce date să returneze. Controlerul de mai sus folosește, de asemenea, modelul de aplicație pentru a stoca obiectele create din intrarea vizualizării, folosind saveEntry() metodă.

Crearea vizualizării aplicației

//Biblioteci Java
import java.awt. BorderLayout;
import 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;
clasa publică GasPriceView extinde JFrame implementează ActionListener {
//attributes
 privat static final lung serialVersionUID = 1L;
 controler privat GasPriceController;
 private JLabel driverName;
 private JTextField nameField;
 privat JLabel gazAmount;
 private JTextField amountField;
 privat JLabel gasType;
 JComboBox privat tipCombo;
 JButton privat btnClear;
 JButton privat btnSave;
 privat static final String[] tip =
 {„Diesel”, „Premium”, „Regular”};
// constructor implicit
 public GasPriceView() {
 aceasta (nou GasPriceController());
 }
//constructorul primar care cauzează interfața de utilizare
 public GasPriceView (controler GasPriceController) {
super(„Aplicație de vânzare a gazelor”);
 setDefaultCloseOperation (JFrame. EXIT_ON_CLOSE);
 setSize (400.500);
 setVisible (adevărat);
this.controller = controler;
configureView();
 }
//generează interfața de utilizare pentru aplicație
 private void configureView() {
setLayout (nou BorderLayout());
 JPanel pnl = nou JPanel (nou GridLayout (4,2,2,2));
driverName = new JLabel ("Numele șoferului:");
 pnl.add (nume driver);
 nameField = new JTextField();
 pnl.add (nameField);
 gazAmount = new JLabel ("Cantitatea de gaz (galoane):");
 pnl.add (gazAmount);
 amountField = nou JTextField();
 pnl.add (amountField);
 gasType = new JLabel ("Tipul de gaz:");
 pnl.add (gasType);
 typeCombo = JComboBox nou(tip);
 pnl.add (typeCombo);
 btnClear = new JButton ("Șterge");
 pnl.add (btnClear);
 btnSave = new JButton ("Salvare");
 pnl.add (btnSave );
adăugați (pnl, BorderLayout. CENTRU);
ActionListener();
}
 //ascultă apăsarea unuia dintre cele două butoane
 public void ActionListener() {
 btnClear.addActionListener (acest lucru);
btnSave.addActionListener (acest lucru);
 }
//efectuează o acțiune dacă se face clic pe un anumit buton
 @Trece peste
 public void actionPerformed (ActionEvent ev) {
dacă (ev.getSource().equals (btnClear)) {
 nameField.setText("");
 amountField.setText("");
 }
dacă (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 +" ar trebui să plătească $" + driverTotal );
Client GasPriceModel = nou GasPriceModel (driverName, gasAmount, gasType, driverTotal);
controller.saveEntry (client);
 }
}
}

Vizualizarea de mai sus creează o interfață cu utilizatorul folosind configureView() metodă. Apoi colectează date după ce are loc un eveniment (prin intermediul unui ascultător de acțiuni). Vizualizarea de mai sus trimite apoi datele colectate către Controller, care apoi efectuează unele calcule și returnează datele către View.

Executarea aplicației MVC

import java.awt. EventQueue;
publicclasă Aplicația {
publicstaticvid principal (Argumente șir[]) {
 EventQueue.invokeLater(
nou Rulabil() {
@Trece peste
publicvid alerga() { 
 Controler GasPriceController = nou GasPriceController(); 
nou GasPriceView (controler); 
 }
 });
 }
}

Executarea App clasa de mai sus va genera următoarea interfață de utilizare:

Popularea interfeței de utilizare cu datele relevante va genera următoarea interfață de utilizare pop-up:

Dacă te uiți la stânga imaginii de mai sus, vei vedea că aplicația a creat și un nou fișier numit „data.dat.” Deci, această aplicație MVC colectează date de la un utilizator printr-o interfață de utilizare (View), care trimite acele date către Controlor. Controlorul manipulează datele efectuând unele calcule, apoi stochează acele date într-un fișier folosind Modelul. Legate de: Intrare și ieșire Java: Ghid pentru începători

Intrare și ieșire Java: Ghid pentru începători

Dacă aruncați o privire atentă la aplicația creată în acest articol, există mai multe beneficii aparente. Unele dintre aceste beneficii includ:

• Scalabilitate
• Testarea codului mai ușoară
• Crearea unui cod mai concis

Dar arhitectura MVC nu este singurul model de design util care vă poate îmbunătăți procesul de dezvoltare.

Cum se creează cod reutilizabil în JavaScript utilizând modele de design

Înțelegerea modului de utilizare a modelelor de design vă va permite să utilizați cod reutilizabil în JavaScript. Iată ce trebuie să știți.

Citiți în continuare

Despre autor