日常 Python:MVC (Model-View-Controller) 架構是什麼?

Chuan 建權
7 min readNov 7, 2024

--

如果你會點閱這篇文章,想必本身一定是聽過 MVC 這個字詞,但不太確定它的意義,甚至會有點納悶——「MVC 是用來做什麼的?」

MVC 實際上是 Model-View-Controller 這三個詞彙的縮寫,而這三個字的組合則代表的意思是一種常見的軟體、網頁設計架構(design pattern),在 Python 的網站框架中(例如:Flask、Django),尤其常見重要。

好像應該要有什麼笑點,但我也看不懂

舉一個生活化的例子——「假設你今天想在家吃飯,誰會負責煮飯呢?」沒意外的話,這個重責大任通常會落在媽媽身上,那我們再深入觀察一下,會發現媽媽還會一手包辦買菜、備料、烹調、上菜、洗碗等各式雜事,我們頂多就是嘴巴開開,把飯菜吃完,然後跑去看電視。

(啊?你說你會幫忙洗碗啊,給你一顆星星!)

也因為這些事都是由媽媽一個人處理,無論她再怎麼厲害,也都只有自己一個人慢慢做,再加上媽媽也不一定是專業的廚師,遇到不拿手的料理時,很有可能在廚房裡弄得雜亂無章,最後端上來的菜也會令人眉頭一皺。

而 MVC 架構則像是外頭專業的餐廳,想像自己走入一家五星級餐廳,你閱覽完菜單後,服務生紀錄我們所點的餐點,告訴內場主廚需要出餐的順序,主廚將不同的任務分派給助理們,待助理們各自準備好餐點後,再給主廚確認後,統一交由服務生端上餐桌,最後我們得以享用大餐。

在這樣的對比中,有注意到媽媽跟餐廳最大的不同是什麼嗎?就是「專業分工」!

相較於媽媽,餐廳裡的每個人只負責特定的工作內容,等到完成自己的工作後,再把成果交給下一個接手。

我們暫且把前面的比喻放在一旁,回來說說 MVC 是怎麼樣運用在網頁設計上。

如果把我們使用網頁的流程進行簡單地步驟拆解,大概是這樣:

1. 輸入一個網址

當身為使用者的我們輸入網址時,實際上是在進行名為 request (請求)的動作,我們透過 URL 網址去請求閱覽某個網頁。

2. 處理收到請求後

根據不同的網址,我們會透過 route (路由)的指示,找到相對應的 controller(控制器),而 controller 會依照工程師寫的內容,開始進行產生對應的動作。

3. controller 開始做事

controller 會開始去操控 model(模型),告訴 model 需要從 database(資料庫)中拿去哪些所需的資料,在這個取得資料的過程中,controller 只動口,而真正動手跟 database 互動並取得資料是「model(模型)」。

4. model 開始找資料

根據 controller 的指示,model 會開始操作 database,並且將得到的結果送回 controller,讓 controller 決定該如何使用這些結果。

5. controller 把結果送給 view

當 controller 得到 model 提供的東西,controller 可以選擇對這些東西再進行一些處理,或是原封不動地交給 view(視圖),讓 view 可以把這結果呈現給使用者。

6. view 決定如何呈現給使用者

view(視圖) 收到 controller 提供的結果後,可以決定要以什麼樣的方式視覺化地呈現在使用者面前。

7. 使用者看到畫面

使用者在網頁上看到最終 render(渲染)出來的網頁視覺內容。

MVC 架構下的網頁流程

這樣的七個步驟,如果換成我們稍早的餐廳比喻,大概會是這樣:

1. 輸入一個網址

當身為使用者的我們輸入網址時,實際上是在進行名為 request (請求)的動作,我們透過 URL 網址去請求閱覽某個網頁。

1. 我們向服務生點餐

我們跟服務生說,我們今天想吃什麼餐點,這裡的餐點也就是我們的 request

2. 處理收到請求後

根據不同的網址,我們會透過 route (路由)的指示,找到相對應的 controller(控制器),而 controller 會依照工程師寫的內容,開始進行產生對應的動作。

2. 服務生收到點餐需求

我們點的餐點可能是牛排、甜點、飲料,服務生會針對我們的點餐內容,確認應該找誰負責製作這份餐點,這個過程像是 route 指引對應的道路。
假設今天我們點的是一份甜點,那麼經由 route 的指引,則會找到甜點師進行製作,而這位甜點師就是我們的 controller

3. controller 開始做事

controller 會開始去操控 model(模型),告訴 model 需要從 database(資料庫)中拿去哪些所需的資料,在這個取得資料的過程中,controller 只動口,而真正動手跟 database 互動並取得資料是「model(模型)」。

3. 甜點師開始製作甜點

甜點師得知這次要製作的甜點是布朗尼時,他會先去儲藏室找尋製作布朗尼所需的一切材料,而儲藏室就是我們的 model
儲藏室有著各種食材區塊,最重要的是,甜點師只要跟告訴儲藏室,他想要什麼食材,儲藏室會自己去找有沒有這個食材。

4. model 開始找資料

根據 controller 的指示,model 會開始操作 database,並且將得到的結果送回 controller,讓 controller 決定該如何使用這些結果。

4. 儲藏室開始準備食材

根據甜點師的需求,儲藏室會在各個食材區域,翻找有沒有符合需求的食材,這些區塊是我們的 database,而我們最後得到的食材,就是我們想要的 data(資料),儲藏室會把這些食材交給甜點師,讓甜點師進行處理。

5. controller 把結果送給 view

當 controller 得到 model 提供的東西,controller 可以選擇對這些東西再進行一些處理,或是原封不動地交給 view(視圖),讓 view 可以把這結果呈現給使用者。

5. 甜點師把做好的甜點交給服務生

甜點師可以根據自己的獨家食譜做出布朗尼,當布朗尼完成後,甜點師會把布朗尼交給服務生,讓服務生決定用什麼餐盤,把這個甜點上到顧客面前,而這裡的餐盤,也就是 MVC 中的 view

6. view 決定如何呈現給使用者

view(視圖) 收到 controller 提供的結果後,可以決定要以什麼樣的方式視覺化地呈現在使用者面前。

6. 選擇用什麼樣的餐盤裝飾餐點

服務生可以選擇用什麼樣的餐盤放置這個布朗尼,可以是一個很簡單的餐盤,也可以是一個很花俏的餐盤。

7. 使用者看到畫面

使用者在網頁上看到最終 render(渲染)出來的網頁視覺內容。

7. 我們終於看到甜點上菜了

等布朗尼在盤子上擺放好後,我們便可以看到最終精心裝飾、render 的甜點,準備可以大快朵頤了。

就這樣,我們完整地走完從點擊網址到實際上看到網頁的流程,而這個流程從以前可能要花數十秒(至少我小時候是這樣),到現在只需要彈指之間,就能呈現多彩多姿的視覺效果,一切都多虧了網路傳輸的進步。

總觀來看,MVC 架構的優點在於將應用程式中,不同職責的事務交由不同的組件負責,讓程式能夠達到:

  • 分離組件,讓每個 Model-View-Controller 各自負責不同事務,程式碼變得清晰且好管理。
  • 提高開發效率,前端人員可以專注處理 view,後端人員專心處理 controller 與 model。
  • 提高測試性,每個組件都可以單獨進行測試,而不會交互影響。
  • 易於擴展,當某個組件需要更換時,開發人員不必重構整個應用程式。
  • 提高重複使用性,controller 跟 model 都可以多個 view 所使用,減少重複的程式碼與維護成本。
一人一個 MVC

上述的優點也因此讓 MVC 成為現代應用程式開發,非常多團隊採用的一種架構模式。

--

--

Chuan 建權
Chuan 建權

Written by Chuan 建權

(網頁工程師/演唱會燈光設計)喜歡做有趣的事,也喜歡把事情做的有趣!

No responses yet