随着互联网的普及，Web 开发已经成为了计算机科学领域不可或缺的一部分。在许多 Web 应用程序开发中，使用 MVC 模式作为应用程序的架构非常常见。Node.js 和 Express.js 都是流行的 JavaScript 框架，它们支持 MVC 架构，使得开发 Web 应用程序变得更为方便和高效。
本文将介绍 Node.js 和 Express.js MVC 架构的基础知识、实现方式和示例代码，帮助读者理解 MVC 架构模式，掌握 Node.js 和 Express.js 框架的基本概念以及如何使用这些框架来构建 MVC 应用程序。
什么是 MVC？
MVC（Model-View-Controller）是一种不同于传统代码实现的设计模式。它被用于分离应用程序中的不同组件，以便更加容易地维护和改进应用程序。其核心思想是将应用程序分为以下三个主要组件：
- **模型 (Model)**：存储应用程序数据，处理数据的计算和访问。例如，当开发电子商务网站时，商品、订单和用户数据都是模型的一部分。
- **视图 (View)**：将数据呈现为针对用户友好的格式，例如 HTML、CSS、JavaScript 或图像。
- **控制器 (Controller)**：处理用户请求并更新模型和视图，以便响应合适的输出。控制器处理用户输入并决定哪个视图应该显示给用户。
MVC 模式通过将应用程序分解成这些组件，增强了应用程序的灵活性、可扩展性、可维护性和可测试性。
Node.js 中的 MVC 架构
Node.js 是一个运行在服务器端的 JavaScript 运行时环境，可以轻松构建高性能和可伸缩的网络应用程序。Node.js 广泛应用于构建服务端 Web 应用程序和工具，包括 RESTful API、后端网站、即时通讯应用程序和智能家居设备。
在 Node.js 中，我们可以使用 MVC 开发模式来构建 Web 应用程序。下面是一个基本的 Node.js MVC 应用程序目录结构：
---------
--- ------
--- ------------
--- ----
--- -------
- --- -------
--- ------
- --- ---------
- --- ---------
--- ------------
- --- -----------------
- --- -----------------
--- -------
--- --------在此应用程序目录结构中，我们有以下重要组件：
- **模型 (Model)**：模型是一个独立于视图层和控制器层的 JavaScript 文件，通常用于处理数据操作和其他行业逻辑。在此示例中，我们使用了 user.js 来处理有关用户的信息和逻辑。
- **视图 (View)**：视图用于呈现 UI 元素和内容，通常是 HTML 文件。在此示例中，我们使用了 EJS 模板引擎来定义视图。
- **控制器 (Controller)**：控制器用于处理 HTTP 请求并将其传递给适当的模型和视图。在此示例中，我们使用了 HomeController 和 UserController 来处理不同类型的请求。
- **路由 (Routes)**：路由指定哪个控制器用于处理特定的 HTTP 请求。在此示例中，我们使用了 index.js 来定义路由规则。
实现 Node.js MVC 应用程序
下面是 Node.js 中 MVC 应用程序的实现。
首先，我们需要安装必要的 Node.js 模块。可以使用以下命令在本地项目中安装 Express.js 和 EJS 模板引擎。
--- ------- ------- ---
然后，在项目的根目录下，创建一个名为“app.js”的新文件，并将以下代码添加到该文件中：
--------------------------- ----- ------- - ------------------- ----- --- - ---------- -- -- ------ -------- ---------------------------------- -- -- --- ---- ------------- -------- ------- -- ---- ----- ----------- - -------------------------- ----- ---------- - ------------------------- ------------ ------------- ----------------- ------------ -- ----- ----- ---- - ---------------- -- ----- ---------------- -- -- - ------------------- ------- -- ---- ---------- ---
在上面的代码中，我们首先加载了所有所需的 Node.js 模块。然后，我们定义了一个实例化的 Express.js 应用程序，并设置了 public 目录中的静态文件和 EJS 模板引擎的中间件。最后，我们定义了 index 和 user 路由，并在本地主机上的端口 3000 上启动了该应用程序。
接下来，我们需要创建模型、视图和控制器。在示例应用程序中，我们有以下模型：
----- --------- - -
------ -
-
--- --
----- --------
--
-
--- --
----- ------
--
-
--- --
----- ----------
--
--
------------ -------- ---- -
------ ---------------------- -- -
------ ------- --- ---
---
--
------------ -------- -- -
------ -----------
--
--
-------------- - ----------在上述代码中，我们定义了一个名为“userModel”的 JavaScript 对象。该对象包含存储在应用程序中的用户数据，以及一些处理用户数据的函数。
然后我们需要创建视图。在本示例中，我们使用 EJS 模板引擎定义了两个视图：
views/index.ejs
--------- -----
------
------
----- --------------- --
-------------- --- ------------
-------
------
----------- -- ------- --- ---------
-- ------------------ --- ---------
-------
-------views/about.ejs
--------- -----
------
------
----- --------------- --
------------ ----------
-------
------
--------- -------
------- -- --- ----- ---- --- --- ------- --- ---------
-------
-------最后，我们定义控制器。在本示例中，我们使用控制器来处理 HTTP 请求并呈现适当的视图。
controllers/HomeController.js
----- ------- - ------------------- ----- ------ - ----------------- --------------- ----- ---- -- - -------------------- --- -------------------- ----- ---- -- - -------------------- --- -------------- - -------
controllers/UserController.js
----- ------- - ------------------- ----- --------- - -------------------------- ----- ------ - ----------------- --------------- ----- ---- -- - ----- ----- - ------------------------ ------------------- - ----- --- --- ---------------------- ----- ---- -- - ----- ---- - --------------------------------------------------- ------------------------ - ---- --- --- -------------- - -------
在 HomeController.js 中，我们使用 Express.js 路由来处理浏览器 GET 请求，并在 index 和 about 视图之间进行选择。在 UserController.js 中，我们处理了用于获取所有用户或单个用户的 GET 请求，并使用模型来承担数据操作。
运行 Node.js MVC 应用程序
要运行示例项目，请使用以下步骤：
- 在上面提供的命令行工具中，切换到项目目录中
- 使用以下命令启动 Node.js 服务器
---- ------
- 在 Web 浏览器中打开
http://localhost:3000。
Express.js 中的 MVC 架构
Express.js 是 Node.js 中最受欢迎的 Web 开发框架之一，支持 RESTful API 的实现和其他 Web 应用程序特性。使用 Express.js 可以快速构建 Web 应用程序和 RESTful API，而且它支持 MVC 开发模式。
与 Node.js 一样，快速构建 MVC 应用程序的第一步是安装 Express.js 框架和其他需要的模块。例如，以下命令将添加 Express.js 和 EJS 模板引擎。
--- ------- ------- ---
与 Node.js MVC 应用程序类似，Express.js MVC 应用程序的基本目录结构也遵循模型、视图、控制器和路由的设计模式。下面是一个简单的目录结构示例。
--- ------
--- ------------
--- ----
--- -------
- --- -------
--- ------
- --- ---------
- --- ------------
--- ------------
- --- -----------------
- --- -----------------
--- -------
--- --------该目录结构与我们之前创建的 Node.js 应用程序的目录结构类似。在该结构中，我们有以下组件：
- **模型 (Model)**：在此示例中，我们使用 task.js 来处理任务的信息和逻辑。
- **视图 (View)**：在此示例中，我们使用 EJS 模板引擎来定义两个视图。
- **控制器 (Controller)**：在此示例中，我们使用 HomeController 和 TaskController 来处理不同类型的请求。
- **路由 (Routes)**：在此示例中，我们使用 index.js 来定义路由规则。
实现 Express.js MVC 应用程序
下面是在 Express.js 中创建 MVC 应用程序的过程。
首先，我们需要创建一个新的 Express.js 应用程序并配置视图和其他常见中间件。在项目的根目录下，创建一个名为“app.js”的新文件，并将以下代码添加到该文件中：
----- ------- - ------------------- ----- --- - ---------- ----- ---- - ---------------- -- -- ------ -------- ---------------------------------- -- -- ---------- ---- ---------------- -------------------- ---------- ------------- -------- ------- -- ---- ----- ----------- - -------------------------- ----- ---------- - ------------------------- ------------ ------------- ----------------- ------------ -- ----- ----- ---- - ---------------- -- ----- ---------------- -- -- - ------------------- ------- -- ---- ---------- ---
然后，我们需要创建模型。在示例应用程序中，我们有以下模型：
----- --------- - -
------ -
-
--- --
------ ----- ---
------------ --- -----------
--
-
--- --
------ ----- ---
------------ --- --------- ------
--
-
--- --
------ ----- ---
------------ --- --------- -----------
--
--
------------ -------- ---- -
------ ---------------------- -- -
------ ------- --- ---
---
--
------------ -------- -- -
------ -----------
--
-------- -------- ------ -
----------------------
--
----------- -------- ---- -
----- ----- - --------------------------- -- ------- --- ----
-- ------ --- --- -
------------------------ ---
-
--
----------- -------- ------ -
----- ----- - ------------------------ -- ---- --- ---------
-- ------ --- --- -
----------------- - -----
-
--
--
-------------- - ----------task.js 包含存储在应用程序中的任务数据以及处理任务数据的函数，例如获取所有任务、获取单个任务、删除任务、添加任务和更新任务。
接下来我们创建视图。在本示例中，我们使用 EJS 模板引擎定义了两个视图：
views/index.ejs
--------- -----
------
------
----- --------------- --
-------------- --- ------------
-------
------
----------- -- ------- --- ---------
-- ------------------ --- ---------
-------
-------views/taskList.ejs
--------- -----
------
------
----- --------------- --
----------- ------------
-------
------
-------- ---------
----
-- ---------------------------- - --
------- ------- -- - --- ---------- -- ---- ---------------- --------
-- --- --
-----
-------
-------最后，我们定义控制器。在本示例中，我们使用控制器来处理 HTTP 请求并呈现适当的视图。
controllers/HomeController.js
----- ------- - ------------------- ----- ------ - ----------------- --------------- ----- ---- -- - -------------------- --- -------------- - -------
controllers/TaskController.js
----- ------- - ------------------- ----- --------- - -------------------------- ----- ------ - ----------------- --------------- ----- ---- -- - ----- ----- - ------------------------ ---------------------- - ----- --- --- ---------------- ----- ---- -- - ----- ---- - --------- ------------------------ ----------------------- --- ---------------------- ----- ---- -- - ----- ---- - --------------------------------------------------- ------------------------ - ---- --- --- ---------------------- ----- ---- -- - ----- ---- - --------- --------------------------- -------------------- --- ------------------------- ----- ---- -- - ----- -- - ---------------------------- ------------------------- -------------------- --- -------------- - -------
在 TaskController.js 中，我们使用 Express.js 路由来处理各种 HTTP 请求，并使用模型来承担数据操作。
运行 Express.js MVC 应用程序
要运行示例项目，请使用以下步骤：
- 在命令行中切换到项目目录。
- 使用以下命令启动 Express.js 服务器。
---- ------
- 在 Web 浏览器中打开
http://localhost:3000。您将看到欢迎页面。单击“List all tasks”链接，浏览器将显示固定的任务列表。现在，您可以通过单击“添加任务”按钮并使用表单添加任务。添加后，该任务将显示在任务列表上。在其他页面上，您可以查看、更新或删除任务。
结论
通过 MVC 架构，在 Node.js 和 Express.js 中开发 Web 应用程序变得更加容易和高效。本文提供了相应的示例代码和目录结构，以帮助读者更好地理解 MVC 架构模式，掌握 Node.js 和 Express.js 框架的基本概念，以及如何使用这些框架来构建 MVC 应用程序。在实际项目中，建议根据具体业务逻辑和需求进行更深入的 MVC 开发模式实现。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6737017d317fbffedf0760f5