Bahagian 7. Pengenalan kepada corak MVC (Model-View-Controller).

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

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

Dalam bahan ini kami akan memperkenalkan anda kepada perkara seperti MVC. Mari kita bincangkan tentang apa itu MVC, sentuh sejarah penciptaannya, fahami idea dan konsep utama yang wujud dalam MVC, pertimbangkan langkah demi langkah cara memecahkan aplikasi ke dalam modul Model, View, Controller, dan juga menulis aplikasi web kecil dalam Spring-Boot, dan Menggunakan Spring-MVC sebagai contoh, mari lihat cara data dipindahkan daripada kod Java ke halaman html. Untuk memahami bahan ini, anda perlu biasa dengan corak reka bentuk, terutamanya Pemerhati dan Fasad. Biasakan diri dengan permintaan dan respons HTTP, fahami asas html, ketahui anotasi dalam Java. Duduk, buat teh, sediakan pencuci mulut, salad, hidangan utama dan hidangan pertama. Kita mulakan.

Sejarah MVC

Idea untuk MVC telah dirumuskan oleh Trygve Reenskaug semasa bekerja di Xerox PARC pada akhir 70-an. Pada masa itu, untuk bekerja dengan komputer adalah mustahil untuk dilakukan tanpa ijazah akademik dan kajian berterusan dokumentasi yang banyak. Masalah yang Reenskaug selesaikan bersama-sama dengan sekumpulan pembangun yang sangat kuat adalah untuk memudahkan interaksi pengguna biasa dengan komputer. Ia adalah perlu untuk mencipta alat yang, di satu pihak, akan menjadi sangat mudah dan mudah difahami, dan di sisi lain, akan memungkinkan untuk mengurus komputer dan aplikasi yang kompleks. Reenskaug bekerja pada pasukan yang membangunkan komputer mudah alih "untuk kanak-kanak dari semua peringkat umur" - Dynabook, serta bahasa SmallTalk di bawah arahan Alan Kay. Pada ketika itu juga konsep antara muka mesra telah ditetapkan. Kerja Reenskaug bersama pasukannya banyak mempengaruhi perkembangan bidang IT. Marilah kita membentangkan fakta menarik yang tidak berkaitan secara langsung dengan MVC, tetapi menggambarkan kepentingan perkembangan tersebut. Pada tahun 2007, selepas pembentangan Apple iPhone, Alan Kay berkata: “Apabila Macintosh keluar, Newsweek bertanya apa yang saya fikirkan mengenainya. Saya berkata: ini adalah komputer peribadi pertama yang patut dikritik. Selepas pembentangan, Steve Jobs muncul dan bertanya: adakah iPhone layak dikritik? Dan saya berkata, jadikan lima kali lapan inci dan anda akan menakluki dunia.” Tiga tahun kemudian, pada 27 Januari 2010, Apple memperkenalkan iPad 9.7 inci. Maksudnya, Steve Jobs mengikut nasihat Alan Kay hampir secara literal. Projek yang Rennskaug kerjakan berlangsung selama 10 tahun. Dan penerbitan pertama tentang MVC daripada penciptanya diterbitkan lagi 10 tahun kemudian. Martin Fowler, pengarang beberapa buku dan artikel mengenai seni bina perisian, menyebut bahawa dia mempelajari MVC daripada versi SmallTalk yang berfungsi. Memandangkan tiada maklumat tentang MVC dari sumber utama untuk masa yang lama, serta beberapa sebab lain, sejumlah besar tafsiran berbeza konsep ini telah muncul. Akibatnya, ramai orang menganggap MVC sebagai skema atau corak reka bentuk. Kurang biasa, MVC dipanggil corak komposit atau gabungan beberapa corak yang berfungsi bersama untuk melaksanakan aplikasi yang kompleks. Tetapi sebenarnya, seperti yang dikatakan sebelum ini, MVC adalah satu set idea/prinsip/pendekatan seni bina yang boleh dilaksanakan dalam pelbagai cara menggunakan pelbagai corak... Seterusnya, kita akan cuba melihat idea utama yang tertanam dalam konsep MVC.

Apakah itu 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 akronim 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, agar tidak berulang setiap kali: "Satu set idea seni bina ...", kami akan memanggil MVC sebagai corak. Mari kita mulakan dengan sesuatu yang mudah. Apakah yang tersembunyi di sebalik perkataan Model-View-Controller? Apabila membangunkan sistem dengan antara muka pengguna, mengikut corak MVC, anda perlu membahagikan sistem kepada tiga komponen. Ini, seterusnya, boleh dipanggil modul atau komponen. Katakan apa yang anda mahu, tetapi bahagikan kepada tiga. Setiap komponen akan mempunyai tujuan tersendiri. Model. Komponen/modul pertama ialah model yang dipanggil. 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 menyimpan kod yang bertanggungjawab untuk memproses tindakan pengguna (sebarang tindakan pengguna dalam sistem diproses dalam pengawal). Model adalah bahagian sistem yang paling bebas. Sangat bebas sehingga ia tidak sepatutnya mengetahui apa-apa tentang modul View dan Controller. Model ini sangat bebas sehingga pembangunnya mungkin tidak tahu apa-apa tentang View dan Controller. Tujuan utama Paparan adalah untuk menyediakan maklumat daripada Model dalam format yang mesra pengguna. Had utama View ialah ia tidak sepatutnya mengubah model dalam apa jua cara. Tujuan utama Pengawal adalah untuk memproses tindakan pengguna. Melalui Pengawallah pengguna membuat perubahan pada model. Lebih tepat lagi, ke dalam data yang disimpan dalam model. Mari kita berikan sekali lagi rajah yang telah ditunjukkan kepada anda pada kuliah: Daripada semua ini kita boleh membuat kesimpulan yang logik sepenuhnya. Sistem yang kompleks perlu dibahagikan kepada modul. Mari kita terangkan secara ringkas langkah-langkah bagaimana untuk mencapai pemisahan sedemikian.

Langkah 1: Asingkan logik perniagaan aplikasi daripada antara muka pengguna

Idea utama MVC ialah mana-mana aplikasi dengan antara muka pengguna boleh, kepada anggaran pertama, dibahagikan kepada 2 modul: modul yang bertanggungjawab untuk melaksanakan logik perniagaan aplikasi, dan antara muka pengguna. Modul pertama akan melaksanakan fungsi utama aplikasi. Modul ini akan menjadi teras sistem, di mana model domain aplikasi dilaksanakan. Dalam konsep MVC, modul ini akan menjadi huruf M kami, i.e. model. Modul kedua akan melaksanakan keseluruhan antara muka pengguna, termasuk memaparkan data kepada pengguna dan logik interaksi pengguna dengan aplikasi. Tujuan utama pengasingan ini adalah untuk memastikan teras sistem (Model dalam terminologi MVC) boleh dibangunkan dan diuji secara bebas. Seni bina aplikasi selepas pembahagian sedemikian akan kelihatan seperti ini:

Langkah 2. Menggunakan corak Pemerhati, capai kebebasan model yang lebih besar, serta penyegerakan antara muka pengguna

Di sini kami mengejar 2 matlamat:

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

Contoh berikut akan membantu anda memahami apa yang dimaksudkan dengan menyegerakkan antara muka pengguna. Katakan kita membeli tiket wayang dalam talian dan melihat bilangan tempat duduk yang tersedia di teater. Orang lain boleh beli tiket wayang pada masa yang sama dengan kita. Jika ini seseorang membeli tiket sebelum kami, kami ingin melihat bahawa bilangan tempat duduk yang tersedia untuk sesi kami telah berkurangan. Sekarang mari kita fikirkan bagaimana ini boleh dilaksanakan di dalam program. Katakan kita mempunyai teras sistem (model kami) dan antara muka (halaman web tempat kami membuat pembelian). Di tapak, 2 pengguna serentak memilih tempat duduk. Pengguna pertama membeli tiket. Pengguna kedua perlu memaparkan maklumat ini pada halaman. Bagaimana ini harus berlaku? Jika kami mengemas kini antara muka daripada kernel sistem, kernel kami, model kami, akan bergantung pada antara muka. Apabila membangunkan dan menguji model, anda perlu mengingati pelbagai cara untuk mengemas kini antara muka. Untuk mencapai matlamat ini, anda perlu melaksanakan corak Pemerhati. Dengan bantuannya, model menghantar pemberitahuan tentang perubahan kepada semua pelanggan. Antara muka, sebagai pelanggan sedemikian, akan menerima pemberitahuan dan kemas kini. Corak Pemerhati membenarkan model, dalam satu pihak, untuk memaklumkan antara muka (pandangan dan pengawal) bahawa perubahan telah berlaku di dalamnya, dan sebaliknya, untuk benar-benar "mengetahui" apa-apa tentang mereka, dan dengan itu kekal bebas. Sebaliknya, ini akan membolehkan antara muka pengguna disegerakkan.

Langkah 3. Membahagikan antara muka kepada Paparan dan Pengawal

Kami terus membahagikan aplikasi kepada modul, tetapi pada tahap hierarki yang lebih rendah. Dalam langkah ini, antara muka pengguna (yang dipisahkan menjadi modul berasingan dalam langkah 1) dibahagikan kepada paparan dan pengawal. Sukar untuk membuat garis ketat antara pandangan dan pengawal. Jika kita mengatakan bahawa pandangan adalah apa yang pengguna lihat, dan pengawal adalah mekanisme yang membolehkan pengguna berinteraksi dengan sistem, terdapat beberapa percanggahan. Kawalan, seperti butang pada halaman web atau papan kekunci maya pada skrin telefon, pada asasnya adalah sebahagian daripada pengawal. Tetapi ia sama kelihatan kepada pengguna seperti mana-mana bahagian paparan. Di sini kita bercakap lebih lanjut mengenai pembahagian fungsi. Tugas utama antara muka pengguna adalah untuk memastikan interaksi pengguna dengan sistem. Ini bermakna antara muka hanya mempunyai 2 fungsi:

• memaparkan dan memaparkan maklumat tentang sistem dengan mudah kepada pengguna;
• masukkan data pengguna dan arahan ke dalam sistem (hantarkannya ke sistem);

Fungsi ini menentukan cara antara muka harus dibahagikan kepada modul. Hasilnya, seni bina sistem kelihatan seperti ini: Jadi, kami mempunyai aplikasi tiga modul yang dipanggil Model, View dan Controller. Untuk Meringkaskan:

1. Mengikut prinsip MVC, sistem perlu dibahagikan kepada modul.
2. Modul yang paling penting dan bebas mestilah model.
3. Model adalah teras sistem. Anda memerlukan keupayaan untuk membangunkan dan mengujinya secara bebas daripada antara muka.
4. Untuk melakukan ini, pada langkah pertama pengasingan sistem, anda perlu membahagikannya kepada model dan antara muka.
5. Seterusnya, menggunakan corak Pemerhati, kami mengukuhkan model dalam kebebasannya dan mendapatkan penyegerakan antara muka pengguna.
6. Langkah ketiga ialah membahagikan antara muka kepada pengawal dan pandangan.
7. Semua yang diperlukan untuk memasukkan maklumat daripada pengguna ke dalam sistem adalah ke dalam pengawal.
8. Semua yang mengeluarkan maklumat daripada sistem kepada pengguna dilihat.

Ada satu lagi perkara penting untuk dibincangkan dan anda boleh minum koko.

Sedikit tentang hubungan antara View dan Pengawal dan Model

Apabila pengguna memasukkan maklumat melalui pengawal, dia dengan itu membuat perubahan pada model. Sekurang-kurangnya pengguna membuat perubahan pada data model. Apabila pengguna menerima maklumat melalui elemen antara muka (melalui Paparan), pengguna menerima maklumat tentang data model. Bagaimana ini berlaku? Bagaimanakah View dan Controller berinteraksi dengan model? Lagipun, kelas View tidak boleh secara langsung menggunakan kaedah kelas Model untuk membaca/menulis data, jika tidak, tidak ada persoalan tentang kebebasan Model. Model mewakili set kelas yang saling berkait rapat yang mana, dengan cara yang baik, View mahupun Controller tidak sepatutnya mempunyai akses. Untuk menyambungkan Model dengan Paparan dan Pengawal, adalah perlu untuk melaksanakan corak reka bentuk Fasad. Fasad model akan menjadi lapisan paling antara Model dan antara muka, yang melaluinya Paparan menerima data dalam format yang mudah, dan Pengawal menukar data dengan memanggil kaedah fasad yang diperlukan. Secara skematik, pada akhirnya, semuanya akan kelihatan seperti ini:

MVC: apakah faedahnya?

Matlamat utama mengikuti prinsip MVC adalah untuk memisahkan pelaksanaan logik perniagaan (model) aplikasi daripada visualisasi (pandangan). Pemisahan ini akan meningkatkan penggunaan semula kod. Faedah menggunakan MVC paling jelas dalam kes di mana pengguna perlu menyediakan data yang sama dalam bentuk yang berbeza. Contohnya, dalam bentuk jadual, graf atau carta (menggunakan jenis yang berbeza). Pada masa yang sama, tanpa menjejaskan pelaksanaan paparan, anda boleh menukar reaksi terhadap tindakan pengguna (mengklik butang, memasukkan data). Jika anda mengikut prinsip MVC, anda boleh memudahkan penulisan atur cara, meningkatkan kebolehbacaan kod dan memudahkan untuk mengembangkan dan menyelenggara sistem pada masa hadapan. Dalam bahan akhir siri "Pengenalan kepada Pembangunan Perusahaan", kita akan melihat pelaksanaan MVC menggunakan Spring-MVC sebagai contoh. Bahagian 8. Menulis aplikasi kecil dalam spring-boot