Εισαγωγή στην Αρχιτεκτονική MVC: Επεξήγηση παραδειγμάτων

Η αρχιτεκτονική Model-View-Controller (MVC) είναι ένα από τα πιο δημοφιλή μοτίβα ανάπτυξης λογισμικού. Η λογική πίσω από την αρχιτεκτονική MVC χρησιμοποιεί την αρχή σχεδιασμού του διαχωρισμού των ανησυχιών. Αυτή η αρχή στοχεύει στο διαχωρισμό μιας εφαρμογής σε ενότητες περιφέρειας, όπου κάθε ενότητα αντιμετωπίζει ένα συγκεκριμένο και ξεχωριστό ζήτημα.

Η αρχιτεκτονική MVC ακολουθεί κατά γράμμα την αρχή του διαχωρισμού των ανησυχιών. Στην πραγματικότητα, κάθε γράμμα στο ακρωνύμιο MVC αντιπροσωπεύει ένα ουσιαστικό τμήμα της αίτησής σας. Αυτό το άρθρο διερευνά κάθε ενότητα της αρχιτεκτονικής MVC λεπτομερώς και σας δείχνει πώς να τα χρησιμοποιήσετε για την ανάπτυξη λογισμικού.

Τι είναι το μοντέλο;

Το μοντέλο της αρχιτεκτονικής MVC είναι ένα κύριο συστατικό του σχεδίου σχεδίου. Αυτό συμβαίνει επειδή το μοντέλο της εφαρμογής σας αποθηκεύει τη λογική δεδομένων. Το μοντέλο υπαγορεύει τον τρόπο αποθήκευσης και ανάκτησης των δεδομένων σας.

Για μια εφαρμογή που χρησιμοποιεί την αρχιτεκτονική του ελεγκτή MVC, τα δεδομένα αποτελούν βασικό στοιχείο της λειτουργίας της.

Τι είναι η θέα;

Η προβολή της αρχιτεκτονικής MVC είναι η διεπαφή χρήστη (UI) της εφαρμογής σας. Το UI είναι αυτό που βλέπει ένας χρήστης στη συσκευή του όταν αλληλεπιδρά με το πρόγραμμά σας. Η κατάσταση της Προβολής βασίζεται στα δεδομένα που αποθηκεύονται χρησιμοποιώντας το μοντέλο.

Τι είναι ο ελεγκτής;

Μπορείτε να σκεφτείτε τον ελεγκτή ως μια γέφυρα μεταξύ των στοιχείων Model και View.

Όταν ένας χρήστης παρέχει δεδομένα μέσω της διεπαφής χρήστη (η προβολή), η προβολή μεταβιβάζει αυτά τα δεδομένα στον ελεγκτή. Ο ελεγκτής χρησιμοποιεί αυτά τα δεδομένα για να ενημερώσει τη βάση δεδομένων (μέσω του μοντέλου). Ο ελεγκτής τραβά επίσης δεδομένα από τη βάση δεδομένων (μέσω του μοντέλου) και τα επιστρέφει στην προβολή.

Εκτός από κανάλι δεδομένων, ο Ελεγκτής είναι και ο εγκέφαλος της λειτουργίας. Αποφασίζει ποια λειτουργία θα πραγματοποιήσει σε ποια δεδομένα και ποια δεδομένα θα επιστρέψει στη διεπαφή χρήστη.

Πώς έρχονται όλα μαζί;

Η αρχιτεκτονική MVC δημιουργεί έναν ημι-κλειστό βρόχο που βασίζεται σε όλα τα στοιχεία για να λειτουργεί επαρκώς. Η παρακάτω εικόνα δείχνει πώς λειτουργεί η αρχιτεκτονική MVC.

Όπως μπορείτε να δείτε από την παραπάνω εικόνα, η εφαρμογή MVC λαμβάνει μια αρχική εισαγωγή δεδομένων από έναν χρήστη μέσω του UI. Στη συνέχεια, η εφαρμογή περνά αυτά τα δεδομένα μέσω των διαφορετικών στοιχείων της αρχιτεκτονικής MVC και σε ορισμένες περιπτώσεις, χειρίζεται αυτά τα δεδομένα στο στοιχείο Ελεγκτής.

Εφαρμογή MVC Architecture

Ας υποθέσουμε ότι αναπτύσσετε μια εφαρμογή για ένα βενζινάδικο που θέλει να δημιουργήσει ένα αρχείο όλου του φυσικού αερίου που πωλείται στο πρατήριο και να βοηθήσει τους συνοδούς αερίου στον υπολογισμό της τιμής. Χρησιμοποιώντας την αρχιτεκτονική MVC, θα ξεκινούσατε με το Μοντέλο, μετά θα προχωρήσετε στον Ελεγκτή και αφού καταλάβετε όλη τη λογική της εφαρμογής σας, μπορείτε να εφαρμόσετε την Προβολή.

Όταν δημιουργείτε ένα μοντέλο για την εφαρμογή σας, θα πρέπει να γνωρίζετε τι τύπο δεδομένων θέλετε να αποθηκεύσετε, πώς θέλετε να αποθηκεύσετε αυτά τα δεδομένα και πόσο προσβάσιμα θέλετε να είναι αυτά τα δεδομένα.

Δημιουργία του μοντέλου εφαρμογής

//Βιβλιοθήκη Java
εισαγωγή java.io. Σειριοποιήσιμο;
δημόσιοτάξη GasPriceModel υλοποιεί Σειριοποιήσιμο{
 //attributes
ιδιωτικόςστατικόςτελικόςμακρύςserialVersionUID = 1L;
ιδιωτικός Όνομα προγράμματος οδήγησης συμβολοσειράς;
ιδιωτικόςφλοτέρ αέριοΠοσό;
ιδιωτικός String gasType;
ιδιωτικόςφλοτέρ κόστος;
// προεπιλεγμένος κατασκευαστής
δημόσιο GasPriceModel() {
Αυτό.driverName = "";
Αυτό.gasAmount = 0,00f;
Αυτό.gasType = "";
Αυτό.cost = 0,00f;
 }
 //κύριοι κατασκευαστές
δημόσιο GasPriceModel (Όνομα προγράμματος οδήγησης συμβολοσειράς, φλοτέρ gasAmount, String gasType, φλοτέρ κόστος) {
Αυτό.driverName = driverName;
Αυτό.gasAmount = gasAmount;
Αυτό.gasType = gasType;
Αυτό.cost = κόστος;
 }
 //getters και setters που ανακτούν και χειρίζονται δεδομένα
δημόσιο Συμβολοσειρά getDriverName() {
ΕΠΙΣΤΡΟΦΗ Όνομα οδηγού;
 }
δημόσιοκενός setDriverName (Όνομα προγράμματος οδήγησης συμβολοσειράς) {
Αυτό.driverName = driverName;
 }
δημόσιοφλοτέρ getGasAmount() {
ΕΠΙΣΤΡΟΦΗ αέριοΠοσό;
 }
δημόσιοκενός setGasAmount(φλοτέρ Ποσό αερίου) {
Αυτό.gasAmount = gasAmount;
 }
δημόσιο Συμβολοσειρά getGasType() {
ΕΠΙΣΤΡΟΦΗ gasType;
 }
δημόσιοκενός setGasType (String gasType) {
Αυτό.gasType = gasType;
 }
δημόσιοφλοτέρ getCost() {
ΕΠΙΣΤΡΟΦΗ κόστος;
 }
δημόσιοκενός setCost(φλοτέρ κόστος) {
Αυτό.cost = κόστος;
 }
}

Υπάρχουν πολλά σημαντικά πράγματα που πρέπει να προσδιορίσετε στον παραπάνω κωδικό μοντέλου. Το πρώτο είναι ότι υλοποιεί τη διεπαφή Serializable. Αυτή η διεπαφή σάς επιτρέπει να αποθηκεύετε την κατάσταση κάθε αντικειμένου που δημιουργείται χρησιμοποιώντας το GasPriceModel τάξη μετατρέποντάς το σε ροή byte. Η υλοποίηση της διεπαφής Serializable σημαίνει ότι πρέπει επίσης να δημιουργήσετε ένα αναγνωριστικό έκδοσης, κάτι που κάνει το πρώτο χαρακτηριστικό στην παραπάνω κλάση.

Σχετίζεται με: Μάθετε πώς να δημιουργείτε τάξεις σε Java Τα άλλα τέσσερα χαρακτηριστικά στο GasPriceModel Η τάξη είναι εξίσου σημαντική επειδή σας λέει ποιος θα έχει πρόσβαση στα δεδομένα που θα δημιουργήσει αυτό το μοντέλο. Σας ενημερώνει επίσης τι τύπο δεδομένων θα αποθηκεύσει το μοντέλο (συμβολοσειρές και floats).

Δημιουργία του Ελεγκτή Εφαρμογής

//Βιβλιοθήκες Java
εισαγωγή java.io. Αρχείο;
εισαγωγή java.io. FileNotFoundException;
εισαγωγή java.io. FileOutputStream;
εισαγωγή java.io. IOException;
εισαγωγή java.io. ObjectOutputStream;
δημόσιοτάξη GasPriceController {
 //υπολογίζει το κόστος του φυσικού αερίου ενός πελάτη και το επιστρέφει
δημόσιοφλοτέρ υπολογισμός κόστους(φλοτέρ ποσό, Τύπος αερίου συμβολοσειράς){
φλοτέρ κόστος = 0,00f;
τελικόςφλοτέρ dieselTrice = 4,925f;
τελικόςφλοτέρ premiumΤιμή = 5,002f;
τελικόςφλοτέρ κανονικήΤιμή = 4,680f;
αν (gasType == "Diesel")
 κόστος = ποσό * dieselPrice;
αν (gasType == "Premium")
 κόστος = ποσό * premiumΤιμή;
αν (gasType == "Κανονικό")
 κόστος = ποσό * κανονικήΤιμή;
ΕΠΙΣΤΡΟΦΗ κόστος;
 }
// αποθηκεύει τα δεδομένα από κάθε πώληση σε ένα αρχείο χρησιμοποιώντας το μοντέλο
δημόσιοboolean saveEntry (δεδομένα GasPriceModel){
δοκιμάστε {
FileOutputStream fs = νέος FileOutputStream(νέος Αρχείο ("data.dat"), αληθής);
 ObjectOutputStream os = νέος ObjectOutputStream (fs);
 os.writeObject (δεδομένα);
 os.flush();
 os.close();
ΕΠΙΣΤΡΟΦΗαληθής;
 } σύλληψη (FileNotFoundException e) {
 e.printStackTrace();
 } σύλληψη (IOException e) {
 e.printStackTrace();
 }
ΕΠΙΣΤΡΟΦΗψευδής;
 }
}

Ο Ελεγκτής παραπάνω κάνει δύο πράγματα, εκτελεί έναν υπολογισμό με τα δεδομένα που λαμβάνονται από την προβολή και αποφασίζει ποια δεδομένα θα επιστρέψει. Ο Ελεγκτής παραπάνω χρησιμοποιεί επίσης το μοντέλο εφαρμογής για να αποθηκεύσει τα αντικείμενα που δημιουργήθηκαν από την είσοδο προβολής, χρησιμοποιώντας το saveEntry() μέθοδος.

Δημιουργία της προβολής εφαρμογής

//Βιβλιοθήκες Java
εισαγωγή java.awt. BorderLayout;
εισαγωγή java.awt. GridLayout;
εισαγωγή java.awt.event. ActionEvent;
εισαγωγή java.awt.event. ActionListener;
εισαγωγή javax.swing. JButton;
εισαγωγή javax.swing. JComboBox;
εισαγωγή javax.swing. JFrame;
εισαγωγή javax.swing. JLabel;
εισαγωγή javax.swing. JOptionPane;
εισαγωγή javax.swing. JPanel;
εισαγωγή javax.swing. JTextField;
δημόσια κλάση GasPriceView επεκτείνει το JFrame υλοποιεί ActionListener {
//attributes
 ιδιωτικό στατικό τελικό μεγάλο σειριακό VersionUID = 1L;
 ιδιωτικός ελεγκτής GasPriceController.
 ιδιωτικό JLabel driverName;
 ιδιωτικό JTextField nameField;
 ιδιωτική JLabel gasAmount;
 ιδιωτικό JTextField ποσό πεδίου;
 ιδιωτική JLabel gasType;
 ιδιωτικό JComboBox typeCombo;
 ιδιωτικό JButton btnClear;
 ιδιωτικό JButton btnSave;
 ιδιωτικό στατικό τελικό String[] type =
 {"Diesel", "Premium", "Regular"};
//προεπιλεγμένος κατασκευαστής
 δημόσια GasPriceView() {
 αυτό (νέο GasPriceController());
 }
//κύριος κατασκευαστής που προκαλούν τη διεπαφή χρήστη
 δημόσιο GasPriceView (ελεγκτής GasPriceController) {
super ("Αίτηση πώλησης αερίου");
 setDefaultCloseOperation (JFrame. EXIT_ON_CLOSE);
 setSize (400.500);
 setVisible (αληθές);
this.controller = ελεγκτής;
configureView();
 }
//δημιουργία της διεπαφής χρήστη για την εφαρμογή
 private void configureView() {
setLayout (νέο BorderLayout());
 JPanel pnl = νέο JPanel (νέο GridLayout (4,2,2,2));
driverName = new JLabel("Driver's Name:");
 pnl.add (Όνομα προγράμματος οδήγησης);
 nameField = new JTextField();
 pnl.add (nameField);
 gasAmount = new JLabel("Gas Amount (Gallon):");
 pnl.add (gasAmount);
 ποσόΠεδίο = νέο JTextField();
 pnl.add (amountField);
 gasType = new JLabel("Gas Type:");
 pnl.add (gasType);
 typeCombo = νέο JComboBox(τύπος);
 pnl.add (typeCombo);
 btnClear = new JButton("Clear");
 pnl.add (btnClear);
 btnSave = νέο JButton("Αποθήκευση");
 pnl.add (btnSave );
προσθήκη (pnl, BorderLayout. ΚΕΝΤΡΟ);
ActionListener();
}
 //ακούει το κλικ ενός από τα δύο κουμπιά
 δημόσιο κενό ActionListener() {
 btnClear.addActionListener (αυτό);
btnSave.addActionListener (αυτό);
 }
//εκτελεί μια ενέργεια εάν γίνει κλικ σε ένα συγκεκριμένο κουμπί
 @Καταπατώ
 public void actionPerformed (ActionEvent ev) {
if (ev.getSource().ίσον (btnClear)) {
 nameField.setText("");
 ποσόField.setText("");
 }
if (ev.getSource().ίσον (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 +" πρέπει να πληρώσει $" + driverTotal );
Πελάτης GasPriceModel = νέο GasPriceModel (όνομα προγράμματος οδήγησης, gasAmount, gasType, driverTotal);
controller.saveEntry (πελάτης);
 }
}
}

Η παραπάνω προβολή δημιουργεί μια διεπαφή χρήστη χρησιμοποιώντας το configureView() μέθοδος. Στη συνέχεια συλλέγει δεδομένα μετά την εμφάνιση ενός συμβάντος (μέσω ενός προγράμματος ακρόασης ενεργειών). Η παραπάνω προβολή στέλνει στη συνέχεια τα δεδομένα που συλλέγονται στον ελεγκτή, ο οποίος στη συνέχεια εκτελεί ορισμένους υπολογισμούς και επιστρέφει δεδομένα στην προβολή.

Εκτέλεση της εφαρμογής MVC

εισαγωγή java.awt. EventQueue;
δημόσιοτάξη Εφαρμογή {
δημόσιοστατικόςκενός κύρια (τόργα συμβολοσειρών[]) {
 Ουρά συμβάντος.invokeLater(
νέος Runnable() {
@Καταπατώ
δημόσιοκενός τρέξιμο() { 
 Ελεγκτής GasPriceController = νέος GasPriceController(); 
νέος GasPriceView (ελεγκτής); 
 }
 });
 }
}

Εκτελώντας το App Η παραπάνω τάξη θα δημιουργήσει την ακόλουθη διεπαφή χρήστη:

Η συμπλήρωση της διεπαφής χρήστη με τα σχετικά δεδομένα θα δημιουργήσει το ακόλουθο αναδυόμενο περιβάλλον χρήστη:

Αν κοιτάξετε στα αριστερά της παραπάνω εικόνας, θα δείτε ότι η εφαρμογή δημιούργησε επίσης ένα νέο αρχείο που ονομάζεται "data.dat." Έτσι, αυτή η εφαρμογή MVC συλλέγει δεδομένα από έναν χρήστη μέσω ενός UI (Προβολή), το οποίο στέλνει αυτά τα δεδομένα στο Ελεγκτής. Ο ελεγκτής χειρίζεται τα δεδομένα εκτελώντας ορισμένους υπολογισμούς και, στη συνέχεια, αποθηκεύει αυτά τα δεδομένα σε ένα αρχείο χρησιμοποιώντας το Μοντέλο. Σχετίζεται με: Java Input and Output: Ένας οδηγός για αρχάριους

Java Input and Output: Ένας οδηγός για αρχάριους

Εάν ρίξετε μια προσεκτική ματιά στην εφαρμογή που δημιουργήθηκε σε αυτό το άρθρο, υπάρχουν αρκετά προφανή οφέλη. Μερικά από αυτά τα οφέλη περιλαμβάνουν:

• Επεκτασιμότητα
• Ευκολότερη δοκιμή κώδικα
• Η δημιουργία πιο συνοπτικού κώδικα

Αλλά η αρχιτεκτονική MVC δεν είναι το μόνο χρήσιμο μοτίβο σχεδιασμού που μπορεί να βελτιώσει τη διαδικασία ανάπτυξής σας.

Πώς να δημιουργήσετε επαναχρησιμοποιήσιμο κώδικα σε JavaScript χρησιμοποιώντας μοτίβα σχεδίασης

Η κατανόηση του τρόπου χρήσης μοτίβων σχεδίασης θα σας επιτρέψει να χρησιμοποιήσετε επαναχρησιμοποιήσιμο κώδικα σε JavaScript. Εδώ είναι τι πρέπει να ξέρετε.

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα