简介
在前端应用的开发中，MVC（Model-View-Controller）设计模式被广泛应用，其主要目的是为了将应用程序的不同方面分离开来，以便更好地管理。
在 Express.js 中使用 MVC 设计模式可以让我们更好地组织我们的代码，以及更好地管理应用程序的开发过程。 Express.js 本身就是一个 MVC 架构，使用它可以加速我们的开发流程。
本文将详细介绍 Express.js 中 MVC 设计模式的使用，包括各个组件的具体实现，以及示例代码。
Model
在 MVC 设计模式中，Model 负责对应用程序的数据进行管理和处理。在 Express.js 中，Model 可以由多种技术实现，比如 MongoDB、Mongoose 等。
例如，如果我们使用 Mongoose 来实现 Model，那么我们可以采用如下代码：
-- -------------------- ---- ------- ----- -------- - -------------------- ----- ------ - ---------------- --- ---------- - --- -------- ----- - ----- ------- --------- ---- -- ------------ - ----- ------- --------- ---- -- --- -------------- - ---------------------- ------------
上面的代码创建了一个名为 Item 的 Model，它包含了 name 和 description 两个字段，并且这两个字段必须被填写。
要使用这个 Model，我们只需要在其他文件中调用它即可：
const Item = require('./models/item');Controller
在 MVC 设计模式中，Controller 负责控制应用程序的逻辑。在 Express.js 中，Controller 可以由路由实现。
为了使用路由实现 Controller，我们需要创建一个名为 controllers 的文件夹，并在其中创建一个名为 item.js 的文件。
在 item.js 文件中，我们可以编写如下代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - -----------------
----- ---- - --------------------------
--------------- ----- ----- ---- -- -
--- -
--- ----- - ----- ------------
----------------------------
- ----- ----- -
---------------------- -------- ----------- ---
-
---
---------------- ----- ----- ---- -- -
--- ---- - --- ------
----- --------------
------------ ---------------------
---
--- -
--- ------- - ----- ------------
------------------------------
- ----- ----- -
---------------------- -------- ----------- ---
-
---
-------------- - -------上面的代码包括两个路由方法：GET 和 POST。其中，GET 方法用于获取所有的 Item 数据，而 POST 方法用于添加新的 Item 数据。
需要注意的是，上面的代码中使用了 async/await，这是 Promise 的一种更好的语法糖。使用它可以使我们更好地处理异步的操作。
要使用这个 Controller，我们需要在 app.js 文件中调用它：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ----- -------------- - ------------------------------ ------------------------ ----------------- ---------------- ---------------- -- -- - ------------------- ------- -- ---- ------- ---
View
在 MVC 设计模式中，View 负责呈现应用程序的数据。在 Express.js 中，使用模板引擎可以实现 View。
为了使用模板引擎实现 View，我们需要安装一个模板引擎。在本文中，我们将使用 Handlebars 来实现 View。
首先，我们需要安装 Handlebars：
npm install --save express-handlebars
然后，我们需要在 app.js 文件中配置 Handlebars：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ----- -------------- - ------------------------------ ----- ------ - ------------------------------ ------------------------ ---------- ------------- -------- -------------- -- ---
接下来，我们需要在 views 文件夹中创建名为 index.handlebars 的模板文件：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------------
-------
------
--------------
------- -------
-----
----------------------
---------------------------
------
---------
-------
-------上面的模板文件将展示 Item 数据的名称和描述。
最后，我们需要在 Controller 中使用模板引擎来渲染模板：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - -----------------
----- ---- - --------------------------
--------------- ----- ----- ---- -- -
--- -
--- ----- - ----- ------------
------------------- - ----- ---
- ----- ----- -
---------------------- -------- ----------- ---
-
---
-- ---
示例代码
最终的代码可以在我的 GitHub 上找到：https://github.com/azure-tower/express-mvc-example
结论
在本文中，我们介绍了在 Express.js 中使用 MVC 设计模式的方法。我们证明了 Model、Controller 和 View 的分离可以使代码更好地组织，以及更好地管理应用程序的开发过程。我们还提供了示例代码来演示这个过程。
希望这篇文章能够帮助你更好地理解 MVC 设计模式在 Express.js 中的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d3c94a336082f254a85a0