1
00:00:03,650 --> 00:00:08,090
Nun, da wir die Aktualisierung der serverseitigen.

2
00:00:08,090 --> 00:00:11,045
Es ist Zeit, zum Reakt-Client weiterzugehen.

3
00:00:11,045 --> 00:00:15,060
Für Ihre Bequemlichkeit habe ich Ihnen das GitHub-Repository zur Verfügung gestellt,

4
00:00:15,060 --> 00:00:20,330
das die endgültige Version des Clients enthält, der in der Lage ist, mit

5
00:00:20,330 --> 00:00:26,300
unserem REST API-Server zu kommunizieren und dann die verschiedenen Ansichten für unseren Client zu rendern.

6
00:00:26,300 --> 00:00:30,095
Also habe ich die erneute Anwendung genommen, die wir im

7
00:00:30,095 --> 00:00:34,040
zweiten Kurs der Spezialisierung entwickelt haben und sie dann modifiziert.

8
00:00:34,040 --> 00:00:39,175
Wir werden eine kurze Tour durch den Code ein wenig später machen.

9
00:00:39,175 --> 00:00:43,520
Jetzt klonen Sie das

10
00:00:43,520 --> 00:00:49,955
Git-Repository auf Ihren Computer, starten Sie dann Ihren Client und sehen dann, wie er mit unserem Server-Set kommuniziert.

11
00:00:49,955 --> 00:00:53,655
Sehen wir uns die Details als nächstes an.

12
00:00:53,655 --> 00:00:56,985
Um mit dieser Übung zu beginnen

13
00:00:56,985 --> 00:01:00,460
,

14
00:01:00,460 --> 00:01:06,429
gehen Sie in Ihrem Terminal oder Befehlsfenster zu Ihrem gewünschten Speicherort und geben Sie dann an der Eingabeaufforderung git clone

15
00:01:06,429 --> 00:01:22,280
https://github.com/jmuppala/conFusion-React.git ein, und lassen Sie dann

16
00:01:22,280 --> 00:01:27,315
die React-Anwendung auf Ihren Computer geklont werden.

17
00:01:27,315 --> 00:01:29,210
Sobald das Klonen abgeschlossen ist,

18
00:01:29,210 --> 00:01:34,350
wechseln Sie in den Confusion-React-Ordner

19
00:01:34,350 --> 00:01:38,625
, der gerade erstellt wurde, als Sie dieses Git-Repository geklont haben.

20
00:01:38,625 --> 00:01:43,965
Dann werden Sie sofort bemerken, dass es bereits eine Reihe von Dateien gibt. Geben Sie

21
00:01:43,965 --> 00:01:50,565
nun an der Eingabeaufforderung yarn install ein,

22
00:01:50,565 --> 00:01:54,350
um alle Knotenmodule zu installieren, von

23
00:01:54,350 --> 00:01:58,155
denen diese React-Anwendung abhängig ist.

24
00:01:58,155 --> 00:02:03,140
Also, sobald die Knotenmodule alle installiert sind,

25
00:02:03,140 --> 00:02:11,810
dann können wir unser Garn starten zu kompilieren und servieren unsere React-Anwendung.

26
00:02:11,810 --> 00:02:13,840
Sobald alles in ist,

27
00:02:13,840 --> 00:02:18,650
stellen Sie sicher, dass Ihr MongoDB-Server

28
00:02:18,650 --> 00:02:23,775
einsatzbereit ist und auch Ihr REST-API-Server läuft.

29
00:02:23,775 --> 00:02:26,030
Andernfalls wird der Client nicht funktionieren.

30
00:02:26,030 --> 00:02:30,650
Also, jetzt, da Sie Ihren Client auf Ihrem Computer installiert haben,

31
00:02:30,650 --> 00:02:33,200
fügen Sie den Eingabeaufforderungstyp „garn start“ hinzu

32
00:02:33,200 --> 00:02:38,610
und Ihre Anwendung wird neu kompiliert und in kurzer Zeit serviert.

33
00:02:38,610 --> 00:02:42,434
Sobald Ihre Anwendung erfolgreich kompiliert wurde,

34
00:02:42,434 --> 00:02:45,650
gehen Sie in den Browser und Sie werden sehen, dass

35
00:02:45,650 --> 00:02:51,095
Ihre React-Anwendung gestartet wird und auf dem Bildschirm hier sichtbar ist.

36
00:02:51,095 --> 00:02:54,290
Sie werden sofort feststellen, dass Ihre Anwendung in der

37
00:02:54,290 --> 00:02:57,440
Lage ist, die Daten vom Server zu holen und dann

38
00:02:57,440 --> 00:03:00,815
die verschiedenen Teile Ihrer Anwendung genau so zu rendern, wie Sie

39
00:03:00,815 --> 00:03:06,070
am Ende Ihres React-Kurses getan haben.

40
00:03:06,100 --> 00:03:08,635
Wenn Sie zum Ordner Info wechseln,

41
00:03:08,635 --> 00:03:14,025
sehen Sie auch, dass die Informationen auf der Seite Info ebenfalls wiedergegeben werden.

42
00:03:14,025 --> 00:03:16,880
Als solche oben im Menü

43
00:03:16,880 --> 00:03:21,845
sehen Sie, dass die Elemente im Menü angezeigt werden, genau wie wir mit der Anwendung gesehen haben.

44
00:03:21,845 --> 00:03:23,950
Darüber hinaus habe ich der

45
00:03:23,950 --> 00:03:28,475
einseitigen Anwendung „Meine Favoriten“ eine weitere Seite hinzugefügt, zu

46
00:03:28,475 --> 00:03:31,150
der Sie nicht navigieren können,

47
00:03:31,150 --> 00:03:35,170
da kein Benutzer in ihrem System angemeldet ist.

48
00:03:35,170 --> 00:03:38,330
Sie sehen also, dass ich keinen Benutzer habe, der am System angemeldet ist.

49
00:03:38,330 --> 00:03:42,160
Deshalb hat es keinen Sinn, meine Favoriten anzugeben, weil Sie nicht wissen,

50
00:03:42,160 --> 00:03:47,950
welcher Benutzer als Favoriten hier und die Kontaktseite wie gewohnt angezeigt werden soll.

51
00:03:47,950 --> 00:03:49,710
Jetzt loggen wir uns ein.

52
00:03:49,710 --> 00:03:51,555
Um sich bei unserer Anwendung anzumelden,

53
00:03:51,555 --> 00:03:58,020
klicken wir auf den Login-Button und dann würden Sie sehen, dass der Login-Dialog erscheint.

54
00:03:58,020 --> 00:04:04,989
Dann lassen Sie mich als einer der registrierten Benutzer einloggen,

55
00:04:04,989 --> 00:04:09,650
die wir zuvor im Rahmen dieses Kurses registriert haben.

56
00:04:09,650 --> 00:04:11,445
Sobald Sie sich also einloggen,

57
00:04:11,445 --> 00:04:16,530
werden Sie sofort bemerken, dass in der rechten Ecke

58
00:04:16,530 --> 00:04:19,760
der Login-Button jetzt in

59
00:04:19,760 --> 00:04:24,200
Abmeldung umgewandelt wurde und der Name des Benutzers hier angezeigt wird.

60
00:04:24,200 --> 00:04:26,810
Also, wer auch immer eingeloggt ist, wird hier angezeigt.

61
00:04:26,810 --> 00:04:33,280
Sie können dies grundsätzlich auch durch das Bild des Benutzers ersetzen.

62
00:04:33,280 --> 00:04:36,080
Dafür müssen Sie mehr Änderungen

63
00:04:36,080 --> 00:04:40,290
sowohl am Client als auch am Server vornehmen, um die Bildanzeige hier zu unterstützen.

64
00:04:40,290 --> 00:04:42,160
Aber im Moment zeige ich Ihnen nur,

65
00:04:42,160 --> 00:04:46,640
wie wir hier ganz einfach die Benutzerinformationen anzeigen können.

66
00:04:46,640 --> 00:04:50,405
Dies erforderte also eine geringfügige Änderung des Kopfes der Komponente,

67
00:04:50,405 --> 00:04:54,010
wo ich den Benutzernamen abrufen kann.

68
00:04:54,010 --> 00:04:56,225
Sobald sich der Benutzer anmeldet,

69
00:04:56,225 --> 00:04:59,060
dann, wenn Sie jetzt auf Meine Favoriten klicken, würden Sie

70
00:04:59,060 --> 00:05:02,185
feststellen, dass es nichts in Meine Favoriten für den Benutzer gibt.

71
00:05:02,185 --> 00:05:07,635
Offensichtlich, weil der Benutzer noch keine Favoriten ausgewählt hat.

72
00:05:07,635 --> 00:05:09,880
Also, lasst uns jetzt zur Speisekarte gehen.

73
00:05:09,880 --> 00:05:11,520
Dann, im Menü,

74
00:05:11,520 --> 00:05:19,820
lassen Sie mich einen Artikel auswählen und dann werden wir dieses Gericht zu unseren Favoriten hinzufügen.

75
00:05:19,820 --> 00:05:22,065
Also, wenn Sie unten hier unten gehen,

76
00:05:22,065 --> 00:05:25,250
sehen Sie das Herzsymbol dort,

77
00:05:25,250 --> 00:05:29,555
klicken Sie darauf, und Sie werden sehen, dass dies in den Favoriten hinzugefügt werden würde.

78
00:05:29,555 --> 00:05:32,000
Die Tatsache, dass dies zu den Favoriten hinzugefügt wurde,

79
00:05:32,000 --> 00:05:39,550
wird durch die Änderung des Symbols hier von einem ungefüllten Herzen zu einem gefüllten Herzen angezeigt.

80
00:05:39,550 --> 00:05:42,615
Nun, wenn Sie zu einem anderen Gericht gehen,

81
00:05:42,615 --> 00:05:46,005
würden Sie feststellen, dass dies ein ungefülltes Herz hat,

82
00:05:46,005 --> 00:05:49,685
was bedeutet, dass dies noch nicht zu unseren Favoriten gehört.

83
00:05:49,685 --> 00:05:51,920
Also, lassen Sie mich einen weiteren Artikel zu

84
00:05:51,920 --> 00:05:56,950
meinen Favoriten hinzufügen und dann lassen Sie uns auch einen dritten Artikel zu meinen Favoriten hinzufügen.

85
00:05:56,950 --> 00:06:04,265
Also, jetzt werden Sie sehen, dass, wenn ich jetzt zu meinen Favoriten gehe,

86
00:06:04,265 --> 00:06:09,390
hier eine Reihe von Meine Favoriten angezeigt wird.

87
00:06:09,390 --> 00:06:12,470
Also, Sie haben gesehen, dass ich gerade diese drei Gerichte

88
00:06:12,470 --> 00:06:15,580
zu meinen Favoriten hinzugefügt habe und so werden diese hier angezeigt.

89
00:06:15,580 --> 00:06:18,800
Dies wird also verfolgt, indem

90
00:06:18,800 --> 00:06:23,240
dieser Favoritenendpunkt auf

91
00:06:23,240 --> 00:06:26,670
der serverseitigen Seite verwendet wird, je nachdem, was als Teil Ihrer letzten Zuweisung implementiert wurde.

92
00:06:26,670 --> 00:06:29,090
Also, wenn Sie diese Zuweisung richtig gemacht haben,

93
00:06:29,090 --> 00:06:32,389
dann sollte dieser Teil wie erwartet funktionieren.

94
00:06:32,389 --> 00:06:36,255
Jetzt können wir auch „Mein Favorit“ ändern.

95
00:06:36,255 --> 00:06:40,530
Lassen Sie mich also fortfahren und löschen Sie eines der Elemente aus „Meine Favoriten“.

96
00:06:40,530 --> 00:06:43,795
Also, wenn ich auf diese Schaltfläche klicke, werden Sie sofort feststellen, dass,

97
00:06:43,795 --> 00:06:48,935
dass das Element aus Meine Favoriten gelöscht wird und sofort verschwindet und

98
00:06:48,935 --> 00:06:54,120
meine Favoriten aktualisiert werden und Sie sehen, dass der resultierende Wert hier angezeigt wird.

99
00:06:54,120 --> 00:06:57,200
Beachten Sie also, dass die Meine Favoriten nur

100
00:06:57,200 --> 00:07:01,785
für Benutzer angezeigt werden, die am System angemeldet sind.

101
00:07:01,785 --> 00:07:07,250
So bemerken Sie sofort eine Reihe von Änderungen, die am

102
00:07:07,250 --> 00:07:09,635
Client vorgenommen wurden, um

103
00:07:09,635 --> 00:07:12,440
einige dieser zusätzlichen Funktionen zu unterstützen, die Sie hier sehen.

104
00:07:12,440 --> 00:07:16,690
Sie haben auch gesehen, wie die Anmelde- und Abmeldefunktion hier unterstützt wurde.

105
00:07:16,690 --> 00:07:18,530
Wenn ich also auf den Abmelde-Button klicke,

106
00:07:18,530 --> 00:07:22,445
bemerken Sie sofort, dass der Benutzer abgemeldet wird und

107
00:07:22,445 --> 00:07:25,520
der Benutzername von dort verschwindet und

108
00:07:25,520 --> 00:07:29,375
so wird der Button auch in den Login-Button verwandelt.

109
00:07:29,375 --> 00:07:34,880
Nun, damit bemerken Sie, wie mein Client

110
00:07:34,880 --> 00:07:39,960
aktualisiert wurde, um den neuen REST API-Server zu verwenden,

111
00:07:39,960 --> 00:07:44,180
um die Favoriten zu unterstützen, die auf der Serverseite gespeichert werden und

112
00:07:44,180 --> 00:07:50,140
dann automatisch in Meine Client-Anwendung reflektiert werden, wie hier gezeigt.

113
00:07:50,140 --> 00:07:55,190
Nun, da Sie die modifizierte React-Anwendung in Aktion gesehen haben,

114
00:07:55,190 --> 00:07:58,250
ist es an der Zeit, den Quellcode zu besuchen, um zu sehen, wie

115
00:07:58,250 --> 00:08:01,340
genau er implementiert wird und

116
00:08:01,340 --> 00:08:07,875
welche Änderungen wir vorgenommen haben, die der Redux-Anwendung am Ende des Redux-Kurses entsprechen.

117
00:08:07,875 --> 00:08:10,760
Nun, die beiden wichtigsten Änderungen, die Sie bemerken werden,

118
00:08:10,760 --> 00:08:16,070
ist die Unterstützung für Favoriten und auch die Authentifizierung Unterstützung,

119
00:08:16,070 --> 00:08:19,680
die Benutzeranmeldung und Abmeldeunterstützung.

120
00:08:19,680 --> 00:08:21,770
Nun, wie werden diese umgesetzt?

121
00:08:21,770 --> 00:08:27,720
Wir werden unsere Reise im Redux Teil unserer Bewerbung beginnen.

122
00:08:27,720 --> 00:08:29,580
Gehen wir also in den Redux-Teil,

123
00:08:29,580 --> 00:08:31,585
besuchen wir die Aktionstypen.

124
00:08:31,585 --> 00:08:35,255
In Aktionstypen werden Sie jetzt sehen, dass wir

125
00:08:35,255 --> 00:08:40,210
drei neue Aktionstypen im Zusammenhang mit ihren Favoriten haben.

126
00:08:40,210 --> 00:08:41,750
So würden Sie sehen, Favoriten geladen,

127
00:08:41,750 --> 00:08:43,500
Favoriten fehlgeschlagen und Favoriten hinzufügen,

128
00:08:43,500 --> 00:08:47,270
die, wie Sie es erwarten würden.

129
00:08:47,270 --> 00:08:57,355
Dann auch sechs verschiedene Aktionstypen im Zusammenhang mit ihrem Anmelde- und Abmeldeprozess.

130
00:08:57,355 --> 00:09:00,320
Jetzt können Sie Anmeldeanforderung, Anmeldeerfolg,

131
00:09:00,320 --> 00:09:02,210
Anmeldefehler, Abmeldeanforderung,

132
00:09:02,210 --> 00:09:03,810
Abmeldeerfolg und fehlgeschlagen sehen.

133
00:09:03,810 --> 00:09:10,535
Also, wir werden sehen, wie diese Aktionstypen tatsächlich in unserer Aktion erstellen verwendet werden.

134
00:09:10,535 --> 00:09:12,620
Also, in die Action-Ersteller gehen,

135
00:09:12,620 --> 00:09:17,600
also hier sehen Sie die Unterstützung für die Favoriten hier.

136
00:09:17,600 --> 00:09:22,070
Also werden wir zuerst die Unterstützung für Favoriten untersuchen und danach die

137
00:09:22,070 --> 00:09:26,790
Unterstützung für die Authentifizierungsunterstützung untersuchen.

138
00:09:26,790 --> 00:09:32,630
Also, hier, werden Sie sehen, dass wir neue Methoden unten

139
00:09:32,630 --> 00:09:39,160
hier als FavoritesLoading genannt, FavoritesFailed, und AddFavorites.

140
00:09:39,160 --> 00:09:41,550
Nun, von Ihren früheren Erfahrungen

141
00:09:41,550 --> 00:09:45,950
DishesLoading und DishesFailed und AddDishes und so weiter.

142
00:09:45,950 --> 00:09:48,650
Also, diese Dinge sind Ihnen sehr vertraut,

143
00:09:48,650 --> 00:09:54,090
so dass es genau die gleiche Art von Setup für den Code hier ist.

144
00:09:54,090 --> 00:09:58,170
Darüber hinaus werden Sie hier eine andere Methode namens FetchFavorites sehen,

145
00:09:58,170 --> 00:10:01,780
die wieder ist, wie ich sagte, ein Redux Tank

146
00:10:01,780 --> 00:10:03,630
, der hier implementiert ist,

147
00:10:03,630 --> 00:10:11,040
wo wir den Abruf verwenden, um auf den Server zuzugreifen, um die Favoriten zu holen.

148
00:10:11,040 --> 00:10:15,580
Also, das sind die Methoden, die Sie hier sehen werden und dann auch Sie werden

149
00:10:15,580 --> 00:10:21,270
hier DeleteFacorite und auch einen Redux Tank für PostFavorite hier sehen.

150
00:10:21,270 --> 00:10:24,050
Also, im PostFavorite, wie Sie es erwarten

151
00:10:24,050 --> 00:10:28,130
würden, würden Sie den Favoriten hier auf dem Server veröffentlichen.

152
00:10:28,130 --> 00:10:35,730
Also, hier bemerken, wie wir Autorisierung verwenden.

153
00:10:35,730 --> 00:10:39,760
In unserem Autorisierungs-Header so eingerichtet,

154
00:10:39,760 --> 00:10:43,710
ist dies etwas, auf das ich Sie in diesem Moment aufmerksam machen würde,

155
00:10:43,710 --> 00:10:50,940
werden wir wieder darauf zurückkommen, wenn wir uns die Benutzerauthentifizierung und Autorisierung ansehen.

156
00:10:50,940 --> 00:10:55,820
Also, wir richten den Autorisierungs-Header so ein, indem wir hier fetch verwenden.

157
00:10:55,820 --> 00:11:00,620
Also, für fetch, wir posten

158
00:11:00,620 --> 00:11:06,845
hier ein Element in den Abruf und dann werden Sie feststellen, dass die Struktur, wie der Abruf durchgeführt wird, hier angegeben ist.

159
00:11:06,845 --> 00:11:13,735
Wenn Sie nun einen Favoriten posten oder einen Favoriten löschen oder einen Favoriten holen,

160
00:11:13,735 --> 00:11:17,825
werden wir immer den Server an Sie zurückgeben,

161
00:11:17,825 --> 00:11:22,545
die ganze Reihe von Favoriten und dann fügen wir einfach diese Favoriten

162
00:11:22,545 --> 00:11:29,185
in unseren Redux Store hier hinzu, so dass das ist, was wir hier tun.

163
00:11:29,185 --> 00:11:33,585
Auch hier sollte die Codestruktur Ihnen sehr vertraut aussehen,

164
00:11:33,585 --> 00:11:37,070
wenn Sie sich einfach ansehen, wie der Post-Favorit,

165
00:11:37,070 --> 00:11:41,600
der Löschfavorit und die Fetch-Favoriten implementiert werden.

166
00:11:41,600 --> 00:11:45,665
Also, all dies wird das Problem der Favoriten behandeln.

167
00:11:45,665 --> 00:11:49,520
Nun, wie genau werden die Favoriten selbst implementiert?

168
00:11:49,520 --> 00:11:52,950
So ist die Reduzierfunktion hier in der bevorzugten Struktur implementiert.

169
00:11:52,950 --> 00:11:54,875
Also, innerhalb dieser reduzierten Funktion,

170
00:11:54,875 --> 00:11:57,570
werden Sie sehen, wie wir die hinzufügen Favoriten,

171
00:11:57,570 --> 00:11:59,760
Favoriten laden, und Favoriten hier fehlgeschlagen behandeln.

172
00:11:59,760 --> 00:12:04,120
Auch hier sollte Ihnen der Code aufgrund

173
00:12:04,120 --> 00:12:10,300
Ihrer Erfahrung mit den Reducer-Funktionen, die Sie für Redux gesehen haben, sehr vertraut aussehen.

174
00:12:10,300 --> 00:12:18,850
Also, zahlen Sie wieder ein wenig Aufmerksamkeit auf die Art und Weise, wie der Code implementiert wird.

175
00:12:18,850 --> 00:12:21,130
Das ist ziemlich einfach, also verbringe ich nicht

176
00:12:21,130 --> 00:12:24,610
zu viel Zeit damit, zu erklären, wie diese Dinge umgesetzt werden.

177
00:12:24,610 --> 00:12:27,720
Nun, unter Ausnutzung dieser,

178
00:12:27,720 --> 00:12:30,895
haben wir in den Komponenten haben wir jetzt

179
00:12:30,895 --> 00:12:37,630
eine neue Favoriten-Komponente, deren Aufgabe es ist, alle Liste unserer Favoriten zu rendern.

180
00:12:37,630 --> 00:12:41,380
Also, hier sehen Sie, dass die Favoriten-Komponente selbst,

181
00:12:41,380 --> 00:12:44,790
die Struktur der Favoriten-Komponente ist sehr ähnlich

182
00:12:44,790 --> 00:12:49,460
der Struktur der Menükomponente, so hier haben wir

183
00:12:49,460 --> 00:12:56,900
die Favoriten-Komponente, die als funktionale Komponente implementiert ist und in

184
00:12:56,900 --> 00:13:05,575
dort werden wir die Favoriten in hier, wie Sie im Code hier sehen.

185
00:13:05,575 --> 00:13:08,460
Auch hier sehr einfach, ich denke, Sie sollten in der Lage sein,

186
00:13:08,460 --> 00:13:12,190
leicht zu verstehen, wie die Favoritenkomponente

187
00:13:12,190 --> 00:13:18,835
implementiert wird, nachdem sie Erfahrung mit der Implementierung der Menükomponente dort gehabt haben.

188
00:13:18,835 --> 00:13:22,920
Also, wieder verbringe ich nicht zu viel Zeit damit, Code hier zu erklären.

189
00:13:22,920 --> 00:13:26,605
Jetzt ist das Parsen durch den Code auch

190
00:13:26,605 --> 00:13:32,280
eine gute Erfahrung für Sie, um zu erfahren, wie der Code implementiert wird, so dass die

191
00:13:32,280 --> 00:13:37,880
Verarbeitung dieses Codes in Ihrem eigenen Kopf Ihnen hilft, wieder zu verstehen,

192
00:13:37,880 --> 00:13:43,790
um Ihr Verständnis von React detaillierter zu konsolidieren.

193
00:13:43,790 --> 00:13:46,085
Also werde ich das als Übung für Sie überlassen.

194
00:13:46,085 --> 00:13:49,150
Jetzt weise ich darauf hin, wo die Änderungen

195
00:13:49,150 --> 00:13:53,380
vorgenommen wurden, um die Unterstützung für Favoriten zu implementieren.

196
00:13:53,380 --> 00:13:54,840
Jetzt ist der Lieblingsbegriff,

197
00:13:54,840 --> 00:13:56,630
Favoriten ist auch Hebelwirkung in

198
00:13:56,630 --> 00:13:59,995
der Schale Detailkomponente und innerhalb der Schale Detailkomponente,

199
00:13:59,995 --> 00:14:08,830
werden Sie sehen, dass wir die zusätzliche haben- In hier,

200
00:14:08,830 --> 00:14:14,799
in der Renderschale funktionale Komponente,

201
00:14:14,799 --> 00:14:19,360
werden wir die Schaltfläche rendern, die

202
00:14:19,360 --> 00:14:27,595
die Auswahl unterstützt oder wenn Sie auf die Herzumrisse klicken,

203
00:14:27,595 --> 00:14:33,440
wird es diesen bestimmten Gegenstand in Ihre Favoritenliste hinzufügen.

204
00:14:33,440 --> 00:14:37,815
Also, all dies wird hier unterstützt, indem Sie diese Schaltfläche hier verwenden, die

205
00:14:37,815 --> 00:14:44,200
aufgerufen wird, wie Sie diese Funktion namens Post Favorit sehen, die die Redux ist.

206
00:14:44,200 --> 00:14:47,900
Vielen Dank, dass wir dort implementiert haben und diese Unterstützung dafür

207
00:14:47,900 --> 00:14:51,925
ist in den Hauptkomponenten implementiert, so dass, wenn Sie in die Hauptkomponente gehen,

208
00:14:51,925 --> 00:14:56,720
werden Sie sehen, wie der Beitrag Favorit hier implementiert

209
00:14:56,720 --> 00:15:00,230
wird und Sie werden auch sehen, dass dies

210
00:15:00,230 --> 00:15:04,540
in der Karte an Requisiten gesendet enthalten ist und so die Post Lieblings implementiert.

211
00:15:04,540 --> 00:15:07,580
Sie sehen also, dass die Strukturierung sehr ähnlich ist

212
00:15:07,580 --> 00:15:11,910
wie das, was Sie für den anderen Code dort gesehen haben.

213
00:15:11,910 --> 00:15:18,295
Also, ich werde nicht zu viel Zeit damit verbringen, wie die Favoritenunterstützung implementiert wird,

214
00:15:18,295 --> 00:15:21,400
sondern lassen Sie mich ein wenig mehr Zeit damit verbringen, wie

215
00:15:21,400 --> 00:15:27,705
die Benutzerautorisierung und Authentifizierung im Code hier unterstützt wird.

216
00:15:27,705 --> 00:15:29,765
Nun für die Benutzerauthentifizierung,

217
00:15:29,765 --> 00:15:35,810
was wir hier tun, ist, dass, wenn Sie hier in den Konfigurationsspeicher gehen,

218
00:15:35,810 --> 00:15:42,530
Sie sehen werden, dass ich eine weitere Reduzierfunktion namens Auth habe, die hier implementiert wird.

219
00:15:42,530 --> 00:15:49,670
Also, das wird den Berechtigungsteil davon verfolgen.

220
00:15:49,670 --> 00:15:51,380
Wie wird das nun umgesetzt?

221
00:15:51,380 --> 00:15:53,910
Wieder, gehen in Aktion Ersteller,

222
00:15:53,910 --> 00:16:01,070
Untätigkeitstypen haben wir bereits die Reihe von Aktionen im Zusammenhang mit Login und Abmelden gesehen. Wenn Sie

223
00:16:01,070 --> 00:16:02,985
also in Action-Ersteller gehen,

224
00:16:02,985 --> 00:16:05,980
werden Sie sehen, dass wir hier oben

225
00:16:05,980 --> 00:16:10,620
alle Funktionen haben, die für das Einloggen und Abmelden implementiert sind.

226
00:16:10,620 --> 00:16:18,405
Also, Sie werden eine neue Funktion namens Request Login sehen, empfangen Protokollierung,

227
00:16:18,405 --> 00:16:25,765
und so sind diese, wenn die Anmeldung erfolgreich ist und so weiter, aber insbesondere,

228
00:16:25,765 --> 00:16:35,930
dieser spezielle Funct hier des Login-Benutzers ist, wo wir mit dem Anmeldeprozess beginnen.

229
00:16:35,930 --> 00:16:40,955
Also, wir werden die Anfrage Login an dem Punkt senden, wenn der Benutzer versucht, sich anzumelden,

230
00:16:40,955 --> 00:16:46,010
danach werden wir einen Abruf an den Benutzer Schrägstrich Login-Endpunkt mit

231
00:16:46,010 --> 00:16:52,455
dem Post durchführen und dies enthält im Textkörper der Nachricht die Anmeldeinformationen für den Benutzer hier.

232
00:16:52,455 --> 00:16:54,445
Also, sobald wir den Abruf durchführen,

233
00:16:54,445 --> 00:16:58,570
wenn die Antwort korrekt zurückgegeben wird,

234
00:16:58,570 --> 00:17:02,330
sollte die Antwort das Token dort enthalten.

235
00:17:02,330 --> 00:17:08,545
Also, wir werden diese Antwort hier unten verarbeiten und dann, wenn die Anmeldung erfolgreich war,

236
00:17:08,545 --> 00:17:15,790
dann speichern wir das Token hier im lokalen Speicher.

237
00:17:15,790 --> 00:17:18,210
So können Sie sehen, dass wir sagen, LocalStorage Set

238
00:17:18,210 --> 00:17:21,600
Element Token Antwort Token und dann werden wir

239
00:17:21,600 --> 00:17:27,830
auch die Anmeldeinformationen des Benutzers im lokalen Speicher speichern hier.

240
00:17:27,830 --> 00:17:34,045
Also, diese beiden werden mir helfen, den Anmeldeprozess des Benutzers zu verfolgen.

241
00:17:34,045 --> 00:17:39,600
Danach versenden wir dann den Empfangs-Login.

242
00:17:39,600 --> 00:17:44,150
Nun, an diesem Punkt, wenn der Benutzer erfolgreich angemeldet ist,

243
00:17:44,150 --> 00:17:46,645
holen wir auch die Favoriten für den Benutzer.

244
00:17:46,645 --> 00:17:51,975
Denken Sie nun daran, dass Sie nur die Favoriten für einen angemeldeten Benutzer abrufen können.

245
00:17:51,975 --> 00:17:55,110
Wenn kein Benutzer angemeldet ist, gibt es keine Favoriten, die abgerufen werden sollen,

246
00:17:55,110 --> 00:17:58,110
aber wenn sich der Benutzer erfolgreich anmeldet, möchten Sie den

247
00:17:58,110 --> 00:18:02,250
Favoriten des Benutzers abrufen, damit er das in Ihrer React-Anwendung anzeigen kann.

248
00:18:02,250 --> 00:18:04,520
Also, das ist, warum ich auch einen holen Favoriten

249
00:18:04,520 --> 00:18:07,505
hier und dann erhalten wir den Login hier.

250
00:18:07,505 --> 00:18:12,050
Wenn dann ein Fehler vorliegt, werden wir den Anmeldefehler hier absenden.

251
00:18:12,050 --> 00:18:18,080
Also, all diese Funktionen der Empfangs-Login-und Login-Fehler wird

252
00:18:18,080 --> 00:18:25,020
dann die entsprechenden Reducer-Funktionen aufrufen, die in der Datei Auth.Js implementiert sind.

253
00:18:25,020 --> 00:18:27,260
Wenn Sie also in die Datei Auth.Js gehen,

254
00:18:27,260 --> 00:18:33,660
verfolgt der Status hier den Anmeldestatus des Benutzers.

255
00:18:33,660 --> 00:18:36,930
Also, hier werden wir auch in dem Zustand speichern,

256
00:18:36,930 --> 00:18:40,740
der Staat beinhaltet die East Loading Boolean, die

257
00:18:40,740 --> 00:18:46,160
verfolgt, ob Sie in den Prozess der Anmeldung sind. Die einfache Authentifizierung - Gibt an,

258
00:18:46,160 --> 00:18:53,850
ob der Benutzer authentifiziert ist und so der Benutzer angemeldet ist,

259
00:18:53,850 --> 00:18:57,200
so dass Sie in der Lage sein, den Benutzer zu erlauben.

260
00:18:57,200 --> 00:19:00,060
Daher wird dieses Flag in vielen Fällen verwendet,

261
00:19:00,060 --> 00:19:03,970
um den Anmeldestatus des Benutzers anzuzeigen und dann auch

262
00:19:03,970 --> 00:19:11,340
die Benutzereigenschaft für den Status verfolgt die Anmeldeinformationen des Benutzers.

263
00:19:11,340 --> 00:19:16,135
Also, das ist, wo wir den Benutzernamen für die Anzeige in unserer Header-Komponente erhalten.

264
00:19:16,135 --> 00:19:25,310
Nun, hier sehen Sie die Anmeldeanforderung und wenn der Anmeldeerfolg ausgelöst

265
00:19:25,310 --> 00:19:31,695
wird, speichern Sie den Token-Wert hier und dann den Anmeldefehler.

266
00:19:31,695 --> 00:19:35,235
Die Abmeldeanforderung, erfolgreich abgemeldet,

267
00:19:35,235 --> 00:19:45,140
alle diese werden von diesen verschiedenen Teilen innerhalb dieses Reduzierers der auth.js Reduzierer hier behandelt.

268
00:19:45,140 --> 00:19:51,705
So wird die Authentifizierung des Benutzers hier gehandhabt.

269
00:19:51,705 --> 00:19:54,055
Nun, in der Header-Komponente,

270
00:19:54,055 --> 00:19:55,770
gehen in die Header-Komponente,

271
00:19:55,770 --> 00:20:00,040
also hier haben wir die Login-Funktion hier.

272
00:20:00,040 --> 00:20:02,460
Also, die HandleLogin, Sie erinnern sich, dass wir

273
00:20:02,460 --> 00:20:05,545
dies bereits im React-Kurs implementiert haben.

274
00:20:05,545 --> 00:20:09,330
Im HandleLogin schalten sie das Modal um.

275
00:20:09,330 --> 00:20:14,340
Also, wir schließen das Modal und dann werden wir den Benutzer an dieser Stelle anmelden.

276
00:20:14,340 --> 00:20:18,810
Also, wir sagen this.props LoginUser und dann werden Sie sehen, dass die Anmeldeinformationen,

277
00:20:18,810 --> 00:20:22,710
Benutzername und Passwort als Parameter an

278
00:20:22,710 --> 00:20:27,115
den LoginUser übergeben werden und damit in den LoginUser Func gelangt, der sich

279
00:20:27,115 --> 00:20:30,400
dann um die Anmeldung des Benutzers kümmert.

280
00:20:30,400 --> 00:20:34,930
Wie zeigen Sie nun den Anmeldestatus des Benutzers an?

281
00:20:34,930 --> 00:20:36,785
Also, das ist wieder sehr einfach.

282
00:20:36,785 --> 00:20:38,870
In der navbar hier

283
00:20:38,870 --> 00:20:42,900
werden Sie sehen, dass ich hier einen neuen Artikel hinzugefügt habe.

284
00:20:42,900 --> 00:20:47,900
Also, dies ist, wo wir sagen this.props.auth.isAuthenticated.

285
00:20:47,900 --> 00:20:54,280
Also, das isAuthenticated Flag wird hier von mir verwendet, und wenn dies auf true gesetzt ist,

286
00:20:54,280 --> 00:20:55,845
dann werde ich

287
00:20:55,845 --> 00:21:04,910
hier die Abmelde-Taste anzeigen und das ist die Sache, die ich hier anzeigen werde.

288
00:21:04,910 --> 00:21:07,110
Andernfalls werde ich den Login-Button anzeigen.

289
00:21:07,110 --> 00:21:09,890
Mit diesem isAuthenticated Flag

290
00:21:09,890 --> 00:21:14,435
kippe ich, welche bestimmte Schaltfläche in

291
00:21:14,435 --> 00:21:20,520
der Kopfzeile angezeigt wird, unabhängig davon, ob Sie die Abmelde-Taste oder die Login-Button anzeigen.

292
00:21:20,520 --> 00:21:24,290
Also, das ist der Punkt, den wir hier zeigen.

293
00:21:24,290 --> 00:21:29,240
Also, der Login oder die Abmeldung hier.

294
00:21:29,240 --> 00:21:34,690
So behandeln wir den Login- und Abmeldeprozess

295
00:21:34,690 --> 00:21:40,935
hier und wir werden auch den Benutzernamen direkt dort anzeigen.

296
00:21:40,935 --> 00:21:43,245
Wenn Sie also den Abmelde-Button anzeigen,

297
00:21:43,245 --> 00:21:48,585
werden Sie auch sehen, dass wir dort den Namen des Benutzers anzeigen.

298
00:21:48,585 --> 00:21:54,290
Also, unten hier unten,

299
00:21:54,290 --> 00:21:59,720
werden wir auch die Schaltfläche

300
00:21:59,720 --> 00:22:06,490
HandleLogout anzeigen und dann haben wir die Abmelde-Taste angezeigt wird hier.

301
00:22:06,490 --> 00:22:09,650
Darüber hinaus ist diese besondere Aussage hier,

302
00:22:09,650 --> 00:22:13,280
das ist, wie wir den Benutzernamen hier anzeigen.

303
00:22:13,280 --> 00:22:17,760
Dies verwendet also den this.props.auth.user.username.

304
00:22:17,760 --> 00:22:24,110
Also, die Benutzereigenschaft im Authentifizierungsstatus enthält

305
00:22:24,110 --> 00:22:27,290
die Benutzeranmeldeinformationen und von dort habe ich den Benutzernamen abgerufen und dann

306
00:22:27,290 --> 00:22:30,980
verwende ich das, um dies in der Headerleiste anzuzeigen. Auf

307
00:22:30,980 --> 00:22:34,190
diese Weise wird die Header-Komponente

308
00:22:34,190 --> 00:22:38,170
aktualisiert, um den Anmelde- und Abmeldeprozess zu verarbeiten.

309
00:22:38,170 --> 00:22:41,610
Auch hier, ziemlich einfache Wege der Implementierung,

310
00:22:41,610 --> 00:22:44,490
ist es ziemlich einfach, den ich hier implementiert habe.

311
00:22:44,490 --> 00:22:49,765
Nun offensichtlich, wenn Sie eine komplexere Möglichkeit haben, den Anmelde- und Abmeldeprozess zu behandeln,

312
00:22:49,765 --> 00:22:54,120
können Sie sicherlich auf die vollwertige Art gehen, Dinge zu tun,

313
00:22:54,120 --> 00:22:58,160
aber das ist ausreichend, um die Anforderungen für meine Anwendung zu erfüllen.

314
00:22:58,160 --> 00:23:01,650
Also, ich habe den Login- und Logout-Prozess

315
00:23:01,650 --> 00:23:06,970
hier mit Hilfe des Redux-Stores auf sehr einfache Weise implementiert.

316
00:23:06,970 --> 00:23:09,440
Also, von Redux Store selbst verfolgt

317
00:23:09,440 --> 00:23:15,455
meinen Login-Status, ob ich eingeloggt bin und ich authentifiziert bin und ob ich abgemeldet bin.

318
00:23:15,455 --> 00:23:17,020
Also, wenn der Benutzer abgemeldet ist,

319
00:23:17,020 --> 00:23:19,325
dann wird die Meine Favoriten hier nicht angezeigt.

320
00:23:19,325 --> 00:23:24,090
Nun, ein wichtiger Punkt, den Sie fragen werden, ist,

321
00:23:24,090 --> 00:23:31,990
wie stellen wir sicher, dass wir hier nicht in den Favoritenstatus gehen?

322
00:23:31,990 --> 00:23:39,530
Das wird also an der Stelle gehandhabt, wo wir die Routen hier abwickeln.

323
00:23:39,530 --> 00:23:42,640
Sie werden also feststellen, dass

324
00:23:42,640 --> 00:23:46,880
wir für die Favoriten hier den Endpunkt deklarieren, anstatt

325
00:23:46,880 --> 00:23:51,080
dies als Route aufzurufen, die wir als private Route nennen.

326
00:23:51,080 --> 00:23:55,590
Die private Route ermöglicht es Ihnen, sicherzustellen, dass Sie

327
00:23:55,590 --> 00:24:00,500
in diesen Teil nur unter Umständen gehen dürfen,

328
00:24:00,500 --> 00:24:02,870
in denen der Benutzer angemeldet ist.

329
00:24:02,870 --> 00:24:09,600
Dies verhindert eine Navigation zu ihrem /favorites-Endpunkt, wenn kein Benutzer angemeldet ist.

330
00:24:09,600 --> 00:24:12,055
Nun, wie wird diese private Route umgesetzt?

331
00:24:12,055 --> 00:24:16,020
Diese private Route wird genau hier oben umgesetzt.

332
00:24:16,020 --> 00:24:19,635
So können Sie sehen, dass diese private Route implementiert wird, wie hier gezeigt.

333
00:24:19,635 --> 00:24:24,070
Also, das ist nichts anderes als eine Route hier und dann hier,

334
00:24:24,070 --> 00:24:28,670
wir werden this.props.auth.isAuthenticated implementieren.

335
00:24:28,670 --> 00:24:30,620
Also, wenn der Benutzer authentifiziert ist,

336
00:24:30,620 --> 00:24:35,100
dann werde ich erlauben, zu

337
00:24:35,100 --> 00:24:40,890
der Komponente zu navigieren, die die Favoritenkomponente ist.

338
00:24:40,890 --> 00:24:45,130
Andernfalls werde ich einfach auf die Home-Komponente umleiten.

339
00:24:45,130 --> 00:24:46,790
Also, wenn kein Benutzer angemeldet ist,

340
00:24:46,790 --> 00:24:49,900
werde ich einfach auf die Home-Komponente umleiten und so wird dies

341
00:24:49,900 --> 00:24:54,230
mit dieser privaten Route implementiert, die ich hier entworfen habe.

342
00:24:54,230 --> 00:25:00,270
Die private Route ist also etwas, das vom Router unterstützt wird, den

343
00:25:00,270 --> 00:25:06,750
wir den React-Router Dom verwenden, den wir in unserer React-Anwendung verwendet haben.

344
00:25:06,750 --> 00:25:10,300
Also, sehr einfache Art, Situationen

345
00:25:10,300 --> 00:25:16,425
zu behandeln, in denen Sie nicht möchten, dass bestimmte Routen navigiert werden, wenn der Benutzer nicht angemeldet ist.

346
00:25:16,425 --> 00:25:21,610
Also wieder, einige einfache Änderungen, die ich an

347
00:25:21,610 --> 00:25:23,080
der Anwendung vorgenommen habe, um

348
00:25:23,080 --> 00:25:27,360
alle verschiedenen Funktionen zu erleichtern, die Sie in Ihrer React-Anwendung sehen.

349
00:25:27,360 --> 00:25:29,270
Nun, wie Sie es erwarten würden,

350
00:25:29,270 --> 00:25:31,115
könnten Sie an dieser Stelle unterfordert sein

351
00:25:31,115 --> 00:25:34,630
: „Ist es so einfach zu implementieren“ und

352
00:25:34,630 --> 00:25:39,005
genau das wurde getan, um alle neuen Funktionen zu unterstützen.

353
00:25:39,005 --> 00:25:42,700
Wie Sie sehen, Benutzerauthentifizierung und

354
00:25:42,700 --> 00:25:47,470
Login-und Logout-Prozess, da unser Server vollwertige Unterstützung für alles hat,

355
00:25:47,470 --> 00:25:51,800
Implementierung der clientseitigen Verfolgung des Benutzers

356
00:25:51,800 --> 00:25:57,290
Anmelden und Abmelden Prozess und alles, was ziemlich einfach wird,

357
00:25:57,290 --> 00:25:59,980
indem nur einige der Komponenten und Hinzufügen

358
00:25:59,980 --> 00:26:09,015
der Auth Reducer-Funktion und Hinzufügen des Auth Status zu unserem Redux Store.

359
00:26:09,015 --> 00:26:13,010
Der gesamte Prozess der Handhabung der Benutzerauthentifizierung

360
00:26:13,010 --> 00:26:17,885
und des Anmeldens und Abmeldens wird in diesem Fall ziemlich einfach.

361
00:26:17,885 --> 00:26:23,055
Also, mit diesem kurzen Rundgang durch den aktualisierten React-Code,

362
00:26:23,055 --> 00:26:25,820
lassen Sie uns weiter, um

363
00:26:25,820 --> 00:26:30,415
unsere React-Anwendung ein paar weitere Funktionen unserer React-Anwendung zu untersuchen.

364
00:26:30,415 --> 00:26:33,650
Also wieder, wenn wir zu unserer Anwendung

365
00:26:33,650 --> 00:26:36,580
zurückgehen, können wir jetzt auf das Menü gehen und dann

366
00:26:36,580 --> 00:26:41,080
jedes Gericht hier hochziehen und ich kann hier Kommentare zum Gericht posten,

367
00:26:41,080 --> 00:26:49,020
also würde ich sofort die Bewertung hier und meinen Kommentarwert einrichten.

368
00:26:50,020 --> 00:26:59,950
Beachten Sie, dass ich meinen Benutzernamen oder den Namen meines Autors hier nicht in das Formular eingebe.

369
00:26:59,950 --> 00:27:03,820
Jetzt müssen Sie natürlich eingeloggt sein, um einen Kommentar abzugeben.

370
00:27:03,820 --> 00:27:08,765
Also, wenn Sie nicht angemeldet sind, wird dieser Kommentar von meinem Server nicht akzeptiert werden.

371
00:27:08,765 --> 00:27:11,165
Also, lassen Sie mich zuerst einloggen.

372
00:27:11,165 --> 00:27:17,140
So kann ich mich hier anmelden

373
00:27:17,140 --> 00:27:19,965
und sobald ich mich anmelde, bemerken Sie sofort, dass die

374
00:27:19,965 --> 00:27:23,485
Header-Symbolleiste aktualisiert wird, um meinen Status anzuzeigen.

375
00:27:23,485 --> 00:27:28,255
Jetzt kann ich diesen Kommentar posten und Sie würden feststellen, dass, wenn ich den Kommentar poste, der

376
00:27:28,255 --> 00:27:30,670
Kommentar in die Liste der Kommentare hinzugefügt wird

377
00:27:30,670 --> 00:27:33,120
und auch feststellen, dass das Autorenfeld

378
00:27:33,120 --> 00:27:38,285
hier automatisch ausgefüllt wird, weil wir so unsere Serverseite einrichten.

379
00:27:38,285 --> 00:27:39,810
Im Kommentarfeld

380
00:27:39,810 --> 00:27:44,680
haben wir unseren Benutzer als Verweis auf

381
00:27:44,680 --> 00:27:48,580
die Benutzerinformationen eingerichtet, die wir auf

382
00:27:48,580 --> 00:27:53,060
unserer Serverseite speichern und da wir das befüllte Mongoose Populate auf der Serverseite verwenden, werden

383
00:27:53,060 --> 00:27:55,555
die Benutzerinformationen automatisch

384
00:27:55,555 --> 00:27:58,230
in die eingehenden Kommentare von der Serverseite aufgefüllt.

385
00:27:58,230 --> 00:28:02,350
So stellen Sie fest, wie ich das nutze,

386
00:28:02,350 --> 00:28:07,560
was der Server bereits für mich bereitstellt, um automatisch die Details auszufüllen.

387
00:28:08,290 --> 00:28:12,665
So, kleinere Änderungen wieder sogar in

388
00:28:12,665 --> 00:28:20,420
die Schüssel Detailseite, um die Verwendung der Kommentare Unterstützung auf der Server-Site widerzuspiegeln.

389
00:28:20,420 --> 00:28:22,370
Damit vervollständige ich

390
00:28:22,370 --> 00:28:29,415
die schnelle Darstellung des React-Clients, die wir im Rahmen

391
00:28:29,415 --> 00:28:33,445
dieser Übung implementiert haben, und ich hoffe, dass Sie

392
00:28:33,445 --> 00:28:37,690
durch die Details des Codes im Client gehen auch und dann

393
00:28:37,690 --> 00:28:41,560
reflektieren, was Sie in React Kurs gelernt haben und sehen, wie

394
00:28:41,560 --> 00:28:46,230
die Änderungen ermöglichen es uns, eine modifizierte,

395
00:28:46,230 --> 00:28:51,390
[unhörbare] zu implementieren, die jetzt in der Lage ist, mit dem Server zu kommunizieren und dann alle Funktionen

396
00:28:51,390 --> 00:28:58,770
zu unterstützen, die wir ursprünglich als Teil unseres Clients und der Serverseite implementieren wollten.