Bahagian 7. Memperkenalkan corak MVC (Model-View-Controller).

Bahan ini adalah sebahagian daripada siri "Pengenalan kepada Pembangunan Perusahaan". Artikel sebelumnya:

• tentang rangkaian
• mengenai seni bina perisian
• mengenai HTTP/HTTPS
• mengenai asas Maven
• tentang servlets (menulis aplikasi web mudah)
• mengenai bekas servlet

Dalam artikel ini kita akan mengetahui sesuatu yang dipanggil MVC. Kami akan bercakap tentang apa itu MVC, menyentuh sejarahnya, meneroka idea dan konsep asas yang terkandung dalam MVC, lihat langkah demi langkah tentang cara memecahkan aplikasi ke dalam modul Model, View dan Pengawal, tulis aplikasi web kecil menggunakan Spring Boot, dan, menggunakan Spring MVC sebagai contoh, lihat cara data dihantar dari kod Java ke halaman HTML. Untuk memahami bahan ini, anda perlu biasa dengan corak reka bentuk, terutamanya pemerhati dan fasad. Dan biasakan dengan permintaan dan respons HTTP, fahami asas HTML dan ketahui anotasi Java. Dapatkan secawan kopi dan snek, dan berasa selesa. Mari kita mulakan.

Sejarah MVC

Idea di sebalik MVC telah dirumuskan oleh Trygve Reenskaug semasa bekerja di Xerox PARC pada akhir 1970-an. Pada masa itu, bekerja dengan komputer memerlukan ijazah dan kajian berterusan dokumentasi yang banyak. Tugas yang diselesaikan oleh Reenskaug bersama-sama dengan sekumpulan pembangun yang sangat kuat adalah untuk memudahkan interaksi pengguna biasa dengan komputer. Ia adalah perlu untuk mencipta alat yang, dalam satu tangan, akan menjadi sangat mudah dan mudah difahami, dan sebaliknya, akan memungkinkan untuk mengawal komputer dan aplikasi yang kompleks. Reenskaug bekerja dalam pasukan yang membangunkan komputer riba "untuk kanak-kanak dari semua peringkat umur" — Dynabook, serta bahasa SmallTalk di bawah pimpinan Alan Kay. Ketika itulah konsep antara muka mesra telah ditetapkan. Dalam banyak hal, kerja yang dilakukan oleh Reenskaug dan pasukannya mempengaruhi evolusi sfera IT. Berikut ialah fakta menarik yang tidak digunakan untuk MVC secara langsung, tetapi menggambarkan kepentingan perkembangan ini. Alan Kayberkata, "Apabila saya mula-mula sampai ke Apple, iaitu pada tahun '84, Mac telah pun keluar dan Newsweek menghubungi saya dan bertanyakan pendapat saya tentang Mac. Saya berkata, 'Nah, Mac ialah komputer peribadi pertama yang cukup baik untuk kena kritik.' Jadi, selepas mengumumkan iPhone pada 2007, dia membawanya kepada saya dan menyerahkannya kepada saya. Dia berkata, 'Alan, adakah ini cukup bagus untuk dikritik?' Dan saya berkata, 'Steve, jadikan saiz ini sebesar tablet dan anda akan memerintah dunia.'" Selepas 3 tahun, pada 27 Januari 2010, Apple memperkenalkan iPad dengan pepenjuru 9.7 inci. Dalam erti kata lain, Steve Jobs mengikut nasihat Alan Kay hampir tepat. Projek Reenskaug berlangsung selama 10 tahun. Tetapi penerbitan pertama tentang MVC terbongkar selepas 10 tahun lagi. Martin Fowler, pengarang beberapa buku dan artikel mengenai seni bina perisian, menyebut bahawa dia mempelajari MVC menggunakan versi Smalltalk yang berfungsi. Kerana tidak ada maklumat tentang MVC dari sumber asal untuk masa yang lama, dan atas beberapa sebab lain, sejumlah besar tafsiran berbeza konsep ini muncul. Akibatnya, ramai yang menganggap MVC sebagai corak reka bentuk. Kurang biasa, MVC dipanggil corak komposit atau gabungan beberapa corak yang berfungsi bersama untuk mencipta aplikasi yang kompleks. Tetapi, seperti yang dinyatakan sebelum ini, MVC sebenarnya adalah satu set idea/prinsip/pendekatan seni bina yang boleh dilaksanakan dalam pelbagai cara menggunakan corak yang berbeza... Seterusnya, kami akan mempertimbangkan idea utama yang tertanam dalam konsep MVC. dan untuk beberapa sebab lain, sebilangan besar tafsiran berbeza konsep ini muncul. Akibatnya, ramai yang menganggap MVC sebagai corak reka bentuk. Kurang biasa, MVC dipanggil corak komposit atau gabungan beberapa corak yang berfungsi bersama untuk mencipta aplikasi yang kompleks. Tetapi, seperti yang dinyatakan sebelum ini, MVC sebenarnya adalah satu set idea/prinsip/pendekatan seni bina yang boleh dilaksanakan dalam pelbagai cara menggunakan corak yang berbeza... Seterusnya, kami akan mempertimbangkan idea utama yang tertanam dalam konsep MVC. dan untuk beberapa sebab lain, sebilangan besar tafsiran berbeza konsep ini muncul. Akibatnya, ramai yang menganggap MVC sebagai corak reka bentuk. Kurang biasa, MVC dipanggil corak komposit atau gabungan beberapa corak yang berfungsi bersama untuk mencipta aplikasi yang kompleks. Tetapi, seperti yang dinyatakan sebelum ini, MVC sebenarnya adalah satu set idea/prinsip/pendekatan seni bina yang boleh dilaksanakan dalam pelbagai cara menggunakan corak yang berbeza... Seterusnya, kami akan mempertimbangkan idea utama yang tertanam dalam konsep MVC.

MVC: Idea dan prinsip asas

• VC ialah satu set idea dan prinsip seni bina untuk membina sistem maklumat yang kompleks dengan antara muka pengguna
• MVC ialah singkatan yang bermaksud: Model-View-Controller

Penafian: MVC bukan corak reka bentuk. MVC ialah satu set idea dan prinsip seni bina untuk membina sistem yang kompleks dengan antara muka pengguna. Tetapi untuk kemudahan, untuk tidak berulang kali menyebut "satu set idea seni bina...", kami akan merujuk kepada corak MVC. Mari kita mulakan dengan yang mudah. Apakah yang tersembunyi di sebalik perkataan Model-View-Controller? Apabila menggunakan corak MVC untuk membangunkan sistem dengan antara muka pengguna, anda perlu membahagikan sistem kepada tiga komponen. Mereka juga boleh dipanggil modul atau komponen. Panggil mereka apa yang anda mahu, tetapi bahagikan sistem kepada tiga komponen. Setiap komponen mempunyai tujuan tersendiri. Model. Komponen/modul pertama dipanggil model. Ia mengandungi semua logik perniagaan aplikasi. Lihat.Bahagian kedua sistem ialah pandangan. Modul ini bertanggungjawab untuk memaparkan data kepada pengguna. Semua yang pengguna lihat dihasilkan oleh paparan. Pengawal.Pautan ketiga dalam rantai ini ialah pengawal. Ia mengandungi kod yang bertanggungjawab untuk mengendalikan tindakan pengguna (semua tindakan pengguna dikendalikan dalam pengawal). Model adalah bahagian sistem yang paling bebas. Sangat bebas sehinggakan ia tidak tahu apa-apa tentang modul paparan dan pengawal. Model ini sangat bebas sehingga pembangunnya mungkin tidak tahu apa-apa tentang paparan dan pengawal. Tujuan utama paparan adalah untuk memberikan maklumat daripada model dalam format yang boleh digunakan oleh pengguna. Had utama pandangan ialah ia tidak boleh mengubah model dalam apa cara sekalipun. Tujuan utama pengawal adalah untuk mengendalikan tindakan pengguna. Ia adalah melalui pengawal bahawa pengguna membuat perubahan pada model. Atau lebih tepat lagi, kepada data yang disimpan dalam model. Berikut ialah rajah yang anda lihat sebelum ini dalam pelajaran: Daripada semua ini, kita boleh membuat kesimpulan yang logik. Sistem yang kompleks perlu dibahagikan kepada modul. Mari kita terangkan secara ringkas langkah-langkah untuk mencapai perpisahan ini.

Langkah 1. Asingkan logik perniagaan aplikasi daripada antara muka pengguna

Idea utama MVC ialah mana-mana aplikasi dengan antara muka pengguna boleh dibahagikan kepada 2 modul: modul yang bertanggungjawab untuk melaksanakan logik perniagaan, dan antara muka pengguna. Modul pertama akan melaksanakan fungsi utama aplikasi. Modul ini adalah teras sistem, di mana model domain aplikasi dilaksanakan. Dalam paradigma MVC, modul ini ialah huruf M iaitu model. Modul kedua melaksanakan keseluruhan antara muka pengguna, termasuk logik untuk memaparkan data kepada pengguna dan mengendalikan interaksi pengguna dengan aplikasi. Matlamat utama pemisahan ini adalah untuk memastikan teras sistem ("model" dalam istilah MVC) boleh dibangunkan dan diuji secara bebas. Selepas membuat pemisahan ini, seni bina aplikasi kelihatan seperti ini:

Langkah 2 Gunakan corak pemerhati untuk menjadikan model lebih bebas dan untuk menyegerakkan antara muka pengguna

Di sini kita mempunyai 2 matlamat:

1. Mencapai kebebasan yang lebih besar untuk model
2. Segerakkan antara muka pengguna

Contoh berikut akan membantu anda memahami apa yang kami maksudkan dengan penyegerakan antara muka pengguna. Katakan kita membeli tiket wayang dalam talian dan melihat bilangan tempat duduk yang tersedia di teater. Pada masa yang sama, orang lain mungkin membeli tiket wayang. Jika orang lain ini membeli tiket sebelum kami, kami ingin melihat pengurangan bilangan tempat duduk yang tersedia untuk masa tayangan yang kami pertimbangkan. Sekarang mari kita fikirkan bagaimana ini boleh dilaksanakan dalam program. Katakan kami mempunyai teras sistem kami (model kami) dan antara muka (halaman web untuk membeli tiket). Dua pengguna cuba memilih tempat duduk di teater secara serentak. Pengguna pertama membeli tiket. Halaman web perlu menunjukkan kepada pengguna kedua bahawa ini telah berlaku. Bagaimana ini sepatutnya berlaku? Jika kami mengemas kini antara muka dari teras, maka teras (model kami) akan bergantung pada antara muka. Semasa kami membangunkan dan menguji model, kami perlu mengingati pelbagai cara untuk mengemas kini antara muka. Untuk mencapai matlamat ini, kita perlu melaksanakan corak pemerhati. Corak ini membolehkan model menghantar pemberitahuan perubahan kepada semua pendengar. Sebagai pendengar peristiwa (atau pemerhati), antara muka pengguna menerima pemberitahuan dan dikemas kini. Di satu pihak, corak pemerhati membolehkan model memaklumkan antara muka (pandangan dan pengawal) bahawa perubahan telah berlaku tanpa benar-benar mengetahui apa-apa tentangnya, dengan itu kekal bebas. Sebaliknya, ia memungkinkan untuk menyegerakkan antara muka pengguna. kita perlu melaksanakan corak pemerhati. Corak ini membolehkan model menghantar pemberitahuan perubahan kepada semua pendengar. Sebagai pendengar peristiwa (atau pemerhati), antara muka pengguna menerima pemberitahuan dan dikemas kini. Di satu pihak, corak pemerhati membolehkan model memaklumkan antara muka (pandangan dan pengawal) bahawa perubahan telah berlaku tanpa benar-benar mengetahui apa-apa tentangnya, dengan itu kekal bebas. Sebaliknya, ia memungkinkan untuk menyegerakkan antara muka pengguna. kita perlu melaksanakan corak pemerhati. Corak ini membolehkan model menghantar pemberitahuan perubahan kepada semua pendengar. Sebagai pendengar peristiwa (atau pemerhati), antara muka pengguna menerima pemberitahuan dan dikemas kini. Di satu pihak, corak pemerhati membolehkan model memaklumkan antara muka (pandangan dan pengawal) bahawa perubahan telah berlaku tanpa benar-benar mengetahui apa-apa tentangnya, dengan itu kekal bebas. Sebaliknya, ia memungkinkan untuk menyegerakkan antara muka pengguna.

Langkah 3 Pisahkan antara muka ke dalam paparan dan pengawal

Kami terus membahagikan aplikasi kepada modul, tetapi kini pada tahap yang lebih rendah dalam hierarki. Pada langkah ini, antara muka pengguna (yang kami pisahkan kepada modul yang berbeza dalam langkah 1) dibahagikan kepada paparan dan pengawal. Melukis garis ketat antara pandangan dan pengawal adalah sukar. Jika kami mengatakan bahawa pandangan adalah apa yang pengguna lihat, dan pengawal ialah mekanisme yang membolehkan pengguna berinteraksi dengan sistem, anda mungkin menunjukkan percanggahan. Elemen kawalan, seperti butang pada halaman web atau papan kekunci maya pada skrin telefon, pada asasnya adalah sebahagian daripada pengawal. Tetapi ia kelihatan kepada pengguna seperti mana-mana bahagian paparan. Apa yang sebenarnya kita bincangkan di sini ialah pemisahan berfungsi. Tugas utama antara muka pengguna adalah untuk memudahkan interaksi pengguna dengan sistem.

• output dan memaparkan maklumat sistem dengan mudah kepada pengguna
• masukkan data dan arahan pengguna (komunikasikannya kepada sistem)

Fungsi ini menentukan cara antara muka pengguna harus dibahagikan kepada modul. Pada akhirnya, seni bina sistem kelihatan seperti ini: Dan ini adalah cara kami tiba di aplikasi yang terdiri daripada tiga modul yang dipanggil model, pandangan dan pengawal. Mari kita ringkaskan:

1. Mengikut prinsip paradigma MVC, sistem mesti dibahagikan kepada modul.
2. Modul yang paling penting dan bebas mestilah model.
3. Model adalah teras sistem. Ia sepatutnya boleh membangunkan dan mengujinya secara bebas daripada antara muka pengguna.
4. Untuk mencapai matlamat ini, dalam langkah pertama pembahagian, kita perlu membahagikan sistem kepada model dan antara muka pengguna.
5. Kemudian, menggunakan corak pemerhati, kami meningkatkan kebebasan model dan menyegerakkan antara muka pengguna.
6. Langkah ketiga ialah membahagikan antara muka pengguna kepada pengawal dan pandangan.
7. Semua yang diperlukan untuk menerima data pengguna ke dalam sistem adalah dalam pengawal.
8. Semua yang diperlukan untuk menyampaikan maklumat kepada pengguna adalah dalam paparan.

Satu lagi perkara penting untuk dibincangkan sebelum anda boleh minum coklat panas anda.

Sedikit tentang cara paparan dan pengawal berinteraksi dengan model

Dengan memasukkan maklumat melalui pengawal, pengguna menukar model. Atau sekurang-kurangnya, pengguna menukar data model. Apabila pengguna menerima maklumat melalui elemen antara muka (melalui paparan), pengguna menerima maklumat tentang model. Bagaimana ini berlaku? Dengan cara apakah pandangan dan pengawal berinteraksi dengan model? Lagipun, kelas pandangan tidak boleh secara langsung memanggil kaedah kelas model untuk membaca/menulis data. Jika tidak, kami tidak akan dapat mengatakan bahawa model itu bebas. Model ialah satu set kelas yang berkait rapat yang mana pandangan mahupun pengawal tidak sepatutnya mempunyai akses kepadanya. Untuk menyambungkan model ke paparan dan pengawal, kita perlu melaksanakan corak reka bentuk fasad. Fasad model ialah lapisan antara model dan antara muka pengguna, yang melaluinya pandangan menerima data yang diformat dengan mudah, dan Pengawal menukar data dengan memanggil kaedah yang diperlukan pada fasad. Pada akhirnya, semuanya kelihatan seperti ini:

MVC: Apa yang kita perolehi?

Objektif utama paradigma MVC adalah untuk memisahkan pelaksanaan logik perniagaan (model) daripada visualisasinya (pandangan). Pemisahan ini meningkatkan kemungkinan penggunaan semula kod. Faedah MVC paling jelas apabila kita perlu membentangkan data yang sama dalam format yang berbeza. Contohnya, sebagai jadual, graf atau carta (menggunakan paparan berbeza). Pada masa yang sama, tanpa menjejaskan cara paparan dilaksanakan, kami boleh mengubah cara kami bertindak balas terhadap tindakan pengguna (klik butang, kemasukan data). Jika anda mengikut prinsip MVC, anda boleh memudahkan pembangunan perisian, meningkatkan kebolehbacaan kod dan meningkatkan kebolehlanjutan dan kebolehselenggaraan. Dalam artikel akhir dalam siri "Pengenalan kepada Pembangunan Perusahaan", kita akan melihat pelaksanaan MVC yang dibina menggunakan Spring MVC. Bahagian 8. Mari kita tulis aplikasi kecil menggunakan Spring Boot