Wprowadzenie do architektury MVC: objaśnione przykłady

Architektura Model-View-Controller (MVC) jest jednym z najpopularniejszych wzorców tworzenia oprogramowania. Logika architektury MVC wykorzystuje zasadę projektowania separacji obaw. Zasada ta ma na celu rozdzielenie wniosku na sekcje okręgowe, z których każda dotyczy konkretnego i odrębnego zagadnienia.

Architektura MVC jest zgodna z zasadą rozdziału obaw co do joty. W rzeczywistości każda litera w akronimie MVC reprezentuje istotną sekcję Twojej aplikacji. W tym artykule szczegółowo omówiono każdą sekcję architektury MVC i pokazano, jak używać ich do tworzenia oprogramowania.

Jaki jest model?

Model architektury MVC jest głównym składnikiem wzorca projektowego. Dzieje się tak, ponieważ model aplikacji przechowuje logikę danych. Model dyktuje sposób przechowywania i pobierania danych.

Dla aplikacji wykorzystującej architekturę kontrolera MVC dane są istotnym elementem jej działania.

Jaki jest widok?

Widok architektury MVC to interfejs użytkownika (UI) aplikacji. Interfejs użytkownika to to, co użytkownik widzi na swoim urządzeniu, gdy wchodzi w interakcję z Twoim programem. Stan widoku opiera się na danych przechowywanych przy użyciu modelu.

Co to jest kontroler?

Możesz myśleć o kontrolerze jako o pomoście między komponentami Model i View.

Gdy użytkownik dostarcza dane za pośrednictwem interfejsu użytkownika (widoku), widok przekazuje te dane do kontrolera. Administrator wykorzystuje te dane do aktualizacji bazy danych (poprzez Model). Kontroler pobiera również dane z bazy danych (za pośrednictwem modelu) i zwraca je do widoku.

Oprócz tego, że jest kanałem danych, Kontroler jest również mózgiem operacji. Decyduje, jaką operację przeprowadzić na jakich danych i jakie dane zwrócić do interfejsu użytkownika.

Jak to wszystko się łączy?

Architektura MVC tworzy półzamkniętą pętlę, która do prawidłowego funkcjonowania opiera się na wszystkich komponentach. Na poniższej ilustracji pokazano, jak działa architektura MVC.

Jak widać na powyższej ilustracji, aplikacja MVC otrzymuje wstępne dane wejściowe od użytkownika za pośrednictwem interfejsu użytkownika. Następnie aplikacja przekazuje te dane przez różne komponenty architektury MVC, aw niektórych przypadkach manipuluje tymi danymi w komponencie Controller.

Stosowanie architektury MVC

Załóżmy, że tworzysz aplikację dla stacji benzynowej, która chce utworzyć rejestr całego gazu sprzedanego na stacji i pomóc operatorom w kalkulacji ceny. Korzystając z architektury MVC, możesz zacząć od modelu, następnie przejść do kontrolera, a po rozpracowaniu całej logiki aplikacji możesz zaimplementować widok.

Tworząc model dla swojej aplikacji, musisz wiedzieć, jaki typ danych chcesz przechowywać, jak chcesz przechowywać te dane i jak dostępne są te dane.

Tworzenie modelu aplikacji

//Biblioteka Javy
import java.io. serializowalny;
publicznyklasa Model ceny gazu przybory Możliwość serializacji{
 //attributes
prywatnystatycznyfinałdługoSerialVersionUID = 1L;
prywatny Ciąg nazwa_sterownika;
prywatnyPlatforma ilość gazu;
prywatny Typ gazu łańcuchowego;
prywatnyPlatforma koszt;
// domyślny konstruktor
publiczny ModelCenyGazowej() {
ten.nazwa_sterownika = "";
ten.gasAmount = 0,00f;
ten.gasType = "";
ten.koszt = 0,00f;
 }
 //konstruktory podstawowe
publiczny GasPriceModel (String driverName, Platforma gasAmount, String gasType, Platforma koszt) {
ten.nazwa_sterownika = nazwa_sterownika;
ten.gasAmount = gasAmount;
ten.gasType = gasType;
ten.koszt = koszt;
 }
 //gettery i settery pobierające i manipulujące danymi
publiczny Ciąg pobierzNazwęSterownika() {
powrót imię kierowcy;
 }
publicznypróżnia setDriverName (String nazwa_sterownika) {
ten.nazwa_sterownika = nazwa_sterownika;
 }
publicznyPlatforma pobierzKwotęGazy() {
powrót ilość gazu;
 }
publicznypróżnia ustawilośćgazu(Platforma ilość gazu) {
ten.gasAmount = gasAmount;
 }
publiczny Ciąg pobierzGasType() {
powrót rodzaj gazu;
 }
publicznypróżnia setGasType (String gasType) {
ten.gasType = gasType;
 }
publicznyPlatforma pobierz koszt() {
powrót koszt;
 }
publicznypróżnia ustaw koszt(Platforma koszt) {
ten.koszt = koszt;
 }
}

Jest kilka ważnych rzeczy do zidentyfikowania w powyższym kodzie modelu. Po pierwsze, implementuje interfejs Serializable. Ten interfejs umożliwia zapisanie stanu każdego obiektu utworzonego za pomocą Model ceny gazu klasy, konwertując ją na strumień bajtów. Implementacja interfejsu Serializable oznacza, że ​​musisz również utworzyć identyfikator wersji, co robi pierwszy atrybut w powyższej klasie.

Związane z: Dowiedz się, jak tworzyć klasy w Javie Pozostałe cztery atrybuty w Model ceny gazu klasy są równie ważne, ponieważ mówią ci, kto będzie miał dostęp do danych, które utworzy ten model. Informuje również, jaki typ danych będzie przechowywany przez model (ciągi i zmiennoprzecinkowe).

Tworzenie kontrolera aplikacji

//Biblioteki Java
import java.io. Plik;
import java.io. FileNotFoundException;
import java.io. FileOutputStream;
import java.io. IOWyjątek;
import java.io. ObjectOutputStream;
publicznyklasa Kontroler CenGazowych {
 //oblicza koszt gazu klienta i zwraca go
publicznyPlatforma obliczKoszt(Platforma ilość, string gasType){
Platforma koszt = 0,00f;
finałPlatforma cena oleju napędowego = 4,925f;
finałPlatforma cena premium = 5.002f;
finałPlatforma cena regularna = 4.680f;
Jeśli (Typ gazu == "Diesel")
 koszt = ilość * cena oleju napędowego;
Jeśli (Typ gazu == "Premium")
 koszt = kwota * premiumPrice;
Jeśli (Typ gazu == "Zwykły")
 koszt = kwota * normalna cena;
powrót koszt;
 }
//zapisuje dane z każdej sprzedaży do pliku za pomocą modelu
publicznylogiczne saveEntry (dane modelu ceny gazu){
próbować {
FileOutputStream fs = Nowy Strumień wyjściowy pliku (Nowy Plik("dane.dat"), prawda);
 System ObjectOutputStream = Nowy ObjectOutputStream (fs);
 os.writeObject (dane);
 os.flush();
 os.zamknij();
powrótprawda;
 } łapać (FileNotFoundException e) {
 e.printStackTrace();
 } łapać (IOWyjątek e) {
 e.printStackTrace();
 }
powrótfałszywy;
 }
}

Powyższy kontroler robi dwie rzeczy, wykonuje obliczenia na danych otrzymanych z widoku i decyduje, jakie dane zwrócić. Powyższy kontroler używa również modelu aplikacji do przechowywania obiektów utworzonych z danych wejściowych widoku, używając zapiszWpis() metoda.

Tworzenie widoku aplikacji

//Biblioteki Java
import java.awt. Układ obramowania;
import java.awt. Układ siatki;
importuj java.awt.event. AkcjaZdarzenie;
importuj java.awt.event. Odbiornik akcji;
importować javax.swing. JPrzycisk;
importować javax.swing. JComboBox;
importować javax.swing. JFrame;
importować javax.swing. J Etykieta;
importować javax.swing. JOptionPane;
importować javax.swing. JPanel;
importować javax.swing. JTextField;
public class GasPriceView rozszerza JFrame implementuje ActionListener {
//attributes
 prywatny statyczny końcowy długi serialVersionUID = 1L;
 prywatny kontroler GasPriceController;
 prywatna nazwa_sterownika JLabel;
 prywatne JTextField nameField;
 prywatny JLabel gasAmount;
 prywatne JTextField kwotaField;
 prywatny JLabel gasType;
 prywatny JComboBox typKombo;
 prywatny JButton btnClear;
 prywatny JButton btnSave;
 prywatny statyczny końcowy String[] type =
 {"Diesel", "Premium", "Zwykły"};
//domyślny konstruktor
 public GasPriceView() {
 to (nowy GasPriceController());
 }
//główny konstruktor, który powoduje interfejs użytkownika
 public GasPriceView (kontroler GasPriceController) {
super("Aplikacja sprzedaży gazu");
 setDefaultCloseOperation (JFrame. EXIT_ON_CLOSE);
 setSize (400 500);
 setVisible (prawda);
this.controller = kontroler;
configureView();
 }
//wygeneruj interfejs użytkownika dla aplikacji
 private void configureView() {
setLayout (nowa BorderLayout());
 JPanel pnl = nowy JPanel (nowy GridLayout (4,2,2,2));
driverName = new JLabel("Nazwa kierowcy:");
 pnl.add (nazwa_sterownika);
 nameField = nowy JTextField();
 pnl.add (nazwaPole);
 gasAmount = new JLabel("Ilość gazu (galon):");
 pnl.add (kwota gazu);
 KwotaField = nowy JTextField();
 pnl.add (pole_kwoty);
 gasType = new JLabel("Typ gazu:");
 pnl.add (rodzaj gazu);
 typeCombo = nowy JComboBox(rodzaj);
 pnl.add (typ Combo);
 btnClear = new JButton("Wyczyść");
 pnl.add (btnClear);
 btnSave = nowy JButton("Zapisz");
 pnl.add (btnSave );
dodaj (pnl, BorderLayout. ŚRODEK);
OdbiornikAkcji();
}
 //nasłuchuje kliknięcia jednego z dwóch przycisków
 public void OdbiornikAkcji() {
 btnClear.addActionListener (to);
btnSave.addActionListener (to);
 }
// wykonuje akcję po kliknięciu określonego przycisku
 @Nadpisanie
 Wykonano publiczną akcję void (ActionEvent ev) {
if (ev.getSource().equals (btnClear)) {
 nameField.setText("");
 kwotaPole.setTekst("");
 }
if (ev.getSource().equals (btnSave)){
String gasType = (String) typeCombo.getSelectedItem();
 float gasAmount = Float.parseFloat (amountField.getText());
 float driverTotal = controller.calculateCost (gasAmount, gasType);
 String nazwa_sterownika = nazwaField.getText();
 JOptionPane.showMessageDialog (null, nazwa_sterownika + "powinna zapłacić $" + driverTotal );
Klient GasPriceModel = new GasPriceModel (nazwa_kierowcy, kwota gazu, typ_gazu, suma_sterownika);
controller.saveEntry (klient);
 }
}
}

Powyższy widok tworzy interfejs użytkownika za pomocą configureView() metoda. Następnie zbiera dane po wystąpieniu zdarzenia (poprzez detektor akcji). Powyższy Widok następnie przesyła zebrane dane do Kontrolera, który następnie wykonuje pewne obliczenia i zwraca dane do Widoku.

Wykonywanie aplikacji MVC

import java.awt. Kolejka zdarzeń;
publicznyklasa Aplikacja {
publicznystatycznypróżnia main (argumenty ciągu[]) {
 Kolejka zdarzeń.wywołaj później(
Nowy Uruchomiony () {
@Nadpisanie
publicznypróżnia uruchomić() { 
 Kontroler GasPriceController = Nowy KontrolerCenyGazów(); 
Nowy GasPriceView (kontroler); 
 }
 });
 }
}

Wykonanie Aplikacja powyższa klasa wygeneruje następujący interfejs użytkownika:

Wypełnienie interfejsu użytkownika odpowiednimi danymi spowoduje wygenerowanie następującego wyskakującego interfejsu użytkownika:

Jeśli spojrzysz na lewą stronę powyższego obrazu, zobaczysz, że aplikacja utworzyła również nowy plik o nazwie „dane.dat.” Tak więc ta aplikacja MVC zbiera dane od użytkownika za pośrednictwem interfejsu użytkownika (widok), który wysyła te dane do Kontroler. Kontroler manipuluje danymi wykonując pewne obliczenia, a następnie przechowuje te dane w pliku za pomocą Modelu. Związane z: Wejście i wyjście Java: przewodnik dla początkujących

Wejście i wyjście Java: przewodnik dla początkujących

Jeśli przyjrzysz się bliżej aplikacji stworzonej w tym artykule, istnieje kilka oczywistych korzyści. Niektóre z tych korzyści obejmują:

• Skalowalność
• Łatwiejsze testowanie kodu
• Stworzenie bardziej zwięzłego kodu

Ale architektura MVC nie jest jedynym użytecznym wzorcem projektowym, który może usprawnić proces rozwoju.

Jak stworzyć kod wielokrotnego użytku w JavaScript za pomocą wzorców projektowych?

Zrozumienie, jak używać wzorców projektowych, umożliwi Ci używanie kodu wielokrotnego użytku w JavaScript. Oto, co musisz wiedzieć.

Czytaj dalej

O autorze