1
00:00:03,650 --> 00:00:10,755
Nachdem wir nun die Entwicklung eines vollwertigen REST-API-Servers mit Loopback abgeschlossen haben, ist

2
00:00:10,755 --> 00:00:14,639
die unmittelbare nächste Frage, die sich in Ihrem Kopf

3
00:00:14,639 --> 00:00:20,090
stellen wird, wie passen wir die React-Anwendung an, um diesen REST-API-Server zu nutzen?

4
00:00:20,090 --> 00:00:23,140
Wie bereits in den vorherigen Fällen,

5
00:00:23,140 --> 00:00:29,190
müssen wir auch unsere React-Anwendung neu konfigurieren, um speziell die

6
00:00:29,190 --> 00:00:31,410
REST-API-Endpunkte und

7
00:00:31,410 --> 00:00:37,960
die verschiedenen REST-API-Anforderungen zu verwenden, die von unserem Loopback-Server bereitgestellt werden.

8
00:00:38,150 --> 00:00:42,075
Um mit dieser Übung zu beginnen,

9
00:00:42,075 --> 00:00:45,275
klonen Sie zuerst das Git-Repository, das

10
00:00:45,275 --> 00:00:51,140
eine abgeschlossene erneute Anwendung enthält, die mit unserem Loopback-Server kommuniziert.

11
00:00:51,140 --> 00:00:54,760
Um dies zu tun, gehen Sie zu Ihrem günstigen Standort auf Ihren Computern.

12
00:00:54,760 --> 00:00:58,370
Ich werde das Git-Repository klonen,

13
00:00:58,370 --> 00:01:00,640
indem ich git clone

14
00:01:06,440 --> 00:01:15,270
https://github.com/jmuppala/conFusion-React-Loopback.git tippe

15
00:01:15,270 --> 00:01:18,130
und dann dieses Git-Repository klone.

16
00:01:19,430 --> 00:01:22,665
Sobald das Git-Repository geklont ist,

17
00:01:22,665 --> 00:01:30,780
werden wir in den Confusion-React-Loopback-Ordner wechseln und

18
00:01:30,780 --> 00:01:39,355
dann eine Garn-Installation durchführen, um alle Knotenmodule für diese Anwendung zu installieren.

19
00:01:39,355 --> 00:01:42,315
Bevor Sie die React-Anwendung starten,

20
00:01:42,315 --> 00:01:46,300
stellen Sie sicher, dass Ihr Loopback-Server korrekt konfiguriert ist.

21
00:01:49,410 --> 00:01:54,425
Verschieben Sie im Loopback-Server im Client-Ordner die Bilder, die wir als images.zip Datei gegeben haben,

22
00:01:54,425 --> 00:01:56,780
entpacken Sie es, und verschieben Sie dann die Bilder in

23
00:01:56,780 --> 00:02:00,540
den Ordner images unter dem Client-Ordner, wie hier gezeigt.

24
00:02:00,540 --> 00:02:08,660
Benennen Sie auch die Datei „root.js“ in „root.jsold“ um oder löschen Sie die Datei „root.js“.

25
00:02:08,660 --> 00:02:13,310
Wir brauchen dies nicht mehr in unserer Anwendung, weil wir sicherstellen wollen, dass

26
00:02:13,310 --> 00:02:21,050
unser Server die Inhalte aus dem Client-Ordner speichert.

27
00:02:21,050 --> 00:02:22,740
Um dies zu erreichen,

28
00:02:22,740 --> 00:02:25,265
öffnen wir die Datei middleware.json

29
00:02:25,265 --> 00:02:32,980
und

30
00:02:32,980 --> 00:02:38,435
fügen Sie in der Datei middleware.json im Dateiteil dies in den Dateiteil Ihrer middleware.json Datei hinzu.

31
00:02:38,435 --> 00:02:46,320
Also, wir werden sagen, Loopback static und params: Dollar Bank Punkt Punkt Slash Client“,

32
00:02:46,320 --> 00:02:49,595
was anzeigt, dass Ihr Loopback-Server

33
00:02:49,595 --> 00:02:53,555
statische Inhalte aus dem Client-Ordner hier speichern wird.

34
00:02:53,555 --> 00:02:55,890
Nachdem Sie diese Änderungen vorgenommen

35
00:02:55,890 --> 00:03:00,080
haben, können Sie Ihren Server starten.

36
00:03:00,360 --> 00:03:04,100
Stellen Sie sicher, dass Ihr MongoDB-Server

37
00:03:04,100 --> 00:03:07,860
auch betriebsbereit ist, bevor Sie Ihren Loopback-Server starten.

38
00:03:07,860 --> 00:03:14,690
Danach werden wir dann unseren React-Client kompilieren und starten. Stellen Sie

39
00:03:14,690 --> 00:03:20,345
nun wieder sicher, dass Ihr MongoDB-Server und Ihr Loopback-Server läuft und läuft,

40
00:03:20,345 --> 00:03:22,810
gehen Sie zum Terminal und fügen Sie das Terminal hinzu.

41
00:03:22,810 --> 00:03:31,405
Geben Sie Garn an, um unsere Loopback-Anwendung zu starten, die React-Anwendung.

42
00:03:31,405 --> 00:03:34,980
Wenn die Anwendung im Browser gestartet

43
00:03:34,980 --> 00:03:40,750
wird, werden Sie feststellen, dass sich die Loopback-basierte React-Anwendung

44
00:03:40,750 --> 00:03:46,670
genau so verhält wie die vorherigen Versionen der React-Anwendung.

45
00:03:46,670 --> 00:03:48,670
Also, hier haben wir die Homepage,

46
00:03:48,670 --> 00:03:52,725
dann haben wir die Über uns Seite, wie wir hier sehen,

47
00:03:52,725 --> 00:03:56,770
dann die Menü-Seite, wo die Menüpunkte hier aufgelistet sind,

48
00:03:56,770 --> 00:04:00,260
die Kontaktieren Sie uns Seite wie erwartet.

49
00:04:00,260 --> 00:04:04,535
Dann lassen Sie mich zurück zur Homepage gehen und mich dann als Admin anmelden.

50
00:04:04,535 --> 00:04:11,000
Also, lassen Sie uns als Admin anmelden,

51
00:04:11,000 --> 00:04:14,480
und dann werden Sie in der Lage sein, die Meine Favoriten zu sehen.

52
00:04:14,480 --> 00:04:19,075
Ich habe mich früher angemeldet und dann einen Eintrag zu „Meine Favoriten“ hinzugefügt.

53
00:04:19,075 --> 00:04:24,290
Gehen wir nun zum Menü und fügen Sie dann einen zweiten Eintrag in Meine Favoriten hinzu.

54
00:04:24,290 --> 00:04:27,930
Also, hier werden wir diesen Artikel zu den Favoriten hinzufügen,

55
00:04:27,930 --> 00:04:34,850
und dann würden Sie in der Lage sein, zu sehen, dass diese beiden Elemente jetzt in Meine Favoriten sind.

56
00:04:34,850 --> 00:04:38,194
In ähnlicher Weise können Sie Elemente aus den Favoriten löschen.

57
00:04:38,194 --> 00:04:42,020
Also, lassen Sie uns voran und löschen Sie dies aus unseren Favoriten.

58
00:04:42,020 --> 00:04:43,490
Gehen wir zurück zum Menüpunkt,

59
00:04:43,490 --> 00:04:47,550
lassen Sie uns einen Kommentar zu einem der Gerichte hinzufügen.

60
00:04:47,550 --> 00:04:49,560
Also, lassen Sie mich auf dieses Gericht klicken,

61
00:04:49,560 --> 00:04:51,855
und dann werden wir einen Kommentar einreichen.

62
00:04:51,855 --> 00:05:01,980
Also, wenn wir einen Kommentar einreichen,

63
00:05:01,980 --> 00:05:05,175
wie Sie sehen können, wird der Kommentar

64
00:05:05,175 --> 00:05:09,710
wie

65
00:05:09,710 --> 00:05:15,690
erwartet in unserem Server hinzugefügt und das Ergebnis wird in der Dish Detail Seite hier angezeigt.

66
00:05:15,690 --> 00:05:18,660
Wieder zurück zur Homepage,

67
00:05:19,260 --> 00:05:24,650
stellen wir fest, dass unsere React-Anwendung jetzt in der Lage ist, mit

68
00:05:24,650 --> 00:05:27,740
dem Loopback-Server zu kommunizieren und dann

69
00:05:27,740 --> 00:05:31,465
die Daten vom Server zu erhalten und wie erwartet mit dem Server zu interagieren.

70
00:05:31,465 --> 00:05:35,160
Nun, natürlich, die Frage, die sich in Ihrem Kopf stellen würde, ist,

71
00:05:35,160 --> 00:05:41,455
wie kommuniziert diese Loopback-Anwendung mit dem Loopback-Server?

72
00:05:41,455 --> 00:05:47,610
Nun, hier würden wir bemerken, dass für Loopback,

73
00:05:47,610 --> 00:05:51,495
da der Loopback-Server die REST-API-Endpunkte verfügbar macht,

74
00:05:51,495 --> 00:05:55,575
meine React-Anwendung in der Lage ist, auf den Loopback-Server an

75
00:05:55,575 --> 00:05:59,860
den entsprechenden REST-API-Endpunkten zuzugreifen und dann mit dem Server zu kommunizieren,

76
00:05:59,860 --> 00:06:07,845
wie wir es mit unserem eigenen REST-API-Server getan haben , die wir früher implementiert hatten.

77
00:06:07,845 --> 00:06:15,020
Lassen Sie uns also voran gehen und werfen einen Blick auf den Code für die modifizierte React-Anwendung. Wenn Sie

78
00:06:15,020 --> 00:06:17,690
zum Code unserer Anwendung gehen, werden

79
00:06:17,690 --> 00:06:23,200
die wichtigsten Änderungen, die Sie bemerken werden, in der Datei ActionCreators.js sein.

80
00:06:23,200 --> 00:06:27,620
Hier werden Sie feststellen, dass wir jetzt mit

81
00:06:27,620 --> 00:06:33,930
dem Loopback-Server statt mit dem REST-API-Server kommunizieren, den wir zuvor hatten.

82
00:06:33,930 --> 00:06:37,550
So wird der Abruf nun auf den Loopback-Server

83
00:06:37,550 --> 00:06:43,800
am api/comments Endpunkt oder am api/dishs-Endpunkt usw. zugreifen.

84
00:06:43,800 --> 00:06:52,350
Alle diese Abrufanforderungen werden aktualisiert, um sofort auf unseren Loopback-Server zuzugreifen.

85
00:06:52,700 --> 00:06:56,215
So werden Sie dort ähnliche Änderungen bemerken.

86
00:06:56,215 --> 00:07:00,095
Nun, zusätzlich zur Anmeldung bei unserem Loopback-Server,

87
00:07:00,095 --> 00:07:08,190
also lassen Sie uns hier zum Login-Code gehen.

88
00:07:08,190 --> 00:07:09,750
Also, im Anmeldebenutzer,

89
00:07:09,750 --> 00:07:18,035
veröffentlichen wir einen Abruf an den BaseURL und API/Kunden/Login-Endpunkt,

90
00:07:18,035 --> 00:07:25,260
und dann geben wir die Anmeldeinformationen im Hauptteil der Anforderungsnachricht an, die ausgeht.

91
00:07:25,260 --> 00:07:27,215
Als Antwort darauf

92
00:07:27,215 --> 00:07:29,830
sendet der Server die Antwort zurück.

93
00:07:29,830 --> 00:07:33,950
Die Antwort enthält dann die Token-Informationen.

94
00:07:33,950 --> 00:07:38,905
Die Token-Informationen werden in Form der

95
00:07:38,905 --> 00:07:44,790
ID der Antwortnachricht zurückgesendet.

96
00:07:44,790 --> 00:07:47,325
Die ID selbst dient also als Token.

97
00:07:47,325 --> 00:07:49,545
Also, die Antwortnachricht selbst,

98
00:07:49,545 --> 00:07:55,200
werde ich dies in meinem lokalen Speicher speichern, wie hier gezeigt.

99
00:07:55,200 --> 00:07:59,320
Wir stringisieren die Antwortnachricht und speichern sie dann dort.

100
00:07:59,320 --> 00:08:06,945
Diese Antwortnachricht, die Response.id, enthält das Token.

101
00:08:06,945 --> 00:08:12,815
Daher dient die response.id als JSON-Web-Token für den Zugriff auf den Loopback-Server.

102
00:08:12,815 --> 00:08:15,650
Deshalb werden Sie feststellen, dass in

103
00:08:15,650 --> 00:08:19,235
Situationen, in denen ich auf den Server zugreifen muss, zum Beispiel

104
00:08:19,235 --> 00:08:25,520
werden wir feststellen, dass, wenn wir Ihren Favoriten auf dem Server abrufen oder posten, Sie

105
00:08:25,520 --> 00:08:28,550
feststellen werden, dass ich das Token erhalte, indem Sie sagen,

106
00:08:28,550 --> 00:08:30,420
lassen Sie Token, JSON parse,

107
00:08:30,420 --> 00:08:33,990
localStorage, getItem, Token hier,

108
00:08:33,990 --> 00:08:38,890
und dann im Autorisierungs-Headerfeld,

109
00:08:38,890 --> 00:08:44,300
sagte ich, dass das Autorisierungsfeld hier token.id sein soll, wie hier gezeigt.

110
00:08:44,300 --> 00:08:51,380
So können wir uns also beim Loopback-Server authentifizieren.

111
00:08:51,380 --> 00:08:55,450
Also, hier sehen Sie, dass es sagt, BaseURL, api/Favoriten,

112
00:08:55,450 --> 00:08:59,440
und dann erhalten Sie die Liste der Favoriten vom Server,

113
00:08:59,440 --> 00:09:03,430
und speichern Sie es dann in unserem Redux Store.

114
00:09:03,430 --> 00:09:06,710
Nun, ein großer Teil des Codes bleibt der gleiche,

115
00:09:06,710 --> 00:09:09,740
mit Ausnahme der Updates, die wir durchgeführt haben, um

116
00:09:09,740 --> 00:09:13,455
auf die Loopback-REST-API-Endpunkte zuzugreifen.

117
00:09:13,455 --> 00:09:22,665
Jetzt haben wir für Angular ein Loopback-SDK, das für unsere Angular-Anwendung erstellt werden kann.

118
00:09:22,665 --> 00:09:27,070
Aber für React gibt es keine solche Unterstützung von Loopback,

119
00:09:27,070 --> 00:09:30,460
und so müssen wir auf den direkten Zugriff auf

120
00:09:30,460 --> 00:09:34,840
die Loopback-REST-API-Endpunkte zurückgreifen, wie hier mit fetch gezeigt,

121
00:09:34,840 --> 00:09:38,860
und dann sind wir in der Lage, mit dem Loopback-Server zu kommunizieren.

122
00:09:38,860 --> 00:09:42,115
Mit diesem schnellen Verständnis, wie

123
00:09:42,115 --> 00:09:48,360
unsere React-Anwendung aktualisiert wurde, um auf unseren Loopback-Server zuzugreifen,

124
00:09:48,360 --> 00:09:51,795
schließen wir die Prüfung des Loopback-Servers ab.

125
00:09:51,795 --> 00:09:56,980
Verbringen Sie mehr Zeit damit, sich einige der Komponenten anzusehen und zu sehen,

126
00:09:56,980 --> 00:10:02,340
wie sie die vom Loopback-Server erhaltenen Informationen verwenden.

127
00:10:02,340 --> 00:10:06,530
Sie werden feststellen, dass die meisten Komponenten genau gleich bleiben wie zuvor,

128
00:10:06,530 --> 00:10:13,650
mit Ausnahme einiger geringfügiger Änderungen in der Favoritenkomponente, um

129
00:10:13,650 --> 00:10:18,495
die Informationen vom Loopback-Server zu erhalten

130
00:10:18,495 --> 00:10:22,700
und sie dann zum Rendern der Liste der Favoritenelemente zu verwenden.

131
00:10:22,700 --> 00:10:29,545
Abgesehen davon beschränkt sich ein Großteil der Änderungen auf die Datei ActionCreators.js,

132
00:10:29,545 --> 00:10:34,260
wo wir den Abruf aktualisiert haben, um die URL für

133
00:10:34,260 --> 00:10:41,125
unseren Loopback-Server zu verwenden, um auf die verschiedenen REST-API-Endpunkte zugreifen zu können.

134
00:10:41,125 --> 00:10:48,460
Damit habe ich Ihnen schnell demonstriert, wie Sie Ihre Anwendung erstellen können.

135
00:10:48,460 --> 00:10:51,590
Mit dieser kurzen Einführung, wie wir

136
00:10:51,590 --> 00:10:54,755
den Loopback innerhalb unserer Anwendung nutzen können,

137
00:10:54,755 --> 00:10:59,110
kommen wir zum Ende dieser Übung.