Ya hemos visto el uso de las operaciones HTTP get en los dos ejercicios anteriores,
donde podremos ir a buscar los datos desde
el servidor y utilizarlos dentro de nuestra aplicación Angular.
Pero hay situaciones en las que desea poder publicar nuevos datos en el servidor,
o modificar los datos existentes en el servidor,
o incluso eliminar los datos.
Así que ahí es donde las operaciones de publicación,
poner y eliminar de HTTP nos permiten llevar a cabo esto.
En este ejercicio, vamos a ver el uso de la operación put desde el cliente HTTP
que nos permite modificar un plato existente en el lado del servidor.
Ahora, ¿por qué tendríamos que hacer eso?
Usted vio que en uno de los ejercicios anteriores,
permitimos al usuario publicar un comentario en un Dish,
y luego pudimos insertar el comentario en el objeto Dish.
Ahora, queremos persistir esta información del plato en el servidor,
el plato modificado al servidor.
Aquí es donde el uso de la operación HTTP PUT viene a nuestro rescate.
Por lo tanto, usando la operación HTTP PUT,
podemos enviar el Dish modificado de nuevo al servidor y luego modificar
la información de Dish existente en el servidor para que
el comentario recién agregado pueda persistir en el lado del servidor.
De este modo, cuando la información se obtenga en una fecha posterior,
el comentario recién agregado estará allí como parte de la información del plato.
Por lo tanto, esto es lo que vamos a explorar en este ejercicio,
donde veremos cómo guardar los cambios en el servidor.
Entonces, ¿cómo vamos a hacer esto?
Vamos a explorar esto en el ejercicio.
Para permitirnos guardar los cambios en el Dish en el servidor,
permítanme introducir un nuevo método en el servicio Dish aquí.
Ahora, vamos a añadir un nuevo método llamado como PutDish al servidor.
Entonces, ¿cómo funciona el método PutDish?
Entonces, permítanme introducir el método PutDish aquí que obviamente recibe el plato modificado
como su parámetro y luego devolverá un tipo observable de Dish.
Entonces, esto devolverá el plato que se ha puesto en el lado del servidor.
Ahora, una vez que el Dish sea modificado en el lado del servidor,
la información modificada del Dish será enviada de vuelta por el servidor,
y luego este Dish modificado será entregado
de vuelta al cliente para que el cliente pueda integrar eso,
y luego actualizar la interfaz de usuario para reflejar el cambio en el Plato.
Ahora, obviamente, no queremos reflejar el cambio a
la interfaz de usuario hasta que la información de Dish se guarde en el lado del servidor.
Entonces, ahí es donde vamos a hacer uso de
el método PutDish que introducimos en el servicio Dish.
Entonces, ¿cómo diseñamos el método PutDish?
Entonces, lo primero que tenemos que hacer es configurar algunas opciones HTTP para que informemos
al servidor sobre lo que
está siendo enviado en el mensaje aquí.
Por lo tanto, vamos a configurar algunos encabezados información aquí.
Entonces, para los encabezados, vamos a configurar nuevos HttpHeaders aquí,
y en los nuevos HttpHeaders,
vamos a configurar el encabezado como
Content-Type de la aplicación de tipo JSON.
Por lo tanto, estamos especificando a nuestro servidor que el mensaje de solicitud entrante
contiene la información en forma de
un objeto json en el cuerpo del mensaje de solicitud entrante.
Por lo tanto, el servidor podrá extraer
la información del Dish del cuerpo del mensaje, analizarla,
y luego ser capaz de persistir el Dish modificado al servidor,
y luego enviar de vuelta la información actualizada del Dish desde el lado del servidor.
Ahora, una vez que hemos configurado las opciones aquí,
entonces vamos a utilizar
el cliente HTTP y luego
hacer un put que obviamente lleva el plato en el cuerpo del mensaje,
y luego vamos a especificar BaseURL+platos y +dish.id.
Así que, esa es la URL a la que estamos enviando la operación de puta,
Baseurl+'dishes/ '+ dish.id.
Por lo tanto, a partir de su conocimiento de API REST,
verá por qué hacemos una operación de puesta a este punto final.
Entonces el segundo parámetro es el propio Dish que
recibimos como el parámetro entrante al método PutDish,
y luego el tercer parámetro es el HttpOptions que acabamos de configurar hace poco.
Entonces, una vez que obtengamos eso,
entonces seremos capaces de canalizar
cualquier error a nuestro método HandleError escuchar, eso es todo.
Por lo tanto, esta llamada al puesto en el lado del servidor permitirá
la información del plato sea persistente en el lado del servidor y luego el servidor
nos devolverá la información actualizada del plato,
y luego devolveremos eso a nuestro componente
donde el componente puede luego usarlo para representar la información actualizada de Dish.
Entonces, esta es la modificación que hacemos al servicio Dish.
Ahora, entra en el componente dishdetail,
en el componente dishdetail,
déjame introducir una variable más aquí
llamada dishcopy que mantendrá
una copia del Dish modificado hasta que se publique en el servidor.
Por lo tanto, la discopia contendrá el plato modificado.
Entonces, entrando en los parámetros de ruta aquí.
Así que, lo que hacemos es cada vez que la información del plato se modifica aquí en los parámetros de la ruta,
también junto con guardar la información del plato a this.dish,
También guardaremos una copia a
el plato también para que tanto el plato como
el plato contienen la copia exacta del mismo plato aquí.
Entonces, esa es la modificación que haremos aquí.
Ahora, en el método onSubmit,
así que aquí tenemos el método onSubmit aquí,
donde estamos modificando el objeto aquí.
Así que, aquí, nota que originalmente estábamos empujando el comentario al objeto Dish aquí,
en su lugar, ahora empujaremos el comentario al objeto dishcopy.
La razón por la que estoy haciendo esto es que primero quiero modificar el objeto dishcopy,
luego quiero publicar eso en el servidor,
y luego cuando el servidor responda con
la información del plato modificada al lado del servidor,
entonces persistiré esa información en el plato aquí.
Así que, después de hacer el plato aquí,
entonces diremos esto.Dishservice.putdish,
y luego suministraremos al PutDish
el plato como el parámetro
porque el plato contiene la versión modificada aquí.
Entonces, diremos dishcopy,
y luego cuando recibamos la respuesta del lado del servidor así,
en la suscripción, diremos Dish y justo allí,
manejaremos el plato entrante aquí.
Así que, aquí, vamos a decir suscribirse Dish y luego vamos a decir,
this.dish igual a plato aquí,
y por el bien de la integridad,
también persistiré la misma información en el plato aquí.
Ahora, si hay un error,
entonces tendrá que HandleError.
Así que, para HandleError, diremos,
errmess, y luego en ese punto,
estableceremos que this.dish en null,
y luego el este dishcopy también en null porque ahora mismo el plato no es válido,
y luego diremos esto.errmess es
cualquier errmess, eso es todo.
Esa es la modificación que vamos a hacer al método onSubmit.
Así que, mediante el uso de this.dishservice.putDish método,
estamos enviando en la copia de cocina actualizada aquí,
no el plato aquí,
y luego cuando el servidor nos responda con el plato modificado,
en ese punto, persistiremos la información en el this.dish.
Así que en ese punto,
nuestra interfaz de usuario se actualizará con la versión actualizada a Dish,
también persista la misma información a dishcopy,
y luego si encuentro un error,
entonces configuraré this.dish en null y this.dishcopy en null
y luego configuraré el mensaje de error apropiadamente aquí.
Así que eso es todo. Vamos a guardar los cambios y luego ir y
echar un vistazo a nuestra aplicación en el navegador.
Guardando los cambios, volvamos al navegador.
Entra en el navegador, vamos ahora al menú y luego ir a un plato específico aquí.
Para el plato específico,
vamos a publicar un comentario aquí.
Así que, permítanme publicar un comentario aquí con una calificación aquí.
Así que, como ves, a medida que el comentario se vuelve válido,
la vista previa del comentario aparece allí.
Vamos a enviar ahora este comentario.
Cuando envíe el comentario,
inmediatamente verá que el comentario acaba de ser publicado en mi lista de Platos.
Ahora, antes, si actualiza la vista,
entonces este comentario desaparecería.
Permítanme ahora actualizar la vista y luego se dará cuenta de que el comentario todavía
será parte de la lista de Platos aquí.
Así que, como pueden ver aquí,
el comentario todavía existe aquí.
Para mostrarle aún más que el comentario ha sido persistido en el lado del servidor,
vamos a ir y mirar el registro del servidor en el terminal.
Volviendo a las terminales,
veremos que en el registro de la terminal,
ves un nuevo método PUT /dishes/0.
Entonces, eso demuestra que el Dish
modificado ha persistido de nuevo al servidor justo allí y después de eso,
por supuesto conseguimos los platos renovando
la interfaz de usuario y es por eso que estamos
recuperando la información de los platos de nuevo desde el lado del servidor.
Por lo tanto, esto muestra que somos capaces de usar
la operación PUT HTTP para persistir el Dish modificado en el servidor,
y luego cuando recibimos el plato actualizado,
podemos actualizar la interfaz de usuario correspondientemente.
Con esto, completamos este ejercicio.
Este es un buen momento para que hagas una confirmación GET con el mensaje,
guardando cambios en este servidor.