iT邦幫忙

2024 iThome 鐵人賽

DAY 14
2
Software Development

Laravel 隨筆學習札記系列 第 14

Day14 - 從菜單到訂單:MVC 架構的完整旅程

  • 分享至 

  • xImage
  •  

來唷!今天是開咖啡廳的小故事

在一個陽光明媚的小鎮上,Lala 開了一家名為「夢想咖啡廳」的咖啡店。隨著顧客的增多,Lala 決定使用一個設計模式建立線上訂購系統,使用 MVC(模型-視圖-控制器)架構來設計這個系統。


1. MVC是什麼?

先看看維基百科怎麼書說

MVC模式的目的是實現一種動態的程式設計,使後續對程式的修改和擴充簡化,並且使程式某一部分的重複利用成為可能。除此之外,此模式透過對複雜度的簡化,使程式結構更加直覺。軟體系統透過對自身基本部分分離的同時也賦予了各個基本部分應有的功能。

  • 模型(Model):程式設計師編寫程式應有的功能(實現演算法等等)、資料庫專家進行資料管理和資料庫設計(可以實現具體的功能)。
  • 視圖(View):介面設計人員進行圖形介面設計。
  • 控制器(Controller):負責轉發請求,對請求進行處理。

使用咖啡廳舉例:在 Lala 的咖啡廳系統中,MVC 是三個主要組成部分:

  • Model(模型):負責管理所有咖啡飲品的資訊,如名稱、價格、庫存和訂單狀態,並與資料庫進行交互。
    使用 Laravel 的 Eloquent ORM 讓操作資料庫更加的方便。
  • View(視圖):菜單的呈現,讓顧客可以看到各種飲品的選擇、價格和促銷活動。
    使用 Laravel 的 Blade 模板引擎來設計這些視圖。
  • Controller(控制器):處理來自顧客的請求,例如選擇飲品、數量和下訂單。控制器將請求轉發給相應的 Model,Model 回覆後選擇適合的畫面進行呈現。

當顧客在網站上想要訂購一杯拿鐵時,會先瀏覽菜單選擇飲品(View),選擇好飲品甜度糖度後,點擊「下訂單」按鈕。這個請求會發送到 ControllerController 會調用 Model 進入資料庫檢查拿鐵的庫存情況。

如果 Model 確認庫存充足,Controller 將處理訂單並更新庫存,然後返回一個「成功的訂單」確認訊息到視圖,讓顧客知道他們的訂單已被成功處理。
https://ithelp.ithome.com.tw/upload/images/20240928/20169308T7JNIm4Zwm.jpg


MVC 架構的優點整理

  1. 分開不同的東西
    • 在 MVC 裡,資料層(Model)和顯示層(View)被清楚地分開,避免了原始 JSP 網頁中把 SQL 和 HTML 混在一起,讓代碼變得很混亂。
  2. 重複使用代碼
    • 可以讓多個 View 使用同一個 Model。比如,網站可以同時支持電腦和手機版的界面,而不需要重寫所有的代碼。這樣我們寫一次就可以用在不同地方,提升效率。
  3. 控制器的獨立性
    • Controller 與 Model 和 View 之間具有獨立性,我們需要更動資料來源(比如從 MySQL 轉到 Oracle),只要改動 Controller,View 就能正常運作,讓整體系統更靈活。
  4. 提高靈活性
    • Controller 可以把不同的 Model 和 View 連接在一起,根據使用者的需求來調整,使用者就能看到他們想要的東西。
  5. 降低相互依賴性
    • MVC 的三個部分互不影響,改變一個部分不會破壞其他部分,這樣讓整體應用的維護和擴展變得更簡單,也降低了錯誤的風險。

參考資料:

  1. MVC、MVP 和 MVVM 三種設計模式的異同
  2. 維基百科-MVC

踏著身心靈的塔羅腳步,轉向技術與邏輯的工程師之路,就藉由塔羅日抽來紀錄今日的學習與生活吧!

錢幣四:MVC 架構就像是塔羅牌中的錢幣四,提供了一個穩定的基礎,讓應用程序的各個部分協同工作。

People who cannot find time for recreation are obliged sooner or later to find time for illness.

那些無法找到休閒時間的人,終將不得不抽出時間來面對健康的問題。

- John Wanamaker


上一篇
Day13 - 不再迷路::掌握 Laravel 路由的基本技巧
下一篇
Day15 - Laravel 的 Controller:讓代碼更有條理
系列文
Laravel 隨筆學習札記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言