Ora, che abbiamo completato l'aggiornamento del lato server.
È ora di passare al cliente reattivo.
Per tua comodità, ti ho fornito il repository GitHub,
che contiene la versione finale del client che è in grado di comunicare con il
nostro server API REST e quindi rendere le varie viste per il nostro client.
Così, ho preso la riapplicazione che abbiamo sviluppato
nel secondo corso della specializzazione e poi modificato.
Faremo un breve tour attraverso il codice un po 'più tardi.
Ora, clonerai il repository Git sul tuo computer,
quindi avvierai il tuo client e poi lo vedrai comunicare con il nostro set di server.
Vediamo i dettagli dopo.
Per iniziare con questo esercizio,
nel terminale o nella finestra di comando,
vai nella tua posizione comoda e quindi al prompt digita git clone
https://github.com/jmuppala/conFusion-React.git, quindi lascia che
l'applicazione React venga clonata sul tuo computer.
Una volta completata la clonazione,
spostati nella cartella Confusion-React
che è stata appena creata quando hai clonato questo repository Git.
Quindi, noterai immediatamente che ci sono già un sacco di file.
Ora, al prompt, digitare filato installare,
al fine di installare tutti i moduli nodo da
cui dipende questa applicazione React.
Così, una volta che i moduli del nodo sono tutti installati,
allora possiamo avviare il nostro filato iniziare a compilare e servire la nostra applicazione React.
Una volta che tutto è dentro,
assicurati che il tuo server MongoDB sia
attivo e che anche il tuo server API REST sia attivo e funzionante.
In caso contrario, il client non funzionerà.
Così, ora che avete installato il client sul computer,
aggiungere il prompt tipo di avvio filato
e l'applicazione sarà ricompilare e servito in breve tempo.
Una volta che l'applicazione è stata compilata con successo,
vai nel browser e vedrai che
la tua applicazione React viene avviata ed è visibile sullo schermo qui.
Noterai immediatamente che la tua applicazione è
in grado di recuperare i dati dal server e quindi rendere
le varie parti della tua applicazione proprio come quello che hai
fatto alla fine del tuo corso React.
Quando si passa alla cartella Informazioni,
si vedrà anche che la pagina Informazioni visualizza anche le informazioni.
Come tale in precedenza nel menu,
si vedono le voci nel menu visualizzate proprio come abbiamo visto con l'applicazione.
Ora, in aggiunta, ho aggiunto in
un'altra pagina all'applicazione a pagina singola chiamata My Favorites,
che non è possibile navigare,
perché nessun utente è connesso al proprio sistema.
Quindi, vedi che non ho alcun utente connesso al sistema.
Quindi, questo è il motivo per cui non ha senso indicare i miei preferiti perché non sai
quale utente come favoriti dovrebbe essere mostrato qui e la pagina di contatto come al solito.
Ora, facciamo il login.
Per accedere alla nostra applicazione,
faremo clic sul pulsante di accesso e poi vedrai che la finestra di dialogo di accesso si apre.
Quindi lasciami accedere come uno degli utenti registrati,
che abbiamo registrato come parte di questo corso in precedenza.
Quindi, una volta effettuato l'accesso,
noterai immediatamente che nell'angolo destro,
vedrai che il pulsante di accesso è ora trasformato in
logout e il nome dell'utente è indicato qui.
Quindi, chiunque abbia effettuato l'accesso è indicato qui.
Puoi anche in linea di principio sostituirlo con l'immagine dell'utente.
Ora, per questo è necessario fare più modifiche
sia al client che al server per supportare la visualizzazione dell'immagine qui.
Ma al momento, ti sto solo mostrando,
come possiamo facilmente visualizzare le informazioni dell'utente qui.
Quindi, questa richiesta di modifica minore alla testa del componente,
dove sarò in grado di recuperare il nome utente.
Quindi, una volta che l'utente accede,
quindi se ora fai clic su My Favorites
noterai che non c'è nulla in My Favorites per l'utente.
Ovviamente perché l'utente non ha ancora scelto alcun favorito.
Quindi, andiamo ora al menu.
Quindi, nel menu,
lasciami selezionare un elemento e poi aggiungeremo questo piatto ai nostri preferiti.
Quindi, scendendo qui sotto,
vedrete il simbolo del cuore lì,
cliccate su quello, e vedrete che questo sarebbe stato aggiunto nei preferiti.
Il fatto che questo sia stato aggiunto nei preferiti,
è indicato dal cambiamento nell'icona qui da un cuore non pieno a un cuore pieno.
Ora, se vai a qualsiasi altro piatto,
noteresti che questo ha un cuore vuoto, il
che significa che questo non è ancora tra i nostri preferiti.
Quindi, lasciami aggiungere un altro elemento ai
miei preferiti e poi aggiungiamo un terzo elemento ai miei preferiti anche.
Quindi, ora, vedrete che se ora vado ai miei preferiti,
vedrete qui una serie di Miei Preferiti.
Quindi, avete visto che ho appena aggiunto questi tre piatti
ai miei preferiti e quindi questi sono mostrati qui.
Quindi, questo viene monitorato utilizzando
quell'endpoint preferito
sul lato server, a seconda di quale sia stato implementato come parte dell'ultima assegnazione.
Quindi, se hai fatto questo compito correttamente,
allora questa parte dovrebbe funzionare come previsto.
Ora, possiamo anche modificare My Favorite.
Quindi, lasciatemi andare avanti ed eliminare uno degli elementi da I miei preferiti.
Quindi, quando clicco su quel pulsante noterai immediatamente che,
quell'elemento viene eliminato dai miei preferiti e scompare immediatamente e i
miei preferiti viene aggiornato e vedrai il valore risultante che viene mostrato qui.
Quindi, si noti che i miei preferiti verranno visualizzati solo
per gli utenti che hanno effettuato l'accesso al sistema.
Quindi, si nota immediatamente una serie di modifiche che sono state
apportate al client al fine di supportare
alcune di queste funzionalità aggiuntive che si vedono qui.
Hai anche visto la funzione di login e logout supportata qui.
Quindi, quando faccio clic sul pulsante di disconnessione,
si nota immediatamente che l'utente viene disconnesso e
il nome utente scompare da lì e
quindi anche il pulsante viene trasformato nel pulsante di accesso.
Ora, quindi, con questo si nota come il mio client è stato
aggiornato per utilizzare il nuovo server API REST,
al fine di supportare i preferiti salvati sul lato server e
quindi automaticamente riflessi nell'applicazione My Client come mostrato qui.
Ora, che avete visto l'applicazione React modificata in azione,
è il momento di fare una visita al codice sorgente per vedere
esattamente come è implementato e quali sono le modifiche
che abbiamo apportato corrispondenti all'applicazione Redux alla fine del corso Redux.
Ora, le due principali modifiche che noterete,
è il supporto per i preferiti e anche il supporto per l'autenticazione,
il login utente e il supporto logout.
Ora, come sono implementati questi?
Inizieremo il nostro viaggio nella parte Redux della nostra applicazione.
Quindi, andando nella parte Redux,
visitiamo i tipi di azione.
Nei tipi di azione, si vedrà ora che abbiamo
tre nuovi tipi di azione relativi ai loro preferiti.
Quindi, si vedrebbe il caricamento dei preferiti,
i preferiti non riusciti e aggiungere i preferiti,
che come ci si aspetterebbe di essere lì.
Quindi, anche sei diversi tipi di azione relativi al loro processo di login e logout.
Ora, così puoi vedere la richiesta di accesso, il successo dell'accesso, l'
errore di accesso, la richiesta di logout,
il successo di logout e il fallimento.
Quindi, vedremo come questi tipi di azione sono effettivamente utilizzati nella nostra azione creare.
Quindi, andando nei creatori di azione,
quindi questo è dove vedrai il supporto per i preferiti qui.
Quindi, esamineremo prima il supporto per i preferiti e poi
esamineremo il supporto per il supporto di autenticazione.
Quindi, qui, vedrete che abbiamo nuovi metodi
qui sotto chiamati come FavoritesLoading, FavoritesFailed e AddFavorites.
Ora, dalle tue esperienze precedenti
DishesLoading e dishesFailed e addDishes e così via.
Quindi, queste cose ti sono molto familiari,
quindi è esattamente lo stesso tipo di configurazione per il codice qui.
Inoltre, vedrai un altro metodo qui chiamato FetchFavorites,
che è di nuovo come ho detto un serbatoio Redux
, che è implementato qui,
dove useremo il recupero per accedere al server per recuperare i preferiti.
Quindi, questi sono i metodi che vedrai qui e poi anche vedrai
DeleteFavorite qui e anche un serbatoio Redux per PostFavorite qui.
Quindi, nel PostFavorite come ci si
aspetterebbe, si sarebbe postare il preferito sul server qui.
Quindi, qui notare come stiamo usando l'autorizzazione.
Essendo impostato nella nostra intestazione di autorizzazione quindi,
questo è qualcosa che vorrei attirare la vostra attenzione in questo momento,
torneremo su questo di nuovo quando guardiamo l'autenticazione e l'autorizzazione dell'utente.
Quindi, stiamo impostando l'intestazione di autorizzazione come questa usando fetch qui.
Quindi, per il recupero, stiamo postando un elemento nel recupero
qui e poi noterete che la struttura di come il recupero è fatto è data qui.
Ora ogni volta che pubblichi un favorito o elimini un favorito o recuperi uno preferito,
avremo sempre il server restituito a te,
l'intero set di preferiti e poi aggiungeremo semplicemente questi preferiti
nel nostro negozio redux qui, quindi questo è quello che stiamo facendo qui.
Ancora una volta, la struttura del codice dovrebbe apparire molto familiare a
te, se semplicemente guardi come
vengono implementati il post preferito, il favorito di eliminazione e i preferiti di recupero.
Quindi, tutti questi gestiranno il problema dei preferiti.
Ora, come sono esattamente implementati i preferiti stessi?
Quindi, la funzione di riduttore è implementata nella struttura preferita qui.
Quindi, all'interno di questa funzione ridotta,
vedrai come gestiamo i preferiti add,
preferiti caricamento, e preferiti non riusciti qui.
Ancora una volta il codice dovrebbe sembrare molto familiare a te in base alla
tua esperienza con le funzioni di riduttore che hai visto prima per redux.
Quindi, ancora una volta prestare un po 'di attenzione al modo in cui il codice è implementato.
Questo è abbastanza semplice, quindi non sto spendendo
troppo tempo a spiegare come queste cose sono implementate.
Ora, approfittando di questi,
abbiamo nei componenti che ora abbiamo
un nuovo componente preferiti il cui compito è quello di rendere tutta la lista dei nostri preferiti.
Quindi, qui vedete che il componente favorites stesso,
la struttura del componente favorites è molto simile alla
struttura del componente del menu quindi qui abbiamo
il componente favorites che è implementato come componente funzionale e in
là stiamo rendendo i favoriti in qui come vedi nel codice qui.
Ancora una volta, molto semplice penso che dovresti essere in grado di
capire facilmente come viene
implementato il componente dei preferiti avendo avuto esperienza con come viene implementato il componente del menu lì.
Quindi, ancora una volta non sto spendendo troppo tempo a spiegare il codice qui.
Ora l'analisi del codice è anche
una buona esperienza per imparare come il codice è implementato, quindi l'
elaborazione di questo codice nella tua testa ti aiuterà a capire di nuovo per
consolidare la tua comprensione di reagire in modo più dettagliato.
Quindi, lascero' che sia un esercizio per te.
Ora sto sottolineando dove sono state
apportate le modifiche per implementare il supporto per i preferiti.
Ora il termine preferito,
favoriti è anche leva
nel componente dettaglio piatto e all'interno del componente dettaglio piatto,
vedrete che abbiamo l'aggiuntivo- Qui,
nel componente funzionale piatto di rendering,
faremo il rendering del pulsante che supporta
la selezione o quando si fa clic sul contorno del cuore,
si aggiungerà quel particolare elemento nella vostra lista dei preferiti.
Quindi, tutto questo è supportato qui usando questo pulsante qui che
richiama come vedi questa funzione chiamata post favorito che è il redux.
Grazie che abbiamo implementato lì e questo supporto per questo
è implementato nei componenti principali, quindi quando si entra nel componente principale,
si vedrà come il post preferito è implementato qui
e si vedrà anche che questo è
incluso nella mappa inviata agli oggetti di scena e così il post preferito implementato.
Quindi, vedi che la strutturazione è molto la
stessa di quella che hai visto per l'altro codice lì.
Quindi, non ho intenzione di spendere troppo tempo su come viene implementato il supporto dei preferiti,
permettetemi di dedicare un po 'più di tempo a come
l'autorizzazione dell'utente e l'autenticazione sono supportate nel codice qui.
Ora per l'autenticazione dell'utente,
quello che stiamo facendo qui è che quando vai nel negozio di configurazione qui,
vedrai che ho un'altra funzione di riduttore chiamata Auth che è implementata qui.
Quindi, questo traccierà la parte di autorizzazione di esso.
Ora come viene implementato?
Ancora una volta, andando in creatori di
azioni, tipi di inazione abbiamo già visto l'insieme di azioni relative al login e logout.
Quindi, andando in creatori di azioni,
vedrete che qui abbiamo
tutte le funzioni che sono implementate per il login e la disconnessione.
Quindi, vedrai una nuova funzione chiamata login di richiesta, ricevere la registrazione,
e così questi sono quando il login ha successo e così via, ma in particolare,
questa particolare funzione qui dell'utente di login è dove iniziamo con il processo di login.
Quindi, invieremo il login richiesta nel punto in cui l'utente tenta di accedere,
dopo di che faremo un recupero per gli utenti slash endpoint di login con
il post e questo contiene nel corpo del messaggio le credenziali per l'utente qui.
Quindi, una volta fatto il recupero,
se la risposta viene restituita correttamente,
la risposta dovrebbe contenere il token lì.
Quindi, elaboreremo quella risposta qui e poi quindi se il login ha avuto successo,
allora memorizzeremo il token nella memoria locale qui.
Quindi, si può vedere che stiamo dicendo localStorage set
token di risposta dell'elemento token e quindi
memorizzeremo anche le credenziali dell'utente nella memoria locale qui.
Quindi, questi due mi aiuteranno a tracciare il processo di accesso dell'utente.
Dopodiché, invieremo il login di ricezione.
Ora, a questo punto, quando l'utente è connesso con successo,
recupereremo anche i preferiti per l'utente.
Ora ricorda che puoi recuperare solo i preferiti per un utente che ha effettuato l'accesso.
Quando nessun utente è connesso, non ci sono preferiti da recuperare,
ma quando l'utente accede con successo si desidera recuperare
il preferito dell'utente in modo che possa visualizzarlo nell'applicazione React.
Quindi, è per questo che sto anche facendo un recupero preferiti
qui e poi riceveremo il login qui.
Quindi se c'è un errore invieremo l'errore di login qui.
Quindi, tutte queste funzioni il login di ricezione e l'errore di login
richiameranno quindi le funzioni del riduttore appropriate che vengono implementate nel file Auth.Js.
Quindi, andando nel file Auth.Js,
lo stato qui tiene traccia dello stato di accesso dell'utente qui.
Quindi, qui memorizzeremo anche nello stato, lo
stato coinvolge il booleano di caricamento orientale che
tiene traccia se si è nel processo di accesso. La facilità di autenticazione -
Indica se l'utente è autenticato e quindi l'utente è connesso, in
modo da essere in grado di consentire l'utente.
Quindi, questo flag viene utilizzato in molte circostanze
per visualizzare lo stato di accesso dell'utente e quindi anche
la proprietà utente per lo stato tiene traccia delle credenziali dell'utente.
Quindi, questo è dove otterremo il nome utente per la visualizzazione nel nostro componente di intestazione.
Ora, qui vedrai la richiesta di accesso e quando viene attivato il successo dell'accesso,
allora memorizzerai il valore del token qui e poi l'errore di accesso.
La richiesta di logout, disconnessione con successo,
tutti questi sono gestiti da queste varie parti all'interno di questo riduttore il riduttore auth.js qui.
Quindi, ecco come viene gestita l'autenticazione dell'utente qui.
Ora, nel componente di intestazione,
andando nel componente di intestazione,
quindi questo è dove abbiamo la funzione di login qui.
Quindi, HandleLogin, ti ricordi che abbiamo
già implementato questo nel corso di reazione.
Nel HandleLogin, commuteranno la modale.
Quindi, chiuderemo la modale e poi accederemo l'utente a questo punto.
Quindi, diremo questo.props LoginUser e poi vedrai che le credenziali, il
nome utente e la password vengono passati come parametri a
LoginUser e in modo che entri nella funzione LoginUser,
che poi si occupa di accedere all'utente.
Ora, come si visualizza lo stato di accesso dell'utente.
Quindi, questo è di nuovo molto semplice.
Nella barra di navigazione qui,
vedrai che ho aggiunto un nuovo elemento qui.
Quindi, questo è dove diremo questo.props.auth.isAuthenticated.
Quindi, il flag IsAuthenticated viene usato qui da me e quindi se questo è impostato su true,
allora mostrerò
il pulsante Logout qui e quindi questa è la cosa che visualizzerò qui.
Altrimenti, mostrerò il pulsante di accesso.
Quindi, usando quel flag isAuthenticated,
sto capovolgendo quale particolare pulsante verrà visualizzato nell'
intestazione lì se si visualizza il pulsante di disconnessione o il pulsante di accesso.
Quindi, questo è il punto che stiamo mostrando qui.
Quindi, il login o il logout qui.
Quindi, è così che stiamo gestendo il processo di login e logout
qui e anche mostreremo il nome utente proprio lì.
Quindi, quando si visualizza il pulsante di disconnessione,
si vedrà anche che stiamo visualizzando il nome dell'utente in là.
Così, qui sotto,
ci sarà anche visualizzare il pulsante HandleLogout e
poi abbiamo il pulsante di logout visualizzato qui.
Inoltre, questa particolare affermazione qui,
questo è il modo in cui stiamo visualizzando il nome utente qui.
Quindi, questo usa this.props.auth.user.username.
Quindi, la proprietà utente nello stato di autenticazione contiene
le credenziali utente e da lì ho recuperato il nome utente e quindi
lo uso per visualizzarlo nella barra di intestazione.
Quindi questo è il modo
in cui il componente di intestazione viene aggiornato per gestire il processo di login e logout.
Ancora una volta, modi abbastanza semplici di implementazione,
è un modo abbastanza semplice che ho implementato qui.
Ora, ovviamente, se vuoi un modo più complesso di gestire il processo di login e logout,
certamente puoi entrare nel modo completo di fare le cose,
ma questo è sufficiente per soddisfare i requisiti per la mia applicazione.
Quindi, ho implementato il processo di login e logout in
un modo molto semplice qui usando l'aiuto dello store Redux.
Quindi, dallo stesso negozio Redux sta monitorando
il mio stato di accesso se ho effettuato l'accesso e sono autenticato e se sono disconnesso.
Quindi, se l'utente è disconnesso,
i miei preferiti non sono mostrati qui.
Ora, un punto importante che chiederete è,
come facciamo a garantire che non entriamo nello stato dei preferiti qui?
Quindi, questo viene gestito nel luogo in cui ci occupiamo dei percorsi qui.
Quindi, noterai che per i preferiti qui,
dichiariamo per i preferiti l'endpoint invece di
chiamare questo come il percorso che chiamiamo come un percorso privato.
Quindi, il percorso privato ti consente di assicurarti che ti sarà
permesso di entrare in quella parte solo in circostanze,
in cui l'utente è connesso.
Quindi, questo impedirà la navigazione al loro endpoint /favorites se nessun utente è connesso.
Ora, come viene implementato questo percorso privato?
Questo percorso privato è implementato proprio qui.
Quindi, si può vedere che questo percorso privato è implementato come mostrato qui.
Quindi, questo non è altro che un percorso qui e poi qui,
implementeremo this.props.auth.isAuthenticated.
Quindi, se l'utente è autenticato,
allora permetterò di navigare
al componente che è il componente preferito.
Altrimenti, reindirizzerò semplicemente al componente home.
Quindi, se nessun utente è connesso,
reindirizzerò semplicemente al componente home e quindi questo è
implementato usando questo percorso privato che ho progettato qui.
Quindi, il percorso privato è qualcosa che è supportato dal router
che usiamo il router React Dom che abbiamo usato nella nostra applicazione React.
Quindi, un modo molto semplice di gestire le situazioni,
in cui non si desidera che determinati percorsi vengano navigati quando l'utente non è connesso.
Quindi, ancora una volta, alcune semplici modifiche che ho apportato
all'applicazione per facilitare
tutte le diverse funzionalità che vedi nella tua applicazione React.
Ora, come ci si aspetterebbe,
a questo punto potresti essere sottovalutato,
«È così semplice da implementare» e in effetti questo è
esattamente ciò che è stato fatto per supportare tutte le nuove funzionalità.
Come vedi, l'autenticazione dell'utente e il
processo di login e logout dal momento che
il nostro server ha un supporto completo per tutto, implementando il monitoraggio lato client del
processo di login e logout dell'utente e tutto ciò che diventa abbastanza semplice semplicemente
modificando alcuni dei componenti e aggiungendo
la funzione di auth reducer e aggiungendo lo stato di autenticazione al nostro negozio Redux.
L' intero processo di gestione dell'autenticazione utente
e di accesso e disconnessione diventa abbastanza semplice in questo caso.
Quindi, con questo rapido tour del codice React aggiornato,
continuiamo ad esaminare la
nostra applicazione React alcune funzionalità della nostra applicazione React.
Quindi di nuovo, tornando alla nostra applicazione,
ora possiamo andare al menu e poi tirare su
qualsiasi piatto qui e posso postare commenti al piatto qui,
quindi vorrei impostare immediatamente la valutazione qui e il mio valore commento qui.
Si noti che non sto inserendo il mio nome utente o il nome del mio autore qui nel modulo qui.
Ora, naturalmente, al fine di inviare un commento è necessario essere loggati.
Quindi, se non sei loggato questo commento non sarà accettato dal mio server.
Quindi, fammi prima accedere a me stesso.
Quindi, posso accedere qui
e nel momento in cui accedo si nota immediatamente che la
barra degli strumenti dell'intestazione è aggiornata per indicare il mio stato.
Ora, posso postare questo commento e si noterà che quando pubblico il commento,
il commento viene aggiunto nella lista dei commenti
e anche notare che il campo autore
viene compilato automaticamente qui perché è così che abbiamo impostato il nostro lato server.
Nel campo dei commenti,
abbiamo impostato il nostro utente come riferimento alle
informazioni utente che memorizziamo nel
nostro lato server e dal momento che usiamo il popolare Mongusta Popolate sul lato server,
le informazioni utente vengono automaticamente popolate
nei commenti in arrivo dal lato server.
Quindi, è così che noti come sto sfruttando
ciò che il server mi fornisce già per compilare automaticamente i dettagli.
Così, piccole modifiche anche
nella pagina di dettaglio piatto per riflettere l'uso del supporto commenti sul sito server.
Con questo, completa
la rapida illustrazione del client React che abbiamo implementato come parte di
questo esercizio e spero che
tu passi anche attraverso i dettagli del codice nel client e
poi rifletti su ciò che hai imparato nel corso React e vedi come
le modifiche ci permettono di implementare in una versione modificata,
[inudibile] che ora è in grado di comunicare con il server e quindi supportare tutte le funzionalità che
inizialmente intendevamo implementare sia come parte del nostro client che del lato server.