第 7 部分。介紹 MVC（模型-視圖-控制器）模式

本資料是“企業發展概論”系列的一部分。往期文章：

• 關於網絡
• 關於軟件架構
• 關於 HTTP/HTTPS
• 關於 Maven 的基礎知識
• 關於 servlet（編寫一個簡單的 Web 應用程序）
• 關於 servlet 容器

在本文中，我們將了解一種叫做 MVC 的東西。我們將討論什麼是 MVC，觸及它的歷史，探索 MVC 中體現的基本思想和概念，逐步了解如何將應用程序分解為模型、視圖和控制器模塊，編寫一個使用 Spring Boot 的小型 Web 應用程序，並以 Spring MVC 為例，了解如何將數據從 Java 代碼發送到 HTML 頁面。要理解這些材料，您需要熟悉設計模式，尤其是觀察者和外觀。並且熟悉 HTTP 請求和響應，理解 HTML 的基礎知識，知道什麼是 Java 註解。喝杯咖啡吃點心，放鬆一下。讓我們開始。

MVC 的歷史

MVC 背後的想法是由 Trygve Reenskaug 在 1970 年代後期在 Xerox PARC 工作時制定的。在那些日子裡，使用計算機工作需要學位並不斷研究大量文檔。Reenskaug 與一群非常強大的開發人員一起解決的任務是簡化普通用戶與計算機的交互。有必要創造一種工具，一方面要極其簡單易懂，另一方面要能夠控制計算機和復雜的應用程序。Reenskaug 所在的團隊開發了“適合所有年齡段的兒童”的筆記本電腦——Dynabook，以及在 Alan Kay 的領導下開發的 SmallTalk 語言。就在那時，友好界面的概念被確立了。在許多方面，Reenskaug 和他的團隊所做的工作影響了 IT 領域的發展。這是一個有趣的事實，它並不直接適用於 MVC，但說明了這些發展的重要性。艾倫·凱說, “當我第一次接觸 Apple 時，那是在 84 年，當時 Mac 已經問世，《新聞周刊》聯繫了我，問我對 Mac 的看法。我說，‘好吧，Mac 是第一台足夠優秀的個人電腦受到批評。所以，在 2007 年發布 iPhone 之後，他把它拿到我面前，遞給了我。他說，'艾倫，這好到要被批評嗎？我說，‘史蒂夫，把它做得和平板電腦一樣大，你就會統治世界。’”3 年後，2010 年 1 月 27 日，Apple 推出了對角線為 9.7 英寸的 iPad。換句話說，史蒂夫·喬布斯幾乎完全遵循了艾倫·凱的建議。Reenskaug 的項目持續了 10 年。但是又過了 10 年，第一個關於 MVC 的出版物才曝光。Martin Fowler，多本關於軟件架構的書籍和文章的作者，提到他使用 Smalltalk 的工作版本研究了 MVC。由於很長一段時間沒有從原始來源獲得有關 MVC 的信息，並且由於其他幾個原因，出現了大量對這個概念的不同解釋。因此，許多人將 MVC 視為一種設計模式。不太常見的是，MVC 被稱為複合模式或多個模式的組合，它們一起工作以創建複雜的應用程序。但是，如前所述，MVC 實際上主要是一組架構思想/原則/方法，可以使用不同的模式以各種方式實現……接下來，我們將考慮嵌入在 MVC 概念中的主要思想。由於其他幾個原因，出現了大量對這個概念的不同解釋。因此，許多人將 MVC 視為一種設計模式。不太常見的是，MVC 被稱為複合模式或多個模式的組合，它們一起工作以創建複雜的應用程序。但是，如前所述，MVC 實際上主要是一組架構思想/原則/方法，可以使用不同的模式以各種方式實現……接下來，我們將考慮嵌入在 MVC 概念中的主要思想。由於其他幾個原因，出現了大量對這個概念的不同解釋。因此，許多人將 MVC 視為一種設計模式。不太常見的是，MVC 被稱為複合模式或多個模式的組合，它們一起工作以創建複雜的應用程序。但是，如前所述，MVC 實際上主要是一組架構思想/原則/方法，可以使用不同的模式以各種方式實現……接下來，我們將考慮嵌入在 MVC 概念中的主要思想。

MVC：基本思想和原則

• VC 是一套架構思想和原則，用於構建具有用戶界面的複雜信息系統
• MVC是縮寫，代表：模型-視圖-控制器

免責聲明：MVC 不是設計模式。MVC 是一組架構思想和原則，用於構建具有用戶界面的複雜系統。但為方便起見，為了不重複說“一套架構思想……”，我們將參考MVC模式。讓我們從簡單的開始。Model-View-Controller 背後隱藏著什麼？當使用 MVC 模式開髮帶有用戶界面的系統時，您需要將系統分為三個組件。它們也可以稱為模塊或組件。隨心所欲地稱呼它們，但將系統分為三個部分。每個組件都有自己的用途。 模型。第一個組件/模塊稱為模型。它包含應用程序的所有業務邏輯。 看法。系統的第二部分是視圖。該模塊負責向用戶顯示數據。用戶看到的一切都是由視圖生成的。 控制器。此鏈中的第三個環節是控制器。它包含負責處理用戶操作的代碼（所有用戶操作都在控制器中處理）。模型是系統中最獨立的部分。如此獨立以至於它一定對視圖和控制器模塊一無所知。該模型是如此獨立，以至於它的開發人員可能對視圖和控制器幾乎一無所知。視圖的主要目的是以用戶可以使用的格式提供來自模型的信息。視圖的主要限制是它不得以任何方式更改模型。控制器的主要目的是處理用戶操作。用戶通過控制器對模型進行更改。或者更準確地說，存儲在模型中的數據。這是您之前在課程中看到的圖表： 從這一切，我們可以得出一個合乎邏輯的結論。一個複雜的系統需要進行模塊劃分。讓我們簡要描述一下實現這種分離的步驟。

步驟 1. 將應用程序的業務邏輯與用戶界面分離

MVC 的主要思想是任何具有用戶界面的應用程序都可以分為 2 個模塊：負責實現業務邏輯的模塊和用戶界面。第一個模塊將實現應用程序的主要功能。該模塊是系統的核心，應用程序的領域模型在這裡實現。在MVC範式中，這個模塊就是字母M，即模型。第二個模塊實現了整個用戶界面，包括向用戶顯示數據和處理用戶與應用程序交互的邏輯。這種分離的主要目標是確保系統的核心（MVC 術語中的“模型”）可以獨立開發和測試。進行此分離後，應用程序的架構如下所示：

第 2 步 使用觀察者模式使模型更加獨立並同步用戶界面

這裡我們有兩個目標：

1. 為模型實現更大的獨立性
2. 同步用戶界面

以下示例將幫助您理解用戶界面同步的含義。假設我們在線購買電影票並查看劇院的可用座位數。與此同時，其他人可能正在購買電影票。如果這個人比我們先買票，我們希望看到我們正在考慮的放映時間的可用座位數量減少。現在讓我們考慮一下如何在程序中實現它。假設我們有我們系統的核心（我們的模型）和接口（買票的網頁）。兩個用戶試圖同時在劇院中選擇座位。第一個用戶買票。該網頁需要向第二個用戶顯示這已經發生。這應該如何發生？如果我們從核心更新界面，那麼核心（我們的模型）將依賴於接口。在開發和測試模型時，我們必須牢記更新界面的各種方式。為此，我們需要實現觀察者模式。此模式允許模型向所有偵聽器發送更改通知。作為事件偵聽器（或觀察器），用戶界面接收通知並進行更新。一方面，觀察者模式讓模型通知界面（視圖和控制器）發生了變化，而實際上對此一無所知，從而保持獨立。另一方面，它使得同步用戶界面成為可能。我們需要實現觀察者模式。此模式允許模型向所有偵聽器發送更改通知。作為事件偵聽器（或觀察器），用戶界面接收通知並進行更新。一方面，觀察者模式讓模型通知界面（視圖和控制器）發生了變化，而實際上對此一無所知，從而保持獨立。另一方面，它使得同步用戶界面成為可能。我們需要實現觀察者模式。此模式允許模型向所有偵聽器發送更改通知。作為事件偵聽器（或觀察器），用戶界面接收通知並進行更新。一方面，觀察者模式讓模型通知界面（視圖和控制器）發生了變化，而實際上對此一無所知，從而保持獨立。另一方面，它使得同步用戶界面成為可能。

Step 3 將界面分離為視圖和控制器

我們繼續將應用程序劃分為模塊，但現在處於層次結構的較低級別。在此步驟中，用戶界面（我們在步驟 1 中將其分離為一個不同的模塊）被拆分為一個視圖和一個控制器。在視圖和控制器之間劃清界限是很困難的。如果我們說視圖是用戶看到的，而控制器是允許用戶與系統交互的機制，你可能會指出矛盾。網頁上的按鈕或手機屏幕上的虛擬鍵盤等控制元素基本上是控制器的一部分。但它們與視圖的任何部分一樣對用戶可見。我們在這裡真正談論的是功能分離。用戶界面的主要任務是促進用戶與系統的交互。

• 輸出並方便地向用戶顯示系統信息
• 輸入用戶數據和命令（將它們傳達給系統）

這些功能決定了用戶界面應該如何劃分為模塊。最後，系統架構如下所示： 這就是我們如何得到一個由三個模塊組成的應用程序，稱為模型、視圖和控制器。讓我們總結一下：

1. 根據MVC範式的原則，一個系統必須被分成模塊。
2. 最重要和獨立的模塊應該是模型。
3. 模型是系統的核心。應該可以獨立於用戶界面開發和測試它。
4. 要實現這一點，在劃分的第一步，我們需要將系統劃分為模型和用戶界面。
5. 然後，使用觀察者模式，我們增強了模型的獨立性並同步了用戶界面。
6. 第三步是將用戶界面劃分為控制器和視圖。
7. 將用戶數據接收到系統中所需的一切都在控制器中。
8. 將信息傳遞給用戶所需的一切都在視圖中。

在你喝熱巧克力之前還有一件重要的事情要討論。

關於視圖和控制器如何與模型交互的一些信息

通過控制器輸入信息，用戶可以更改模型。或者至少，用戶更改了模型數據。當用戶通過界面元素（通過視圖）接收信息時，用戶正在接收有關模型的信息。這是怎麼發生的？視圖和控制器通過什麼方式與模型交互？畢竟，視圖類不能直接調用模型類的方法來讀取/寫入數據。否則，我們就不能說模型是獨立的。模型是一組密切相關的類，視圖和控制器都不應該訪問這些類。要將模型連接到視圖和控制器，我們需要實現外觀設計模式。模型的外觀是模型和用戶界面之間的層，視圖通過它接收方便格式化的數據，控制器通過調用外觀上的必要方法來更改數據。最後，一切看起來像這樣：

MVC：我們得到了什麼？

MVC 範例的主要目標是將業務邏輯（模型）的實現與其可視化（視圖）分開。這種分離增加了代碼重用的可能性。當我們需要以不同的格式呈現相同的數據時，MVC 的好處最為明顯。例如，作為表格、圖形或圖表（使用不同的視圖）。同時，在不影響視圖實現方式的情況下，我們可以更改我們對用戶操作（按鈕點擊、數據輸入）的響應方式。如果遵循MVC的原則，就可以簡化軟件開發，增加代碼可讀性，提高可擴展性和可維護性。在“企業開發簡介”系列的最後一篇文章中，我們將了解使用 Spring MVC 構建的 MVC 實現。 第 8 部分。讓我們使用 Spring Boot 編寫一個小應用程序