En introduksjon til MVC-arkitektur: eksempler forklart

Model-View-Controller (MVC)-arkitekturen er en av de mest populære programvareutviklingsmønstrene. Logikken bak MVC-arkitektur bruker designprinsippet om separasjon av bekymringer. Dette prinsippet tar sikte på å dele en søknad inn i distriktsseksjoner, der hver seksjon tar for seg et spesifikt og eget problem.

MVC-arkitektur følger separasjonsprinsippet til punkt og prikke. Faktisk representerer hver bokstav i MVC-akronymet en viktig del av søknaden din. Denne artikkelen utforsker hver del av MVC-arkitekturen i detalj og viser deg hvordan du bruker dem til å utvikle programvare.

Hva er modellen?

Modellen for MVC-arkitektur er en hovedkomponent i designmønsteret. Dette er fordi modellen til applikasjonen din lagrer datalogikken. Modellen dikterer hvordan du lagrer og henter dataene dine.

For en applikasjon som bruker MVC-kontrollerarkitekturen, er data en viktig komponent i driften.

Hva er utsikten?

Visningen av MVC-arkitektur er brukergrensesnittet (UI) til applikasjonen din. Brukergrensesnittet er det en bruker ser på enheten sin når de samhandler med programmet ditt. Tilstanden til visningen er avhengig av dataene som er lagret ved hjelp av modellen.

Hva er kontrolleren?

Du kan tenke på kontrolleren som en bro mellom Model- og View-komponentene.

Når en bruker leverer data gjennom brukergrensesnittet ditt (visningen), sender visningen disse dataene til kontrolløren. Kontrolløren bruker disse dataene til å oppdatere databasen (gjennom modellen). Kontrolleren henter også data fra databasen (gjennom modellen) og returnerer dem til visningen.

I tillegg til å være en datakanal, er kontrolleren også hjernen i operasjonen. Den bestemmer hvilken operasjon som skal utføres på hvilke data, og hvilke data som skal returneres til brukergrensesnittet.

Hvordan henger det hele sammen?

MVC-arkitektur skaper en semi-lukket sløyfe som er avhengig av at alle komponenter fungerer tilstrekkelig. Følgende illustrasjon viser hvordan MVC-arkitektur fungerer.

Som du kan se fra illustrasjonen ovenfor, mottar MVC-applikasjonen en første input med data fra en bruker gjennom brukergrensesnittet. Deretter sender applikasjonen disse dataene gjennom de forskjellige komponentene i MVC-arkitekturen, og manipulerer i noen tilfeller disse dataene i Controller-komponenten.

Bruk av MVC-arkitektur

La oss si at du utvikler en applikasjon for en bensinstasjon som ønsker å lage en oversikt over all gass som selges på stasjonen og hjelpe gassbetjentene med prisberegning. Ved å bruke MVC-arkitektur vil du starte med modellen, deretter gå videre til kontrolleren, og etter at du har funnet ut all logikken til applikasjonen din, kan du implementere visningen.

Når du oppretter en modell for applikasjonen din, må du vite hvilken type data du vil lagre, hvordan du vil lagre disse dataene og hvor tilgjengelige du vil at dataene skal være.

Opprette applikasjonsmodellen

//Java-bibliotek
import java.io. Serialiserbar;
offentligklasse Gassprismodell redskaper Serialiserbar{
 //attributes
privatstatiskendeliglangserialVersionUID = 1 L;
privat String driverName;
privatflyte gassBeløp;
privat String gassType;
privatflyte koste;
// standard konstruktør
offentlig GasPriceModel() {
dette.driverName = "";
dette.gasAmount = 0,00f;
dette.gasType = "";
dette.cost = 0,00f;
 }
 //primære konstruktører
offentlig GasPriceModel (String driverName, flyte gasAmount, String gasType, flyte kostnad) {
dette.driverName = driverName;
dette.gasAmount = gasAmount;
dette.gasType = gassType;
dette.cost = kostnad;
 }
 //gettere og settere som henter og manipulerer data
offentlig String getDriverName() {
komme tilbake drivernavn;
 }
offentligtomrom setDriverName (String driverName) {
dette.driverName = driverName;
 }
offentligflyte getGasAmount() {
komme tilbake gassBeløp;
 }
offentligtomrom setGasAmount(flyte gassAmount) {
dette.gasAmount = gasAmount;
 }
offentlig String getGasType() {
komme tilbake gassType;
 }
offentligtomrom setGasType (String gasType) {
dette.gasType = gassType;
 }
offentligflyte getCost() {
komme tilbake koste;
 }
offentligtomrom settCost(flyte kostnad) {
dette.cost = kostnad;
 }
}

Det er flere viktige ting å identifisere i modellkoden ovenfor. Den første er at den implementerer Serializable-grensesnittet. Dette grensesnittet lar deg lagre tilstanden til hvert objekt opprettet ved hjelp av Gassprismodell klasse ved å konvertere den til en bytestrøm. Implementering av Serializable-grensesnittet betyr at du også må lage en versjons-ID, som er det første attributtet i klassen ovenfor gjør.

I slekt: Lær hvordan du lager klasser i Java De andre fire attributtene i Gassprismodell klasse er like viktige fordi de forteller deg hvem som skal få tilgang til dataene som denne modellen vil lage. Den forteller deg også hvilken type data modellen vil lagre (strenger og flyter).

Opprette applikasjonskontrolleren

//Java biblioteker
import java.io. Fil;
import java.io. FileNotFoundException;
import java.io. FileOutputStream;
import java.io. IOException;
import java.io. ObjectOutputStream;
offentligklasse Gasspriskontroller {
 //beregner kostnaden for en kundes gass og returnerer den
offentligflyte beregnekostnad(flyte beløp, String gasType){
flyte kostnad = 0,00f;
endeligflyte dieselPris = 4.925f;
endeligflyte premiumPrice = 5.002f;
endeligflyte vanlig pris = 4.680f;
hvis (gasstype == "Diesel")
 kostnad = beløp * dieselPris;
hvis (gasType == "Premium")
 kostnad = beløp * premiumPrice;
hvis (gasType == "Vanlig")
 kostnad = beløp * vanlig pris;
komme tilbake koste;
 }
//lagrer dataene fra hvert salg til en fil ved hjelp av modellen
offentligboolsk saveEntry (GasPriceModel data){
prøve {
FileOutputStream fs = ny FileOutputStream(ny File("data.dat"), ekte);
 ObjectOutputStream os = ny ObjectOutputStream (fs);
 os.writeObject (data);
 os.flush();
 os.close();
komme tilbakeekte;
 } å fange (FileNotFoundException e) {
 e.printStackTrace();
 } å fange (IOException e) {
 e.printStackTrace();
 }
komme tilbakefalsk;
 }
}

Kontrolleren ovenfor gjør to ting, den utfører en beregning på dataene som mottas fra visningen, og bestemmer hvilke data som skal returneres. Kontrolleren ovenfor bruker også applikasjonsmodellen til å lagre objektene som er opprettet fra visningsinngangen, ved å bruke saveEntry() metode.

Opprette applikasjonsvisningen

//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;
offentlig klasse GasPriceView utvider JFrame implementerer ActionListener {
//attributes
 private static final long serialVersionUID = 1L;
 privat GasPriceController kontrolleren;
 privat JLabel drivernavn;
 privat JTextField nameField;
 privat JLabel gassAmount;
 privat JTextField beløpFelt;
 privat JLabel gassType;
 privat JComboBox typeCombo;
 privat JButton btnClear;
 privat JButton btnLagre;
 private static final String[] type =
 {"Diesel", "Premium", "Vanlig"};
//standard konstruktør
 offentlig GasPriceView() {
 dette (ny GasPriceController());
 }
//primær konstruktør som forårsaker brukergrensesnittet
 offentlig GasPriceView (GasPriceController-kontroller) {
super("Søknad for gasssalg");
 setDefaultCloseOperation (JFrame. EXIT_ON_CLOSE);
 setSize (400 500);
 setVisible (true);
this.controller = kontroller;
configureView();
 }
//generer brukergrensesnittet for applikasjonen
 private void configureView() {
setLayout (ny BorderLayout());
 JPanel pnl = ny JPanel (ny GridLayout (4,2,2,2));
drivernavn = new JLabel("Sjåførnavn:");
 pnl.add (drivernavn);
 nameField = new JTextField();
 pnl.add (navnfelt);
 gasAmount = new JLabel("Gassmengde (Gallon):");
 pnl.add (gassAmount);
 amountField = new JTextField();
 pnl.add (amountField);
 gasType = new JLabel("Gass Type:");
 pnl.add (gasType);
 typeCombo = ny JComboBox(type);
 pnl.add (typeCombo);
 btnClear = new JButton("Slett");
 pnl.add (btnClear);
 btnSave = new JButton("Lagre");
 pnl.add (btnLagre );
legg til (pnl, BorderLayout. SENTER);
ActionListener();
}
 //lytter etter et klikk på en av to knapper
 public void ActionListener() {
 btnClear.addActionListener (dette);
btnSave.addActionListener (dette);
 }
//utfører en handling hvis en spesifikk knapp klikkes
 @Overstyring
 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 (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 oppretter et brukergrensesnitt ved å bruke configureView() metode. Den samler deretter inn data etter at en hendelse inntreffer (gjennom en handlingslytter). Visningen ovenfor sender deretter dataene som er samlet inn til kontrolløren, som deretter utfører noen beregninger og returnerer data til visningen.

Kjøre MVC-applikasjonen

import java.awt. EventQueue;
offentligklasse App {
offentligstatisktomrom main (strengarg[]) {
 EventQueue.påkalleSenere(
ny Runnable() {
@Overstyring
offentligtomrom løpe() { 
 GasPriceController kontroller = ny GasPriceController(); 
ny GasPriceView (kontroller); 
 }
 });
 }
}

Utførelse av App klasse ovenfor vil generere følgende brukergrensesnitt:

Hvis du fyller brukergrensesnittet med relevante data, genereres følgende popup-grensesnitt:

Hvis du ser til venstre på bildet ovenfor, vil du se at applikasjonen også opprettet en ny fil kalt "data.dat." Så denne MVC-applikasjonen samler inn data fra en bruker gjennom et brukergrensesnitt (View), som sender disse dataene til Kontroller. Kontrolleren manipulerer dataene ved å utføre noen beregninger, deretter lagrer den dataene i en fil ved hjelp av modellen. I slekt: Java Input and Output: En nybegynnerveiledning

Java Input and Output: En nybegynnerveiledning

Hvis du tar en nærmere titt på applikasjonen som er opprettet i denne artikkelen, er det flere tilsynelatende fordeler. Noen av disse fordelene inkluderer:

• Skalerbarhet
• Enklere kodetesting
• Opprettelsen av mer konsis kode

Men MVC-arkitektur er ikke det eneste nyttige designmønsteret som kan forbedre utviklingsprosessen din.

Hvordan lage gjenbrukbar kode i JavaScript ved hjelp av designmønstre

Hvis du forstår hvordan du bruker designmønstre, kan du bruke gjenbrukbar kode i JavaScript. Her er det du trenger å vite.

Les Neste

Om forfatteren