Wir haben bereits die Verwendung der HTTP-Get-Operationen in den vorherigen beiden Übungen gesehen,
wo wir die Daten vom
Server holen und innerhalb unserer Angular-Anwendung verwenden können.
Aber es gibt Situationen, in denen Sie in der Lage sein, neue Daten auf dem Server zu posten,
die vorhandenen Daten auf dem Server zu ändern
oder sogar die Daten zu löschen.
Das ist also, wo die post
, put und delete Operationen von HTTP uns ermöglichen, dies durchzuführen.
In dieser Übung werden wir uns die Verwendung der Put-Operation von
HTTP-Client betrachten, die es uns ermöglicht, ein vorhandenes Gericht auf der Serverseite zu ändern.
Warum sollten wir das tun müssen?
Sie haben gesehen, dass
wir in einer der vorherigen Übungen dem Benutzer erlaubt haben, einen Kommentar zu einem Dish
zu schreiben, und dann konnten wir den Kommentar in das Dish Objekt einfügen.
Nun möchten wir diese Gerichteninformationen auf dem Server, dem
modifizierten Gericht auf dem Server, beibehalten.
Hier kommt die Verwendung des HTTP PUT-Vorgangs zu unserer Rettung.
Mit der HTTP PUT-Operation
können wir das modifizierte Dish zurück an den Server senden und dann die
vorhandenen Dish Informationen auf dem Server ändern, so dass
der neu hinzugefügte Kommentar auf der Serverseite beibehalten werden kann.
Dadurch, wenn die Informationen zu einem späteren Zeitpunkt abgerufen werden,
wird der neu hinzugefügte Kommentar als Teil der Dish-Informationen vorhanden sein.
In dieser Übung werden wir uns also mit
dem Speichern von Änderungen auf dem Server beschäftigen.
Also, wie machen wir das?
Lassen Sie uns dies in der Übung erkunden.
Damit wir die Änderungen am Dish auf dem Server speichern können,
lassen Sie mich hier eine neue Methode in den Dish Service einführen.
Nun werden wir eine neue Methode namens PutDish auf dem Server hinzufügen.
Also, wie funktioniert die PutDish-Methode?
Also, lassen Sie mich hier die PutDish-Methode vorstellen, die offensichtlich das modifizierte Gericht
als seinen Parameter erhält und dann ein beobachtbares vom Typ Dish zurückgibt.
Dies wird also das Gericht zurückgeben, das auf die Serverseite gelegt wurde.
Sobald das Dish auf der Serverseite geändert wurde,
werden die modifizierten Dish-Informationen vom Server zurückgesendet,
und dann wird dieses modifizierte Dish
zurück an den Client geliefert, so dass der Client das integrieren kann,
und dann die Benutzeroberfläche aktualisieren kann, um die Änderung an der Dish widerzuspiegeln.
Nun wollen wir natürlich nicht die Änderung an der
Benutzeroberfläche widerspiegeln, bis die Dish-Informationen auf der Serverseite gespeichert sind.
Also, das ist, wo wir die
PutDish-Methode verwenden, die wir in den Dish-Service einführen.
Also, wie entwerfen wir die PutDish-Methode?
Also, das erste, was wir tun müssen, ist, einige HTTP-Optionen einzurichten, damit wir
den Server darüber informieren, was
in der Nachricht hier gesendet wird.
Also, wir werden hier einige Header-Informationen einrichten.
Also, für die Header, werden wir hier neue HttpHeader einrichten,
und in den neuen HttpHeaders,
lassen Sie uns den Header als
Content-Type der Typanwendung JSON einrichten.
Daher geben wir unserem Server an, dass die eingehende Anforderungsnachricht
die Informationen in Form
eines JSON-Objekts im Hauptteil der eingehenden Anforderungsnachricht enthält.
So wird der Server in der Lage sein,
die Dish-Informationen aus dem Hauptteil der Nachricht zu extrahieren, sie
zu analysieren und dann in der Lage sein, das modifizierte Dish an den Server beizubehalten
und dann die aktualisierten Dish Informationen von der Serverseite zurückzusenden.
Nun, sobald wir die Optionen hier eingerichtet haben,
dann werden wir
den HTTP-Client verwenden und dann
einen Put machen, der offensichtlich das Dish im Körper der Nachricht trägt,
und dann geben wir BaseUrl+Gerichte und +dish.id an.
Also, das ist die URL, an die wir die Put-Operation senden, so,
BaseUrl+'dishes/ '+ dish.id.
Aus Ihrem REST-API-Wissen
werden Sie also sehen, warum wir eine Put-Operation bis zu diesem Endpunkt durchführen.
Dann ist der zweite Parameter das Dish selbst, das wir
als eingehenden Parameter für die PutDish-Methode erhalten,
und dann ist der dritte Parameter die HttpOptions, die wir gerade vor kurzem eingerichtet haben.
Sobald wir das erhalten haben,
werden wir in der Lage sein,
den Fehler an unsere HandleError-Methode zu hören, das ist es.
Dieser Aufruf an den Put auf der Serverseite wird es ermöglichen, dass
die Dish-Informationen auf der Serverseite persistent sind und dann
wird der Server die aktualisierten Dish-Informationen an uns zurückgeben,
und dann werden wir diese zurück zu unserer Komponente
zurückgeben, wo die Komponente diese dann verwenden kann, um die aktualisierte Dish Informationen.
Also, das ist die Modifikation, die wir mit dem Dish Service tun.
Gehen Sie nun in die dishdetail-Komponente,
in der dishdetail-Komponente,
lassen Sie mich hier eine weitere Variable
namens dishcopy einführen, die
eine Kopie des modifizierten Dish enthält, bis es auf dem Server veröffentlicht wird.
Also, die Geschirrspülkopie wird das modifizierte Gericht enthalten.
Also, gehen Sie in die Routenparameter hier.
Also, was wir tun, ist jedes Mal, wenn die Dish-Informationen hier in den Routenparametern geändert werden,
auch zusammen mit dem Speichern der Teller Informationen in diese.dish,
Ich werde auch eine Kopie in
der Tishcopy speichern auch, so dass sowohl das Gericht als auch
die Geschirrkopie die genaue Kopie des gleichen Dish hier enthalten.
Also, das ist die Modifikation, die wir hier machen werden.
Nun, in der onSubmit-Methode,
so hier haben wir die onSubmit-Methode hier,
wo wir das Objekt hier ändern.
Also, hier bemerken Sie, dass wir ursprünglich den Kommentar an das Dish Objekt hier verschoben
haben, stattdessen werden wir jetzt den Kommentar an das dishcopy Objekt schieben.
Der Grund, warum ich dies tue, ist, dass ich zuerst das Dishcopy-Objekt ändern möchte,
dann möchte ich das auf dem Server posten,
und wenn der Server dann mit
den modifizierten Dish-Informationen auf die Serverseite antwortet,
werde ich diese Informationen hier im Dish beibehalten.
Also, nach dem
Tun der Spülkopie hier, dann werden wir dies sagen.Geschirrservice.Putdish,
und dann werden wir an die PutDish
die Geschirrkopie als Parameter liefern,
weil die Geschirrspülmaschine die modifizierte Version des Gerichts hier enthält.
Also, wir werden sagen, dishcopy,
und dann, wenn wir die Antwort von der Serverseite erhalten, so,
in der Abonnieren, sagen wir Dish und genau dort,
wir werden das eingehende Gericht hier behandeln.
Also, hier werden wir sagen, abonnieren Dish und dann werden wir sagen,
diese.dish gleich Gericht hier,
und der Vollständigkeit halber
werde ich auch die gleichen Informationen in die Geschirrkopie hier beibehalten.
Nun, wenn es einen Fehler gibt,
dann muss HandleError.
Also, zu handleError, werden wir sagen,
errmess, und dann an diesem Punkt,
wir setzen, dass this.dish auf null,
und dann die diese Geschirrkopie auch auf null, weil gerade jetzt das Gericht nicht gültig ist,
und dann sagen wir this.Errmess ist
jede Errmess, das ist es.
Das ist die Änderung, die wir an der onSubmit-Methode vornehmen werden.
Also, durch die Verwendung this.Dishservice.Putdish Methode,
senden wir in der aktualisierten Geschirrkopie hier,
nicht die Dish hier,
und dann, wenn der Server antwortet uns mit dem modifizierten Dish
, an diesem Punkt, werden wir die Informationen in die diese.dish beibehalten.
Damit
zu diesem Zeitpunkt unsere Benutzeroberfläche mit der aktualisierten Version auf Dish aktualisiert wird,
beharre ich auch die gleichen Informationen auf die dishcopy,
und wenn ich dann auf einen Fehler stöße,
werde ich this.dish auf null setzen und this.dishcopy auf null
und dann die Fehlermeldung einrichten entsprechend hier.
Also, das war's. Lassen Sie uns die Änderungen speichern und dann gehen und
werfen Sie einen Blick auf unsere Anwendung im Browser.
Speichern Sie die Änderungen, gehen wir zurück zum Browser.
Gehen Sie in den Browser, gehen wir jetzt zum Menü und gehen Sie dann zu einem bestimmten Gericht hier.
Für das spezifische Gericht,
lasst uns hier einen Kommentar schreiben.
Also, lassen Sie mich hier einen Kommentar mit einer Bewertung schreiben hier.
So, wie Sie sehen, wenn der Kommentar gültig wird,
erscheint die Vorschau des Kommentars dort oben.
Lassen Sie uns jetzt diesen Kommentar einreichen.
Wenn Sie den Kommentar einreichen,
werden Sie sofort sehen, dass der Kommentar gerade in meine Liste der Gerichte gepostet wurde.
Wenn Sie nun die Ansicht aktualisieren,
verschwindet dieser Kommentar.
Lassen Sie mich jetzt die Ansicht aktualisieren und dann werden Sie feststellen, dass der Kommentar noch
Teil der Liste der Gerichte hier sein wird.
Also, wie Sie hier sehen können,
existiert der Kommentar noch hier.
Um Ihnen weiter zu zeigen, dass der Kommentar tatsächlich auf der Serverseite beibehalten wurde,
schauen wir uns das Protokoll des Servers im Terminal an. Wenn wir
zurück zu den Terminals gehen,
werden wir jetzt sehen, dass
Sie im Protokoll des Terminals eine neue PUT /dishes/0-Methode sehen. Das
zeigt also, dass das modifizierte Dish
wieder auf den Server direkt dort bestanden wurde und das danach
natürlich haben wir die Gerichte bekommen, indem wir
die Benutzeroberfläche aktualisieren und deshalb
holen wir die Gerichte wieder von der Serverseite.
Dies zeigt also, dass wir in der Lage sind,
die HTTP PUT-Operation zu verwenden, um das modifizierte Dish auf dem Server zu
erhalten, und dann, wenn wir das aktualisierte Gericht erhalten,
sind wir in der Lage, die Benutzeroberfläche entsprechend zu aktualisieren.
Damit schließen wir diese Übung ab.
Dies ist ein guter Zeitpunkt für Sie, ein GET-Commit mit der Nachricht durchzuführen und
Änderungen auf diesem Server zu speichern.