模型-视图-控制器 （MVC） 模式是 Web 开发中最流行的架构模式之一。通过将应用程序划分为三个相互关联的组件（模型、视图和控制器），MVC 促进了有组织、可维护和可扩展的代码。Node.js 具有异步处理和庞大的生态系统，是构建基于 MVC 的应用程序的绝佳选择，尤其是对于 Web 和 API 开发。本指南探讨了 MVC 模式与 Node.js，带您了解其优点和实际实现。
什么是 MVC 模式？
MVC 模式将应用程序划分为三个不同的部分：
- 模型：表示应用程序的数据和业务逻辑。它与数据库交互并独立于用户界面处理数据。
- View：处理应用程序的表示层。它向用户显示数据，并将用户命令发送到 Controller。
- 控制器：充当 Model 和 View 之间的中介。它接受用户输入，与 Model 交互，并相应地更新 View。
这种关注点分离有助于以易于管理、测试和扩展的方式组织代码。
在 Node.js 中使用 MVC 的好处
- 可维护性：MVC 通过将代码组织成层，可以更轻松地管理复杂的应用程序。
- 可扩展性：该结构允许独立扩展或修改各个组件。
- 可重用代码：使用 MVC，组件通常可以在应用程序的多个视图或部分之间可重用。
- 高效的团队协作： 前端和后端开发人员可以同时工作，重叠最少。
使用 Node.js 设置 MVC 项目
在这里，我们将使用 Node.js 和 Express 构建一个简单的 MVC 应用程序。我们的示例将是一个基本的 “Task Manager”，它允许用户查看、添加和删除任务。
第 1 步：初始化项目
首先创建一个新的 Node.js 项目并安装必要的依赖项。
<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 模式至关重要。modelsviewscontrollers
<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
<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 模型，其中包含 、 和 的字段。taskSchematitledescriptioncompleted
第 4 步：创建控制器
Controller 处理应用程序逻辑，处理用户输入，与 Model 交互，并指示 View 渲染数据。
<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.ejstasks.ejs
<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
<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
<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.csspublic/css/
第 8 步：运行并测试应用程序
使用以下命令启动应用程序：
<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 架构的最佳实践
- Keep Controllers Thin：业务逻辑应主要驻留在 Model 中。
- 将中间件用于可重用代码：例如，使用中间件进行身份验证或请求日志记录。
- 将路由与控制器分开：为了保持控制器的简洁和专注，请考虑在单独的文件中定义路由。
- 模块化代码：将模型、视图和控制器保存在单独的文件和文件夹中，以保持结构。
