MVC 架構與基本範例

好用的架構。

什麼是 MVC？

先來看張圖：

• Model：就是跟資料庫有關的部分，專職處理「資料」相關的操作
• View：就是跟畫面有關的部分，根據丟進去的「資料」產生「畫面」
• Controller：負責指揮 Model 對資料庫做什麼事，或是給 View 對應的資料來顯示，最後再把 response 回傳

範例

拿 Express 來舉例：

const express = require('express');
const todoController = require('./controllers/todoController');
const app = express();
const port = 5000;

// 設定 view engine 為 EJS
app.set('view engine', 'ejs');

// 跟 todo 有關的 request 一律交給 todoController 處理
app.get('/todos', todoController.getAll)
// : 代表參數
app.get('/todos/:id', todoController.get)

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
})

Model 只負責提供資料：

const todos = ['first todo', 'second todo', 'third todo'];
const todoModel = {
  // 回傳所有 todo
  getAll: () => {
    return todos;
  },
  // 回傳單一 todo
  get: id => {
    return todos[id];
  }
}
module.exports = todoModel

Controller 負責協調 Model 和 View：

// 把 Model 引進來，才能跟 Model 溝通
const todoModel = require('../models/todoModel');
const todoController = {
  // 先跟 Model 拿資料，在丟給 View
  getAll: (req, res) => {
    res.render('todos', {      
      // 要 render 的資料
      todos: todoModel.getAll()
    })
  },
  // 先跟 Model 拿資料，在丟給 View
  get: (req, res) => {
    const id = req.params.id;
    res.render('todo', {
      // 要 render 的資料
      todo: todoModel.get(id)
    })
  }
}
module.exports = todoController

View 只負責根據資料顯示畫面：

// todos.ejs
<h1>Todos</h1>

<ul>
  <% for (const todo of todos) { %>
    <li><%= todo %></li>    
  <% } %>  
</ul>

// todo.ejs
<h1>Todos</h1>
<h2><%= todo %></h2>