使用 Node.js 理解 MVC 模式-js教程-PHP中文網

Understanding the MVC Pattern with Node.js

模型-視圖-控制器 (MVC) 模式是 Web 開發中最受歡迎的架構模式之一。透過將應用程式劃分為三個互連的元件——模型、視圖和控制器——MVC 促進了有組織、可維護和可擴展的程式碼。 Node.js 憑藉其非同步處理和龐大的生態系統，是建立基於 MVC 的應用程式（尤其是 Web 和 API 開發）的絕佳選擇。本指南探索 Node.js 的 MVC 模式，帶您了解其優點和實際實作。

什麼是 MVC 模式？

MVC 模式將應用程式分為三個不同的部分：

模型：代表應用程式的資料和業務邏輯。它與資料庫互動並獨立於使用者介面處理資料。
View：處理應用程式的表示層。它向用戶顯示數據並向控制器發送用戶命令。
控制器：充當模型和視圖之間的中介。它接受用戶輸入，與模型交互，並相應地更新視圖。

這種關注點分離有助於以易於管理、測試和擴展的方式組織程式碼。

在 Node.js 中使用 MVC 的好處

可維護性：MVC 透過將程式碼組織成層，使管理複雜的應用程式變得更加容易。
可擴展性：此結構允許單獨縮放或獨立修改各個組件。
可重複使用程式碼：使用 MVC，元件通常可以在應用程式的多個視圖或部分中重複使用。
高效的團隊協作：前端和後端開發人員可以以最小的重疊同時工作。

使用 Node.js 設定 MVC 項目

在這裡，我們將使用 Node.js 和 Express 建立一個簡單的 MVC 應用程式。我們的範例將是一個基本的“任務管理器”，允許使用者查看、新增和刪除任務。

第 1 步：初始化項目

先建立一個新的 Node.js 專案並安裝必要的依賴項。

# Create a project folder
mkdir mvc-task-manager
cd mvc-task-manager

# Initialize Node.js
npm init -y

# Install Express and other dependencies
npm install express ejs mongoose body-parser

登入後複製

Express：Node.js 的極簡 Web 框架，非常適合設定控制器和路由。
EJS：一個模板引擎，可讓您渲染動態 HTML 視圖。
Mongoose：MongoDB 的一個流行函式庫，用於對資料庫中的資料進行建模。
Body-parser：在中間件中解析傳入請求正文的中間件。

第 2 步：設定項目結構

將應用程式組織到模型、視圖和控制器資料夾中。這種結構對於 MVC 模式至關重要。

mvc-task-manager/
│
├── models/
│   └── Task.js
│
├── views/
│   ├── index.ejs
│   └── tasks.ejs
│
├── controllers/
│   └── taskController.js
│
├── public/
│   └── css/
│       └── styles.css
│
├── app.js
└── package.json

登入後複製

第 3 步：配置模型

模型代表應用程式中的資料結構。對於此工作管理員，我們將使用 Mongoose 在 MongoDB 中定義一個工作模型。

// models/Task.js

const mongoose = require('mongoose');

const taskSchema = new mongoose.Schema({
    title: { type: String, required: true },
    description: { type: String },
    completed: { type: Boolean, default: false }
});

module.exports = mongoose.model('Task', taskSchema);

登入後複製

在這裡，taskSchema 定義了我們的任務模型，其中包含標題、描述和已完成欄位。

第四步：建立控制器

控制器處理應用程式邏輯，處理使用者輸入，與模型交互，並指導視圖渲染資料。

// controllers/taskController.js

const Task = require('../models/Task');

exports.getTasks = async (req, res) => {
    const tasks = await Task.find();
    res.render('tasks', { tasks });
};

exports.createTask = async (req, res) => {
    const { title, description } = req.body;
    await Task.create({ title, description });
    res.redirect('/tasks');
};

exports.deleteTask = async (req, res) => {
    await Task.findByIdAndDelete(req.params.id);
    res.redirect('/tasks');
};

登入後複製

此控制器定義了三個主要操作：

getTasks：從資料庫中取得所有任務。
createTask：為資料庫新增任務。
deleteTask：透過任務 ID 刪除任務。

第 5 步：設定視圖

在此範例中，我們使用 EJS 來渲染 HTML 視圖。這將使我們能夠在瀏覽器中動態顯示任務資料。

建立一個index.ejs檔案用於主頁和一個tasks.ejs檔案用來顯示任務。

<!-- views/index.ejs -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task Manager</title>
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
    <h1>Welcome to Task Manager</h1>
    <a href="/tasks">View Tasks</a>
</body>
</html>

登入後複製

tasks.ejs 檔案將呈現任務清單並提供用於新增或刪除任務的表單。

<!-- views/tasks.ejs -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task List</title>
</head>
<body>
    <h1>Tasks</h1>

    <ul>
        <% tasks.forEach(task => { %>
            <li><%= task.title %> - <a href="/delete/<%= task._id %>">Delete</a></li>
        <% }) %>
    </ul>

    <form action="/add" method="POST">
        <input type="text" name="title" placeholder="Task Title" required>
        <input type="text" name="description" placeholder="Description">
        <button type="submit">Add Task</button>
    </form>
</body>
</html>

登入後複製

第 6 步：設定路線

在主 app.js 檔案中定義路由，以將每個 URL 端點連接到相關的控制器功能。

// app.js

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const taskController = require('./controllers/taskController');

const app = express();
app.set('view engine', 'ejs');

mongoose.connect('mongodb://localhost:27017/taskDB', { useNewUrlParser: true, useUnifiedTopology: true });

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));

// Routes
app.get('/', (req, res) => res.render('index'));
app.get('/tasks', taskController.getTasks);
app.post('/add', taskController.createTask);
app.get('/delete/:id', taskController.deleteTask);

const PORT = 3000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

登入後複製