En introduktion til MVC-arkitektur: Eksempler forklaret

Model-View-Controller (MVC)-arkitekturen er et af de mest populære softwareudviklingsmønstre. Logikken bag MVC-arkitektur bruger designprincippet om adskillelse af bekymringer. Dette princip sigter mod at opdele en ansøgning i distriktssektioner, hvor hver sektion behandler et specifikt og separat problem.

MVC-arkitektur følger princippet om adskillelse af bekymringer til punkt og prikke. Faktisk repræsenterer hvert bogstav i MVC-akronymet en væsentlig del af din ansøgning. Denne artikel udforsker hvert afsnit af MVC-arkitektur i detaljer og viser dig, hvordan du bruger dem til at udvikle software.

Hvad er modellen?

Modellen for MVC-arkitektur er en hovedkomponent i designmønsteret. Dette skyldes, at modellen for din applikation gemmer datalogikken. Modellen dikterer, hvordan du opbevarer og henter dine data.

For en applikation, der bruger MVC-controllerarkitekturen, er data en væsentlig komponent i dens drift.

Hvad er udsigten?

Visningen af ​​MVC-arkitektur er brugergrænsefladen (UI) for din applikation. Brugergrænsefladen er, hvad en bruger ser på deres enhed, når de interagerer med dit program. Visningens tilstand afhænger af de data, der er gemt ved hjælp af modellen.

Hvad er controlleren?

Du kan tænke på controlleren som en bro mellem Model- og View-komponenterne.

Når en bruger leverer data gennem din brugergrænseflade (visningen), videregiver visningen disse data til controlleren. Controlleren bruger disse data til at opdatere databasen (gennem modellen). Controlleren trækker også data fra databasen (gennem modellen) og returnerer dem til visningen.

Ud over at være en datakanal er controlleren også hjernen i operationen. Det beslutter, hvilken operation der skal udføres på hvilke data, og hvilke data der skal returneres til brugergrænsefladen.

Hvordan hænger det hele sammen?

MVC-arkitektur skaber en semi-lukket sløjfe, der er afhængig af, at alle komponenter fungerer tilstrækkeligt. Følgende illustration viser, hvordan MVC-arkitektur fungerer.

Som du kan se fra illustrationen ovenfor, modtager MVC-applikationen et indledende input af data fra en bruger gennem brugergrænsefladen. Derefter sender applikationen disse data gennem de forskellige komponenter i MVC-arkitekturen og manipulerer i nogle tilfælde disse data i Controller-komponenten.

Anvendelse af MVC-arkitektur

Lad os sige, at du er ved at udvikle en applikation til en tankstation, der ønsker at oprette en fortegnelse over al den gas, der sælges på stationen, og hjælpe gasbetjentene med prisberegning. Ved at bruge MVC-arkitektur ville du starte med modellen, derefter gå videre til controlleren, og efter at du har fundet ud af al logikken i din applikation, kan du implementere visningen.

Når du opretter en model til din applikation, skal du vide, hvilken type data du vil gemme, hvordan du vil gemme disse data, og hvor tilgængelige du vil have disse data.

Oprettelse af applikationsmodellen

//Java bibliotek
importere java.io. Serialiserbar;
offentligklasse Gasprismodel redskaber Serialiserbar{
 //attributes
privatstatiskendeliglangserialVersionUID = 1 L;
privat String driverName;
privatflyde gasMængde;
privat String gasType;
privatflyde koste;
// standard konstruktør
offentlig GasPriceModel() {
det her.driverName = "";
det her.gasMængde = 0,00f;
det her.gasType = "";
det her.cost = 0,00f;
 }
 //primære konstruktører
offentlig GasPriceModel (String driverName, flyde gasAmount, String gasType, flyde pris) {
det her.driverName = driverName;
det her.gasAmount = gasAmount;
det her.gasType = gasType;
det her.cost = pris;
 }
 //gettere og sættere, der henter og manipulerer data
offentlig String getDriverName() {
Vend tilbage drivernavn;
 }
offentligugyldig setDriverName (String driverName) {
det her.driverName = driverName;
 }
offentligflyde getGasAmount() {
Vend tilbage gasMængde;
 }
offentligugyldig sætGasMængde(flyde gasMængde) {
det her.gasAmount = gasAmount;
 }
offentlig String getGasType() {
Vend tilbage gastype;
 }
offentligugyldig setGasType (String gasType) {
det her.gasType = gasType;
 }
offentligflyde getCost() {
Vend tilbage koste;
 }
offentligugyldig sætCost(flyde pris) {
det her.cost = pris;
 }
}

Der er flere vigtige ting at identificere i modelkoden ovenfor. Den første er, at den implementerer Serializable-grænsefladen. Denne grænseflade giver dig mulighed for at gemme tilstanden for hvert objekt, der er oprettet ved hjælp af Gasprismodel klasse ved at konvertere den til en bytestrøm. Implementering af Serializable-grænsefladen betyder, at du også skal oprette et versions-id, hvilket er hvad den første attribut i klassen ovenfor gør.

Relaterede: Lær hvordan du opretter klasser i Java De andre fire attributter i Gasprismodel klasse er lige så vigtige, fordi de fortæller dig, hvem der vil få adgang til de data, som denne model vil skabe. Den fortæller dig også, hvilken type data modellen vil gemme (strenge og flydere).

Oprettelse af applikationscontrolleren

//Java biblioteker
importere java.io. Fil;
importere java.io. FileNotFoundException;
importere java.io. FileOutputStream;
importere java.io. IOException;
importere java.io. ObjectOutputStream;
offentligklasse GasPriceController {
 //beregner prisen på en kundes gas og returnerer den
offentligflyde beregn pris(flyde mængde, String gasType){
flyde pris = 0,00f;
endeligflyde dieselPris = 4.925f;
endeligflyde præmiepris = 5.002f;
endeligflyde almindelig pris = 4.680f;
hvis (gasType == "Diesel")
 pris = beløb * dieselPris;
hvis (gasType == "Premium")
 pris = beløb * præmiePris;
hvis (gasType == "Almindelig")
 pris = beløb * almindelig pris;
Vend tilbage koste;
 }
//gemmer dataene fra hvert salg til en fil ved hjælp af modellen
offentligboolesk saveEntry (GasPriceModel data){
prøve {
FileOutputStream fs = ny FileOutputStream(ny File("data.dat"), rigtigt);
 ObjectOutputStream os = ny ObjectOutputStream (fs);
 os.writeObject (data);
 os.flush();
 os.close();
Vend tilbagerigtigt;
 } fangst (FileNotFoundException e) {
 e.printStackTrace();
 } fangst (IOException e) {
 e.printStackTrace();
 }
Vend tilbagefalsk;
 }
}

Controlleren ovenfor gør to ting, den udfører en beregning på de data, der modtages fra visningen, og beslutter, hvilke data der skal returneres. Controlleren ovenfor bruger også applikationsmodellen til at gemme de objekter, der er oprettet fra visningsinputtet, ved hjælp af saveEntry() metode.

Oprettelse af applikationsvisning

//Java biblioteker
importer java.awt. BorderLayout;
importer java.awt. GridLayout;
importer java.awt.event. ActionEvent;
importer 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 udvider JFrame implementerer ActionListener {
//attributes
 private static final long serialVersionUID = 1L;
 privat GasPriceController controller;
 privat JLabel drivernavn;
 privat JTextField nameField;
 privat JLabel gasBeløb;
 privat JTextField beløbFelt;
 privat JLabel gasType;
 privat JComboBox typeCombo;
 privat JButton btnClear;
 privat JButton btnSave;
 private static final String[] type =
 {"Diesel", "Premium", "Almindelig"};
//standard konstruktør
 offentlig GasPriceView() {
 dette (ny GasPriceController());
 }
//primær konstruktør, der forårsager brugergrænsefladen
 offentlig GasPriceView (GasPriceController controller) {
super("Ansøgning om gassalg");
 setDefaultCloseOperation (JFrame. EXIT_ON_CLOSE);
 sætstørrelse (400.500);
 setVisible (sandt);
denne.controller = controller;
configureView();
 }
//generer brugergrænsefladen til applikationen
 privat void configureView() {
setLayout (nyt BorderLayout());
 JPanel pnl = ny JPanel (ny GridLayout (4,2,2,2));
driverName = new JLabel("Chaufførnavn:");
 pnl.add (drivernavn);
 nameField = new JTextField();
 pnl.add (navnFelt);
 gasAmount = new JLabel("Gasmængde (Gallon):");
 pnl.add (gasMængde);
 beløbField = new JTextField();
 pnl.add (amountField);
 gasType = new JLabel("Gastype:");
 pnl.add (gasType);
 typeCombo = ny JComboBox(type);
 pnl.add (typeCombo);
 btnClear = new JButton("Slet");
 pnl.add (btnClear);
 btnSave = new JButton("Gem");
 pnl.add (btnSave );
tilføje (pnl, BorderLayout. CENTRUM);
ActionListener();
}
 //lytter efter et klik på en af ​​to knapper
 public void ActionListener() {
 btnClear.addActionListener (dette);
btnSave.addActionListener (dette);
 }
//udfører en handling, hvis der klikkes på en bestemt knap
 @Tilsidesæt
 public void actionPerformed (ActionEvent ev) {
if (ev.getSource().equals (btnClear)) {
 nameField.setText("");
 beløbField.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 +" burde betale $" + driverTotal );
GasPriceModel customer = ny GasPriceModel (driverName, gasAmount, gasType, driverTotal);
controller.saveEntry (kunde);
 }
}
}

Visningen ovenfor opretter en brugergrænseflade ved hjælp af configureView() metode. Det indsamler derefter data, efter at en hændelse opstår (gennem en handlingslytter). Ovenstående visning sender derefter de indsamlede data til controlleren, som derefter udfører nogle beregninger og returnerer data til visningen.

Udførelse af MVC-applikationen

importere java.awt. EventQueue;
offentligklasse App {
offentligstatiskugyldig main (String args[]) {
 EventQueue.påberåbe Senere(
ny Runnable() {
@Tilsidesæt
offentligugyldig løb() { 
 GasPriceController controller = ny GasPriceController(); 
ny GasPriceView (controller); 
 }
 });
 }
}

Udførelse af App klasse ovenfor genererer følgende brugergrænseflade:

Hvis brugergrænsefladen udfyldes med de relevante data, genereres følgende popup-brugergrænseflade:

Hvis du ser til venstre på billedet ovenfor, vil du se, at applikationen også oprettede en ny fil kaldet "data.dat." Så denne MVC-applikation indsamler data fra en bruger gennem en UI (View), som sender disse data til Controller. Controlleren manipulerer dataene ved at udføre nogle beregninger, og derefter gemmer den disse data i en fil ved hjælp af modellen. Relaterede: Java Input og Output: En begyndervejledning

Java Input og Output: En begyndervejledning

Hvis du ser nærmere på den applikation, der er oprettet i denne artikel, er der flere tilsyneladende fordele. Nogle af disse fordele omfatter:

• Skalerbarhed
• Nemmere kodetest
• Oprettelse af mere kortfattet kode

Men MVC-arkitektur er ikke det eneste nyttige designmønster, der kan forbedre din udviklingsproces.

Sådan opretter du genbrugelig kode i JavaScript ved hjælp af designmønstre

At forstå, hvordan du bruger designmønstre, vil gøre dig i stand til at bruge genanvendelig kode i JavaScript. Her er hvad du behøver at vide.

Læs Næste

Om forfatteren