使用 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. 模块化代码：将模型、视图和控制器保存在单独的文件和文件夹中，以保持结构。


哨兵
促进

相关推荐
李小白669 小时前
Spring MVC(上)
java·spring·mvc
理想不理想v11 小时前
webpack最基础的配置
前端·webpack·node.js
南城巷陌13 小时前
JWT认证机制在Node.js中的详细阐述
node.js·jwt认证机制·前端安全认证
王ASC15 小时前
SpringMVC的URL组成，以及URI中对/斜杠的处理，解决IllegalStateException: Ambiguous mapping
java·mvc·springboot·web
撒呼呼15 小时前
# 起步专用 - 哔哩哔哩全模块超还原设计！(内含接口文档、数据库设计)
数据库·spring boot·spring·mvc·springboot
理想不理想v15 小时前
node.js的简单示例
node.js
yrldjsbk15 小时前
使用Node.js搭配express框架快速构建后端业务接口模块Demo
node.js·express
维李设论15 小时前
Node.js的Web服务在Nacos中的实践
前端·spring cloud·微服务·eureka·nacos·node.js·express
CodeChampion17 小时前
60.基于SSM的个人网站的设计与实现（项目 + 论文）
java·vue.js·mysql·spring·elementui·node.js·mybatis
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10树莓派 5 AI 套件（Hailo-8L）使用教程