En introduktion till MVC-arkitektur: exempel förklaras

Model-View-Controller (MVC)-arkitekturen är ett av de mest populära mjukvaruutvecklingsmönstren. Logiken bakom MVC-arkitekturen använder designprincipen om separation av problem. Denna princip syftar till att dela upp en ansökan i distriktssektioner, där varje sektion tar upp en specifik och separat fråga.

MVC-arkitekturen följer principen om separation av bekymmer till punkt och pricka. Faktum är att varje bokstav i MVC-akronymen representerar en viktig del av din ansökan. Den här artikeln utforskar varje avsnitt av MVC-arkitektur i detalj och visar hur du använder dem för att utveckla programvara.

Vad är modellen?

Modellen för MVC-arkitektur är en huvudkomponent i designmönstret. Detta beror på att modellen för din applikation lagrar datalogiken. Modellen dikterar hur du lagrar och hämtar din data.

För en applikation som använder MVC-styrenhetsarkitekturen är data en viktig komponent i dess drift.

Vad är utsikten?

View of MVC-arkitektur är användargränssnittet (UI) för din applikation. Användargränssnittet är vad en användare ser på sin enhet när de interagerar med ditt program. Vyns tillstånd beror på data som lagras med modellen.

Vad är styrenheten?

Du kan tänka på styrenheten som en brygga mellan Model- och View-komponenterna.

När en användare tillhandahåller data via ditt användargränssnitt (vyn), skickar vyn dessa data till kontrollanten. Kontrollanten använder dessa data för att uppdatera databasen (genom modellen). Styrenheten hämtar också data från databasen (genom modellen) och returnerar den till vyn.

Förutom att vara en datakanal är Controllern också hjärnan i verksamheten. Den bestämmer vilken operation som ska utföras på vilken data och vilken data som ska returneras till användargränssnittet.

Hur går allt ihop?

MVC-arkitektur skapar en semi-sluten loop som förlitar sig på att alla komponenter ska fungera adekvat. Följande illustration visar hur MVC-arkitekturen fungerar.

Som du kan se från illustrationen ovan tar MVC-applikationen emot en initial inmatning av data från en användare via användargränssnittet. Sedan skickar applikationen dessa data genom de olika komponenterna i MVC-arkitekturen och manipulerar i vissa fall dessa data i Controller-komponenten.

Tillämpa MVC-arkitektur

Säg att du utvecklar en applikation för en bensinstation som vill skapa ett register över all bensin som säljs på stationen och hjälpa bensinvakterna med prisberäkning. Med hjälp av MVC-arkitektur skulle du börja med modellen, sedan gå vidare till Controller, och efter att du har listat ut all logik i din applikation kan du implementera vyn.

När du skapar en modell för din applikation måste du veta vilken typ av data du vill lagra, hur du vill lagra denna data och hur tillgänglig du vill att data ska vara.

Skapa applikationsmodellen

//Java-bibliotek
importera java.io. Serialiserbar;
offentligklass Gasprismodell redskap Serialiserbar{
 //attributes
privatstatiskslutliglångserialVersionUID = 1 L;
privat String driverName;
privatflyta gasMängd;
privat String gasType;
privatflyta kosta;
// standardkonstruktor
offentlig GasPriceModel() {
detta.driverName = "";
detta.gasAmount = 0,00f;
detta.gasType = "";
detta.cost = 0,00f;
 }
 //primära konstruktörer
offentlig GasPriceModel (String driverName, flyta gasAmount, String gasType, flyta kostnad) {
detta.förarnamn = förarnamn;
detta.gasAmount = gasAmount;
detta.gasType = gasType;
detta.cost = kostnad;
 }
 //getters och seters som hämtar och manipulerar data
offentlig Sträng getDriverName() {
lämna tillbaka drivrutinsnamn;
 }
offentligtomhet setDriverName (String driverName) {
detta.förarnamn = förarnamn;
 }
offentligflyta getGasAmount() {
lämna tillbaka gasMängd;
 }
offentligtomhet setGasAmount(flyta gasAmount) {
detta.gasAmount = gasAmount;
 }
offentlig Sträng getGasType() {
lämna tillbaka gasType;
 }
offentligtomhet setGasType (String gasType) {
detta.gasType = gasType;
 }
offentligflyta getCost() {
lämna tillbaka kosta;
 }
offentligtomhet setCost(flyta kostnad) {
detta.cost = kostnad;
 }
}

Det finns flera viktiga saker att identifiera i modellkoden ovan. Den första är att den implementerar gränssnittet Serializable. Detta gränssnitt låter dig spara tillståndet för varje objekt som skapas med hjälp av Gasprismodell klass genom att konvertera den till en byteström. Att implementera gränssnittet Serializable innebär att du också behöver skapa ett versions-ID, vilket är vad det första attributet i klassen ovan gör.

Relaterad: Lär dig hur du skapar klasser i Java De andra fyra attributen i Gasprismodell klass är lika viktiga eftersom de talar om för dig vem som kommer att få tillgång till data som den här modellen kommer att skapa. Den berättar också vilken typ av data som modellen kommer att lagra (strängar och flytande).

Skapa applikationskontrollern

//Java bibliotek
importera java.io. Fil;
importera java.io. FileNotFoundException;
importera java.io. FileOutputStream;
importera java.io. IOException;
importera java.io. ObjectOutputStream;
offentligklass GasPriceController {
 //beräknar kostnaden för en kunds gas och returnerar den
offentligflyta beräkna kostnad(flyta mängd, String gasType){
flyta kostnad = 0,00f;
slutligflyta dieselPris = 4.925f;
slutligflyta premiumPrice = 5.002f;
slutligflyta ordinarie pris = 4.680f;
om (gasTyp == "Diesel")
 kostnad = belopp * dieselPris;
om (gasType == "Premium")
 kostnad = belopp * premiumPris;
om (gasType == "vanlig")
 kostnad = belopp * ordinarie pris;
lämna tillbaka kosta;
 }
//sparar data från varje försäljning till en fil med modellen
offentligbooleskt saveEntry (GasPriceModel data){
Prova {
FileOutputStream fs = ny FileOutputStream(ny File("data.dat"), Sann);
 ObjectOutputStream os = ny ObjectOutputStream (fs);
 os.writeObject (data);
 os.flush();
 os.close();
lämna tillbakaSann;
 } fånga (FileNotFoundException e) {
 e.printStackTrace();
 } fånga (IOException e) {
 e.printStackTrace();
 }
lämna tillbakafalsk;
 }
}

Controllern ovan gör två saker, den utför en beräkning av data som tas emot från vyn och bestämmer vilken data som ska returneras. Styrenheten ovan använder också applikationsmodellen för att lagra objekt som skapats från vyingången med hjälp av saveEntry() metod.

Skapa programvyn

//Java-bibliotek
importera java.awt. BorderLayout;
importera java.awt. Rutnätslayout;
importera java.awt.event. ActionEvent;
importera java.awt.event. ActionListener;
importera javax.swing. JButton;
importera javax.swing. JComboBox;
importera javax.swing. JFrame;
importera javax.swing. JLabel;
importera javax.swing. JOptionPane;
importera javax.swing. JPanel;
importera javax.swing. JTextField;
public class GasPriceView utökar JFrame implementerar ActionListener {
//attributes
 private static final long serialVersionUID = 1L;
 privat GasPriceController-kontroller;
 privat JLabel drivrutinsnamn;
 privat JTextField nameField;
 privat JLabel gasAmount;
 privat JTextField amountField;
 privat JLabel gasType;
 privat JComboBox typCombo;
 privat JButton btnClear;
 privat JButton btnSave;
 private static final String[] typ =
 {"Diesel", "Premium", "Regular"};
//default constructor
 public GasPriceView() {
 detta (nya GasPriceController());
 }
//primär konstruktor som orsakar användargränssnittet
 public GasPriceView (GasPriceController controller) {
super("Gasförsäljningsansökan");
 setDefaultCloseOperation (JFrame. EXIT_ON_CLOSE);
 setSize (400 500);
 setVisible (true);
this.controller = styrenhet;
configureView();
 }
//generera gränssnittet för applikationen
 private void configureView() {
setLayout (ny BorderLayout());
 JPanel pnl = ny JPanel (ny GridLayout (4,2,2,2));
drivrutinsnamn = new JLabel("Förarens namn:");
 pnl.add (drivrutinsnamn);
 nameField = new JTextField();
 pnl.add (namnfält);
 gasAmount = new JLabel("Gasmängd (Gallon):");
 pnl.add (gasAmount);
 amountField = new JTextField();
 pnl.add (amountField);
 gasType = new JLabel("Gastyp:");
 pnl.add (gasType);
 typeCombo = ny JComboBox(typ);
 pnl.add (typCombo);
 btnClear = new JButton("Rensa");
 pnl.add (btnClear);
 btnSave = new JButton("Spara");
 pnl.add (btnSave );
lägg till (pnl, BorderLayout. CENTRUM);
ActionListener();
}
 //lyssnar efter ett klick på en av två knappar
 public void ActionListener() {
 btnClear.addActionListener (detta);
btnSave.addActionListener (detta);
 }
//utför en åtgärd om en specifik knapp klickas
 @Åsidosätta
 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 +" borde betala $" + driverTotal );
GasPriceModel customer = ny GasPriceModel (driverName, gasAmount, gasType, driverTotal);
controller.saveEntry (kund);
 }
}
}

Vyn ovan skapar ett användargränssnitt med hjälp av configureView() metod. Den samlar sedan in data efter att en händelse inträffat (genom en handlingsavlyssnare). Vyn ovan skickar sedan insamlad data till Controller, som sedan utför några beräkningar och returnerar data till Vyn.

Kör MVC-applikationen

importera java.awt. EventQueue;
offentligklass App {
offentligstatisktomhet main (String args[]) {
 EventQueue.åberopaSenare(
ny Runnable() {
@Åsidosätta
offentligtomhet springa() { 
 GasPriceController controller = ny GasPriceController(); 
ny GasPriceView (kontroller); 
 }
 });
 }
}

Utföra App klass ovan kommer att generera följande UI:

Om du fyller i gränssnittet med relevant data genereras följande popup-gränssnitt:

Om du tittar till vänster på bilden ovan ser du att programmet också skapade en ny fil som heter "data.dat." Så denna MVC-applikation samlar in data från en användare genom ett UI (View), som skickar dessa data till Kontroller. Styrenheten manipulerar data genom att utföra några beräkningar, sedan lagrar den data i en fil med hjälp av modellen. Relaterad: Java Input and Output: En nybörjarguide

Java Input and Output: En nybörjarguide

Om du tittar närmare på applikationen som skapats i den här artikeln finns det flera uppenbara fördelar. Några av dessa fördelar inkluderar:

• Skalbarhet
• Enklare kodtestning
• Skapandet av mer koncis kod

Men MVC-arkitektur är inte det enda användbara designmönstret som kan förbättra din utvecklingsprocess.

Hur man skapar återanvändbar kod i JavaScript med hjälp av designmönster

Genom att förstå hur man använder designmönster kan du använda återanvändbar kod i JavaScript. Här är vad du behöver veta.

Läs Nästa

Om författaren