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

En la parte anterior de esta serie de tutoriales, aprendió cómo crear el componente agregar publicación para agregar nuevas publicaciones de blog. Aprendió cómo crear el punto final de la API REST para agregar una nueva publicación a la base de datos MongoDB.

En esta parte de la serie de tutoriales, aprenderá cómo implementar la funcionalidad para editar una publicación de blog existente de la lista de publicaciones de blog.

Empezando

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

git clone https://github.com/royagasthyan/AngularBlogApp-Post EditPost

Vaya al directorio del proyecto e instale las dependencias necesarias.

cd EditPost / client npm install cd EditPost / server npm install

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

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

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

Agregar la vista Editar publicación

En el ShowPostComponent, agregará dos iconos para editar y eliminar la publicación del blog. Utilizará Font Awesome para mostrar los iconos de edición y eliminación..

Descarga e incluye la fuente de la carpeta impresionante en el bienes carpeta.

En el src / app / index.html página, incluye una referencia a la fuente impresionante CSS estilo.

Ahora modifica el show-post / show-post.component.html Archivo para incluir el HTML para editar y eliminar iconos.

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

  
 
título de la entrada
 Hace 3 días 
 
post.description
 
 Lee mas…  
   
 
  

Guarde los cambios anteriores y reinicie la aplicación cliente. Inicie sesión en la aplicación y podrá ver los iconos de edición y eliminación correspondientes a cada publicación de blog enumerada..

Poblando el detalle de edición en una ventana emergente

Cuando el usuario hace clic en el ícono de edición correspondiente a cualquier publicación de blog, debe completar los detalles de la publicación de blog en la ventana emergente de agregar publicación para actualizar.

Añadir un método de clic al icono de edición..

Dentro de CommonService, debe definir un observable para realizar un seguimiento de cuando se hace clic en el botón de edición. Define lo observable como se muestra:

public postEdit_Observable = new Subject ();

Defina otra variable para realizar un seguimiento de la publicación que se va a editar..

public_to_be_edited; constructor () this.post_to_be_edited = new Post (); 

Cada vez que haga clic en el botón de edición, mantendrá la publicación que se editará en la CommonService y activar el observable para notificar la edición posterior. Defina dos métodos para configurar la publicación que se editará y para notificar la edición posterior..

notifyPostEdit () this.postEdit_Observable.next ();  setPostToEdit (post: Post) this.post_to_be_edited = post; this.notifyPostEdit (); 

Dentro del método de clic, llamarás al setPostToEdit método de CommonService. Aquí es cómo el editar post método se ve:

editPost (post: post) this.commonService.setPostToEdit (post); 

Tendrá el detalle de la publicación en el servicio común cuando el usuario haga clic en el botón de edición. Para mostrar la ventana emergente para agregar actualizaciones, debe hacer clic en el botón Agregar publicación programáticamente.

Dentro de home / home.component.html archivo, agregar un # identificador al botón de añadir entrada.

  Añadir 

Importar ViewChild y ElementRef dentro de home.component.ts expediente.

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

Defina una referencia al botón de agregar dentro de la home.component.ts expediente.

@ViewChild ('addPost') addBtn: ElementRef;

Dentro de InicioComponente constructor, suscribirse a la postEdit_Observable desde CommonService. Al llamar al postEdit_Observable devolución de llamada de suscripción, invoque el botón Agregar haga clic para mostrar la ventana emergente. Aquí es cómo el home.component.ts aspecto del archivo:

importe Component, ViewChild, ElementRef desde '@ angular / core'; importe CommonService desde '… /service/common.service'; @Component (selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']) clase de exportación HomeComponent @ViewChild ('addPost') addBtn: ElementRef; constructor (private commonService: CommonService) this.commonService.postEdit_Observable.subscribe (res => this.addBtn.nativeElement.click (););  

Necesitas suscribirte a postEdit_Observable en el add-post.component.ts Archivo para configurar la publicación que se editará en la enviar variable. Aquí es cómo el ngOnInit método en add-post.component.ts miradas

ngOnInit () this.commonService.postEdit_Observable.subscribe (res => this.post = this.commonService.post_to_be_edited;); 

Guarde los cambios anteriores y reinicie el servidor cliente. Inicie sesión en la aplicación y haga clic en el botón Editar en cualquier publicación del blog. Podrá ver los detalles de la publicación completados en la ventana emergente agregar publicación.

Creando la actualización de la API REST

Dentro servidor / app.js, vamos a definir otro punto final de la API REST para actualizar los detalles de la publicación en función del ID de la publicación. Aquí está cómo se ve:

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

Vamos a usar primero Mangosta para conectarse a la base de datos MongoDB.

app.post ('/ api / post / updatePost', (req, res) => mongoose.connect (url, useMongoClient: true, function (err) console.log ('conexión establecida');) ;)

Una vez establecida la conexión, usted hace uso de la actualizar método en el modelo de Post.

Post.update (_id: req.body.id, title: req.body.title, descripción: req.body.description, (err, doc) => if (err) throw err;)

Estarás actualizando el post basado en el CARNÉ DE IDENTIDAD De la publicación pasada. Como se ve en el código anterior, ha especificado la publicación _carné de identidad Para actualizarse. En la segunda opción, ha especificado los campos a actualizar, que son título y descripción.

Una vez que los detalles se actualicen, devolverá el estado junto con el número de filas afectadas durante la actualización. Aquí es cómo se ve el punto final de la API REST para la actualización posterior:

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

Haciendo la API REST Llamada para actualizar

los CARNÉ DE IDENTIDAD devuelto para cada post de MongoDB es _carné de identidad, por lo que necesita modificar el carné de identidad de nuestro modelo src / app / models / post.model.ts. Aquí está cómo se ve:

clase de exportación Publicar constructor () this._id = "; this.title ="; this.description = "; _id público; título público; descripción pública;

Al hacer clic en el botón Agregar publicación, el método llamado será addPost. Dentro de addPost método en add-post.component.ts, comprobarás si el enviar objeto tiene un _carné de identidad. Si una _carné de identidad está presente, entonces debe llamar al método de actualización desde el servicio, de lo contrario, llamará al método agregar servicio posterior.

Crea un método llamado updatePost dentro de add-post.service.ts expediente.

updatePost (post: Post) return this.http.post ('/ api / post / updatePost', id: post._id, título: post.title, descripción: post.description)

Así es como se modifica. addPost método de la add-post.component.ts aspecto del archivo:

addPost () if (this.post.title && this.post.description) if (this.post._id) this.addPostService.updatePost (this.post) .subscribe (res => this.closeBtn.nativeElement .click (); this.commonService.notifyPostAddition (););  else this.addPostService.addPost (this.post) .subscribe (res => this.closeBtn.nativeElement.click (); this.commonService.notifyPostAddition (););  else else alert ('Título y Descripción requeridos'); 

Guarde los cambios anteriores y reinicie el servidor Angular y Node. Inicie sesión en la aplicación e intente editar una publicación. Aparecerá una ventana emergente para editar los detalles al hacer clic en el botón de edición. Haga clic en el botón Agregar y los detalles se actualizarán y se mostrarán en la lista de publicaciones del blog..

Envolviendolo

En este tutorial, implementó la funcionalidad para actualizar los detalles de la publicación del blog existente. Usted creó el punto final de la API REST de back-end para actualizar los detalles de la publicación del blog según la ID de la publicación del blog. Hiciste uso de la Mangosta cliente para actualizar los detalles de la publicación del blog en la base de datos MongoDB.

En la siguiente parte, implementará la funcionalidad de eliminar publicaciones y cerrar sesión..

¿Cómo fue tu experiencia hasta ahora? Háganos saber sus opiniones, sugerencias o correcciones en los comentarios a continuación..

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