Ora che abbiamo completato lo sviluppo di un server API REST a tutti gli effetti utilizzando Loopback,
la prossima domanda immediata che sorgerà nella tua mente è,
come adattiamo l'applicazione React per fare uso di questo server API REST?
Come abbiamo fatto nei casi precedenti,
avremo anche bisogno di riconfigurare la nostra applicazione React per fare uso specifico
degli endpoint API REST e
delle varie richieste API REST come esposto dal nostro server Loopback.
Per iniziare a questo esercizio,
clonare innanzitutto il repository git che contiene
una riapplicazione completata che comunica con il nostro server Loopback.
Quindi, per farlo, vai nella tua posizione comoda sui tuoi computer.
Ho intenzione di clonare il repository git
digitando git clone
https://github.com/jmuppala/conFusion-React-Loopback.git,
e poi clonare questo repository git.
Una volta che il repository git è clonato,
allora ci sposteremo nella cartella Confusion-react-loopback e
quindi eseguire un'installazione di filati per installare tutti i moduli nodo per questa applicazione.
Prima di avviare l'applicazione React,
assicurarsi che il server Loopback sia configurato correttamente.
Nel server Loopback,
nella cartella client,
spostare le immagini che abbiamo dato come il file images.zip,
decomprimerlo, e quindi spostare le immagini nella
cartella immagini sotto la cartella client come mostrato qui.
Inoltre, rinominare il file root.js come root.jsold o eliminare il file root.js.
Non abbiamo più bisogno di questo nella nostra applicazione perché vogliamo assicurarci che
il nostro server stia salvando i contenuti dalla cartella client.
Quindi, per raggiungere questo obiettivo,
apriamo il file middleware.json
e nel file middleware.json,
nella parte file,
aggiungetelo nella parte file del file middleware.json.
Quindi, diremo, Loopback static and params: dollar bank dot dot slash client»,
che indica che il tuo server Loopback salverà
il contenuto statico dalla cartella client qui.
Dopo aver apportato queste modifiche
, è possibile avviare il server.
Assicurati che il tuo server MongoDB sia
attivo e funzionante prima di avviare il tuo server Loopback.
Quindi, dopo di che, compileremo e lanceremo il nostro client React.
Ora, ancora una volta assicurandoti che il tuo server MongoDB e il tuo server Loopback funzionino,
vai al terminale e aggiungi il terminale.
Tipo filato iniziare per avviare la nostra applicazione Loopback, l'applicazione React.
Quindi, quando l'applicazione
si avvia nel browser, noterai che l'applicazione React basata su Loopback si comporta
esattamente allo stesso modo delle versioni precedenti dell'applicazione React.
Così, qui abbiamo la Homepage,
poi abbiamo la pagina Chi siamo come vediamo qui,
quindi la pagina del menu in cui le voci di menu sono elencate qui,
la pagina Contattaci come previsto.
Quindi lasciami tornare alla Homepage e poi accedi come amministratore.
Quindi, accedi come amministratore,
e poi sarai in grado di vedere i miei preferiti.
Ho effettuato l'accesso in precedenza e poi ho aggiunto un elemento ai miei preferiti.
Passiamo ora al Menu e poi aggiungiamo un secondo elemento in I miei preferiti.
Quindi, qui aggiungeremo questo elemento nei preferiti,
e poi si sarebbe in grado di vedere che entrambi questi elementi sono ora in I miei preferiti.
Analogamente, è possibile eliminare elementi dai preferiti.
Quindi, andiamo avanti e cancelliamo questo dai nostri Preferiti.
Tornando alla voce di menu,
aggiungiamo un commento a uno dei piatti.
Quindi, lasciami fare clic su questo piatto,
e poi invieremo un commento.
Quindi, quando inviamo un commento,
come puoi vedere, il commento viene aggiunto nel
nostro server lì come
previsto e il risultato è mostrato nella pagina Dettagli piatto qui.
Tornando nuovamente alla Homepage,
troviamo che la nostra applicazione React è ora in grado di comunicare con
il server Loopback e quindi ottenere
i dati dal server e interagire con il server come previsto.
Ora, naturalmente, la domanda che sorgerebbe nella tua mente è,
come fa questa applicazione Loopback a comunicare con il server Loopback?
Ora, questo è dove vorremmo notare che per Loopback,
poiché il server Loopback espone gli endpoint API REST, la
mia applicazione React è in grado di accedere al server Loopback presso
gli endpoint API REST corrispondenti e quindi comunicare con il server,
come abbiamo fatto con il nostro server API REST che avevamo implementato in precedenza.
Quindi, andiamo avanti e diamo un'occhiata al codice per l'applicazione React modificata.
Andando al codice della nostra applicazione,
le principali modifiche che noterai saranno nel file ActionCreators.js.
Qui, si noterà che stiamo comunicando con
il server Loopback invece del server API REST che avevamo in precedenza.
Quindi, il recupero ora accederà al server Loopback presso
l'endpoint api/commenti o l'endpoint api/piatti e così via.
Quindi, tutte queste richieste di recupero sono tutte aggiornate per accedere al nostro server Loopback istantaneo.
Quindi, noterai cambiamenti simili lì.
Ora, oltre ad accedere al nostro server Loopback,
quindi andiamo al codice di accesso qui.
Quindi, nell'utente di accesso,
stiamo postando un recupero all'endpoint BaseURL e API/clienti/Login,
e quindi forniremo le credenziali nel corpo del messaggio di richiesta che si spegne.
In risposta a ciò,
il server invierà la risposta.
La risposta contiene quindi le informazioni sul token.
Le informazioni sul token vengono restituite sotto forma di
ID del messaggio di risposta.
Quindi, l'ID stesso funge da token.
Quindi, il messaggio di risposta stesso,
ho intenzione di salvare questo nel mio archivio locale come mostrato qui.
Stringify il messaggio di risposta e poi lo memorizziamo lì dentro.
Questo messaggio di risposta, Response.id, contiene il token.
Pertanto, il response.id funge da token Web JSON per accedere al server Loopback.
Quindi, ecco perché noterai che nelle
situazioni in cui ho bisogno di accedere al server, quindi ad esempio,
noteremo che quando stiamo recuperando o postando il tuo preferito sul server,
noterai che ottengo il token dicendo,
lascia che token, JSON analizza,
localStorage, getItem, token qui,
e poi nel campo di intestazione Autorizzazione,
ho detto che il campo Autorizzazione deve essere token.id qui come mostrato qui.
Quindi, è così che saremo in grado di autenticarci al server Loopback.
Quindi, qui vedi che dice, BaseURL, api/preferiti,
e quindi ottenere l'elenco dei preferiti dal server,
e quindi salvarlo nel nostro negozio redux.
Quindi, beh, gran parte del codice rimane lo stesso,
ad eccezione degli aggiornamenti che abbiamo fatto per
accedere agli endpoint dell'API REST di Loopbacks.
Ora, per Angular, abbiamo un SDK di Loopback che può essere costruito per la nostra applicazione Angular.
Ma per React, non esiste tale supporto disponibile da Loopback,
e quindi dobbiamo ricorrere all'accesso diretto agli
endpoint dell'API REST di Loopback come mostrato qui usando il recupero,
e quindi siamo in grado di comunicare con il server Loopback.
Con questa rapida comprensione di come
la nostra applicazione React è stata aggiornata per accedere al nostro server Loopback,
completiamo l'esame del server Loopback.
Dedicate un po' più di tempo alla ricerca di alcuni componenti e
verificate come utilizzano le informazioni ottenute dal server Loopback.
Noterete che la maggior parte dei componenti rimane esattamente la stessa di prima,
ad eccezione di alcune piccole modifiche nel componente preferito per ottenere
le informazioni dal server Loopback
e quindi utilizzarle per eseguire il rendering dell'elenco degli elementi preferiti.
Oltre a questo, gran parte delle modifiche sono limitate al file ActionCreators.js,
dove abbiamo aggiornato il recupero per utilizzare l'URL per il
nostro server Loopback per essere in grado di accedere ai vari endpoint API REST.
Quindi, con questo, ti ho rapidamente dimostrato come puoi costruire la tua applicazione.
Con questa rapida introduzione a come
utilizzare il Loopback all'interno della nostra applicazione,
arriviamo alla fine di questo esercizio.