Creación de una aplicación de blogging usando Angular y MongoDB Eliminar publicación

En la parte anterior de esta serie de tutoriales, aprendió cómo implementar la funcionalidad para editar los detalles de la publicación del blog.

En esta parte, implementará la funcionalidad para eliminar una publicación de blog existente e implementar la funcionalidad de cierre de sesión del usuario.

Empezando

Comencemos clonando el código fuente de la última parte de la serie de tutoriales..

git clone https://github.com/royagasthyan/AngularBlogApp-EditUpdate DeletePost

Vaya al directorio del proyecto e instale las dependencias necesarias.

cd DeletePost / client npm install cd DeletePost / server npm install

Una vez que tenga instaladas las dependencias, reinicie la aplicación cliente y servidor.

cd DeletePost / client npm start cd DeletePost / server node app.js

Dirija su navegador a http: // localhost: 4200 y tendrá la aplicación en ejecución.

Agregando la Confirmación de Eliminar 

Ya has agregado el ícono de eliminar a las publicaciones de blog enumeradas. Cuando el usuario haga clic en el icono de eliminación correspondiente a cualquier publicación del blog, deberá mostrar una ventana emergente de confirmación de eliminación. Si el usuario confirma el proceso de eliminación, solo es necesario eliminar la publicación del blog.

Comencemos con la adición de una confirmación emergente modal cuando el usuario haga clic en el botón Eliminar. Agregue el siguiente código emergente modal a la show-post.component.html expediente.

 
 
 
 
Eliminar mensaje
  ×  
 
 Estás seguro ? 
 
 Cancelar Borrar 
 
 
 

Modificar el icono de eliminar para incluir el objetivo de datos atributo como se muestra:

Guarde los cambios anteriores y reinicie el servidor cliente. Inicie sesión en la aplicación y haga clic en el ícono de eliminar correspondiente a cualquier publicación del blog, y aparecerá el modo de confirmación de confirmación..

Creación de la API Eliminar publicación de blog

Vamos a crear un punto final de REST API para eliminar la publicación del blog. En el servidor / app.js archivo, cree un extremo de REST API para manejar la eliminación de publicaciones de blog según la publicación de blog carné de identidad. Aquí es cómo se ve el punto final de la API REST:

app.post ('/ api / post / deletePost', (req, res) => )

Comience por conectarse a la base de datos MongoDB usando el Mangosta cliente.

mongoose.connect (url, useMongoClient: true, function (err) // conexión establecida);

Harás uso de la findByIdAndRemove Método para encontrar la publicación del blog usando el carné de identidad y eliminarlo. Una vez que la publicación del blog se haya eliminado correctamente, devolverá el estado como respuesta. Aquí es cómo se ve el punto final de la API REST:

app.post ('/ api / post / deletePost', (req, res) => mongoose.connect (url, useMongoClient: true, function (err) if (err) throw err; Post.findByIdAndRemove (req .body.id, (err, doc) => if (err) throw err; return res.status (200) .json (status: 'success', data: doc)));)

Hacer una llamada a la API Eliminar

Cuando el usuario hace clic en el icono de eliminar, debe mantener los detalles de la publicación en una variable. Si el usuario continúa con la opción de eliminar después de la confirmación, realizará una llamada a la API REST de eliminación.

Agrega un método llamado setDelete Haga clic en el botón Eliminar show-post.component.html. Aquí está cómo se ve:

Dentro de show-post.component.ts archivo, definir una variable llamada post_to_delete.

Define el método llamado setDelete dentro show-post.component.ts para mantener los detalles de la publicación para ser eliminado.

setDelete (post: Post) this.post_to_delete = post; 

Cuando el usuario hace clic en el botón Cancelar de la ventana emergente, debe llamar a un método llamado unsetDelete para configurar el post_to_delete a nulo Aquí está cómo se ve:

unsetDelete () this.post_to_delete = null; 

Aquí es cómo el Cancelar botón de código HTML para show-post.component.html miradas

Cancelar

Ahora definamos el método de servicio llamado Eliminar mensaje dentro de show-post.service.ts expediente. Aquí está cómo se ve:

deletePost (id) return this.http.post ('/ api / post / deletePost', id: id)

Para llamar al método de servicio desde el ShowPostComponent, definir un método llamado Eliminar mensaje que se suscribirá a la Eliminar mensaje método de la ShowPostService. Aquí es cómo el Eliminar mensaje método de la ShowPostComponent miradas

deletePost () this.showPostService.deletePost (this.post_to_delete._id) .subscribe (res => this.getAllPost ();)

Una vez que se ha eliminado la publicación, debe actualizar la lista de publicaciones, por lo tanto, debe hacer una llamada al getAllPost método. También debe cerrar la ventana emergente una vez que la eliminación se haya realizado correctamente..

Primero, importa una referencia a ViewChild y ElementRef en el show-post.component.ts expediente.

importe Component, OnInit, ViewChild, ElementRef desde '@ angular / core';

Definir una variable cerrarBtn para crear una referencia al botón de cierre emergente. 

@ViewChild ('closeBtn') closeBtn: ElementRef;

Ahora, cuando la llamada de eliminación se realiza correctamente, debe cerrar la ventana emergente de confirmación de eliminación.

Así es como se modifica. Eliminar mensaje método se ve:

 deletePost () this.showPostService.deletePost (this.post_to_delete._id) .subscribe (res => this.getAllPost (); this.closeBtn.nativeElement.click ();))

Aquí es cómo el show-post.component.ts aspecto del archivo:

importe Component, OnInit, ViewChild, ElementRef desde '@ angular / core'; importe ShowPostService desde './show-post.service'; importar Post desde '… /models/post.model'; importe CommonService, desde '… /service/common.service'; @Component (selector: 'app-show-post', templateUrl: './show-post.component.html', styleUrls: ['./show-post.component.css'], proveedores: [ShowPostService] ) la clase de exportación ShowPostComponent implementa OnInit @ViewChild ('closeBtn') closeBtn: ElementRef; puestos públicos: cualquier []; public post_to_delete; constructor (showPostService privado: ShowPostService, commonService: CommonService)  ngOnInit () this.getAllPost (); this.commonService.postAdded_Observable.subscribe (res => this.getAllPost (););  setDelete (post: Post) this.post_to_delete = post;  unsetDelete () this.post_to_delete = null;  getAllPost () this.showPostService.getAllPost (). subscribe (result => console.log ('result is', result); this.posts = result ['data'];);  editPost (post: post) this.commonService.setPostToEdit (post);  deletePost () this.showPostService.deletePost (this.post_to_delete._id) .subscribe (res => this.getAllPost (); this.closeBtn.nativeElement.click ();)

Guarde los cambios anteriores y reinicie la aplicación cliente y servidor. Inicie sesión en la aplicación y haga clic en el icono de eliminar correspondiente a cualquier publicación del blog. Aparecerá un cuadro de confirmación. Confirme la eliminación de la publicación del blog, la publicación del blog se eliminará y la lista de publicaciones del blog se actualizará.

Manejo de sesión de usuario durante el inicio de sesión

Cuando el usuario inicie sesión en la aplicación, mantendrá el nombre de usuario registrado en un almacenamiento local. Modificar el validateLogin metodo dentro del LoginComponent para almacenar el nombre de usuario registrado en almacenamiento local.

Cuando se valide el resultado de la llamada a la API, agregue el siguiente código para almacenar el nombre de usuario que inició sesión.

localStorage.setItem ('logInUser', this.user.username);

Aquí es cómo el validateLogin método se ve:

validateLogin () if (this.user.username && this.user.password) this.loginService.validateLogin (this.user) .subscribe (resultado => if (resultado ['estado'] === 'éxito' ) localStorage.setItem ('logInUser', this.user.username); this.router.navigate (['/ home']); else alert ('Password de usuario incorrecto');, error =>  console.log ('error is', error););  else alert ('ingresar nombre de usuario y contraseña'); 

Ahora, dentro de la home.component.html archivo, agregar un método llamado cerrar sesión al botón de cerrar sesión.

 Cerrar sesión 

Dentro de home.component.ts archivo, crea un método llamado cerrar sesión. Dentro de cerrar sesión método, necesita borrar el almacenamiento local para el logInUser. Aquí es cómo se ve el método:

logout () localStorage.removeItem ('logInUser'); this.router.navigate (['/']); 

En el InicioComponentemétodo del constructor, debe agregar un cheque para el logInUser clave de almacenamiento local. Si no lo encuentra, debe redirigir a la página de inicio de sesión. Aquí es cómo el home.component.ts aspecto del archivo:

importe Component, ViewChild, ElementRef desde '@ angular / core'; importe CommonService desde '… /service/common.service'; importar Router desde '@ angular / router'; @Component (selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']) clase de exportación HomeComponent @ViewChild ('addPost') addBtn: ElementRef; constructor (commonService privado: CommonService, enrutador privado: enrutador) if (! localStorage.getItem ('loginInUser')) this.router.navigate (['/']);  this.commonService.postEdit_Observable.subscribe (res => this.addBtn.nativeElement.click (););  logout () localStorage.removeItem ('logInUser'); this.router.navigate (['/']); 

Guarde los cambios anteriores y reinicie el servidor cliente. Intente acceder a la página de inicio cargando la URL http: // localhost: 4200 / home en la ventana del navegador. Serás redirigido a la página de inicio de sesión.. 

Inicie sesión en la aplicación y haga clic en el botón de cerrar sesión. Serás desconectado y redirigido a la página de inicio de sesión..

Envolviendolo

En esta parte de la serie de tutoriales, aprendió cómo implementar la eliminación de publicaciones de blog agregando un icono a la lista de publicaciones de blogs. También creó una API REST para eliminar los detalles de la publicación del blog de la base de datos MongoDB usando la Mangosta cliente.

Solo ha implementado las características muy básicas de una aplicación de blog, y esta aplicación puede desarrollarse aún más para incluir muchas más características.. 

¿Cómo fue tu experiencia aprendiendo a crear una aplicación de blog utilizando Angular y MongoDB? Háganos saber sus pensamientos y sugerencias en los comentarios a continuación.

El código fuente de este tutorial está disponible en GitHub.

Y por último, recuerda que JavaScript es la Idioma de la web. No deja de tener sus curvas de aprendizaje, pero si está buscando recursos adicionales para estudiar o usar en su trabajo, vea lo que tenemos disponible en el mercado de Envato..