简介
MVC（Model-View-Controller）是一种用于组织代码的架构模式，被广泛应用于前端和后端开发中。其中，Node.js 是一种非常适合使用 MVC 架构的后端开发语言，而 Express 是 Node.js 中最流行的 Web 框架之一。
在 Express 中使用 MVC 架构可以有效地分离业务逻辑和视图层代码，提高代码的可维护性和可扩展性。npm 包 mvc-node-express 是一个能够帮助开发人员快速搭建基于 MVC 架构的 Express 应用的工具。
本教程将详细介绍如何使用 npm 包 mvc-node-express 构建基于 MVC 架构的 Express 应用。我们将从安装及应用环境配置开始，接着讲解如何创建基本的控制器、模型和视图，并通过一个完整的示例项目来演示如何使用 mvc-node-express。
安装及环境配置
在使用 mvc-node-express 之前，我们需要先安装 Node.js 环境。可以在官网 https://nodejs.org/en/ 下载并安装。
安装完 Node.js 环境之后，我们可以在命令行中通过 npm 安装 mvc-node-express：
--- ------- ---------------- ------
由于 mvc-node-express 是一个基于 Express 框架的工具，我们也需要先安装 Express：
--- ------- ------- ------
创建控制器
在 mvc-node-express 中，控制器是处理 HTTP 请求的核心。我们可以通过创建控制器来定义业务逻辑，并将其挂载到 Express 应用中。下面是一个简单的控制器示例：
-- ----------------- ------------------- - ------------- ---- - -- -- ------------- ------ -- -- ----- ------ - -------------- -- -- ------ ------------- -- --- -- ----------- --------------- --
在上面的控制器示例中，我们通过 exports.getUserById 导出一个处理 GET 请求的回调函数。这个回调函数在请求参数中获取 id 参数，并根据该参数从数据库中获取用户信息，并将查询结果返回给客户端。
创建模型
在 mvc-node-express 中，模型用于定义数据结构及 CRUD（Create, Read, Update, Delete）操作。下面是一个简单的模型示例：
-- ------------ ----- -------- - -------------------- ----- ---------- - --- ----------------- ----- - ----- ------- --------- ---- -- ---- - ----- ------- --------- ---- - --- --------------------------------- - ---------- - ------ ---------------------------- -- -------------- - ---------------------- ------------
在上面的模型示例中，我们使用了 Mongoose 来定义用户数据模型。其中，userSchema 定义了用户数据的结构，getDisplayName 是一个自定义的模型方法，用于返回用户信息的显示名称。
创建视图
在 mvc-node-express 中，视图用于定义 HTML 页面结构和样式。我们可以通过创建视图来渲染动态页面和响应客户端请求。下面是一个简单的视图示例：
---- -------- ---
--------- -----
------
------
----- ----------------
----------- ------------
-------
--- -
---------- -----
-
--------
-------
------
--------- -----------
---------- --- --------- --------
--------- --- -------- --------
-------
-------在上面的视图示例中，我们使用 EJS 模板引擎来渲染 HTML 页面。在模板中，可以通过 <%= %> 插入动态数据，示例中的 user 对象就是动态数据。
创建 mvc-node-express 应用
在了解了控制器、模型和视图的基础概念之后，我们可以通过 mvc-node-express 快速创建一个基于 MVC 架构的 Express 应用了。
下面是创建 mvc-node-express 应用的主要步骤：
1. 初始化 Express 应用
首先，我们需要在项目根目录下创建一个 app.js 文件，并初始化一个空的 Express 应用：
-- ------ ----- ------- - ------------------- ----- --- - ---------- ---------------- -- -- - ------------------- -- ------- -- ---- ------- ---
2. 添加 mvc-node-express 中间件
接着，我们需要在应用中添加 mvc-node-express 中间件，并设置相关配置：
-- ------ ----- ------- - ------------------- ----- ---------- - ---------------------------- ----- --- - ---------- -- -- ---------------- --- -------------------- --------- ---------- ------------ --------------- ------- ---------- ------ -------- ---- ---------------- -- -- - ------------------- -- ------- -- ---- ------- ---
在上面的代码中，我们通过 mvcExpress 函数添加了 mvc-node-express 中间件，并传入了一些参数：
rootPath：应用的根路径。controllers：控制器的路径。models：模型的路径。views：视图的路径。
3. 创建控制器、模型和视图
接下来，我们可以在对应的路径下创建自己的控制器、模型和视图文件，以及对应的目录结构。比如：
------------ ----------------- ------- ------------ ------ --------
4. 挂载控制器到 Express 应用
最后，我们需要将控制器挂载到 Express 应用中，以响应客户端请求：
-- ------ ----- ------- - ------------------- ----- ---------- - ---------------------------- ----- --- - ---------- -- -- ---------------- --- -------------------- --------- ---------- ------------ --------------- ------- ---------- ------ -------- ---- -- ------ ------- -- ----- -------------- - ------------------------------------------- -------------------- ---------------------------- ---------------- -- -- - ------------------- -- ------- -- ---- ------- ---
在上面的代码中，我们使用 mvcExpress.getController 方法获取 userController 控制器，并将其挂载到 Express 应用中，以处理来自客户端的 GET 请求。
示例应用
最后，我们通过一个简单的示例项目来演示如何使用 mvc-node-express 构建基于 MVC 架构的 Express 应用。
项目结构如下：
--- ------
--- ---------
--- ------------
- --- -----------------
--- -------
- --- ------------
--- ------
--- --------其中，config.js 是项目配置文件，包含数据库连接、端口号等配置信息。controllers/ 目录包含控制器代码，models/ 目录包含模型代码，views/ 目录包含视图代码。
下面是 app.js 的代码：
-- ------ ----- ------- - ------------------- ----- ---------- - ---------------------------- ----- -------- - -------------------- ----- ------ - -------------------- -- -- ------- --- --------------------------------- - ---------------- ----- ------------------- ---- --- ----- --- - ---------- -- -- ---------------- --- -------------------- --------- ---------- ------------ --------------- ------- ---------- ------ -------- ---- -- ------ ------- -- ----- -------------- - ------------------------------------------- -------------------- ---------------------------- -- -- ------- -- ----------------------- -- -- - ------------------- -- ------- -- ---- ----------------- ---
在 app.js 中，我们首先连接了 MongoDB 数据库，然后添加了 mvc-node-express 中间件，并将控制器挂载到 Express 应用中。
下面是 config.js 的代码：
-- --------- ----- ------ - - ----- ----- --------- -------------------------- -- -------------- - -------
在 config.js 中，我们定义了项目的配置信息，包含端口号和 MongoDB 连接地址。
下面是 controllers/userController.js 的代码：
-- -----------------
----- ---- - -------------------------------
------------------- - ------------- ---- -
----- ------ - --------------
--------------------- ----- ----- -- -
-- ----- -
--------------
- ---- -
------------------ - ---- ---
-
---
--在 userController.js 中，我们定义了处理 GET 请求的回调函数。这个函数通过 req.params.id 获取请求中的 id 参数，并使用 Mongoose 中的 findById 方法从数据库中查询到对应的用户信息，并将结果渲染到视图上。
下面是 models/userModel.js 的代码：
-- ------------ ----- -------- - -------------------- ----- ---------- - --- ----------------- ----- - ----- ------- --------- ---- -- ---- - ----- ------- --------- ---- - --- --------------------------------- - ---------- - ------ ---------------------------- -- -------------- - ---------------------- ------------
在 userModel.js 中，我们使用 Mongoose 来定义了用户数据模型，其中包含了 name 和 age 两个字段，以及一个自定义的模型方法 getDisplayName。
最后，下面是 views/user.ejs 的代码：
---- -------- ---
--------- -----
------
------
----- ----------------
----------- ------------
-------
--- -
---------- -----
-
--------
-------
------
--------- -----------
---------- --- --------- --------
--------- --- -------- --------
-------
-------在 user.ejs 中，我们使用 EJS 模板引擎来渲染用户信息，并将动态数据渲染到 HTML 页面上。
以上，我们通过一个完整的示例项目演示了如何使用 npm 包 mvc-node-express 构建基于 MVC 架构的 Express 应用。通过掌握 mvc-node-express，开发人员可以更加方便地编写高效、可维护的 Express 应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006734f890c4f72775837fc