使用 Node.js 了解 MVC 模式

模型-视图-控制器（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