‫Narratore: Quindi, come abbiamo detto
‫nell'ultima lezione, ora utilizziamo la nostra API per aggiornare i dati dell'utente.
‫E così, proprio come prima, con la
‫funzionalità di accesso, ora effettueremo una chiamata API dal front-end.
‫E quindi abbiamo bisogno di creare un nuovo file JavaScript per questo.
‫E questo lo chiamerò impostazioni di aggiornamento.
‫E le impostazioni, perché fondamentalmente
‫aggiorneremo i dati che sono nome ed
‫e-mail, e in seguito aggiorneremo anche la password da questo
‫file, quindi password, insieme ai dati utente, li
‫ho chiamati impostazioni. Bene.
‫Quindi questo è in realtà abbastanza simile a
‫quello che abbiamo fatto con il login.
‫e quindi ancora una volta voglio davvero lasciare
‫questo come una sfida per te
‫in modo che tu possa mettere in pratica ciò che hai già imparato.
‫Quindi vai avanti e crea una funzione di aggiornamento dei dati qui.
‫Quindi, i dati di aggiornamento sono il
‫nome della funzione che voglio che crei qui e
‫poi ovviamente chiami quella funzione proprio qui
‫da index. jf.
‫Quindi dovrai esportare una funzione da qui e poi importarla
‫qui nell'indice in modo molto simile a
‫quello che abbiamo fatto
‫prima con le altre funzioni.
‫Ora una cosa importante da fare prima
‫di scrivere effettivamente il JavaScript, è
‫che nel nostro modulo abbiamo effettivamente bisogno di rimuovere queste parti qui.
‫Quindi duplichiamo effettivamente questa riga
‫qui in modo da lasciarla come riferimento.
‫Quindi commentiamo questa parte e aggiungiamo un altro commento qui,
‫senza API, e poi questo
‫qui è con API, quindi qui non abbiamo bisogno
‫dell'azione e nemmeno del metodo, va
‫bene, perché
‫se lo lasci così quindi potrebbe
‫effettivamente inviare i dati a questo URL.
‫E anche se così non fosse, beh, non ne abbiamo ancora bisogno qui.
‫Va bene, quindi quella era solo una cosa importante.
‫Ma ora per favore vai avanti e metti in pausa il
‫video e prova a implementarlo da solo.
‫Quindi sono sicuro che l'hai appena fatto.
‫E quindi ecco come l'ho fatto io.
‫Quindi esporta i dati const_update.
‫E questa funzione riceverà come input
‫il nome e l'e-mail, quindi i dati che desideri aggiornare e quindi
‫utilizzeremo axios per
‫creare la chiamata API stessa.
‫Quindi importiamo anche axios
‫dal modulo axios.
‫Quindi di nuovo questa è la sintassi del modulo es6 e non la
‫sintassi del modulo js comune che usiamo in node. js, va bene,
‫quindi non confondere questi due, va bene.
‫Quindi la richiesta HTTP che stiamo facendo con axios
‫dovrà essere di nuovo all'interno di un blocco try catch in
‫modo che nel caso ci siano errori
‫possiamo gestirli correttamente.
‫Quindi proprio qui nel
‫blocco catch, e come prima iniziamo effettivamente a farlo
‫e nel caso ci sia qualcosa
‫di sbagliato, vogliamo mostrare l'avviso proprio come abbiamo fatto nel login.
‫Quindi importiamo quella funzione showAlert in questo
‫modo
‫dalla stessa cartella ". /avvisi.
‫" Bene. Oh, e dobbiamo anche disabilitare di nuovo eslint.
‫E ora siamo a posto.
‫Quindi è inutile che mostri la funzione di avviso qui.
‫Vogliamo che sia un
‫errore in modo che ottenga quel bel
‫colore rosso e quindi il messaggio
‫che vogliamo visualizzare è un errore, quindi
‫questo è l'errore che viene creato nel blocco try quando qualcosa va storto.
‫Poi c'è l'errore. risposta, e poi
‫lì dentro, i dati. message, okay, quindi questa proprietà
‫message è quella che definiamo sul server ogni
‫volta che c'è un errore, va bene.
‫Quindi lo proveremo proprio come abbiamo fatto prima
‫con la convalida, quindi nell'ultima lezione abbiamo ricevuto questo messaggio di
‫errore di convalida qui, e quindi ora
‫in questo
‫video, quando faremo lo stesso errore
‫con l'API, lo farai quindi ricevi l'avviso con lo stesso
‫identico messaggio, e quindi sarà un'esperienza utente molto più
‫piacevole, perché non stiamo lasciando la pagina in cui eravamo, giusto.
‫Ad ogni modo, ora eseguiamo effettivamente quella richiesta HTTP.
‫E salva quella risposta di
‫interloop e, come già sai, dobbiamo attendere
‫la promessa proveniente da questa richiesta axios
‫e quindi è contrassegnata come asincrona e ora qui le opzioni.
‫Quindi il metodo è una patch, ok?
‫E potresti usarlo qui in
‫minuscolo, ma preferisco scrivere sempre i metodi HTTP
‫in maiuscolo in questo modo e ora andiamo effettivamente a
‫postare e vedere l'URL che andremo a colpire ora.
‫Per qualche ragione, questo sembra un po' strano che è troppo grande..
‫ma non importa.
‫Voglio solo selezionare l'URL che andremo a colpire qui.
‫quindi è qui per
‫gli utenti e aggiorna l'utente corrente, ok.
‫E così
‫questo riceve come corpo solo i dati che vogliamo aggiornare.
‫Quindi in questo caso è il nome
‫e il ruolo,
‫ma ovviamente non consentiremo all'utente di aggiornare il
‫ruolo e penso che l'abbiamo appena fatto qui per mostrare
‫l'esempio che questo non è consentito,
‫giusto, e quindi quello
‫che stiamo aggiornando è ovviamente il nome e l'e-mail.
‫Ciò che è importante qui è che per questo percorso
‫non è necessario specificare l'ID utente, poiché dobbiamo
‫farlo qui in Aggiorna utente.
‫Quindi questo qui è il primo che abbiamo creato.
‫E qui, dovevamo passare l'ID come parametro URL, ma
‫ovviamente nell'aggiornare l'utente corrente otteniamo
‫quell'ID utente dalla richiesta. utente come sempre
‫Ricordati che?
‫Comunque, ora copiamo questo qui.
‫E quindi specificare l'URL.
‫Ok, quindi qui come sempre l'host locale e,
‫naturalmente, quando
‫lo implementeremo, lo cambieremo qui.
‫Ma per ora, ovviamente, stiamo solo lavorando a livello locale qui.
‫Così è quello da usare.
‫Successivamente specifichiamo i dati e
‫quindi questo sarà
‫il corpo che verrà inviato insieme alla
‫richiesta e quindi il nome sarà
‫semplicemente il nome, che arriva e quindi, naturalmente, l'e-mail.
‫Va bene, quindi questa è tutta
‫richiesta, e ora testiamo se effettivamente riotteniamo il nostro successo
‫in modo da rispondere. dati. status, se è
‫uguale a successo, e
‫ancora una volta questo lo stato che troviamo in tutte le nostre risposte,
‫ricorda, e quindi se questo ha avuto successo, allora
‫vogliamo mostrare un avviso di successo
‫che dice: "Dati aggiornati con successo. " Dagli un salvataggio
‫e penso
‫che dovrebbe essere così per questa funzione, va bene.
‫Ora tutto ciò che dobbiamo fare è utilizzarlo qui.
‫Quindi, per prima cosa, importerò
‫una
‫funzione, "updateData" da ". /update settings" e
‫quindi possiamo rilasciare "js" lì.
‫Successivamente, selezioniamo effettivamente il modulo nella pagina.
‫Quindi, usa un modulo dati uguale a document. querySelector e poi
‫diamo un'occhiata a questo.
‫Quindi è qui nell'account e questo
‫modulo ha un nome di classe di dati utente del modulo.
‫Quindi, prendiamolo e mettiamolo qui.
‫Ok, ora faremo qualcosa di molto simile a
‫questo login.
‫Quindi, se c'è un modulo di dati utente, beh, allora aggiungiamo
‫un ascoltatore di eventi a quello.
‫Quindi aggiungiEventListener nel caso di invio e
‫otteniamo l'accesso all'evento qui
‫e impediremo l'impostazione
‫predefinita, quindi impediremo l'invio del modulo.
‫Con questo pezzo di codice, quindi, prendiamo l'e-mail e
‫il nome che sarà molto
‫simile a quello che abbiamo qui, quindi prendiamolo.
‫Giusto per assicurarci che siano effettivamente lì, apriamolo
‫di nuovo
‫e in effetti ottengono l'ID del nome e l'ID dell'e-mail.
‫Va bene, quindi l'e-mail è e-mail e nome
‫con l'idea del nome.
‫Ok, quindi tutto ciò che dobbiamo fare è
‫chiamare davvero la funzione che abbiamo importato.
‫Quindi, updateData con il nome e l'e-mail e
‫penso che sia l'ordine corretto, quindi sì.
‫prima il nome e poi l'e-mail, ok.
‫E dietro le quinte, il
‫nostro pacchetto dovrebbe ancora raggruppare tutti questi
‫file insieme ad ogni salvataggio, quindi se lo salviamo
‫vedrai che è stato aggiornato ora
‫qui e quindi ora dovremmo essere a posto con questo.
‫Quindi, torniamo alla nostra homepage qui.
‫Tutto bene. E proviamo ad aggiornare i nostri dati.
‫E quello che farò è
‫fondamentalmente tornare ai dati originali, rimuovere quel secondo nome e il
‫cognome da qui e ora salvare le impostazioni
‫ed eccoci qui, i dati sono stati aggiornati con successo.
‫Quindi, se ora ricarichiamo la pagina,
‫fondamentalmente recupereremo quei dati dal server e quindi se
‫è lo stesso, significa che i dati
‫sono stati effettivamente persistenti.
‫Quindi, ricarica e ci siamo.
‫Quindi, fantastico. In realtà ha funzionato.
‫Andiamo su un'altra pagina
‫qui e torniamo indietro solo per essere
‫davvero sicuri, ma in effetti ha funzionato.
‫E ora, proviamo uno di questi errori.
‫Va bene, e questo dovrebbe attivare un indirizzo email sbagliato
‫e così sembra molto più carino, giusto così
‫ci dà questo messaggio di
‫errore, che potremmo ovviamente formattare un po' meglio
‫per farlo sembrare migliore.
‫Ma penso che in questo modo vada
‫perfettamente bene per questa piccola applicazione.
‫E potremmo fare ogni genere
‫di cose come segnare questo campo qui in rosso o qualcosa del genere.
‫Ma per questo tipo di cose
‫probabilmente staresti meglio usando un vero e proprio framework front-end come
‫React o View.
‫Comunque questo modulo ora funziona qui tranne l'immagine, che di
‫nuovo faremo nella prossima sezione, quindi
‫tutto ciò che resta da
‫fare ora è aggiornare la password in modo che lo faremo nel prossimo video.