使用 Node.js 了解 MVC 模式

晨曦_子画2024-11-12 8:54

模型-视图-控制器 （MVC） 模式是 Web 开发中最流行的架构模式之一。通过将应用程序划分为三个相互关联的组件（模型、视图和控制器），MVC 促进了有组织、可维护和可扩展的代码。Node.js 具有异步处理和庞大的生态系统，是构建基于 MVC 的应用程序的绝佳选择，尤其是对于 Web 和 API 开发。本指南探讨了 MVC 模式与 Node.js，带您了解其优点和实际实现。

什么是 MVC 模式？

MVC 模式将应用程序划分为三个不同的部分：

  1. 模型：表示应用程序的数据和业务逻辑。它与数据库交互并独立于用户界面处理数据。
  2. View：处理应用程序的表示层。它向用户显示数据，并将用户命令发送到 Controller。
  3. 控制器：充当 Model 和 View 之间的中介。它接受用户输入，与 Model 交互，并相应地更新 View。

这种关注点分离有助于以易于管理、测试和扩展的方式组织代码。

在 Node.js 中使用 MVC 的好处

  1. 可维护性：MVC 通过将代码组织成层，可以更轻松地管理复杂的应用程序。
  2. 可扩展性：该结构允许独立扩展或修改各个组件。
  3. 可重用代码：使用 MVC，组件通常可以在应用程序的多个视图或部分之间可重用。
  4. 高效的团队协作： 前端和后端开发人员可以同时工作，重叠最少。

使用 Node.js 设置 MVC 项目

在这里，我们将使用 Node.js 和 Express 构建一个简单的 MVC 应用程序。我们的示例将是一个基本的 "Task Manager"，它允许用户查看、添加和删除任务。

第 1 步：初始化项目

首先创建一个新的 Node.js 项目并安装必要的依赖项。

highlight 复制代码 
<span style="color:#171717"><span style="background-color:#ffffff"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)"># Create a project folder</span>
<span style="color:var(--syntax-text-color)">mkdir </span>mvc-task-manager
<span style="color:var(--syntax-text-color)">cd </span>mvc-task-manager

<span style="color:var(--syntax-comment-color)"># Initialize Node.js</span>
npm init <span style="color:var(--syntax-error-color)">-y</span>

<span style="color:var(--syntax-comment-color)"># Install Express and other dependencies</span>
npm <span style="color:var(--syntax-text-color)">install </span>express ejs mongoose body-parser
</code></span></span></span></span>
  • Express：一个用于 Node.js 的极简 Web 框架，非常适合设置控制器和路由。
  • **EJS：**一个模板引擎，允许您呈现动态 HTML 视图。
  • Mongoose：一个流行的 MongoDB 库，用于对数据库中的数据进行建模。
  • Body-parser：用于在中间件中解析传入请求正文的中间件。
第 2 步：设置项目结构

将应用程序组织到 、 和 文件夹中。此结构对于 MVC 模式至关重要。models``views``controllers

highlight 复制代码 
<span style="color:#171717"><span style="background-color:#ffffff"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>mvc-task-manager/
│
├── models/
│   └── Task.js
│
├── views/
│   ├── index.ejs
│   └── tasks.ejs
│
├── controllers/
│   └── taskController.js
│
├── public/
│   └── css/
│       └── styles.css
│
├── app.js
└── package.json
</code></span></span></span></span>

步骤 3：配置模型

Model 表示应用程序中的数据结构。对于此任务管理器，我们将使用 Mongoose 在 MongoDB 中定义一个模型。Task

highlight 复制代码 
<span style="color:#171717"><span style="background-color:#ffffff"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)">// models/Task.js</span>

<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">mongoose</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">require</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">mongoose</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">);</span>

<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">taskSchema</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-name-color)">mongoose</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">Schema</span><span style="color:var(--syntax-text-color)">({</span>
    <span style="color:var(--syntax-name-color)">title</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">String</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">required</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">true</span> <span style="color:var(--syntax-text-color)">},</span>
    <span style="color:var(--syntax-name-color)">description</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">String</span> <span style="color:var(--syntax-text-color)">},</span>
    <span style="color:var(--syntax-name-color)">completed</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">Boolean</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">default</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">false</span> <span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-text-color)">});</span>

<span style="color:var(--syntax-name-color)">module</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">exports</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">mongoose</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">model</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Task</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">taskSchema</span><span style="color:var(--syntax-text-color)">);</span>
</code></span></span></span></span>

在这里，定义了我们的 Task 模型，其中包含 、 和 的字段。taskSchema``title``description``completed

第 4 步：创建控制器

Controller 处理应用程序逻辑，处理用户输入，与 Model 交互，并指示 View 渲染数据。

highlight 复制代码 
<span style="color:#171717"><span style="background-color:#ffffff"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)">// controllers/taskController.js</span>

<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">Task</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">require</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">../models/Task</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">);</span>

<span style="color:var(--syntax-name-color)">exports</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">getTasks</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">async </span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">req</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">tasks</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">Task</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">find</span><span style="color:var(--syntax-text-color)">();</span>
    <span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">render</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">tasks</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">tasks</span> <span style="color:var(--syntax-text-color)">});</span>
<span style="color:var(--syntax-text-color)">};</span>

<span style="color:var(--syntax-name-color)">exports</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">createTask</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">async </span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">req</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">title</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">description</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">req</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">body</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">Task</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">create</span><span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">title</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">description</span> <span style="color:var(--syntax-text-color)">});</span>
    <span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">redirect</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">/tasks</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">};</span>

<span style="color:var(--syntax-name-color)">exports</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">deleteTask</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">async </span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">req</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">Task</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">findByIdAndDelete</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">req</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">params</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">id</span><span style="color:var(--syntax-text-color)">);</span>
    <span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">redirect</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">/tasks</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">};</span>
</code></span></span></span></span>

此控制器定义了三个主要操作：

  • getTasks：从数据库中提取所有任务。
  • createTask：将新任务添加到数据库。
  • deleteTask：按 ID 删除任务。

第 5 步：设置视图

在此示例中，我们使用 EJS 呈现 HTML 视图。这将允许我们在浏览器中动态显示任务数据。

创建主页文件和显示任务的文件。index.ejs``tasks.ejs

highlight 复制代码 
<span style="color:#171717"><span style="background-color:#ffffff"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)"><!-- views/index.ejs --></span>

<span style="color:var(--syntax-comment-color)"><!DOCTYPE html></span>
<span style="color:var(--syntax-error-color)"><html</span> <span style="color:var(--syntax-name-color)">lang=</span><span style="color:var(--syntax-string-color)">"en"</span><span style="color:var(--syntax-error-color)">></span>
<span style="color:var(--syntax-error-color)"><head></span>
    <span style="color:var(--syntax-error-color)"><meta</span> <span style="color:var(--syntax-name-color)">charset=</span><span style="color:var(--syntax-string-color)">"UTF-8"</span><span style="color:var(--syntax-error-color)">></span>
    <span style="color:var(--syntax-error-color)"><meta</span> <span style="color:var(--syntax-name-color)">name=</span><span style="color:var(--syntax-string-color)">"viewport"</span> <span style="color:var(--syntax-name-color)">content=</span><span style="color:var(--syntax-string-color)">"width=device-width, initial-scale=1.0"</span><span style="color:var(--syntax-error-color)">></span>
    <span style="color:var(--syntax-error-color)"><title></span>Task Manager<span style="color:var(--syntax-error-color)"></title></span>
    <span style="color:var(--syntax-error-color)"><link</span> <span style="color:var(--syntax-name-color)">rel=</span><span style="color:var(--syntax-string-color)">"stylesheet"</span> <span style="color:var(--syntax-name-color)">href=</span><span style="color:var(--syntax-string-color)">"/css/styles.css"</span><span style="color:var(--syntax-error-color)">></span>
<span style="color:var(--syntax-error-color)"></head></span>
<span style="color:var(--syntax-error-color)"><body></span>
    <span style="color:var(--syntax-error-color)"><h1></span>Welcome to Task Manager<span style="color:var(--syntax-error-color)"></h1></span>
    <span style="color:var(--syntax-error-color)"><a</span> <span style="color:var(--syntax-name-color)">href=</span><span style="color:var(--syntax-string-color)">"/tasks"</span><span style="color:var(--syntax-error-color)">></span>View Tasks<span style="color:var(--syntax-error-color)"></a></span>
<span style="color:var(--syntax-error-color)"></body></span>
<span style="color:var(--syntax-error-color)"></html></span>
</code></span></span></span></span>

该文件将呈现任务列表并提供用于添加或删除任务的表单。tasks.ejs

highlight 复制代码 
<span style="color:#171717"><span style="background-color:#ffffff"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)"><!-- views/tasks.ejs --></span>

<span style="color:var(--syntax-comment-color)"><!DOCTYPE html></span>
<span style="color:var(--syntax-error-color)"><html</span> <span style="color:var(--syntax-name-color)">lang=</span><span style="color:var(--syntax-string-color)">"en"</span><span style="color:var(--syntax-error-color)">></span>
<span style="color:var(--syntax-error-color)"><head></span>
    <span style="color:var(--syntax-error-color)"><meta</span> <span style="color:var(--syntax-name-color)">charset=</span><span style="color:var(--syntax-string-color)">"UTF-8"</span><span style="color:var(--syntax-error-color)">></span>
    <span style="color:var(--syntax-error-color)"><meta</span> <span style="color:var(--syntax-name-color)">name=</span><span style="color:var(--syntax-string-color)">"viewport"</span> <span style="color:var(--syntax-name-color)">content=</span><span style="color:var(--syntax-string-color)">"width=device-width, initial-scale=1.0"</span><span style="color:var(--syntax-error-color)">></span>
    <span style="color:var(--syntax-error-color)"><title></span>Task List<span style="color:var(--syntax-error-color)"></title></span>
<span style="color:var(--syntax-error-color)"></head></span>
<span style="color:var(--syntax-error-color)"><body></span>
    <span style="color:var(--syntax-error-color)"><h1></span>Tasks<span style="color:var(--syntax-error-color)"></h1></span>

    <span style="color:var(--syntax-error-color)"><ul></span>
        <span style="color:var(--syntax-error-color)"><</span>% <span style="color:var(--syntax-name-color)">tasks.forEach(task =</span>> <span style="color:var(--syntax-string-color)">{</span> %<span style="color:var(--syntax-error-color)">></span>
            <span style="color:var(--syntax-error-color)"><li><</span>%= <span style="color:var(--syntax-name-color)">task.title</span> %<span style="color:var(--syntax-error-color)">></span> - <span style="color:var(--syntax-error-color)"><a</span> <span style="color:var(--syntax-name-color)">href=</span><span style="color:var(--syntax-string-color)">"/delete/<%= task._id %>"</span><span style="color:var(--syntax-error-color)">></span>Delete<span style="color:var(--syntax-error-color)"></a></li></span>
        <span style="color:var(--syntax-error-color)"><</span>% }) %<span style="color:var(--syntax-error-color)">></span>
    <span style="color:var(--syntax-error-color)"></ul></span>

    <span style="color:var(--syntax-error-color)"><form</span> <span style="color:var(--syntax-name-color)">action=</span><span style="color:var(--syntax-string-color)">"/add"</span> <span style="color:var(--syntax-name-color)">method=</span><span style="color:var(--syntax-string-color)">"POST"</span><span style="color:var(--syntax-error-color)">></span>
        <span style="color:var(--syntax-error-color)"><input</span> <span style="color:var(--syntax-name-color)">type=</span><span style="color:var(--syntax-string-color)">"text"</span> <span style="color:var(--syntax-name-color)">name=</span><span style="color:var(--syntax-string-color)">"title"</span> <span style="color:var(--syntax-name-color)">placeholder=</span><span style="color:var(--syntax-string-color)">"Task Title"</span> <span style="color:var(--syntax-name-color)">required</span><span style="color:var(--syntax-error-color)">></span>
        <span style="color:var(--syntax-error-color)"><input</span> <span style="color:var(--syntax-name-color)">type=</span><span style="color:var(--syntax-string-color)">"text"</span> <span style="color:var(--syntax-name-color)">name=</span><span style="color:var(--syntax-string-color)">"description"</span> <span style="color:var(--syntax-name-color)">placeholder=</span><span style="color:var(--syntax-string-color)">"Description"</span><span style="color:var(--syntax-error-color)">></span>
        <span style="color:var(--syntax-error-color)"><button</span> <span style="color:var(--syntax-name-color)">type=</span><span style="color:var(--syntax-string-color)">"submit"</span><span style="color:var(--syntax-error-color)">></span>Add Task<span style="color:var(--syntax-error-color)"></button></span>
    <span style="color:var(--syntax-error-color)"></form></span>
<span style="color:var(--syntax-error-color)"></body></span>
<span style="color:var(--syntax-error-color)"></html></span>
</code></span></span></span></span>

第 6 步：设置路由

在主文件中定义路由，以将每个 URL 端点连接到相关的控制器函数。app.js

highlight 复制代码 
<span style="color:#171717"><span style="background-color:#ffffff"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)">// app.js</span>

<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">express</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">require</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">express</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">mongoose</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">require</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">mongoose</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">bodyParser</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">require</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">body-parser</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">taskController</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">require</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">./controllers/taskController</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">);</span>

<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">app</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">express</span><span style="color:var(--syntax-text-color)">();</span>
<span style="color:var(--syntax-name-color)">app</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">set</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">view engine</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">ejs</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">);</span>

<span style="color:var(--syntax-name-color)">mongoose</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">connect</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">mongodb://localhost:27017/taskDB</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">useNewUrlParser</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">true</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">useUnifiedTopology</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">true</span> <span style="color:var(--syntax-text-color)">});</span>

<span style="color:var(--syntax-name-color)">app</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">use</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">bodyParser</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">urlencoded</span><span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">extended</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">true</span> <span style="color:var(--syntax-text-color)">}));</span>
<span style="color:var(--syntax-name-color)">app</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">use</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">express</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">static</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">public</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">));</span>

<span style="color:var(--syntax-comment-color)">// Routes</span>
<span style="color:var(--syntax-name-color)">app</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">get</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">/</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">req</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">render</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">index</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">));</span>
<span style="color:var(--syntax-name-color)">app</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">get</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">/tasks</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">taskController</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">getTasks</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-name-color)">app</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">/add</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">taskController</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">createTask</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-name-color)">app</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">get</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">/delete/:id</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">taskController</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">deleteTask</span><span style="color:var(--syntax-text-color)">);</span>

<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">PORT</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-literal-color)">3000</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-name-color)">app</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">listen</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">PORT</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">`Server running on port </span><span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-name-color)">PORT</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">`</span><span style="color:var(--syntax-text-color)">));</span>
</code></span></span></span></span>

第 7 步：使用 CSS 设置样式

要添加一些样式，请在文件夹中创建一个文件。您可以添加基本样式，使应用程序在视觉上更具吸引力。styles.css``public/css/

第 8 步：运行并测试应用程序

使用以下命令启动应用程序：

highlight 复制代码 
<span style="color:#171717"><span style="background-color:#ffffff"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>node app.js
</code></span></span></span></span>

在浏览器中访问。您将能够使用 MVC 架构在视图之间导航、添加新任务和删除任务。http://localhost:3000

Node.js 中 MVC 架构的最佳实践

  1. Keep Controllers Thin：业务逻辑应主要驻留在 Model 中。
  2. 将中间件用于可重用代码：例如，使用中间件进行身份验证或请求日志记录。
  3. 将路由与控制器分开：为了保持控制器的简洁和专注，请考虑在单独的文件中定义路由。
  4. 模块化代码：将模型、视图和控制器保存在单独的文件和文件夹中，以保持结构。


哨兵
促进

相关推荐
前端李易安6 小时前
Webpack 热更新（HMR）详解：原理与实现
前端·webpack·node.js
Ztiddler16 小时前
【npm设置代理-解决npm网络连接error network失败问题】
前端·后端·npm·node.js·vue
前端青山17 小时前
webpack进阶(一)
前端·javascript·webpack·前端框架·node.js
老攀呀19 小时前
安装多个nodejs版本（nvm）
node.js
佚名程序员19 小时前
【Node.js】全面解析 Node.js 安全最佳实践：保护您的应用
安全·node.js
阑梦清川1 天前
SpringMVC案例学习（二）--表白墙/图书管理系统1.0版本
spring·mvc·springboot·案例
网安_秋刀鱼1 天前
PHP代码审计 --MVC模型开发框架&rce示例
开发语言·web安全·网络安全·php·mvc·1024程序员节
zxg_神说要有光1 天前
快速入门 AI：调用 AI 接口生成 React 组件
前端·javascript·node.js
佚名程序员1 天前
【Node.js】深入理解 V8 JavaScript 引擎
前端·javascript·node.js
赵闪闪1681 天前
Node.js 安装与开发环境配置全指南
node.js
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作