En la primera parte de la serie de tutoriales, vio cómo comenzar a crear una aplicación web Angular. Aprendió cómo configurar la aplicación y creó el componente de inicio de sesión..
En esta parte de la serie, avanzará y anotará la API REST requerida para interactuar con el extremo del banco MongoDB. También creará el Casa componente que se mostrará después de que el usuario haya iniciado sesión correctamente.
Empezando
Comencemos clonando el código fuente de la primera parte de la serie de tutoriales..
Vaya al directorio del proyecto e instale las dependencias necesarias.
cd AngularBlogApp-Home / client npm install
Una vez que tenga instaladas las dependencias, reinicie el servidor de aplicaciones.
npm start
Dirija su navegador a http: // localhost: 4200 y debería tener la aplicación en ejecución.
Creación de la API REST de inicio de sesión
Dentro de la carpeta del proyecto. AngularBlogApp-Home, crear otra carpeta llamada servidor. Estarás escribiendo las API REST usando Node.js.
Navegar a la servidor Carpeta e inicializar el proyecto..
cd server npm init
Ingrese los detalles requeridos y debe tener el proyecto inicializado.
Estarás usando el Exprimir Marco para la creación del servidor. Instalar Exprimir usando el siguiente comando:
npm install express --save
Una vez que tengas Exprimir instalado, crea un archivo llamado app.js. Este será el archivo raíz para su servidor Node.js.
Aquí es cómo el app.js aspecto del archivo:
const express = requiere ('express') const app = express () app.get ('/ api / user / login', (req, res) => res.send ('Hello World!')) app. escuchar (3000, () => console.log ('servidor de blog ejecutándose en el puerto 3000!'))
Como se ve en el código anterior, importó exprimir dentro app.js. Utilizando exprimir, tu creaste una aplicación aplicación.
Utilizando aplicación, expusiste un punto final / api / usuario / login que mostrará un mensaje. Inicie el servidor Node.js usando el siguiente comando:
nodo app.js
Dirija su navegador a http: // localhost: 3000 / api / user / login y debería mostrar el mensaje.
Estarás haciendo un ENVIAR solicitud del servicio Angular al servidor con el nombre de usuario y contraseña parámetros Así que necesitas analizar los parámetros de solicitud.
Instalar analizador corporal, que es el middleware de análisis de cuerpo Node.js para analizar los parámetros de solicitud.
npm instalar body-parser --save
Una vez que lo tengas instalado, importalo en app.js .
const bodyParser = require ('body-parser')
Agregue el siguiente código a la app.js expediente.
Los dos anteriores analizador corporal Las opciones devuelven el middleware que solo analiza. json y urlencodificado cuerpos y sólo se ve en las solicitudes donde el Tipo de contenido encabezado coincide con el tipo opción.
Estarás usando Mangosta para interactuar con MongoDB de Node.js. Entonces instala Mangosta utilizando Node Package Manager (npm).
npm instalar mongoose --save
Una vez que tengas instalada la mangosta, impórtala en app.js.
const mongoose = require ('mongoose');
Definir la URL de la base de datos MongoDB en app.js.
const url = 'mongodb: // localhost / blogDb';
Vamos a usar Mangosta para conectarse a la base de datos MongoDB. Aquí está cómo se ve:
app.post ('/ api / user / login', (req, res) => mongoose.connect (url, function (err) if (err) throw err; console.log ('conectado correctamente, el nombre de usuario es' , req.body.username, 'password is', req.body.password););)
Si se establece la conexión, el mensaje se registra junto con el nombre de usuario y contraseña.
Aquí es cómo el app.js aspecto del archivo:
const express = require ('express') const bodyParser = require ('body-parser') const app = express () const mongoose = require ('mongoose'); const url = 'mongodb: // localhost / blogDb'; app.use (bodyParser.json ()) app.use (bodyParser.urlencoded (extended: false)) app.post ('/ api / user / login', (req, res) => mongoose.connect ( url, function (err) if (err) throw err; console.log ('conectado correctamente, nombre de usuario es', req.body.username, 'password is', req.body.password););) app .listen (3000, () => console.log ('servidor de blog ejecutándose en el puerto 3000!'))
Reinicie el servidor Node usando el siguiente comando:
nodo app.js
Para conectarse al servidor Node desde la aplicación Angular, debe configurar el proxy. Crear un archivo llamado proxy.json dentro de cliente / src carpeta. Aquí está cómo se ve:
Modificar el cliente paquete.json Archivo para iniciar la aplicación utilizando el archivo proxy.
"start": "ng serve --proxy-config proxy.json"
Guarde los cambios e inicie el servidor cliente..
npm start
Dirija su navegador a http: // localhost: 4200 e ingrese el nombre de usuario y la contraseña. Haga clic en el botón de inicio de sesión y debe tener los parámetros registrados en la consola Node.
Validando el inicio de sesión del usuario
Para interactuar con MongoDB utilizando Mongoose, debe definir un esquema y crear un modelo. Dentro de servidor carpeta, crea una carpeta llamada modelo.
Crear un archivo llamado usuario.js dentro de modelo carpeta. Agregue el siguiente código a la usuario.js expediente:
Como se ve en el código anterior, importó mangosta en usuario.js. Tu creaste un usuarioSchema usando la mangosta esquema y creó el Usuario modelo usando el mangosta modelo.
Importar el usuario.js archivo dentro de la app.js expediente.
Const User = require ('./ model / user');
Antes de consultar el MongoDB usuario colección, es necesario crear la colección. Ve a la cáscara de MongoDB escribiendo mongo. Crear la colección usuario usando el siguiente comando:
db.createCollection ('usuario')
Inserta un registro contra el cual estarás consultando.
db.user.insert (nombre: 'roy agasthyan', nombre de usuario: 'roy', contraseña: '123')
Ahora, una vez que Mongoose se conecta a MongoDB, encontrará el registro de la base de datos utilizando nombre de usuario y contraseña pasado. Aquí es cómo se ve la API:
app.post ('/ api / user / login', (req, res) => mongoose.connect (url, useMongoClient: true, function (err) if (err) throw err; User.find ( username: req.body.username, contraseña: req.body.password, función (err, usuario) si (err) lanza error; if (user.length === 1) return res.status (200). json (status: 'success', data: user) else return res.status (200) .json (status: 'fail', mensaje: 'Login Falled')));)
Como se ve en el código anterior, una vez que recibe una respuesta de la base de datos, devuelve lo mismo al lado del cliente.
Guarde los cambios anteriores e intente ejecutar el cliente y el servidor. Ingrese el nombre de usuario como roy y contraseña como 123 y deberías poder ver el resultado en la consola del navegador.
Redireccionando al componente de casa
Una vez que el usuario ha sido validado con éxito, debe redirigir al usuario a la Casa componente. Así que vamos a empezar por crear el Casa componente.
Crea una carpeta llamada Casa dentro de src / app carpeta. Crear un archivo llamado home.component.html y añada el siguiente código HTML:
Aplicación de Blog Angular
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Se recomienda y minimiza el ejercicio de la mano de obra y de la mano de obra..
Lee mas…
Subtítulo
Donec id elit non mi porta gravida en eget metus. Maecenas faucibus mollis interdum.
Subtítulo
Morbi leo risus, porta ac consectetur ac, vestíbulo en eros. Cras mattis consectetur purus sit amet fermentum.
Subtítulo
Maecenas sed diam eget risus varius blandit sit amet non magna.
Subtítulo
Donec id elit non mi porta gravida en eget metus. Maecenas faucibus mollis interdum.
Subtítulo
Morbi leo risus, porta ac consectetur ac, vestíbulo en eros. Cras mattis consectetur purus sit amet fermentum.
Subtítulo
Maecenas sed diam eget risus varius blandit sit amet non magna.
Crear un archivo llamado home.component.css y añada el siguiente estilo CSS:
.header, .marketing, .footer padding-right: 1rem; relleno-izquierda: 1rem; / * Encabezado de página personalizado * / .header padding-bottom: 1rem; borde inferior: .05rem sólido # e5e5e5; .header h3 margin-top: 0; margen inferior: 0; línea altura: 3rem; / * Pie de página personalizado * / .footer padding-top: 1.5rem; color: # 777; borde superior: .05rem solid # e5e5e5; / * Personalizar contenedor * / @media (min-width: 48em) .container max-width: 46rem; .container-narrow> hr margin: 2rem 0; / * Mensaje principal de marketing y botón de registro * / .jumbotron text-align: center; borde inferior: .05rem sólido # e5e5e5; .jumbotron .btn relleno: .75rem 1.5rem; tamaño de letra: 1.5rem; / * Contenido de marketing de apoyo * / .marketing margin: 3rem 0; .marketing p + h4 margin-top: 1.5rem; / * Responsive: Portrait tablets and up * / @media screen and (min-width: 48em) / * Elimine el relleno que establecimos anteriormente * / .header, .marketing, .footer padding-right: 0; relleno-izquierda: 0; / * Separar la cabecera * / .header margin-bottom: 2rem; .jumbotron border-bottom: 0;
Crea el archivo componente llamado home.component.ts y añada el siguiente código:
importar Componente desde '@ angular / core'; @Component (selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']) clase de exportación HomeComponent
Como se ve en el código anterior, acaba de crear el InicioComponente utilizando la @Componente decorador y especificando el selector, templateUrl, y styleUrls.
Añade el InicioComponente al Ngmódulos en app.module.ts.
importe BrowserModule desde '@ angular / platform-browser'; importe NgModule desde '@ angular / core'; importar ROUTING desde './app.routing'; importe FormsModule desde '@ angular / forms'; importe HttpClientModule desde '@ angular / common / http'; importe RootComponent desde './root/root.component'; importe LoginComponent desde './login/login.component'; importe HomeComponent desde './home/home.component'; @NgModule (declaraciones: [RootComponent, LoginComponent, HomeComponent], importaciones: [BrowserModule, ROUTING, FormsModule, HttpClientModule], proveedores: [], bootstrap: [RootComponent]) clase de exportación AppModule
Importar el InicioComponente en el app.routing.ts y definir una ruta para casa.
En el validateLogin método en el login.component.ts archivo, en la validación exitosa redirigir al usuario a la InicioComponente. Para redirigir, necesitas importar el Angular Enrutador.
importar Router desde '@ angular / router';
Si la respuesta de la llamada a la API es un éxito, navegará a la InicioComponente usando el angular Enrutador.
if (result ['status'] === 'success') this.router.navigate (['/ home']); else alert ('Contraseña de nombre de usuario incorrecta');
Aquí es cómo el login.component.ts aspecto del archivo:
importar Componente desde '@ angular / core'; importe LoginService desde './login.service'; importar User desde '... /models/user.model'; importar Router desde '@ angular / router'; @Component (selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'], proveedores: [LoginService]) clase de exportación LoginComponent public usuario: Usuario; constructor (private loginService: LoginService, router privado: Router) this.user = new User (); validateLogin () if (this.user.username && this.user.password) this.loginService.validateLogin (this.user) .subscribe (result => console.log ('result is', result); if (resultado ['status'] === 'success') this.router.navigate (['/ home')); else alert ('Password de usuario incorrecto');, error => console. registro ('error es', error);); else alert ('ingresar nombre de usuario y contraseña');
Guarde los cambios anteriores y reinicie el servidor. Inicie sesión en la aplicación utilizando el nombre de usuario y la contraseña existentes, y será redirigido a la InicioComponente.
Envolviendolo
En este tutorial, vio cómo escribir el punto final de la API REST para el inicio de sesión del usuario. Aprendiste a usar Mangosta para interactuar con MongoDB desde Node. Después de la validación exitosa, viste cómo usar Angular Enrutador para navegar a la InicioComponente.
¿Cómo fue tu experiencia aprendiendo a escribir una aplicación Angular y su back-end? Háganos saber sus pensamientos y sugerencias en los comentarios a continuación.
El código fuente de este tutorial está disponible en GitHub.
Accentsconagua
Share
