Nous avons déjà vu l'utilisation des opérations HTTP get dans les deux exercices précédents,
où nous pourrons aller chercher les données de
le serveur et les utiliser dans notre application Angular.
Mais il y a des situations où vous voulez pouvoir publier de nouvelles données sur le serveur,
ou modifier les données existantes sur le serveur,
ou même supprimer les données.
C'est donc là que les opérations de post,
mettre et supprimer de HTTP nous permettent d'effectuer cela.
Dans cet exercice, nous allons examiner l'utilisation de l'opération put du client HTTP
qui nous permet de modifier un plat existant côté serveur.
Maintenant, pourquoi devrions-nous faire ça ?
Vous avez vu que dans l'un des exercices précédents,
nous avons permis à l'utilisateur de poster un commentaire sur un Dish,
et ensuite nous avons pu insérer le commentaire dans l'objet Dish.
Maintenant, nous voulons conserver cette information de plat sur le serveur,
le plat modifié sur le serveur.
C'est là que l'utilisation de l'opération HTTP PUT vient à notre secours.
Donc, en utilisant l'opération HTTP PUT,
nous sommes en mesure de renvoyer le Dish modifié au serveur puis de modifier
les informations Dish existantes sur le serveur afin que
le commentaire nouvellement ajouté puisse être conservé côté serveur.
Ainsi, lorsque l'information est récupérée à une date ultérieure,
le commentaire nouvellement ajouté sera présent dans le cadre de l'information Dish.
Donc, voici ce que nous allons explorer dans cet exercice,
où nous allons examiner l'enregistrement des modifications sur le serveur.
Alors, comment pouvons-nous faire ça ?
Examinons cela dans l'exercice.
Pour nous permettre d'enregistrer les modifications apportées au Dish sur le serveur,
permettez-moi d'introduire une nouvelle méthode dans le service Dish ici.
Maintenant, nous allons ajouter une nouvelle méthode appelée PutDish au serveur.
Alors, comment fonctionne la méthode PutDish ?
Donc, permettez-moi d'introduire la méthode PutDish ici qui reçoit évidemment le plat
modifié comme paramètre et ensuite il retournera un observable de type Dish.
Donc, cela retournera le Dish qui a été mis sur le côté serveur.
Maintenant, une fois le Dish modifié du côté serveur,
les informations Dish modifiées seront renvoyées par le serveur,
et ensuite ce Dish modifié sera remis
au client afin que le client puisse intégrer cela,
et mettre à jour l'interface utilisateur pour refléter le changement apporté au Plat.
Maintenant, évidemment, nous ne voulons pas refléter le changement de
l'interface utilisateur tant que les informations Dish ne sont pas enregistrées côté serveur.
Donc, c'est là que nous allons utiliser
la méthode PutDish que nous introduisons dans le service Dish.
Alors, comment concevons-nous la méthode PutDish ?
Donc, la première chose que nous devons faire est de configurer des options HTTP afin que nous informions
le serveur sur ce que
est envoyé dans le message ici.
Donc, nous allons configurer quelques informations d'en-têtes ici.
Donc, pour les en-têtes, nous allons configurer de nouveaux HttpHeaders ici,
et dans les nouveaux HttpHeaders,
nous allons configurer l'en-tête comme
Content-Type de l'application de type JSON.
Donc, nous spécifions à notre serveur que le message de requête entrant
contient les informations sous la forme de
un objet json dans le corps du message de requête entrant.
Ainsi, le serveur pourra extraire
les informations Dish du corps du message, l'analyser,
et ensuite persister le Dish modifié au serveur,
, puis renvoyer les informations Dish mises à jour du côté serveur.
Maintenant, une fois que nous avons configuré les options ici,
alors nous allons utiliser
le client HTTP et ensuite
faire un put qui porte évidemment le Dish dans le corps du message,
et ensuite nous allons spécifier baseUrl+plats et +dish.id.
Donc, c'est l'URL à laquelle nous envoyons l'opération de put aussi,
baseUrl+'Dishes/ '+ dish.id.
Donc, à partir de vos connaissances API REST,
vous verrez pourquoi nous faisons une opération de mise à ce point final.
Ensuite, le deuxième paramètre est le Dish lui-même que nous
recevons comme paramètre entrant à la méthode PutDish,
et ensuite le troisième paramètre est les HttpOptions que nous venons de mettre en place il y a peu de temps.
Ensuite, une fois que nous aurons obtenu cela,
, alors nous serons en mesure de canalisation
toute erreur à notre méthode HandleError hear, c'est tout.
Donc, cet appel à la mise sur le côté serveur permettra à
les informations Dish d'être persistantes sur le côté serveur, puis le serveur
nous retournera les informations de plat mises à jour,
et ensuite nous reviendrons à notre composant
où le composant pourra ensuite l'utiliser pour rendre les informations de Dish mises à jour.
Donc, c'est la modification que nous faisons au service Dish.
Maintenant, allez dans le composant dishdetail,
dans le composant dishdetail,
laissez-moi introduire une autre variable ici
appelée dishcopy qui contiendra
une copie du Dish modifié jusqu'à ce qu'il soit posté sur le serveur.
Donc, la copie du plat contiendra le plat modifié.
Donc, entrer dans les paramètres de route ici.
Donc, ce que nous faisons est chaque fois que l'information du plat est modifiée ici dans les paramètres de route,
aussi avec l'enregistrement de l'information du plat dans ce .dish,
Je vais également enregistrer une copie pour
la copie du plat aussi afin que le plat et
la copie du plat contiennent la copie exacte du même plat ici.
Donc, c'est la modification que nous allons faire ici.
Maintenant, dans la méthode onSubmit,
donc ici, nous avons la méthode onSubmit ici,
où nous modifions l'objet ici.
Donc, ici, vous remarquez que nous avons poussé le commentaire à l'objet Dish ici,
plutôt, nous allons maintenant pousser le commentaire à l'objet dishcopy.
La raison pour laquelle je fais ceci est que je veux d'abord modifier l'objet dishcopy,
puis je veux poster cela sur le serveur,
et ensuite quand le serveur répondra avec
les informations de plat modifiées sur le côté serveur,
alors je persisterai cette information dans le Dish ici.
Donc, après avoir fait la copie de la vaisselle ici,
alors nous dirons cela.Dishservice.Putdish,
et ensuite nous fournirons au PutDish
la copie de la vaisselle comme paramètre
parce que la copie contient la version modifiée du plat ici.
Donc, nous allons dire dishcopy,
et quand nous recevrons la réponse du côté serveur donc,
dans l'abonnement, nous dirons Dish et juste là,
nous allons gérer le Dish entrant ici.
Donc, ici, nous dirons abonner Dish et ensuite nous dirons,
ce .dish égal à plat ici,
et pour des raisons d'exhaustivité,
Je vais aussi persister la même information dans la copie du plat ici.
Maintenant, s'il y a une erreur,
devra alors handleError.
Donc, pour HandleError, nous allons dire,
errmess, et puis à ce moment-là,
nous allons mettre ce .dish à null,
et ensuite ce plat aussi à null parce que maintenant le plat n'est pas valide,
et ensuite nous dirons ceci .errmess est
n'importe quel errmess, c'est tout.
C'est la modification que nous allons apporter à la méthode onSubmit.
Donc, en utilisant la méthode this.Dishservice.Putdish,
nous envoyons ici la copie de vaisselle mise à jour,
pas le Dish ici,
et quand le serveur nous répondra avec le Dish modifié,
à ce moment-là, nous persisterons les informations dans le this.dish.
Alors qu'à ce moment-là,
notre interface utilisateur sera mise à jour avec la version mise à jour de Dish,
Je persiste également les mêmes informations à la dishcopy,
et puis si je rencontre une erreur,
alors je vais définir le this.dish à null et le this.dishcopy à null
et ensuite configurer le message d'erreur de façon appropriée ici.
Alors c'est tout. Sauvegardons les modifications, puis allez et
jeter un oeil à notre application dans le navigateur.
Sauvegarder les modifications, revenons au navigateur.
Allez dans le navigateur, allons maintenant au menu, puis allez à un plat spécifique ici.
Pour le Dish spécifique,
posons un commentaire ici.
Alors, laissez-moi poster un commentaire ici avec une note ici.
Donc, comme vous le voyez, comme le commentaire devient valide,
l'aperçu du commentaire apparaît là.
Soumettons maintenant ce commentaire.
Lorsque vous soumettez le commentaire,
vous verrez immédiatement que le commentaire vient d'être posté dans ma liste de plats.
Maintenant, plus tôt, si vous actualisez la vue,
alors ce commentaire disparaîtrait.
Laissez-moi maintenant rafraîchir la vue et puis vous remarquerez que le commentaire sera encore
faire partie de la liste des plats ici.
Donc, comme vous pouvez le voir ici,
le commentaire existe toujours ici.
Pour vous montrer qu'en effet le commentaire a été persistant côté serveur,
allons regarder le journal du serveur dans le terminal.
En revenant aux terminaux,
nous allons maintenant voir que dans le journal du terminal,
vous voyez une nouvelle méthode PUT /dishes/0.
Donc, cela montre que le Dish
modifié a été maintenu sur le serveur juste là et après cela,
bien sûr nous avons obtenu la vaisselle en rafraîchissant
l'interface utilisateur et c'est pourquoi nous sommes
récupérant à nouveau les informations sur les plats du côté serveur.
Donc, cela montre que nous sommes en mesure d'utiliser
l'opération HTTP PUT pour persister le Dish modifié sur le serveur,
et quand nous recevons le plat mis à jour,
nous sommes en mesure de mettre à jour l'interface utilisateur en conséquence.
Avec cela, nous terminons cet exercice.
C'est le bon moment pour vous de faire un commit GET avec le message,
enregistrement des modifications sur ce serveur.