MVC 是 Model-View-Controller(模型-视图-控制器)的缩写。这是一种软件项目的设计模式。它主要被 Node.js 开发者以及 C#、Ruby、PHP 框架的用户广泛使用。在 MVC 模式中,应用程序及其开发被划分为三个相互关联的部分。这样做的好处在于,它能帮助我们专注于应用程序的特定部分,即信息呈现给用户的方式以及从用户那里接受信息的方式。
它有助于实现高效的代码复用和应用程序的并行开发。即使项目结构看起来可能与理想的 MVC 结构略有不同,但应用程序进出(in and out)的基本程序流保持不变。在本文中,我们将通过创建一个演示应用程序来展示应用程序组件之间的程序流程。
首先,让我们一起来深入了解应用程序的这些部分意味着什么,以及它们执行什么功能。
目录
- Model(模型)
- View(视图)
- Controller(控制器)
- 理解 Node 应用程序
MVC 架构提供了一种构建可扩展应用程序的结构化方法。
Model(模型)
Model 代表数据的结构、格式以及存储数据的约束条件。它维护应用程序的数据。本质上,它是应用程序的数据库部分。
View(视图)
View 是呈现给用户的内容。视图利用模型,并以用户想要的形式展示数据。用户也可以被允许更改呈现给他们的数据。它们由静态页面和动态页面组成,当用户请求这些页面时,它们会被渲染或发送给用户。
Controller(控制器)
Controller 控制 用户请求,然后生成适当的响应并将其提供给视图。通常,用户与视图交互,视图进而生成适当的请求,该请求由控制器处理。控制器使用模型数据渲染适当的视图作为响应。
所以,总结一下:
- Model 是数据部分。
- View 是用户界面部分。
- Controller 是请求响应处理程序。
!mvc architectureMVC architecture
理解 Node 应用程序
创建 Node 项目:
现在,让我们开始构建应用程序。这里使用 npm init 来生成 package.json 和 app.js 文件。
!npm-initnpm-init
顾名思义,这里有三个文件夹,分别称为 models、views、controllers,它们将有助于 mvc 架构的实现。npm 被用来安装基础 npm 包以便开始。
!npm-package-install-snipnpm-package-install-snip
项目结构:
项目结构看起来像这样。
!mvc-project-snipmvc-project-structure snip
#### 解释:
- 如你所见,有一个 routes 文件夹,它将充当 控制器。
- 然后有一个 models 文件夹,其中我们有一个 user model(用户模型)。
- 一个 views 文件夹,里面有扩展名为 .handlebars 的视图。请注意,handlebars 是一个模板引擎,这意味着它具有通过填充我们创建的模板来生成页面的能力。
实现 MVC:
现在,让我们开始展示如何在这个演示的 LoginApp 中为用户登录和注册过程实现 MVC 模式。
- 输入 node app.js 来启动应用程序。如果一切正常,应用程序将会启动,否则尝试使用 stackoverflow 等工具来调试应用程序。
- 在浏览器中打开应用程序。如果你 fork 并使用了我的 github 仓库,那么在浏览器中导航到 localhost:3000,你就会看到应用程序正在运行。当你在浏览器中打开应用程序时,你的 app.js 文件会对自己说类似这样的话:“噢!浏览器请求了 localhost:3000/,所以让我们找找如果这个路由被命中该提供哪个文件。它查找这段代码:
!app use route appjsApp use route appjs
- 它告诉应用程序,如果请求了 ‘/‘,就使用变量 routes。然后它查找 routes 变量。它在 app.js 文件中找到了它:
!routes requiresRoutes requires
- 现它在我们的 node 应用程序的 routes 文件夹中查找 gfgIndex.js 文件,以查找当 ‘/‘ 路由被命中时要执行的代码。它找到了以下代码:
!gfgIndexjs routes fileGfgIndexjs routes file
- 这段代码基本上是说,如果用户已登录,则渲染 index.hanblebars。为了检查用户是否已登录,它运行函数