Arquitectura Modelo-Vista-Controlador (MVC) para aplicaciones de Node

MVC es un acrónimo de Model-View-Controller. Es un patrón de diseño para proyectos de software. Lo utilizan principalmente los desarrolladores de Node y también los usuarios de C#, Ruby y PHP. En el patrón MVC, la aplicación y su desarrollo se dividen en tres partes interconectadas. La ventaja de esto es que ayuda a centrarse en una parte específica del nombre de la aplicación, las formas en que el usuario presenta y acepta la información. Ayuda a permitir la reutilización eficiente del código y el desarrollo paralelo de la aplicación. Incluso si la estructura del proyecto puede verse un poco diferente a una estructura MVC ideal, el flujo básico del programa dentro y fuera de la aplicación sigue siendo el mismo. En esta publicación, se mostrará el flujo del programa entre estos componentes de una aplicación mediante la creación de una aplicación de demostración. Primero, veamos qué significan estas partes de la aplicación y qué funciones realizan.

Explicación

Modelo : El modelo representa la estructura de los datos, el formato y las restricciones con las que se almacenan. Mantiene los datos de la aplicación. Esencialmente, es la parte de la base de datos de la aplicación. Ver : Ver es lo que se presenta al usuario. Las vistas utilizan el modelo y presentan los datos en la forma que el usuario desea. También se puede permitir que un usuario realice cambios en los datos presentados al usuario. Consisten en páginas estáticas y dinámicas que se representan o envían al usuario cuando éste las solicita. Controlador : controles del controladorlas requests del usuario y luego genera la respuesta apropiada que se alimenta al espectador. Por lo general, el usuario interactúa con la Vista, que a su vez genera la solicitud adecuada, esta solicitud será manejada por un controlador. El controlador representa la vista adecuada con los datos del modelo como respuesta. Entonces, para resumirlo:

• El modelo es parte de los datos.
• La vista es parte de la interfaz de usuario.
• El controlador es un controlador de solicitud y respuesta.

Ahora, comencemos con la aplicación . npm init se usa aquí para generar un archivo package.json y app.js.

Como sugiere el nombre, hay tres carpetas, llamadas modelos, vistas, controladores que ayudarán en la implementación de la arquitectura mvc. npm se usa para instalar los paquetes básicos de npm para comenzar.

La estructura del proyecto se ve así.

Explicación de la estructura del proyecto

• Como puede ver, hay una carpeta de rutas , que servirá como controladores .
• Luego hay una carpeta de modelos , en la que tenemos un modelo de usuario .
• Una carpeta de vistas , que tiene nuestras vistas con una extensión de .handlebars . Tenga en cuenta que handlebars es un motor de plantillas, lo que significa que tiene la capacidad de generar páginas completando las plantillas que creamos.

Ahora, pasemos a mostrar cómo se implementa el patrón MVC para el proceso de inicio de sesión y registro como usuario en esta aplicación de inicio de sesión de demostración.

• Escriba node app.js para iniciar la aplicación. La aplicación se iniciará si todo está bien; de lo contrario, intente depurar la aplicación usando stackoverflow y cosas por el estilo.
• Abra la aplicación en su navegador. Si ha bifurcado y usa mi repositorio de github, navegue a localhost: 3000 en su navegador y verá la aplicación ejecutándose. Cuando abra la aplicación en su navegador, su archivo app.js se dirá a sí mismo algo como: «Oh ! El navegador ha solicitado localhost:3000/ , así que busquemos el archivo para servir si se alcanza esta ruta. Busca este código:

• . Le dice a la aplicación que use las rutas variables si se solicita ‘/’ . Luego busca la variable rutas. Lo encuentra en el archivo app.js aquí:

• . Ahora busca en el archivo gfgIndex.js en la carpeta de rutas de nuestra aplicación de Node para buscar el código que se ejecutará cuando se alcance la ruta ‘/’. Encuentra el siguiente código.

• Este código básicamente dice que renderice index.hanblebars si el usuario ha iniciado sesión. Para comprobar si el usuario ha iniciado sesión, ejecuta la funciónsureAuthenticated . Esta función básicamente dice que si el usuario ha iniciado sesión, renderice el archivo index.handlebars; de lo contrario, redirigirá al usuario a la ruta /users/login .

• Este código le dice a la aplicación que represente el archivo index.handlebars cuando se llama a GET ‘/’. Entonces, ahora va a la carpeta de vistas y busca index.handlebars y se lo muestra al usuario. Así es como funciona la parte del controlador de vistas de la arquitectura en la aplicación. Creo que el flujo del programa anterior es claro para el lector.
• Vayamos a http://localhost:3000/users/register . Entonces, la aplicación divide la ruta en dos partes:/usuarios y /registro y se pregunta algo como “¡Oh, está bien! Los usuarios quieren ver la ruta /users y luego /register . La aplicación busca ‘/usuarios’ en su archivo app.js y lo encuentra aquí.

• . Luego busca la variable ‘usuarios’ para usar cuando se alcanza la ruta de /usuarios que se puede encontrar en el archivo app.js:

• . Entonces, va al archivo gfgUsers.js en la carpeta de rutas y busca la ruta /registrar. Tenga en cuenta que /users/register se encuentra en el archivo gfgUsers.js como /register . Le pide al navegador que renderice el archivo ‘register.handlebars’ . Este es el arco del controlador de vista. implementación en curso. Segunda parte del registro Ahora, registremos un nuevo usuario.

• Después de hacer clic en enviar, se toman los datos, se envían por POST a la ruta ‘/registrar’ para su procesamiento. Este controlador valida los datos entrantes en busca de errores, luego crea una nueva variable llamada newUser con el usuario   modelado con todos los datos y las llamadas save() en él para guardar los datos para el usuario.

• Una vez creado el usuario, el controlador ‘/registrar’ le pide al navegador que redirija al usuario a la página ‘/inicio de sesión’ . Esta es la implementación de la arquitectura modelo-vista-controlador.

Puede encontrar el código completo utilizado en este artículo aquí . Bifurcar, clonar y ejecutar.