nodejs 實作mvc-前端問答-PHP中文網

nodejs 實作mvc

王林

發布： 2023-05-17 10:23:37

原創

883 人瀏覽過

Node.js 是一個開源、跨平台的 JavaScript 運作環境。它使得我們能夠使用 JavaScript 編寫伺服器端應用程式。使用 Node.js 可以輕鬆地開發高效能的服務端應用程式。在本文中，我們將介紹如何使用 Node.js 實作 MVC 架構。

什麼是 MVC？

MVC 是 Model-View-Controller 的縮寫。它是一種設計模式，以一種分離應用程式的方式組織程式碼，使應用程式易於維護和擴展。

Model：包含所有應用程式的資料和相關的業務邏輯。
View：使用者介面，它從 Model 中獲取資料並將其呈現給使用者。
Controller：處理使用者介面和業務邏輯之間的交互，並將結果傳回給使用者介面。它可以充當一個中間件，如路由、中間件和控制器。

MVC 使程式碼非常模組化，可以輕鬆重構和維護應用程式的不同部分。在 Node.js 中，我們可以使用各種框架來建立 MVC 應用程式。在本文中，我們將討論如何使用 Express 框架來實作 MVC 架構。

如何使用 Express 框架實作 MVC？

Express 是 Node.js 的一個流行框架，它提供了快速建立 Web 應用程式的工具和中間件。我們可以使用 Express 框架來實作 MVC。

首先，我們需要安裝 Express 框架。在命令列中使用以下命令：

npm install express --save

登入後複製

接下來，我們需要安裝範本引擎。在本文中，我們將使用 EJS 作為模板引擎。在命令列中使用以下命令：

npm install ejs --save

登入後複製

下面是一個基本的目錄結構：

- app/
    - controllers/
    - models/
    - views/
- public/
- routes/
- app.js

登入後複製

我們將應用程式分為三個元件：控制器、模型和視圖。

控制器

在控制器資料夾中，我們將會定義我們的控制器邏輯。例如，我們可以有一個名為 userController.js 的文件，它將處理與使用者相關的請求。

在 userController.js 檔案中，我們可以匯出不同的物件和方法，以便在應用程式中使用它們。以下是一個範例：

const User = require('../models/user');

const UserController = {};

UserController.index = (req, res) => {
    // 获取所有用户
    User.getAll((err, users) => {
        if (err) {
            console.log(err);
            return;
        }
        // 渲染视图
        res.render('users/index', { users });
    });
};

UserController.show = (req, res) => {
    // 获取单个用户
    User.getById(req.params.id, (err, user) => {
        if (err) {
            console.log(err);
            return;
        }
        // 渲染视图
        res.render('users/show', { user });
    });
};

module.exports = UserController;

登入後複製

在上面的程式碼中，我們定義了一個名為 UserController 的對象，並匯出了兩個方法：index 和 show。這些方法將獲取使用者資料並將其傳遞給 EJS 模板引擎，以供渲染。我們可以在應用程式的路由中使用這些方法來處理使用者請求。

模型

在 models 資料夾中，我們將定義 Model 圖層的邏輯。例如，我們可以有一個名為 user.js 的文件，它將定義與使用者相關的資料和業務邏輯。

在 user.js 檔案中，我們可以使用 Node.js 的 ORM（物件關係映射）框架來定義模型。以下是一個範例：

const sql = require('../config/db').pool;

const User = {};

User.getAll = (callback) => {
    sql.query('SELECT * FROM users', (err, users) => {
        if (err) {
            callback(err, null);
            return;
        }
        callback(null, users);
    });
};

User.getById = (id, callback) => {
    sql.query('SELECT * FROM users WHERE id = ?', [id], (err, user) => {
        if (err) {
            callback(err, null);
            return;
        }
        callback(null, user[0]);
    });
};

module.exports = User;

登入後複製

在上面的程式碼中，我們匯出了一個名為 User 的對象，並定義了兩個方法：getAll 和 getById。這些方法將執行 SQL 查詢，並將結果傳回控制器。

檢視

在 views 資料夾中，我們將定義我們的 EJS 視圖檔案。例如，我們可以有一個名為 index.ejs 的文件，用於呈現所有使用者的資料。

以下是一個範例：

<h1>All Users</h1>

<% if (users && users.length > 0) { %>
  <ul>
    <% users.forEach(function(user) { %>
      <li><a href="/users/<%= user.id %>"><%= user.name %></a></li>
    <% }); %>
  </ul>
<% } else { %>
  <p>No users found.</p>
<% } %>

登入後複製

在上述程式碼中，我們將使用 EJS 語法來呈現所有使用者並建立清單。我們在控制器中傳遞用戶資料並在視圖中呈現它。

路由

在 routes 資料夾中，我們將定義應用程式的路由。在 app.js 檔案中，我們將配置我們的中間件。以下是一個範例：

const express = require('express');
const app = express();
const router = express.Router();
const UserController = require('./app/controllers/userController');

// 路由
router.get('/', UserController.index);
router.get('/users/:id', UserController.show);

// 中间件
app.use(express.static('public'));
app.use(express.urlencoded({ extended: true }));
app.set('view engine', 'ejs');
app.set('views', __dirname + '/app/views');
app.use(router);

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server listening on port ${PORT}.`);
});

登入後複製

在上述程式碼中，我們定義了兩個路由：一個用於呈現所有使用者的數據，另一個用於呈現單一使用者的資料。我們還配置了中間件，使我們能夠使用 EJS 模板引擎以及使用靜態文件。最後，我們啟動了伺服器。