iT邦幫忙

2023 iThome 鐵人賽

DAY 3
0
自我挑戰組

Design Pattern - 無所不在的設計模式系列 第 3

[Day03] 先來看看MVC架構吧~

  • 分享至 

  • xImage
  •  

前言

平常實習就有每天發文紀錄的習慣
但鐵人賽完全是不同的東西QQ
今天本來打算在公司待更久,但是多個十分鐘就被師父趕回家了XD

昨天稍稍提了23個設計模式,
今天先來介紹一個軟體架構中很常見的一種設計模式~!!
MVC

什麼是MVC?


MVC就是 Model、View、Controller,是個軟體架構(一個概念),簡單來說就是讓程式碼分工合作的方式,使程式碼更易於維護。
MVC架構圖

  • MVC是最常見的設計模式之一
  • 現在的Web application可以變得很複雜,所以MVC的主要目的就是把程式歸類拆解,讓原本龐大的程式碼更易於管理。
  • 提供了一個更有組織的程式碼編寫環境。

以下一一列點介紹Model View Controller各自負責什麼!

Model

  • 和database溝通
  • 管理的資料的邏輯,例如我們想要對data進行CREATE, READ, UPDATE和DELETE(增刪查改)時,Model層會去DB提取我們需要的資料,接著和Controller溝通

View

  • User interface(UI),提供了介面給使用者
  • 資料的展示以及呈現,通常使用HTML,CSS,JavaScript實作。
  • 同樣和Controller溝通

Controller

  • MVC架構的中間人
  • 掌握了和使用著互動的邏輯
  • 從Model拿到資料
  • 傳遞資料給View

來舉個例子吧~ 如下圖所示!

  1. 假設我今天在網頁上搜尋了"拉麵"
  2. 下圖我們可以看到多了一個router,這裡的router是個程式碼的邏輯,它幫我們決定了我們要送這筆請求到哪一個controller
  3. Controller接著和model請求所需data
  4. Model從DB拿到資料後再送回給Controller
  5. Controller將這筆資料送到View
  6. View接著決定要怎麼呈現這筆資料給使用者,例如原本有好幾萬筆資料可以顯示給使用者看,但我們決定先讓使用者看到100筆資料就好。
    MVC Diagram

以上~ 明天試試實作吧~~


上一篇
[Day02] Design Pattern - 設計模式的各個種類
下一篇
[Day04] 簡易MVC CRUD實作 - 1 前置作業! (node.js)
系列文
Design Pattern - 無所不在的設計模式30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言