Nun, da wir die Aktualisierung der serverseitigen.
Es ist Zeit, zum Reakt-Client weiterzugehen.
Für Ihre Bequemlichkeit habe ich Ihnen das GitHub-Repository zur Verfügung gestellt,
das die endgültige Version des Clients enthält, der in der Lage ist, mit
unserem REST API-Server zu kommunizieren und dann die verschiedenen Ansichten für unseren Client zu rendern.
Also habe ich die erneute Anwendung genommen, die wir im
zweiten Kurs der Spezialisierung entwickelt haben und sie dann modifiziert.
Wir werden eine kurze Tour durch den Code ein wenig später machen.
Jetzt klonen Sie das
Git-Repository auf Ihren Computer, starten Sie dann Ihren Client und sehen dann, wie er mit unserem Server-Set kommuniziert.
Sehen wir uns die Details als nächstes an.
Um mit dieser Übung zu beginnen
,
gehen Sie in Ihrem Terminal oder Befehlsfenster zu Ihrem gewünschten Speicherort und geben Sie dann an der Eingabeaufforderung git clone
https://github.com/jmuppala/conFusion-React.git ein, und lassen Sie dann
die React-Anwendung auf Ihren Computer geklont werden.
Sobald das Klonen abgeschlossen ist,
wechseln Sie in den Confusion-React-Ordner
, der gerade erstellt wurde, als Sie dieses Git-Repository geklont haben.
Dann werden Sie sofort bemerken, dass es bereits eine Reihe von Dateien gibt. Geben Sie
nun an der Eingabeaufforderung yarn install ein,
um alle Knotenmodule zu installieren, von
denen diese React-Anwendung abhängig ist.
Also, sobald die Knotenmodule alle installiert sind,
dann können wir unser Garn starten zu kompilieren und servieren unsere React-Anwendung.
Sobald alles in ist,
stellen Sie sicher, dass Ihr MongoDB-Server
einsatzbereit ist und auch Ihr REST-API-Server läuft.
Andernfalls wird der Client nicht funktionieren.
Also, jetzt, da Sie Ihren Client auf Ihrem Computer installiert haben,
fügen Sie den Eingabeaufforderungstyp „garn start“ hinzu
und Ihre Anwendung wird neu kompiliert und in kurzer Zeit serviert.
Sobald Ihre Anwendung erfolgreich kompiliert wurde,
gehen Sie in den Browser und Sie werden sehen, dass
Ihre React-Anwendung gestartet wird und auf dem Bildschirm hier sichtbar ist.
Sie werden sofort feststellen, dass Ihre Anwendung in der
Lage ist, die Daten vom Server zu holen und dann
die verschiedenen Teile Ihrer Anwendung genau so zu rendern, wie Sie
am Ende Ihres React-Kurses getan haben.
Wenn Sie zum Ordner Info wechseln,
sehen Sie auch, dass die Informationen auf der Seite Info ebenfalls wiedergegeben werden.
Als solche oben im Menü
sehen Sie, dass die Elemente im Menü angezeigt werden, genau wie wir mit der Anwendung gesehen haben.
Darüber hinaus habe ich der
einseitigen Anwendung „Meine Favoriten“ eine weitere Seite hinzugefügt, zu
der Sie nicht navigieren können,
da kein Benutzer in ihrem System angemeldet ist.
Sie sehen also, dass ich keinen Benutzer habe, der am System angemeldet ist.
Deshalb hat es keinen Sinn, meine Favoriten anzugeben, weil Sie nicht wissen,
welcher Benutzer als Favoriten hier und die Kontaktseite wie gewohnt angezeigt werden soll.
Jetzt loggen wir uns ein.
Um sich bei unserer Anwendung anzumelden,
klicken wir auf den Login-Button und dann würden Sie sehen, dass der Login-Dialog erscheint.
Dann lassen Sie mich als einer der registrierten Benutzer einloggen,
die wir zuvor im Rahmen dieses Kurses registriert haben.
Sobald Sie sich also einloggen,
werden Sie sofort bemerken, dass in der rechten Ecke
der Login-Button jetzt in
Abmeldung umgewandelt wurde und der Name des Benutzers hier angezeigt wird.
Also, wer auch immer eingeloggt ist, wird hier angezeigt.
Sie können dies grundsätzlich auch durch das Bild des Benutzers ersetzen.
Dafür müssen Sie mehr Änderungen
sowohl am Client als auch am Server vornehmen, um die Bildanzeige hier zu unterstützen.
Aber im Moment zeige ich Ihnen nur,
wie wir hier ganz einfach die Benutzerinformationen anzeigen können.
Dies erforderte also eine geringfügige Änderung des Kopfes der Komponente,
wo ich den Benutzernamen abrufen kann.
Sobald sich der Benutzer anmeldet,
dann, wenn Sie jetzt auf Meine Favoriten klicken, würden Sie
feststellen, dass es nichts in Meine Favoriten für den Benutzer gibt.
Offensichtlich, weil der Benutzer noch keine Favoriten ausgewählt hat.
Also, lasst uns jetzt zur Speisekarte gehen.
Dann, im Menü,
lassen Sie mich einen Artikel auswählen und dann werden wir dieses Gericht zu unseren Favoriten hinzufügen.
Also, wenn Sie unten hier unten gehen,
sehen Sie das Herzsymbol dort,
klicken Sie darauf, und Sie werden sehen, dass dies in den Favoriten hinzugefügt werden würde.
Die Tatsache, dass dies zu den Favoriten hinzugefügt wurde,
wird durch die Änderung des Symbols hier von einem ungefüllten Herzen zu einem gefüllten Herzen angezeigt.
Nun, wenn Sie zu einem anderen Gericht gehen,
würden Sie feststellen, dass dies ein ungefülltes Herz hat,
was bedeutet, dass dies noch nicht zu unseren Favoriten gehört.
Also, lassen Sie mich einen weiteren Artikel zu
meinen Favoriten hinzufügen und dann lassen Sie uns auch einen dritten Artikel zu meinen Favoriten hinzufügen.
Also, jetzt werden Sie sehen, dass, wenn ich jetzt zu meinen Favoriten gehe,
hier eine Reihe von Meine Favoriten angezeigt wird.
Also, Sie haben gesehen, dass ich gerade diese drei Gerichte
zu meinen Favoriten hinzugefügt habe und so werden diese hier angezeigt.
Dies wird also verfolgt, indem
dieser Favoritenendpunkt auf
der serverseitigen Seite verwendet wird, je nachdem, was als Teil Ihrer letzten Zuweisung implementiert wurde.
Also, wenn Sie diese Zuweisung richtig gemacht haben,
dann sollte dieser Teil wie erwartet funktionieren.
Jetzt können wir auch „Mein Favorit“ ändern.
Lassen Sie mich also fortfahren und löschen Sie eines der Elemente aus „Meine Favoriten“.
Also, wenn ich auf diese Schaltfläche klicke, werden Sie sofort feststellen, dass,
dass das Element aus Meine Favoriten gelöscht wird und sofort verschwindet und
meine Favoriten aktualisiert werden und Sie sehen, dass der resultierende Wert hier angezeigt wird.
Beachten Sie also, dass die Meine Favoriten nur
für Benutzer angezeigt werden, die am System angemeldet sind.
So bemerken Sie sofort eine Reihe von Änderungen, die am
Client vorgenommen wurden, um
einige dieser zusätzlichen Funktionen zu unterstützen, die Sie hier sehen.
Sie haben auch gesehen, wie die Anmelde- und Abmeldefunktion hier unterstützt wurde.
Wenn ich also auf den Abmelde-Button klicke,
bemerken Sie sofort, dass der Benutzer abgemeldet wird und
der Benutzername von dort verschwindet und
so wird der Button auch in den Login-Button verwandelt.
Nun, damit bemerken Sie, wie mein Client
aktualisiert wurde, um den neuen REST API-Server zu verwenden,
um die Favoriten zu unterstützen, die auf der Serverseite gespeichert werden und
dann automatisch in Meine Client-Anwendung reflektiert werden, wie hier gezeigt.
Nun, da Sie die modifizierte React-Anwendung in Aktion gesehen haben,
ist es an der Zeit, den Quellcode zu besuchen, um zu sehen, wie
genau er implementiert wird und
welche Änderungen wir vorgenommen haben, die der Redux-Anwendung am Ende des Redux-Kurses entsprechen.
Nun, die beiden wichtigsten Änderungen, die Sie bemerken werden,
ist die Unterstützung für Favoriten und auch die Authentifizierung Unterstützung,
die Benutzeranmeldung und Abmeldeunterstützung.
Nun, wie werden diese umgesetzt?
Wir werden unsere Reise im Redux Teil unserer Bewerbung beginnen.
Gehen wir also in den Redux-Teil,
besuchen wir die Aktionstypen.
In Aktionstypen werden Sie jetzt sehen, dass wir
drei neue Aktionstypen im Zusammenhang mit ihren Favoriten haben.
So würden Sie sehen, Favoriten geladen,
Favoriten fehlgeschlagen und Favoriten hinzufügen,
die, wie Sie es erwarten würden.
Dann auch sechs verschiedene Aktionstypen im Zusammenhang mit ihrem Anmelde- und Abmeldeprozess.
Jetzt können Sie Anmeldeanforderung, Anmeldeerfolg,
Anmeldefehler, Abmeldeanforderung,
Abmeldeerfolg und fehlgeschlagen sehen.
Also, wir werden sehen, wie diese Aktionstypen tatsächlich in unserer Aktion erstellen verwendet werden.
Also, in die Action-Ersteller gehen,
also hier sehen Sie die Unterstützung für die Favoriten hier.
Also werden wir zuerst die Unterstützung für Favoriten untersuchen und danach die
Unterstützung für die Authentifizierungsunterstützung untersuchen.
Also, hier, werden Sie sehen, dass wir neue Methoden unten
hier als FavoritesLoading genannt, FavoritesFailed, und AddFavorites.
Nun, von Ihren früheren Erfahrungen
DishesLoading und DishesFailed und AddDishes und so weiter.
Also, diese Dinge sind Ihnen sehr vertraut,
so dass es genau die gleiche Art von Setup für den Code hier ist.
Darüber hinaus werden Sie hier eine andere Methode namens FetchFavorites sehen,
die wieder ist, wie ich sagte, ein Redux Tank
, der hier implementiert ist,
wo wir den Abruf verwenden, um auf den Server zuzugreifen, um die Favoriten zu holen.
Also, das sind die Methoden, die Sie hier sehen werden und dann auch Sie werden
hier DeleteFacorite und auch einen Redux Tank für PostFavorite hier sehen.
Also, im PostFavorite, wie Sie es erwarten
würden, würden Sie den Favoriten hier auf dem Server veröffentlichen.
Also, hier bemerken, wie wir Autorisierung verwenden.
In unserem Autorisierungs-Header so eingerichtet,
ist dies etwas, auf das ich Sie in diesem Moment aufmerksam machen würde,
werden wir wieder darauf zurückkommen, wenn wir uns die Benutzerauthentifizierung und Autorisierung ansehen.
Also, wir richten den Autorisierungs-Header so ein, indem wir hier fetch verwenden.
Also, für fetch, wir posten
hier ein Element in den Abruf und dann werden Sie feststellen, dass die Struktur, wie der Abruf durchgeführt wird, hier angegeben ist.
Wenn Sie nun einen Favoriten posten oder einen Favoriten löschen oder einen Favoriten holen,
werden wir immer den Server an Sie zurückgeben,
die ganze Reihe von Favoriten und dann fügen wir einfach diese Favoriten
in unseren Redux Store hier hinzu, so dass das ist, was wir hier tun.
Auch hier sollte die Codestruktur Ihnen sehr vertraut aussehen,
wenn Sie sich einfach ansehen, wie der Post-Favorit,
der Löschfavorit und die Fetch-Favoriten implementiert werden.
Also, all dies wird das Problem der Favoriten behandeln.
Nun, wie genau werden die Favoriten selbst implementiert?
So ist die Reduzierfunktion hier in der bevorzugten Struktur implementiert.
Also, innerhalb dieser reduzierten Funktion,
werden Sie sehen, wie wir die hinzufügen Favoriten,
Favoriten laden, und Favoriten hier fehlgeschlagen behandeln.
Auch hier sollte Ihnen der Code aufgrund
Ihrer Erfahrung mit den Reducer-Funktionen, die Sie für Redux gesehen haben, sehr vertraut aussehen.
Also, zahlen Sie wieder ein wenig Aufmerksamkeit auf die Art und Weise, wie der Code implementiert wird.
Das ist ziemlich einfach, also verbringe ich nicht
zu viel Zeit damit, zu erklären, wie diese Dinge umgesetzt werden.
Nun, unter Ausnutzung dieser,
haben wir in den Komponenten haben wir jetzt
eine neue Favoriten-Komponente, deren Aufgabe es ist, alle Liste unserer Favoriten zu rendern.
Also, hier sehen Sie, dass die Favoriten-Komponente selbst,
die Struktur der Favoriten-Komponente ist sehr ähnlich
der Struktur der Menükomponente, so hier haben wir
die Favoriten-Komponente, die als funktionale Komponente implementiert ist und in
dort werden wir die Favoriten in hier, wie Sie im Code hier sehen.
Auch hier sehr einfach, ich denke, Sie sollten in der Lage sein,
leicht zu verstehen, wie die Favoritenkomponente
implementiert wird, nachdem sie Erfahrung mit der Implementierung der Menükomponente dort gehabt haben.
Also, wieder verbringe ich nicht zu viel Zeit damit, Code hier zu erklären.
Jetzt ist das Parsen durch den Code auch
eine gute Erfahrung für Sie, um zu erfahren, wie der Code implementiert wird, so dass die
Verarbeitung dieses Codes in Ihrem eigenen Kopf Ihnen hilft, wieder zu verstehen,
um Ihr Verständnis von React detaillierter zu konsolidieren.
Also werde ich das als Übung für Sie überlassen.
Jetzt weise ich darauf hin, wo die Änderungen
vorgenommen wurden, um die Unterstützung für Favoriten zu implementieren.
Jetzt ist der Lieblingsbegriff,
Favoriten ist auch Hebelwirkung in
der Schale Detailkomponente und innerhalb der Schale Detailkomponente,
werden Sie sehen, dass wir die zusätzliche haben- In hier,
in der Renderschale funktionale Komponente,
werden wir die Schaltfläche rendern, die
die Auswahl unterstützt oder wenn Sie auf die Herzumrisse klicken,
wird es diesen bestimmten Gegenstand in Ihre Favoritenliste hinzufügen.
Also, all dies wird hier unterstützt, indem Sie diese Schaltfläche hier verwenden, die
aufgerufen wird, wie Sie diese Funktion namens Post Favorit sehen, die die Redux ist.
Vielen Dank, dass wir dort implementiert haben und diese Unterstützung dafür
ist in den Hauptkomponenten implementiert, so dass, wenn Sie in die Hauptkomponente gehen,
werden Sie sehen, wie der Beitrag Favorit hier implementiert
wird und Sie werden auch sehen, dass dies
in der Karte an Requisiten gesendet enthalten ist und so die Post Lieblings implementiert.
Sie sehen also, dass die Strukturierung sehr ähnlich ist
wie das, was Sie für den anderen Code dort gesehen haben.
Also, ich werde nicht zu viel Zeit damit verbringen, wie die Favoritenunterstützung implementiert wird,
sondern lassen Sie mich ein wenig mehr Zeit damit verbringen, wie
die Benutzerautorisierung und Authentifizierung im Code hier unterstützt wird.
Nun für die Benutzerauthentifizierung,
was wir hier tun, ist, dass, wenn Sie hier in den Konfigurationsspeicher gehen,
Sie sehen werden, dass ich eine weitere Reduzierfunktion namens Auth habe, die hier implementiert wird.
Also, das wird den Berechtigungsteil davon verfolgen.
Wie wird das nun umgesetzt?
Wieder, gehen in Aktion Ersteller,
Untätigkeitstypen haben wir bereits die Reihe von Aktionen im Zusammenhang mit Login und Abmelden gesehen. Wenn Sie
also in Action-Ersteller gehen,
werden Sie sehen, dass wir hier oben
alle Funktionen haben, die für das Einloggen und Abmelden implementiert sind.
Also, Sie werden eine neue Funktion namens Request Login sehen, empfangen Protokollierung,
und so sind diese, wenn die Anmeldung erfolgreich ist und so weiter, aber insbesondere,
dieser spezielle Funct hier des Login-Benutzers ist, wo wir mit dem Anmeldeprozess beginnen.
Also, wir werden die Anfrage Login an dem Punkt senden, wenn der Benutzer versucht, sich anzumelden,
danach werden wir einen Abruf an den Benutzer Schrägstrich Login-Endpunkt mit
dem Post durchführen und dies enthält im Textkörper der Nachricht die Anmeldeinformationen für den Benutzer hier.
Also, sobald wir den Abruf durchführen,
wenn die Antwort korrekt zurückgegeben wird,
sollte die Antwort das Token dort enthalten.
Also, wir werden diese Antwort hier unten verarbeiten und dann, wenn die Anmeldung erfolgreich war,
dann speichern wir das Token hier im lokalen Speicher.
So können Sie sehen, dass wir sagen, LocalStorage Set
Element Token Antwort Token und dann werden wir
auch die Anmeldeinformationen des Benutzers im lokalen Speicher speichern hier.
Also, diese beiden werden mir helfen, den Anmeldeprozess des Benutzers zu verfolgen.
Danach versenden wir dann den Empfangs-Login.
Nun, an diesem Punkt, wenn der Benutzer erfolgreich angemeldet ist,
holen wir auch die Favoriten für den Benutzer.
Denken Sie nun daran, dass Sie nur die Favoriten für einen angemeldeten Benutzer abrufen können.
Wenn kein Benutzer angemeldet ist, gibt es keine Favoriten, die abgerufen werden sollen,
aber wenn sich der Benutzer erfolgreich anmeldet, möchten Sie den
Favoriten des Benutzers abrufen, damit er das in Ihrer React-Anwendung anzeigen kann.
Also, das ist, warum ich auch einen holen Favoriten
hier und dann erhalten wir den Login hier.
Wenn dann ein Fehler vorliegt, werden wir den Anmeldefehler hier absenden.
Also, all diese Funktionen der Empfangs-Login-und Login-Fehler wird
dann die entsprechenden Reducer-Funktionen aufrufen, die in der Datei Auth.Js implementiert sind.
Wenn Sie also in die Datei Auth.Js gehen,
verfolgt der Status hier den Anmeldestatus des Benutzers.
Also, hier werden wir auch in dem Zustand speichern,
der Staat beinhaltet die East Loading Boolean, die
verfolgt, ob Sie in den Prozess der Anmeldung sind. Die einfache Authentifizierung - Gibt an,
ob der Benutzer authentifiziert ist und so der Benutzer angemeldet ist,
so dass Sie in der Lage sein, den Benutzer zu erlauben.
Daher wird dieses Flag in vielen Fällen verwendet,
um den Anmeldestatus des Benutzers anzuzeigen und dann auch
die Benutzereigenschaft für den Status verfolgt die Anmeldeinformationen des Benutzers.
Also, das ist, wo wir den Benutzernamen für die Anzeige in unserer Header-Komponente erhalten.
Nun, hier sehen Sie die Anmeldeanforderung und wenn der Anmeldeerfolg ausgelöst
wird, speichern Sie den Token-Wert hier und dann den Anmeldefehler.
Die Abmeldeanforderung, erfolgreich abgemeldet,
alle diese werden von diesen verschiedenen Teilen innerhalb dieses Reduzierers der auth.js Reduzierer hier behandelt.
So wird die Authentifizierung des Benutzers hier gehandhabt.
Nun, in der Header-Komponente,
gehen in die Header-Komponente,
also hier haben wir die Login-Funktion hier.
Also, die HandleLogin, Sie erinnern sich, dass wir
dies bereits im React-Kurs implementiert haben.
Im HandleLogin schalten sie das Modal um.
Also, wir schließen das Modal und dann werden wir den Benutzer an dieser Stelle anmelden.
Also, wir sagen this.props LoginUser und dann werden Sie sehen, dass die Anmeldeinformationen,
Benutzername und Passwort als Parameter an
den LoginUser übergeben werden und damit in den LoginUser Func gelangt, der sich
dann um die Anmeldung des Benutzers kümmert.
Wie zeigen Sie nun den Anmeldestatus des Benutzers an?
Also, das ist wieder sehr einfach.
In der navbar hier
werden Sie sehen, dass ich hier einen neuen Artikel hinzugefügt habe.
Also, dies ist, wo wir sagen this.props.auth.isAuthenticated.
Also, das isAuthenticated Flag wird hier von mir verwendet, und wenn dies auf true gesetzt ist,
dann werde ich
hier die Abmelde-Taste anzeigen und das ist die Sache, die ich hier anzeigen werde.
Andernfalls werde ich den Login-Button anzeigen.
Mit diesem isAuthenticated Flag
kippe ich, welche bestimmte Schaltfläche in
der Kopfzeile angezeigt wird, unabhängig davon, ob Sie die Abmelde-Taste oder die Login-Button anzeigen.
Also, das ist der Punkt, den wir hier zeigen.
Also, der Login oder die Abmeldung hier.
So behandeln wir den Login- und Abmeldeprozess
hier und wir werden auch den Benutzernamen direkt dort anzeigen.
Wenn Sie also den Abmelde-Button anzeigen,
werden Sie auch sehen, dass wir dort den Namen des Benutzers anzeigen.
Also, unten hier unten,
werden wir auch die Schaltfläche
HandleLogout anzeigen und dann haben wir die Abmelde-Taste angezeigt wird hier.
Darüber hinaus ist diese besondere Aussage hier,
das ist, wie wir den Benutzernamen hier anzeigen.
Dies verwendet also den this.props.auth.user.username.
Also, die Benutzereigenschaft im Authentifizierungsstatus enthält
die Benutzeranmeldeinformationen und von dort habe ich den Benutzernamen abgerufen und dann
verwende ich das, um dies in der Headerleiste anzuzeigen. Auf
diese Weise wird die Header-Komponente
aktualisiert, um den Anmelde- und Abmeldeprozess zu verarbeiten.
Auch hier, ziemlich einfache Wege der Implementierung,
ist es ziemlich einfach, den ich hier implementiert habe.
Nun offensichtlich, wenn Sie eine komplexere Möglichkeit haben, den Anmelde- und Abmeldeprozess zu behandeln,
können Sie sicherlich auf die vollwertige Art gehen, Dinge zu tun,
aber das ist ausreichend, um die Anforderungen für meine Anwendung zu erfüllen.
Also, ich habe den Login- und Logout-Prozess
hier mit Hilfe des Redux-Stores auf sehr einfache Weise implementiert.
Also, von Redux Store selbst verfolgt
meinen Login-Status, ob ich eingeloggt bin und ich authentifiziert bin und ob ich abgemeldet bin.
Also, wenn der Benutzer abgemeldet ist,
dann wird die Meine Favoriten hier nicht angezeigt.
Nun, ein wichtiger Punkt, den Sie fragen werden, ist,
wie stellen wir sicher, dass wir hier nicht in den Favoritenstatus gehen?
Das wird also an der Stelle gehandhabt, wo wir die Routen hier abwickeln.
Sie werden also feststellen, dass
wir für die Favoriten hier den Endpunkt deklarieren, anstatt
dies als Route aufzurufen, die wir als private Route nennen.
Die private Route ermöglicht es Ihnen, sicherzustellen, dass Sie
in diesen Teil nur unter Umständen gehen dürfen,
in denen der Benutzer angemeldet ist.
Dies verhindert eine Navigation zu ihrem /favorites-Endpunkt, wenn kein Benutzer angemeldet ist.
Nun, wie wird diese private Route umgesetzt?
Diese private Route wird genau hier oben umgesetzt.
So können Sie sehen, dass diese private Route implementiert wird, wie hier gezeigt.
Also, das ist nichts anderes als eine Route hier und dann hier,
wir werden this.props.auth.isAuthenticated implementieren.
Also, wenn der Benutzer authentifiziert ist,
dann werde ich erlauben, zu
der Komponente zu navigieren, die die Favoritenkomponente ist.
Andernfalls werde ich einfach auf die Home-Komponente umleiten.
Also, wenn kein Benutzer angemeldet ist,
werde ich einfach auf die Home-Komponente umleiten und so wird dies
mit dieser privaten Route implementiert, die ich hier entworfen habe.
Die private Route ist also etwas, das vom Router unterstützt wird, den
wir den React-Router Dom verwenden, den wir in unserer React-Anwendung verwendet haben.
Also, sehr einfache Art, Situationen
zu behandeln, in denen Sie nicht möchten, dass bestimmte Routen navigiert werden, wenn der Benutzer nicht angemeldet ist.
Also wieder, einige einfache Änderungen, die ich an
der Anwendung vorgenommen habe, um
alle verschiedenen Funktionen zu erleichtern, die Sie in Ihrer React-Anwendung sehen.
Nun, wie Sie es erwarten würden,
könnten Sie an dieser Stelle unterfordert sein
: „Ist es so einfach zu implementieren“ und
genau das wurde getan, um alle neuen Funktionen zu unterstützen.
Wie Sie sehen, Benutzerauthentifizierung und
Login-und Logout-Prozess, da unser Server vollwertige Unterstützung für alles hat,
Implementierung der clientseitigen Verfolgung des Benutzers
Anmelden und Abmelden Prozess und alles, was ziemlich einfach wird,
indem nur einige der Komponenten und Hinzufügen
der Auth Reducer-Funktion und Hinzufügen des Auth Status zu unserem Redux Store.
Der gesamte Prozess der Handhabung der Benutzerauthentifizierung
und des Anmeldens und Abmeldens wird in diesem Fall ziemlich einfach.
Also, mit diesem kurzen Rundgang durch den aktualisierten React-Code,
lassen Sie uns weiter, um
unsere React-Anwendung ein paar weitere Funktionen unserer React-Anwendung zu untersuchen.
Also wieder, wenn wir zu unserer Anwendung
zurückgehen, können wir jetzt auf das Menü gehen und dann
jedes Gericht hier hochziehen und ich kann hier Kommentare zum Gericht posten,
also würde ich sofort die Bewertung hier und meinen Kommentarwert einrichten.
Beachten Sie, dass ich meinen Benutzernamen oder den Namen meines Autors hier nicht in das Formular eingebe.
Jetzt müssen Sie natürlich eingeloggt sein, um einen Kommentar abzugeben.
Also, wenn Sie nicht angemeldet sind, wird dieser Kommentar von meinem Server nicht akzeptiert werden.
Also, lassen Sie mich zuerst einloggen.
So kann ich mich hier anmelden
und sobald ich mich anmelde, bemerken Sie sofort, dass die
Header-Symbolleiste aktualisiert wird, um meinen Status anzuzeigen.
Jetzt kann ich diesen Kommentar posten und Sie würden feststellen, dass, wenn ich den Kommentar poste, der
Kommentar in die Liste der Kommentare hinzugefügt wird
und auch feststellen, dass das Autorenfeld
hier automatisch ausgefüllt wird, weil wir so unsere Serverseite einrichten.
Im Kommentarfeld
haben wir unseren Benutzer als Verweis auf
die Benutzerinformationen eingerichtet, die wir auf
unserer Serverseite speichern und da wir das befüllte Mongoose Populate auf der Serverseite verwenden, werden
die Benutzerinformationen automatisch
in die eingehenden Kommentare von der Serverseite aufgefüllt.
So stellen Sie fest, wie ich das nutze,
was der Server bereits für mich bereitstellt, um automatisch die Details auszufüllen.
So, kleinere Änderungen wieder sogar in
die Schüssel Detailseite, um die Verwendung der Kommentare Unterstützung auf der Server-Site widerzuspiegeln.
Damit vervollständige ich
die schnelle Darstellung des React-Clients, die wir im Rahmen
dieser Übung implementiert haben, und ich hoffe, dass Sie
durch die Details des Codes im Client gehen auch und dann
reflektieren, was Sie in React Kurs gelernt haben und sehen, wie
die Änderungen ermöglichen es uns, eine modifizierte,
[unhörbare] zu implementieren, die jetzt in der Lage ist, mit dem Server zu kommunizieren und dann alle Funktionen
zu unterstützen, die wir ursprünglich als Teil unseres Clients und der Serverseite implementieren wollten.