1
00:00:03,740 --> 00:00:11,475
Wir haben bereits die Verwendung der HTTP-Get-Operationen in den vorherigen beiden Übungen gesehen,

2
00:00:11,475 --> 00:00:14,310
wo wir die Daten vom

3
00:00:14,310 --> 00:00:17,505
Server holen und innerhalb unserer Angular-Anwendung verwenden können.

4
00:00:17,505 --> 00:00:23,159
Aber es gibt Situationen, in denen Sie in der Lage sein, neue Daten auf dem Server zu posten,

5
00:00:23,159 --> 00:00:26,160
die vorhandenen Daten auf dem Server zu ändern

6
00:00:26,160 --> 00:00:27,950
oder sogar die Daten zu löschen.

7
00:00:27,950 --> 00:00:30,480
Das ist also, wo die post

8
00:00:30,480 --> 00:00:35,895
, put und delete Operationen von HTTP uns ermöglichen, dies durchzuführen.

9
00:00:35,895 --> 00:00:41,540
In dieser Übung werden wir uns die Verwendung der Put-Operation von

10
00:00:41,540 --> 00:00:48,735
HTTP-Client betrachten, die es uns ermöglicht, ein vorhandenes Gericht auf der Serverseite zu ändern.

11
00:00:48,735 --> 00:00:50,715
Warum sollten wir das tun müssen?

12
00:00:50,715 --> 00:00:53,500
Sie haben gesehen, dass

13
00:00:53,500 --> 00:00:57,230
wir in einer der vorherigen Übungen dem Benutzer erlaubt haben, einen Kommentar zu einem Dish

14
00:00:57,230 --> 00:01:01,825
zu schreiben, und dann konnten wir den Kommentar in das Dish Objekt einfügen.

15
00:01:01,825 --> 00:01:08,160
Nun möchten wir diese Gerichteninformationen auf dem Server, dem

16
00:01:08,160 --> 00:01:10,570
modifizierten Gericht auf dem Server, beibehalten.

17
00:01:10,570 --> 00:01:15,955
Hier kommt die Verwendung des HTTP PUT-Vorgangs zu unserer Rettung.

18
00:01:15,955 --> 00:01:18,345
Mit der HTTP PUT-Operation

19
00:01:18,345 --> 00:01:23,360
können wir das modifizierte Dish zurück an den Server senden und dann die

20
00:01:23,360 --> 00:01:26,750
vorhandenen Dish Informationen auf dem Server ändern, so dass

21
00:01:26,750 --> 00:01:31,460
der neu hinzugefügte Kommentar auf der Serverseite beibehalten werden kann.

22
00:01:31,460 --> 00:01:35,899
Dadurch, wenn die Informationen zu einem späteren Zeitpunkt abgerufen werden,

23
00:01:35,899 --> 00:01:41,770
wird der neu hinzugefügte Kommentar als Teil der Dish-Informationen vorhanden sein.

24
00:01:41,770 --> 00:01:44,770
In dieser Übung werden wir uns also mit

25
00:01:44,770 --> 00:01:48,225
dem Speichern von Änderungen auf dem Server beschäftigen.

26
00:01:48,225 --> 00:01:50,280
Also, wie machen wir das?

27
00:01:50,280 --> 00:01:53,625
Lassen Sie uns dies in der Übung erkunden.

28
00:01:53,625 --> 00:01:58,730
Damit wir die Änderungen am Dish auf dem Server speichern können,

29
00:01:58,730 --> 00:02:02,765
lassen Sie mich hier eine neue Methode in den Dish Service einführen.

30
00:02:02,765 --> 00:02:09,040
Nun werden wir eine neue Methode namens PutDish auf dem Server hinzufügen.

31
00:02:09,040 --> 00:02:11,335
Also, wie funktioniert die PutDish-Methode?

32
00:02:11,335 --> 00:02:17,920
Also, lassen Sie mich hier die PutDish-Methode vorstellen, die offensichtlich das modifizierte Gericht

33
00:02:17,920 --> 00:02:25,370
als seinen Parameter erhält und dann ein beobachtbares vom Typ Dish zurückgibt.

34
00:02:25,370 --> 00:02:29,980
Dies wird also das Gericht zurückgeben, das auf die Serverseite gelegt wurde.

35
00:02:29,980 --> 00:02:33,690
Sobald das Dish auf der Serverseite geändert wurde,

36
00:02:33,690 --> 00:02:36,735
werden die modifizierten Dish-Informationen vom Server zurückgesendet,

37
00:02:36,735 --> 00:02:39,275
und dann wird dieses modifizierte Dish

38
00:02:39,275 --> 00:02:42,330
zurück an den Client geliefert, so dass der Client das integrieren kann,

39
00:02:42,330 --> 00:02:48,605
und dann die Benutzeroberfläche aktualisieren kann, um die Änderung an der Dish widerzuspiegeln.

40
00:02:48,605 --> 00:02:52,010
Nun wollen wir natürlich nicht die Änderung an der

41
00:02:52,010 --> 00:02:57,300
Benutzeroberfläche widerspiegeln, bis die Dish-Informationen auf der Serverseite gespeichert sind.

42
00:02:57,300 --> 00:03:00,245
Also, das ist, wo wir die

43
00:03:00,245 --> 00:03:05,265
PutDish-Methode verwenden, die wir in den Dish-Service einführen.

44
00:03:05,265 --> 00:03:07,730
Also, wie entwerfen wir die PutDish-Methode?

45
00:03:07,730 --> 00:03:15,785
Also, das erste, was wir tun müssen, ist, einige HTTP-Optionen einzurichten, damit wir

46
00:03:15,785 --> 00:03:21,975
den Server darüber informieren, was

47
00:03:21,975 --> 00:03:26,565
in der Nachricht hier gesendet wird.

48
00:03:26,565 --> 00:03:29,880
Also, wir werden hier einige Header-Informationen einrichten.

49
00:03:29,880 --> 00:03:36,345
Also, für die Header, werden wir hier neue HttpHeader einrichten,

50
00:03:36,345 --> 00:03:39,060
und in den neuen HttpHeaders,

51
00:03:39,060 --> 00:03:43,050
lassen Sie uns den Header als

52
00:03:43,050 --> 00:03:49,940
Content-Type der Typanwendung JSON einrichten.

53
00:03:49,940 --> 00:03:56,135
Daher geben wir unserem Server an, dass die eingehende Anforderungsnachricht

54
00:03:56,135 --> 00:03:58,730
die Informationen in Form

55
00:03:58,730 --> 00:04:02,840
eines JSON-Objekts im Hauptteil der eingehenden Anforderungsnachricht enthält.

56
00:04:02,840 --> 00:04:04,865
So wird der Server in der Lage sein,

57
00:04:04,865 --> 00:04:09,165
die Dish-Informationen aus dem Hauptteil der Nachricht zu extrahieren, sie

58
00:04:09,165 --> 00:04:13,200
zu analysieren und dann in der Lage sein, das modifizierte Dish an den Server beizubehalten

59
00:04:13,200 --> 00:04:19,260
und dann die aktualisierten Dish Informationen von der Serverseite zurückzusenden.

60
00:04:19,260 --> 00:04:22,025
Nun, sobald wir die Optionen hier eingerichtet haben,

61
00:04:22,025 --> 00:04:24,295
dann werden wir

62
00:04:24,295 --> 00:04:29,990
den HTTP-Client verwenden und dann

63
00:04:29,990 --> 00:04:36,030
einen Put machen, der offensichtlich das Dish im Körper der Nachricht trägt,

64
00:04:36,030 --> 00:04:47,385
und dann geben wir BaseUrl+Gerichte und +dish.id an.

65
00:04:47,385 --> 00:04:53,520
Also, das ist die URL, an die wir die Put-Operation senden, so,

66
00:04:53,520 --> 00:04:57,775
BaseUrl+'dishes/ '+ dish.id.

67
00:04:57,775 --> 00:05:01,130
Aus Ihrem REST-API-Wissen

68
00:05:01,130 --> 00:05:05,960
werden Sie also sehen, warum wir eine Put-Operation bis zu diesem Endpunkt durchführen.

69
00:05:05,960 --> 00:05:09,500
Dann ist der zweite Parameter das Dish selbst, das wir

70
00:05:09,500 --> 00:05:13,990
als eingehenden Parameter für die PutDish-Methode erhalten,

71
00:05:13,990 --> 00:05:23,770
und dann ist der dritte Parameter die HttpOptions, die wir gerade vor kurzem eingerichtet haben.

72
00:05:23,770 --> 00:05:26,790
Sobald wir das erhalten haben,

73
00:05:26,790 --> 00:05:29,775
werden wir in der Lage sein,

74
00:05:29,775 --> 00:05:37,405
den Fehler an unsere HandleError-Methode zu hören, das ist es.

75
00:05:37,405 --> 00:05:43,550
Dieser Aufruf an den Put auf der Serverseite wird es ermöglichen, dass

76
00:05:43,550 --> 00:05:46,880
die Dish-Informationen auf der Serverseite persistent sind und dann

77
00:05:46,880 --> 00:05:50,430
wird der Server die aktualisierten Dish-Informationen an uns zurückgeben,

78
00:05:50,430 --> 00:05:55,805
und dann werden wir diese zurück zu unserer Komponente

79
00:05:55,805 --> 00:06:01,705
zurückgeben, wo die Komponente diese dann verwenden kann, um die aktualisierte Dish Informationen.

80
00:06:01,705 --> 00:06:04,835
Also, das ist die Modifikation, die wir mit dem Dish Service tun.

81
00:06:04,835 --> 00:06:08,220
Gehen Sie nun in die dishdetail-Komponente,

82
00:06:08,450 --> 00:06:11,130
in der dishdetail-Komponente,

83
00:06:11,130 --> 00:06:18,185
lassen Sie mich hier eine weitere Variable

84
00:06:18,185 --> 00:06:21,590
namens dishcopy einführen, die

85
00:06:21,590 --> 00:06:26,570
eine Kopie des modifizierten Dish enthält, bis es auf dem Server veröffentlicht wird.

86
00:06:26,570 --> 00:06:29,890
Also, die Geschirrspülkopie wird das modifizierte Gericht enthalten.

87
00:06:29,890 --> 00:06:33,875
Also, gehen Sie in die Routenparameter hier.

88
00:06:33,875 --> 00:06:41,305
Also, was wir tun, ist jedes Mal, wenn die Dish-Informationen hier in den Routenparametern geändert werden,

89
00:06:41,305 --> 00:06:46,355
auch zusammen mit dem Speichern der Teller Informationen in diese.dish,

90
00:06:46,355 --> 00:06:52,470
Ich werde auch eine Kopie in

91
00:06:52,470 --> 00:06:55,980
der Tishcopy speichern auch, so dass sowohl das Gericht als auch

92
00:06:55,980 --> 00:07:01,460
die Geschirrkopie die genaue Kopie des gleichen Dish hier enthalten.

93
00:07:01,460 --> 00:07:04,370
Also, das ist die Modifikation, die wir hier machen werden.

94
00:07:04,370 --> 00:07:06,990
Nun, in der onSubmit-Methode,

95
00:07:06,990 --> 00:07:09,665
so hier haben wir die onSubmit-Methode hier,

96
00:07:09,665 --> 00:07:13,310
wo wir das Objekt hier ändern.

97
00:07:13,310 --> 00:07:20,220
Also, hier bemerken Sie, dass wir ursprünglich den Kommentar an das Dish Objekt hier verschoben

98
00:07:20,220 --> 00:07:24,945
haben, stattdessen werden wir jetzt den Kommentar an das dishcopy Objekt schieben.

99
00:07:24,945 --> 00:07:29,405
Der Grund, warum ich dies tue, ist, dass ich zuerst das Dishcopy-Objekt ändern möchte,

100
00:07:29,405 --> 00:07:32,285
dann möchte ich das auf dem Server posten,

101
00:07:32,285 --> 00:07:35,060
und wenn der Server dann mit

102
00:07:35,060 --> 00:07:37,850
den modifizierten Dish-Informationen auf die Serverseite antwortet,

103
00:07:37,850 --> 00:07:41,715
werde ich diese Informationen hier im Dish beibehalten.

104
00:07:41,715 --> 00:07:44,750
Also, nach dem

105
00:07:44,750 --> 00:07:54,735
Tun der Spülkopie hier, dann werden wir dies sagen.Geschirrservice.Putdish,

106
00:07:54,735 --> 00:07:57,900
und dann werden wir an die PutDish

107
00:07:57,900 --> 00:08:04,250
die Geschirrkopie als Parameter liefern,

108
00:08:04,250 --> 00:08:09,110
weil die Geschirrspülmaschine die modifizierte Version des Gerichts hier enthält.

109
00:08:09,110 --> 00:08:10,955
Also, wir werden sagen, dishcopy,

110
00:08:10,955 --> 00:08:16,600
und dann, wenn wir die Antwort von der Serverseite erhalten, so,

111
00:08:16,600 --> 00:08:22,255
in der Abonnieren, sagen wir Dish und genau dort,

112
00:08:22,255 --> 00:08:26,655
wir werden das eingehende Gericht hier behandeln.

113
00:08:26,655 --> 00:08:31,855
Also, hier werden wir sagen, abonnieren Dish und dann werden wir sagen,

114
00:08:31,855 --> 00:08:36,435
diese.dish gleich Gericht hier,

115
00:08:36,435 --> 00:08:45,910
und der Vollständigkeit halber

116
00:08:45,910 --> 00:08:49,380
werde ich auch die gleichen Informationen in die Geschirrkopie hier beibehalten.

117
00:08:49,380 --> 00:08:52,320
Nun, wenn es einen Fehler gibt,

118
00:08:52,320 --> 00:08:54,120
dann muss HandleError.

119
00:08:54,120 --> 00:08:57,625
Also, zu handleError, werden wir sagen,

120
00:08:57,625 --> 00:09:03,080
errmess, und dann an diesem Punkt,

121
00:09:03,080 --> 00:09:07,040
wir setzen, dass this.dish auf null,

122
00:09:07,040 --> 00:09:14,330
und dann die diese Geschirrkopie auch auf null, weil gerade jetzt das Gericht nicht gültig ist,

123
00:09:14,330 --> 00:09:19,595
und dann sagen wir this.Errmess ist

124
00:09:19,595 --> 00:09:27,755
jede Errmess, das ist es.

125
00:09:27,755 --> 00:09:31,445
Das ist die Änderung, die wir an der onSubmit-Methode vornehmen werden.

126
00:09:31,445 --> 00:09:34,695
Also, durch die Verwendung this.Dishservice.Putdish Methode,

127
00:09:34,695 --> 00:09:38,500
senden wir in der aktualisierten Geschirrkopie hier,

128
00:09:38,500 --> 00:09:39,685
nicht die Dish hier,

129
00:09:39,685 --> 00:09:43,965
und dann, wenn der Server antwortet uns mit dem modifizierten Dish

130
00:09:43,965 --> 00:09:47,605
, an diesem Punkt, werden wir die Informationen in die diese.dish beibehalten.

131
00:09:47,605 --> 00:09:49,025
Damit

132
00:09:49,025 --> 00:09:54,590
zu diesem Zeitpunkt unsere Benutzeroberfläche mit der aktualisierten Version auf Dish aktualisiert wird,

133
00:09:54,590 --> 00:09:57,560
beharre ich auch die gleichen Informationen auf die dishcopy,

134
00:09:57,560 --> 00:09:59,180
und wenn ich dann auf einen Fehler stöße,

135
00:09:59,180 --> 00:10:02,585
werde ich this.dish auf null setzen und this.dishcopy auf null

136
00:10:02,585 --> 00:10:06,680
und dann die Fehlermeldung einrichten entsprechend hier.

137
00:10:06,680 --> 00:10:09,980
Also, das war's. Lassen Sie uns die Änderungen speichern und dann gehen und

138
00:10:09,980 --> 00:10:14,100
werfen Sie einen Blick auf unsere Anwendung im Browser.

139
00:10:14,230 --> 00:10:19,050
Speichern Sie die Änderungen, gehen wir zurück zum Browser.

140
00:10:19,050 --> 00:10:27,785
Gehen Sie in den Browser, gehen wir jetzt zum Menü und gehen Sie dann zu einem bestimmten Gericht hier.

141
00:10:27,785 --> 00:10:30,245
Für das spezifische Gericht,

142
00:10:30,245 --> 00:10:32,685
lasst uns hier einen Kommentar schreiben.

143
00:10:32,685 --> 00:10:41,870
Also, lassen Sie mich hier einen Kommentar mit einer Bewertung schreiben hier.

144
00:10:44,430 --> 00:10:48,815
So, wie Sie sehen, wenn der Kommentar gültig wird,

145
00:10:48,815 --> 00:10:52,370
erscheint die Vorschau des Kommentars dort oben.

146
00:10:52,370 --> 00:10:54,950
Lassen Sie uns jetzt diesen Kommentar einreichen.

147
00:10:54,950 --> 00:10:56,520
Wenn Sie den Kommentar einreichen,

148
00:10:56,520 --> 00:11:02,160
werden Sie sofort sehen, dass der Kommentar gerade in meine Liste der Gerichte gepostet wurde.

149
00:11:02,160 --> 00:11:05,645
Wenn Sie nun die Ansicht aktualisieren,

150
00:11:05,645 --> 00:11:07,880
verschwindet dieser Kommentar.

151
00:11:07,880 --> 00:11:13,250
Lassen Sie mich jetzt die Ansicht aktualisieren und dann werden Sie feststellen, dass der Kommentar noch

152
00:11:13,250 --> 00:11:18,630
Teil der Liste der Gerichte hier sein wird.

153
00:11:18,630 --> 00:11:20,190
Also, wie Sie hier sehen können,

154
00:11:20,190 --> 00:11:22,310
existiert der Kommentar noch hier.

155
00:11:22,310 --> 00:11:27,530
Um Ihnen weiter zu zeigen, dass der Kommentar tatsächlich auf der Serverseite beibehalten wurde,

156
00:11:27,530 --> 00:11:31,440
schauen wir uns das Protokoll des Servers im Terminal an. Wenn wir

157
00:11:31,440 --> 00:11:33,810
zurück zu den Terminals gehen,

158
00:11:33,810 --> 00:11:36,710
werden wir jetzt sehen, dass

159
00:11:36,710 --> 00:11:41,910
Sie im Protokoll des Terminals eine neue PUT /dishes/0-Methode sehen. Das

160
00:11:41,910 --> 00:11:45,950
zeigt also, dass das modifizierte Dish

161
00:11:45,950 --> 00:11:50,050
wieder auf den Server direkt dort bestanden wurde und das danach

162
00:11:50,050 --> 00:11:53,170
natürlich haben wir die Gerichte bekommen, indem wir

163
00:11:53,170 --> 00:11:55,975
die Benutzeroberfläche aktualisieren und deshalb

164
00:11:55,975 --> 00:11:59,485
holen wir die Gerichte wieder von der Serverseite.

165
00:11:59,485 --> 00:12:03,640
Dies zeigt also, dass wir in der Lage sind,

166
00:12:03,640 --> 00:12:08,580
die HTTP PUT-Operation zu verwenden, um das modifizierte Dish auf dem Server zu

167
00:12:08,580 --> 00:12:10,810
erhalten, und dann, wenn wir das aktualisierte Gericht erhalten,

168
00:12:10,810 --> 00:12:14,025
sind wir in der Lage, die Benutzeroberfläche entsprechend zu aktualisieren.

169
00:12:14,025 --> 00:12:17,240
Damit schließen wir diese Übung ab.

170
00:12:17,240 --> 00:12:21,380
Dies ist ein guter Zeitpunkt für Sie, ein GET-Commit mit der Nachricht durchzuführen und

171
00:12:21,380 --> 00:12:24,300
Änderungen auf diesem Server zu speichern.