Nachdem wir nun die Entwicklung eines vollwertigen REST-API-Servers mit Loopback abgeschlossen haben, ist
die unmittelbare nächste Frage, die sich in Ihrem Kopf
stellen wird, wie passen wir die React-Anwendung an, um diesen REST-API-Server zu nutzen?
Wie bereits in den vorherigen Fällen,
müssen wir auch unsere React-Anwendung neu konfigurieren, um speziell die
REST-API-Endpunkte und
die verschiedenen REST-API-Anforderungen zu verwenden, die von unserem Loopback-Server bereitgestellt werden.
Um mit dieser Übung zu beginnen,
klonen Sie zuerst das Git-Repository, das
eine abgeschlossene erneute Anwendung enthält, die mit unserem Loopback-Server kommuniziert.
Um dies zu tun, gehen Sie zu Ihrem günstigen Standort auf Ihren Computern.
Ich werde das Git-Repository klonen,
indem ich git clone
https://github.com/jmuppala/conFusion-React-Loopback.git tippe
und dann dieses Git-Repository klone.
Sobald das Git-Repository geklont ist,
werden wir in den Confusion-React-Loopback-Ordner wechseln und
dann eine Garn-Installation durchführen, um alle Knotenmodule für diese Anwendung zu installieren.
Bevor Sie die React-Anwendung starten,
stellen Sie sicher, dass Ihr Loopback-Server korrekt konfiguriert ist.
Verschieben Sie im Loopback-Server im Client-Ordner die Bilder, die wir als images.zip Datei gegeben haben,
entpacken Sie es, und verschieben Sie dann die Bilder in
den Ordner images unter dem Client-Ordner, wie hier gezeigt.
Benennen Sie auch die Datei „root.js“ in „root.jsold“ um oder löschen Sie die Datei „root.js“.
Wir brauchen dies nicht mehr in unserer Anwendung, weil wir sicherstellen wollen, dass
unser Server die Inhalte aus dem Client-Ordner speichert.
Um dies zu erreichen,
öffnen wir die Datei middleware.json
und
fügen Sie in der Datei middleware.json im Dateiteil dies in den Dateiteil Ihrer middleware.json Datei hinzu.
Also, wir werden sagen, Loopback static und params: Dollar Bank Punkt Punkt Slash Client“,
was anzeigt, dass Ihr Loopback-Server
statische Inhalte aus dem Client-Ordner hier speichern wird.
Nachdem Sie diese Änderungen vorgenommen
haben, können Sie Ihren Server starten.
Stellen Sie sicher, dass Ihr MongoDB-Server
auch betriebsbereit ist, bevor Sie Ihren Loopback-Server starten.
Danach werden wir dann unseren React-Client kompilieren und starten. Stellen Sie
nun wieder sicher, dass Ihr MongoDB-Server und Ihr Loopback-Server läuft und läuft,
gehen Sie zum Terminal und fügen Sie das Terminal hinzu.
Geben Sie Garn an, um unsere Loopback-Anwendung zu starten, die React-Anwendung.
Wenn die Anwendung im Browser gestartet
wird, werden Sie feststellen, dass sich die Loopback-basierte React-Anwendung
genau so verhält wie die vorherigen Versionen der React-Anwendung.
Also, hier haben wir die Homepage,
dann haben wir die Über uns Seite, wie wir hier sehen,
dann die Menü-Seite, wo die Menüpunkte hier aufgelistet sind,
die Kontaktieren Sie uns Seite wie erwartet.
Dann lassen Sie mich zurück zur Homepage gehen und mich dann als Admin anmelden.
Also, lassen Sie uns als Admin anmelden,
und dann werden Sie in der Lage sein, die Meine Favoriten zu sehen.
Ich habe mich früher angemeldet und dann einen Eintrag zu „Meine Favoriten“ hinzugefügt.
Gehen wir nun zum Menü und fügen Sie dann einen zweiten Eintrag in Meine Favoriten hinzu.
Also, hier werden wir diesen Artikel zu den Favoriten hinzufügen,
und dann würden Sie in der Lage sein, zu sehen, dass diese beiden Elemente jetzt in Meine Favoriten sind.
In ähnlicher Weise können Sie Elemente aus den Favoriten löschen.
Also, lassen Sie uns voran und löschen Sie dies aus unseren Favoriten.
Gehen wir zurück zum Menüpunkt,
lassen Sie uns einen Kommentar zu einem der Gerichte hinzufügen.
Also, lassen Sie mich auf dieses Gericht klicken,
und dann werden wir einen Kommentar einreichen.
Also, wenn wir einen Kommentar einreichen,
wie Sie sehen können, wird der Kommentar
wie
erwartet in unserem Server hinzugefügt und das Ergebnis wird in der Dish Detail Seite hier angezeigt.
Wieder zurück zur Homepage,
stellen wir fest, dass unsere React-Anwendung jetzt in der Lage ist, mit
dem Loopback-Server zu kommunizieren und dann
die Daten vom Server zu erhalten und wie erwartet mit dem Server zu interagieren.
Nun, natürlich, die Frage, die sich in Ihrem Kopf stellen würde, ist,
wie kommuniziert diese Loopback-Anwendung mit dem Loopback-Server?
Nun, hier würden wir bemerken, dass für Loopback,
da der Loopback-Server die REST-API-Endpunkte verfügbar macht,
meine React-Anwendung in der Lage ist, auf den Loopback-Server an
den entsprechenden REST-API-Endpunkten zuzugreifen und dann mit dem Server zu kommunizieren,
wie wir es mit unserem eigenen REST-API-Server getan haben , die wir früher implementiert hatten.
Lassen Sie uns also voran gehen und werfen einen Blick auf den Code für die modifizierte React-Anwendung. Wenn Sie
zum Code unserer Anwendung gehen, werden
die wichtigsten Änderungen, die Sie bemerken werden, in der Datei ActionCreators.js sein.
Hier werden Sie feststellen, dass wir jetzt mit
dem Loopback-Server statt mit dem REST-API-Server kommunizieren, den wir zuvor hatten.
So wird der Abruf nun auf den Loopback-Server
am api/comments Endpunkt oder am api/dishs-Endpunkt usw. zugreifen.
Alle diese Abrufanforderungen werden aktualisiert, um sofort auf unseren Loopback-Server zuzugreifen.
So werden Sie dort ähnliche Änderungen bemerken.
Nun, zusätzlich zur Anmeldung bei unserem Loopback-Server,
also lassen Sie uns hier zum Login-Code gehen.
Also, im Anmeldebenutzer,
veröffentlichen wir einen Abruf an den BaseURL und API/Kunden/Login-Endpunkt,
und dann geben wir die Anmeldeinformationen im Hauptteil der Anforderungsnachricht an, die ausgeht.
Als Antwort darauf
sendet der Server die Antwort zurück.
Die Antwort enthält dann die Token-Informationen.
Die Token-Informationen werden in Form der
ID der Antwortnachricht zurückgesendet.
Die ID selbst dient also als Token.
Also, die Antwortnachricht selbst,
werde ich dies in meinem lokalen Speicher speichern, wie hier gezeigt.
Wir stringisieren die Antwortnachricht und speichern sie dann dort.
Diese Antwortnachricht, die Response.id, enthält das Token.
Daher dient die response.id als JSON-Web-Token für den Zugriff auf den Loopback-Server.
Deshalb werden Sie feststellen, dass in
Situationen, in denen ich auf den Server zugreifen muss, zum Beispiel
werden wir feststellen, dass, wenn wir Ihren Favoriten auf dem Server abrufen oder posten, Sie
feststellen werden, dass ich das Token erhalte, indem Sie sagen,
lassen Sie Token, JSON parse,
localStorage, getItem, Token hier,
und dann im Autorisierungs-Headerfeld,
sagte ich, dass das Autorisierungsfeld hier token.id sein soll, wie hier gezeigt.
So können wir uns also beim Loopback-Server authentifizieren.
Also, hier sehen Sie, dass es sagt, BaseURL, api/Favoriten,
und dann erhalten Sie die Liste der Favoriten vom Server,
und speichern Sie es dann in unserem Redux Store.
Nun, ein großer Teil des Codes bleibt der gleiche,
mit Ausnahme der Updates, die wir durchgeführt haben, um
auf die Loopback-REST-API-Endpunkte zuzugreifen.
Jetzt haben wir für Angular ein Loopback-SDK, das für unsere Angular-Anwendung erstellt werden kann.
Aber für React gibt es keine solche Unterstützung von Loopback,
und so müssen wir auf den direkten Zugriff auf
die Loopback-REST-API-Endpunkte zurückgreifen, wie hier mit fetch gezeigt,
und dann sind wir in der Lage, mit dem Loopback-Server zu kommunizieren.
Mit diesem schnellen Verständnis, wie
unsere React-Anwendung aktualisiert wurde, um auf unseren Loopback-Server zuzugreifen,
schließen wir die Prüfung des Loopback-Servers ab.
Verbringen Sie mehr Zeit damit, sich einige der Komponenten anzusehen und zu sehen,
wie sie die vom Loopback-Server erhaltenen Informationen verwenden.
Sie werden feststellen, dass die meisten Komponenten genau gleich bleiben wie zuvor,
mit Ausnahme einiger geringfügiger Änderungen in der Favoritenkomponente, um
die Informationen vom Loopback-Server zu erhalten
und sie dann zum Rendern der Liste der Favoritenelemente zu verwenden.
Abgesehen davon beschränkt sich ein Großteil der Änderungen auf die Datei ActionCreators.js,
wo wir den Abruf aktualisiert haben, um die URL für
unseren Loopback-Server zu verwenden, um auf die verschiedenen REST-API-Endpunkte zugreifen zu können.
Damit habe ich Ihnen schnell demonstriert, wie Sie Ihre Anwendung erstellen können.
Mit dieser kurzen Einführung, wie wir
den Loopback innerhalb unserer Anwendung nutzen können,
kommen wir zum Ende dieser Übung.