使用 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}`));

登录后复制