Uvod u MVC arhitekturu: objašnjeni primjeri

Arhitektura Model-View-Controller (MVC) jedan je od najpopularnijih obrazaca razvoja softvera. Logika koja stoji iza MVC arhitekture koristi princip dizajna odvajanja interesa. Ovo načelo ima za cilj razdvojiti aplikaciju u okružne odjeljke, gdje se svaki odjeljak bavi posebnim i zasebnim problemom.

MVC arhitektura slijedi princip razdvajanja zabrinutosti do slova. Zapravo, svako slovo u MVC akronimu predstavlja bitan dio vaše aplikacije. Ovaj članak detaljno istražuje svaki odjeljak MVC arhitekture i pokazuje vam kako ih koristiti za razvoj softvera.

Što je model?

Model MVC arhitekture glavna je komponenta uzorka dizajna. To je zato što model vaše aplikacije pohranjuje logiku podataka. Model diktira kako pohranjujete i dohvaćate svoje podatke.

Za aplikaciju koja koristi arhitekturu MVC kontrolera, podaci su bitna komponenta njenog rada.

Što je pogled?

Pogled MVC arhitekture je korisničko sučelje (UI) vaše aplikacije. UI je ono što korisnik vidi na svom uređaju kada stupi u interakciju s vašim programom. Stanje Viewa se oslanja na podatke pohranjene pomoću modela.

Što je kontrolor?

Kontroler možete zamisliti kao most između komponenti modela i pogleda.

Kada korisnik dostavi podatke putem vašeg korisničkog sučelja (View), Pogled prosljeđuje te podatke Kontroloru. Kontrolor koristi te podatke za ažuriranje baze podataka (putem modela). Kontrolor također povlači podatke iz baze podataka (kroz model) i vraća ih u prikaz.

Osim što je podatkovni kanal, Controller je također mozak operacije. Odlučuje koju će operaciju provesti na kojim podacima i koje podatke vratiti korisničkom sučelju.

Kako se sve to spaja?

MVC arhitektura stvara polu-zatvorenu petlju koja se oslanja na sve komponente kako bi ispravno funkcionirale. Sljedeća ilustracija pokazuje kako funkcionira MVC arhitektura.

Kao što možete vidjeti iz gornje ilustracije, MVC aplikacija prima početni unos podataka od korisnika kroz korisničko sučelje. Zatim aplikacija prosljeđuje te podatke kroz različite komponente MVC arhitekture i u nekim slučajevima manipulira tim podacima u komponenti Controller.

Primjena MVC arhitekture

Recimo da razvijate aplikaciju za benzinsku crpku koja želi stvoriti evidenciju o svemu prodanom plinu na postaji i pomoći plinarima u izračunu cijene. Koristeći MVC arhitekturu, započeli biste s Modelom, zatim priješli na Controller, a nakon što ste shvatili svu logiku svoje aplikacije, možete implementirati View.

Prilikom izrade modela za svoju aplikaciju, morat ćete znati koju vrstu podataka želite pohraniti, kako želite pohraniti te podatke i koliko želite da ti podaci budu dostupni.

Izrada modela aplikacije

//Java knjižnica
uvoz java.io. Serializable;
javnostrazreda Model cijene plina provodi Može se serijalizirati{
 //attributes
privatnistatičkikonačnidugoserialVersionUID = 1L;
privatni String driverName;
privatniplutati količina plina;
privatni String gasType;
privatniplutati trošak;
// zadani konstruktor
javnost GasPriceModel() {
ovaj.driverName = "";
ovaj.gasAmount = 0,00f;
ovaj.gasType = "";
ovaj.trošak = 0,00f;
 }
 //primarni konstruktori
javnost GasPriceModel (string driverName, plutati gasAmount, String gasType, plutati trošak) {
ovaj.ime vozača = ime vozača;
ovaj.količina plina = količina plina;
ovaj.gasType = gasType;
ovaj.trošak = trošak;
 }
 // getteri i setteri koji dohvaćaju i manipuliraju podacima
javnost String getDriverName() {
povratak ime vozača;
 }
javnostponištiti setDriverName (string driverName) {
ovaj.ime vozača = ime vozača;
 }
javnostplutati getGasAmount() {
povratak količina plina;
 }
javnostponištiti setGasAmount(plutati količina plina) {
ovaj.količina plina = količina plina;
 }
javnost String getGasType() {
povratak gasType;
 }
javnostponištiti setGasType (String gasType) {
ovaj.gasType = gasType;
 }
javnostplutati getCost() {
povratak trošak;
 }
javnostponištiti setCost(plutati trošak) {
ovaj.trošak = trošak;
 }
}

Postoji nekoliko važnih stvari koje treba identificirati u kodu modela iznad. Prvi je da implementira Serializable sučelje. Ovo sučelje omogućuje spremanje stanja svakog objekta kreiranog pomoću Model cijene plina klase pretvaranjem u tok bajtova. Implementacija sučelja Serializable znači da također trebate stvoriti ID verzije, što čini prvi atribut u klasi iznad.

Povezano: Naučite kako stvoriti klase u Javi Ostala četiri atributa u Model cijene plina klase jednako su važne jer vam govore tko će pristupiti podacima koje će ovaj model stvoriti. Također vam govori koju će vrstu podataka model pohraniti (nizove i float).

Izrada aplikacijskog kontrolera

//Java knjižnice
uvoz java.io. Datoteka;
uvoz java.io. FileNotFoundException;
uvoz java.io. FileOutputStream;
uvoz java.io. IOException;
uvoz java.io. ObjectOutputStream;
javnostrazreda GasPriceController {
 //izračunava trošak kupčevog plina i vraća ga
javnostplutati izračunaj trošak(plutati količina, String gasType){
plutati trošak = 0,00f;
konačniplutati dizelCijena = 4,925f;
konačniplutati premiumCijena = 5,002f;
konačniplutati redovnaCijena = 4.680f;
ako (Tip plina == "Diesel")
 trošak = iznos * cijena dizela;
ako (gasType == "Premium")
 trošak = iznos * premijaCijena;
ako (gasType == "Redovno")
 trošak = iznos * redovnaCijena;
povratak trošak;
 }
// sprema podatke iz svake prodaje u datoteku koristeći model
javnostboolean saveEntry (podaci GasPriceModel){
probati {
FileOutputStream fs = novi FileOutputStream(novi Datoteka("data.dat"), pravi);
 ObjectOutputStream os = novi ObjectOutputStream (fs);
 os.writeObject (podaci);
 os.flush();
 os.close();
povratakpravi;
 } ulov (FileNotFoundException e) {
 e.printStackTrace();
 } ulov (IOException e) {
 e.printStackTrace();
 }
povrataklažno;
 }
}

Gornji kontroler radi dvije stvari, izvodi izračun na podacima primljenim iz pogleda i odlučuje koje će podatke vratiti. Gornji kontroler također koristi model aplikacije za pohranjivanje objekata stvorenih iz unosa pogleda, koristeći saveEntry() metoda.

Izrada prikaza aplikacije

//Java knjižnice
uvoz java.awt. BorderLayout;
uvoz 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;
javna klasa GasPriceView proširuje JFrame implementira ActionListener {
//attributes
 privatni statički konačni dugi serialVersionUID = 1L;
 privatni regulator GasPriceController;
 privatni JLabel driverName;
 privatno JTextField nameField;
 privatni JLabel gasAmount;
 privatno JTextField amountField;
 privatni JLabel gasType;
 privatni JComboBox typeCombo;
 privatni JButton btnClear;
 privatni JButton btnSave;
 privatni statički konačni String[] tip =
 {"Diesel", "Premium", "Regular"};
//zadani konstruktor
 javni GasPriceView() {
 ovo (novi GasPriceController());
 }
// primarni konstruktor koji uzrokuje korisničko sučelje
 javni GasPriceView (GasPriceController kontroler) {
super("Prijava za prodaju plina");
 setDefaultCloseOperation (JFrame. EXIT_ON_CLOSE);
 setSize (400.500);
 setVisible (true);
this.controller = kontroler;
configureView();
 }
//generirajte korisničko sučelje za aplikaciju
 privatni void configureView() {
setLayout (novi BorderLayout());
 JPanel pnl = novi JPanel (novi GridLayout (4,2,2,2));
driverName = new JLabel("Ime vozača:");
 pnl.add (ime vozača);
 nameField = novo JTextField();
 pnl.add (nameField);
 gasAmount = new JLabel("Količina plina (galona):");
 pnl.dodaj (količina plina);
 iznosPolje = novo JTextField();
 pnl.add (amountField);
 gasType = new JLabel("Vrsta plina:");
 pnl.add (gasType);
 typeCombo = novi JComboBox(tip);
 pnl.add (typeCombo);
 btnClear = novi JButton("Izbriši");
 pnl.add (btnClear);
 btnSave = novi JButton("Spremi");
 pnl.add (btnSave );
dodaj (pnl, BorderLayout. CENTAR);
ActionListener();
}
 //sluša klik jednog od dva gumba
 public void ActionListener() {
 btnClear.addActionListener (ovo);
btnSave.addActionListener (ovo);
 }
//izvodi radnju ako se klikne na određeni gumb
 @Override
 public void actionPerformed (ActionEvent ev) {
if (ev.getSource().equals (btnClear)) {
 nameField.setText("");
 amountField.setText("");
 }
if (ev.getSource().equals (btnSave)){
String gasType = (String) typeCombo.getSelectedItem();
 float gasAmount = Float.parseFloat (amountField.getText());
 float driverTotal = controller.calculateCost (količina plina, vrsta plina);
 String Ime vozača = nameField.getText();
 JOptionPane.showMessageDialog (null, driverName +" trebao bi platiti $" + driverTotal );
GasPriceModel kupac = novi GasPriceModel (ime vozača, količina plina, vrsta plina, ukupno vozača);
kontroler.saveEntry (kupac);
 }
}
}

Gornji prikaz stvara korisničko sučelje pomoću configureView() metoda. Zatim prikuplja podatke nakon što se događaj dogodi (putem slušatelja radnje). Gornji prikaz zatim šalje prikupljene podatke kontroloru, koji zatim izvodi neke izračune i vraća podatke u prikaz.

Izvršavanje MVC aplikacije

uvoz java.awt. EventQueue;
javnostrazreda aplikacija {
javnoststatičkiponištiti main (String args[]) {
 Red događaja.pozvati Kasnije(
novi Runnable() {
@Override
javnostponištiti trčanje() { 
 Regulator GasPriceController = novi Regulator cijene plina(); 
novi GasPriceView (kontroler); 
 }
 });
 }
}

Izvršavanje App klasa iznad će generirati sljedeće korisničko sučelje:

Popunjavanje korisničkog sučelja relevantnim podacima generirat će sljedeće skočno korisničko sučelje:

Ako pogledate lijevo od gornje slike, vidjet ćete da je aplikacija također kreirala novu datoteku pod nazivom "podaci.podaci." Dakle, ova MVC aplikacija prikuplja podatke od korisnika putem korisničkog sučelja (View), koji te podatke šalje Kontrolor. Kontroler manipulira podacima izvodeći neke izračune, a zatim pohranjuje te podatke u datoteku koristeći Model. Povezano: Java ulaz i izlaz: Vodič za početnike

Java ulaz i izlaz: Vodič za početnike

Ako pomno pogledate aplikaciju stvorenu u ovom članku, postoji nekoliko očitih prednosti. Neke od ovih prednosti uključuju:

• Skalabilnost
• Lakše testiranje koda
• Stvaranje sažetijeg koda

Ali MVC arhitektura nije jedini korisni obrazac dizajna koji može poboljšati vaš razvojni proces.

Kako stvoriti kod za višekratnu upotrebu u JavaScriptu koristeći obrasce dizajna

Razumijevanje kako koristiti obrasce dizajna omogućit će vam korištenje koda za višekratnu upotrebu u JavaScriptu. Evo što trebate znati.

Pročitajte dalje

O autoru