节点应用程序的模型-视图-控制器(MVC)架构

MVC是Model-View-Controller的首字母缩写。
这是软件项目的设计模式。它主要由Node开发人员以及C＃，Ruby， PHP框架用户使用。
在MVC模式中，应用程序及其开发分为三个相互联系的部分。这样做的好处是有助于集中精力于应用程序名称的特定部分，即向用户提供信息和从用户接受信息的方式。它有助于实现有效的代码重用和应用程序的并行开发。即使项目结构看起来与理想的MVC结构略有不同，输入和输出应用程序的基本程序流程也保持不变。

在这篇文章中，将通过创建演示应用程序来显示应用程序这些组件之间的程序流。

首先，让我们了解一下应用程序的这些部分的含义以及它们执行的功能。

解释

模型：模型表示数据的结构，格式和存储数据的约束。它维护应用程序的数据。本质上，它是应用程序的数据库部分。

视图：视图是呈现给用户的内容。视图利用模型并以用户想要的形式显示数据。还可以允许用户更改提供给用户的数据。它们由静态和动态页面组成，这些页面在用户请求时呈现或发送给用户。

Controller ：Controller控制用户的请求，然后生成适当的响应，并反馈给查看器。通常，用户与View交互，然后View生成相应的请求，该请求将由控制器处理。控制器使用模型数据作为响应来渲染适当的视图。
因此，总结一下：

• 模型是数据的一部分。
• 视图是用户界面的一部分。
• 控制器是请求-响应处理程序。

MVC架构

现在，让我们开始使用该应用程序。
npm init在这里用于生成package.json和app.js文件。

npm-init

顾名思义，这里有三个文件夹，分别是模型，视图和控制器，这将有助于mvc体系结构的实现。
npm用于安装基本的npm软件包以开始使用。

npm-package-install-snip

项目结构如下所示。

MVC项目结构片段

项目结构说明

• 如您所见，这里有一个routes文件夹，它将用作controllers 。
• 然后有一个models文件夹，其中有一个user model 。
• 一个views文件夹，其中包含带有.handlebars扩展名的视图。请注意，把手是模板引擎，这意味着它具有通过填写我们创建的模板来生成页面的能力。

现在，让我们开始演示如何在此演示LoginApp中为登录和以用户身份注册的过程实现MVC模式。

1. 编写节点app.js以启动应用程序。如果一切正常，则该应用程序将启动，否则尝试使用stackoverflow和类似的东西调试该应用程序。
2. 在浏览器中打开应用程序。如果您使用我的github存储库进行了分叉，请在浏览器中导航至localhost：3000 ，您将看到该应用程序正在运行。在浏览器中打开该应用程序时，您的app.js文件将对自己说：“”哦！浏览器已请求localhost：3000 / ，因此如果单击此路由，请查找要提供服务的文件。它查找以下代码：
   

   应用使用路线app.js

   。

   如果请求‘/’ ，它会告知使用变量路由的应用程序。然后，它查找routes变量。它在以下app.js文件中找到它：

   

   路线要求

   。

   现在，它会在节点应用程序的routes文件夹中的gfgIndex.js文件中查找当命中“ /”路由时要执行的代码。
   它找到以下代码。

   

   GfgIndexjs路由文件

   这段代码基本上说，如果用户已登录，则呈现index.hanblebars 。要检查用户是否已登录，它运行函数sureAuthenticated 。
   此函数基本上说，如果用户已登录，则渲染index.handlebars文件，否则将用户重定向到/ users / login路由。

   

   GfgUsersjs登录路由片段

   此代码告诉应用程序在调用GET’/’时呈现index.handlebars文件。因此，现在它进入views文件夹并查找index.handlebars并将其呈现给用户。
   这就是架构的视图控制器部分在应用程序中的工作方式。我相信上面的程序流程对读者来说很清楚。

   现在让我们进行注册测试用户的过程，以查看模型的工作原理。

3. 让我们导航到http：// localhost：3000 / users / register 。因此，应用程序将路由分为两部分：/ users和/ register，并问自己类似“哦，好吧！用户想查看/ users路由，然后查看/ register 。该应用程序在其app.js文件中查找“ / users” ，并在此处找到它。
   

   应用使用路线app.js

   。

   然后，它会在命中/ users路径时查找要在app.js文件中找到的’users’变量：

   

   路线要求

   。

   因此，它将转到路由文件夹中的gfgUsers.js文件，并查找路由/ register。请注意， / users / register在gfgUsers.js文件中的位置是/ register 。它要求浏览器呈现“ register.handlebars”文件。这是视图控制器的拱门。实施正在进行。
   注册的第二部分现在，让我们注册一个新用户。

   

   注册一个新的用户快照。图片：https：//media.geeksforgeeks.org/wp-content/uploads/register-a-new-user-snap.png

   点击提交之后，数据被取，POST编到用于处理的“/寄存器”路线。该控制器将验证传入的数据是否存在错误，然后创建一个名为newUser的新变量，其中User模型以所有数据为模型，并调用save()来将数据实际保存到用户。

   

   新的用户控制台登录到终端

   创建用户后， “ /注册”控制器要求浏览器将用户重定向到“ /登录”页面。这是模型视图控制器体系结构的实现。

您可以在这里找到本文中使用的完整代码。分叉，克隆并运行。