1 00:00:01,210 --> 00:00:03,550 ‫Narratore: Quindi, come abbiamo detto 2 00:00:03,550 --> 00:00:07,883 ‫nell'ultima lezione, ora utilizziamo la nostra API per aggiornare i dati dell'utente. 3 00:00:09,460 --> 00:00:12,860 ‫E così, proprio come prima, con la 4 00:00:12,860 --> 00:00:16,990 ‫funzionalità di accesso, ora effettueremo una chiamata API dal front-end. 5 00:00:16,990 --> 00:00:20,313 ‫E quindi abbiamo bisogno di creare un nuovo file JavaScript per questo. 6 00:00:21,370 --> 00:00:26,033 ‫E questo lo chiamerò impostazioni di aggiornamento. 7 00:00:26,890 --> 00:00:29,149 ‫E le impostazioni, perché fondamentalmente 8 00:00:29,149 --> 00:00:31,991 ‫aggiorneremo i dati che sono nome ed 9 00:00:31,991 --> 00:00:35,720 ‫e-mail, e in seguito aggiorneremo anche la password da questo 10 00:00:35,720 --> 00:00:38,768 ‫file, quindi password, insieme ai dati utente, li 11 00:00:38,768 --> 00:00:42,080 ‫ho chiamati impostazioni. Bene. 12 00:00:42,080 --> 00:00:44,510 ‫Quindi questo è in realtà abbastanza simile a 13 00:00:44,510 --> 00:00:46,680 ‫quello che abbiamo fatto con il login. 14 00:00:46,680 --> 00:00:48,650 ‫e quindi ancora una volta voglio davvero lasciare 15 00:00:48,650 --> 00:00:50,436 ‫questo come una sfida per te 16 00:00:50,436 --> 00:00:53,830 ‫in modo che tu possa mettere in pratica ciò che hai già imparato. 17 00:00:53,830 --> 00:00:57,003 ‫Quindi vai avanti e crea una funzione di aggiornamento dei dati qui. 18 00:00:58,380 --> 00:01:00,800 ‫Quindi, i dati di aggiornamento sono il 19 00:01:00,800 --> 00:01:03,720 ‫nome della funzione che voglio che crei qui e 20 00:01:03,720 --> 00:01:06,021 ‫poi ovviamente chiami quella funzione proprio qui 21 00:01:06,021 --> 00:01:08,250 ‫da index. jf. 22 00:01:08,250 --> 00:01:11,820 ‫Quindi dovrai esportare una funzione da qui e poi importarla 23 00:01:11,820 --> 00:01:14,230 ‫qui nell'indice in modo molto simile a 24 00:01:14,230 --> 00:01:16,110 ‫quello che abbiamo fatto 25 00:01:16,110 --> 00:01:18,020 ‫prima con le altre funzioni. 26 00:01:18,020 --> 00:01:20,630 ‫Ora una cosa importante da fare prima 27 00:01:20,630 --> 00:01:22,953 ‫di scrivere effettivamente il JavaScript, è 28 00:01:22,953 --> 00:01:27,320 ‫che nel nostro modulo abbiamo effettivamente bisogno di rimuovere queste parti qui. 29 00:01:27,320 --> 00:01:28,969 ‫Quindi duplichiamo effettivamente questa riga 30 00:01:28,969 --> 00:01:31,163 ‫qui in modo da lasciarla come riferimento. 31 00:01:32,500 --> 00:01:36,563 ‫Quindi commentiamo questa parte e aggiungiamo un altro commento qui, 32 00:01:37,890 --> 00:01:40,003 ‫senza API, e poi questo 33 00:01:41,350 --> 00:01:45,310 ‫qui è con API, quindi qui non abbiamo bisogno 34 00:01:45,310 --> 00:01:48,210 ‫dell'azione e nemmeno del metodo, va 35 00:01:48,210 --> 00:01:49,710 ‫bene, perché 36 00:01:49,710 --> 00:01:52,480 ‫se lo lasci così quindi potrebbe 37 00:01:52,480 --> 00:01:55,480 ‫effettivamente inviare i dati a questo URL. 38 00:01:55,480 --> 00:01:59,063 ‫E anche se così non fosse, beh, non ne abbiamo ancora bisogno qui. 39 00:02:00,020 --> 00:02:03,760 ‫Va bene, quindi quella era solo una cosa importante. 40 00:02:03,760 --> 00:02:06,500 ‫Ma ora per favore vai avanti e metti in pausa il 41 00:02:06,500 --> 00:02:08,533 ‫video e prova a implementarlo da solo. 42 00:02:12,030 --> 00:02:14,620 ‫Quindi sono sicuro che l'hai appena fatto. 43 00:02:14,620 --> 00:02:18,230 ‫E quindi ecco come l'ho fatto io. 44 00:02:18,230 --> 00:02:21,103 ‫Quindi esporta i dati const_update. 45 00:02:24,040 --> 00:02:26,900 ‫E questa funzione riceverà come input 46 00:02:26,900 --> 00:02:31,900 ‫il nome e l'e-mail, quindi i dati che desideri aggiornare e quindi 47 00:02:32,980 --> 00:02:34,600 ‫utilizzeremo axios per 48 00:02:34,600 --> 00:02:36,853 ‫creare la chiamata API stessa. 49 00:02:37,710 --> 00:02:40,450 ‫Quindi importiamo anche axios 50 00:02:45,270 --> 00:02:47,420 ‫dal modulo axios. 51 00:02:47,420 --> 00:02:50,630 ‫Quindi di nuovo questa è la sintassi del modulo es6 e non la 52 00:02:50,630 --> 00:02:55,290 ‫sintassi del modulo js comune che usiamo in node. js, va bene, 53 00:02:55,290 --> 00:02:59,610 ‫quindi non confondere questi due, va bene. 54 00:02:59,610 --> 00:03:03,030 ‫Quindi la richiesta HTTP che stiamo facendo con axios 55 00:03:03,030 --> 00:03:06,661 ‫dovrà essere di nuovo all'interno di un blocco try catch in 56 00:03:06,661 --> 00:03:09,050 ‫modo che nel caso ci siano errori 57 00:03:09,050 --> 00:03:10,483 ‫possiamo gestirli correttamente. 58 00:03:12,890 --> 00:03:14,653 ‫Quindi proprio qui nel 59 00:03:15,660 --> 00:03:19,420 ‫blocco catch, e come prima iniziamo effettivamente a farlo 60 00:03:19,420 --> 00:03:22,060 ‫e nel caso ci sia qualcosa 61 00:03:22,060 --> 00:03:26,430 ‫di sbagliato, vogliamo mostrare l'avviso proprio come abbiamo fatto nel login. 62 00:03:26,430 --> 00:03:29,620 ‫Quindi importiamo quella funzione showAlert in questo 63 00:03:33,670 --> 00:03:34,580 ‫modo 64 00:03:35,950 --> 00:03:40,457 ‫dalla stessa cartella ". /avvisi. 65 00:03:42,270 --> 00:03:46,333 ‫" Bene. Oh, e dobbiamo anche disabilitare di nuovo eslint. 66 00:03:52,080 --> 00:03:53,513 ‫E ora siamo a posto. 67 00:03:54,480 --> 00:03:57,023 ‫Quindi è inutile che mostri la funzione di avviso qui. 68 00:04:00,750 --> 00:04:02,860 ‫Vogliamo che sia un 69 00:04:02,860 --> 00:04:05,440 ‫errore in modo che ottenga quel bel 70 00:04:05,440 --> 00:04:07,670 ‫colore rosso e quindi il messaggio 71 00:04:07,670 --> 00:04:10,090 ‫che vogliamo visualizzare è un errore, quindi 72 00:04:10,090 --> 00:04:14,640 ‫questo è l'errore che viene creato nel blocco try quando qualcosa va storto. 73 00:04:14,640 --> 00:04:18,772 ‫Poi c'è l'errore. risposta, e poi 74 00:04:18,772 --> 00:04:23,297 ‫lì dentro, i dati. message, okay, quindi questa proprietà 75 00:04:23,297 --> 00:04:26,620 ‫message è quella che definiamo sul server ogni 76 00:04:26,620 --> 00:04:29,740 ‫volta che c'è un errore, va bene. 77 00:04:29,740 --> 00:04:32,450 ‫Quindi lo proveremo proprio come abbiamo fatto prima 78 00:04:32,450 --> 00:04:36,140 ‫con la convalida, quindi nell'ultima lezione abbiamo ricevuto questo messaggio di 79 00:04:36,140 --> 00:04:38,560 ‫errore di convalida qui, e quindi ora 80 00:04:38,560 --> 00:04:39,810 ‫in questo 81 00:04:39,810 --> 00:04:42,044 ‫video, quando faremo lo stesso errore 82 00:04:42,044 --> 00:04:45,600 ‫con l'API, lo farai quindi ricevi l'avviso con lo stesso 83 00:04:45,600 --> 00:04:48,731 ‫identico messaggio, e quindi sarà un'esperienza utente molto più 84 00:04:48,731 --> 00:04:52,423 ‫piacevole, perché non stiamo lasciando la pagina in cui eravamo, giusto. 85 00:04:54,320 --> 00:04:57,693 ‫Ad ogni modo, ora eseguiamo effettivamente quella richiesta HTTP. 86 00:04:58,910 --> 00:05:01,603 ‫E salva quella risposta di 87 00:05:02,451 --> 00:05:05,750 ‫interloop e, come già sai, dobbiamo attendere 88 00:05:05,750 --> 00:05:09,130 ‫la promessa proveniente da questa richiesta axios 89 00:05:09,130 --> 00:05:14,130 ‫e quindi è contrassegnata come asincrona e ora qui le opzioni. 90 00:05:16,540 --> 00:05:21,540 ‫Quindi il metodo è una patch, ok? 91 00:05:21,560 --> 00:05:23,700 ‫E potresti usarlo qui in 92 00:05:23,700 --> 00:05:26,660 ‫minuscolo, ma preferisco scrivere sempre i metodi HTTP 93 00:05:26,660 --> 00:05:30,023 ‫in maiuscolo in questo modo e ora andiamo effettivamente a 94 00:05:30,023 --> 00:05:33,023 ‫postare e vedere l'URL che andremo a colpire ora. 95 00:05:34,210 --> 00:05:37,087 ‫Per qualche ragione, questo sembra un po' strano che è troppo grande.. 96 00:05:40,050 --> 00:05:41,050 ‫ma non importa. 97 00:05:41,050 --> 00:05:45,270 ‫Voglio solo selezionare l'URL che andremo a colpire qui. 98 00:05:45,270 --> 00:05:47,470 ‫quindi è qui per 99 00:05:47,470 --> 00:05:51,091 ‫gli utenti e aggiorna l'utente corrente, ok. 100 00:05:51,091 --> 00:05:52,295 ‫E così 101 00:05:52,295 --> 00:05:57,090 ‫questo riceve come corpo solo i dati che vogliamo aggiornare. 102 00:05:57,090 --> 00:05:59,790 ‫Quindi in questo caso è il nome 103 00:05:59,790 --> 00:06:01,070 ‫e il ruolo, 104 00:06:01,070 --> 00:06:03,790 ‫ma ovviamente non consentiremo all'utente di aggiornare il 105 00:06:03,790 --> 00:06:07,420 ‫ruolo e penso che l'abbiamo appena fatto qui per mostrare 106 00:06:07,420 --> 00:06:09,866 ‫l'esempio che questo non è consentito, 107 00:06:09,866 --> 00:06:11,550 ‫giusto, e quindi quello 108 00:06:11,550 --> 00:06:14,710 ‫che stiamo aggiornando è ovviamente il nome e l'e-mail. 109 00:06:14,710 --> 00:06:17,910 ‫Ciò che è importante qui è che per questo percorso 110 00:06:17,910 --> 00:06:20,650 ‫non è necessario specificare l'ID utente, poiché dobbiamo 111 00:06:20,650 --> 00:06:22,763 ‫farlo qui in Aggiorna utente. 112 00:06:23,920 --> 00:06:25,870 ‫Quindi questo qui è il primo che abbiamo creato. 113 00:06:25,870 --> 00:06:30,010 ‫E qui, dovevamo passare l'ID come parametro URL, ma 114 00:06:30,010 --> 00:06:32,460 ‫ovviamente nell'aggiornare l'utente corrente otteniamo 115 00:06:32,460 --> 00:06:37,050 ‫quell'ID utente dalla richiesta. utente come sempre 116 00:06:37,050 --> 00:06:38,293 ‫Ricordati che? 117 00:06:39,396 --> 00:06:41,713 ‫Comunque, ora copiamo questo qui. 118 00:06:46,800 --> 00:06:48,593 ‫E quindi specificare l'URL. 119 00:06:50,610 --> 00:06:55,610 ‫Ok, quindi qui come sempre l'host locale e, 120 00:06:56,120 --> 00:06:58,460 ‫naturalmente, quando 121 00:06:58,460 --> 00:07:01,653 ‫lo implementeremo, lo cambieremo qui. 122 00:07:03,790 --> 00:07:06,540 ‫Ma per ora, ovviamente, stiamo solo lavorando a livello locale qui. 123 00:07:07,704 --> 00:07:09,104 ‫Così è quello da usare. 124 00:07:09,970 --> 00:07:12,057 ‫Successivamente specifichiamo i dati e 125 00:07:12,057 --> 00:07:13,890 ‫quindi questo sarà 126 00:07:13,890 --> 00:07:16,800 ‫il corpo che verrà inviato insieme alla 127 00:07:16,800 --> 00:07:19,400 ‫richiesta e quindi il nome sarà 128 00:07:19,400 --> 00:07:23,423 ‫semplicemente il nome, che arriva e quindi, naturalmente, l'e-mail. 129 00:07:24,930 --> 00:07:27,323 ‫Va bene, quindi questa è tutta 130 00:07:29,240 --> 00:07:32,920 ‫richiesta, e ora testiamo se effettivamente riotteniamo il nostro successo 131 00:07:36,160 --> 00:07:40,993 ‫in modo da rispondere. dati. status, se è 132 00:07:44,470 --> 00:07:46,140 ‫uguale a successo, e 133 00:07:46,140 --> 00:07:50,910 ‫ancora una volta questo lo stato che troviamo in tutte le nostre risposte, 134 00:07:50,910 --> 00:07:54,520 ‫ricorda, e quindi se questo ha avuto successo, allora 135 00:07:54,520 --> 00:07:56,750 ‫vogliamo mostrare un avviso di successo 136 00:07:59,770 --> 00:08:04,400 ‫che dice: "Dati aggiornati con successo. " Dagli un salvataggio 137 00:08:07,650 --> 00:08:09,170 ‫e penso 138 00:08:09,170 --> 00:08:14,170 ‫che dovrebbe essere così per questa funzione, va bene. 139 00:08:14,620 --> 00:08:17,293 ‫Ora tutto ciò che dobbiamo fare è utilizzarlo qui. 140 00:08:18,220 --> 00:08:20,373 ‫Quindi, per prima cosa, importerò 141 00:08:25,493 --> 00:08:26,493 ‫una 142 00:08:29,050 --> 00:08:32,360 ‫funzione, "updateData" da ". /update settings" e 143 00:08:32,360 --> 00:08:34,623 ‫quindi possiamo rilasciare "js" lì. 144 00:08:36,340 --> 00:08:39,933 ‫Successivamente, selezioniamo effettivamente il modulo nella pagina. 145 00:08:41,860 --> 00:08:46,860 ‫Quindi, usa un modulo dati uguale a document. querySelector e poi 146 00:08:50,489 --> 00:08:53,190 ‫diamo un'occhiata a questo. 147 00:08:53,190 --> 00:08:55,410 ‫Quindi è qui nell'account e questo 148 00:08:58,150 --> 00:09:01,893 ‫modulo ha un nome di classe di dati utente del modulo. 149 00:09:03,630 --> 00:09:07,920 ‫Quindi, prendiamolo e mettiamolo qui. 150 00:09:07,920 --> 00:09:11,670 ‫Ok, ora faremo qualcosa di molto simile a 151 00:09:11,670 --> 00:09:12,703 ‫questo login. 152 00:09:14,480 --> 00:09:19,089 ‫Quindi, se c'è un modulo di dati utente, beh, allora aggiungiamo 153 00:09:19,089 --> 00:09:22,203 ‫un ascoltatore di eventi a quello. 154 00:09:24,410 --> 00:09:27,980 ‫Quindi aggiungiEventListener nel caso di invio e 155 00:09:33,640 --> 00:09:35,660 ‫otteniamo l'accesso all'evento qui 156 00:09:37,060 --> 00:09:38,880 ‫e impediremo l'impostazione 157 00:09:38,880 --> 00:09:42,110 ‫predefinita, quindi impediremo l'invio del modulo. 158 00:09:42,110 --> 00:09:45,810 ‫Con questo pezzo di codice, quindi, prendiamo l'e-mail e 159 00:09:45,810 --> 00:09:48,363 ‫il nome che sarà molto 160 00:09:48,363 --> 00:09:51,663 ‫simile a quello che abbiamo qui, quindi prendiamolo. 161 00:09:56,178 --> 00:09:59,777 ‫Giusto per assicurarci che siano effettivamente lì, apriamolo 162 00:09:59,777 --> 00:10:01,200 ‫di nuovo 163 00:10:02,080 --> 00:10:06,679 ‫e in effetti ottengono l'ID del nome e l'ID dell'e-mail. 164 00:10:06,679 --> 00:10:09,762 ‫Va bene, quindi l'e-mail è e-mail e nome 165 00:10:13,908 --> 00:10:16,050 ‫con l'idea del nome. 166 00:10:16,050 --> 00:10:18,640 ‫Ok, quindi tutto ciò che dobbiamo fare è 167 00:10:18,640 --> 00:10:21,053 ‫chiamare davvero la funzione che abbiamo importato. 168 00:10:22,090 --> 00:10:27,090 ‫Quindi, updateData con il nome e l'e-mail e 169 00:10:27,880 --> 00:10:32,530 ‫penso che sia l'ordine corretto, quindi sì. 170 00:10:32,530 --> 00:10:35,840 ‫prima il nome e poi l'e-mail, ok. 171 00:10:35,840 --> 00:10:37,480 ‫E dietro le quinte, il 172 00:10:39,060 --> 00:10:41,310 ‫nostro pacchetto dovrebbe ancora raggruppare tutti questi 173 00:10:41,310 --> 00:10:43,880 ‫file insieme ad ogni salvataggio, quindi se lo salviamo 174 00:10:43,880 --> 00:10:45,846 ‫vedrai che è stato aggiornato ora 175 00:10:45,846 --> 00:10:48,883 ‫qui e quindi ora dovremmo essere a posto con questo. 176 00:10:51,580 --> 00:10:55,393 ‫Quindi, torniamo alla nostra homepage qui. 177 00:10:56,790 --> 00:10:59,723 ‫Tutto bene. E proviamo ad aggiornare i nostri dati. 178 00:11:01,300 --> 00:11:03,515 ‫E quello che farò è 179 00:11:03,515 --> 00:11:07,570 ‫fondamentalmente tornare ai dati originali, rimuovere quel secondo nome e il 180 00:11:07,570 --> 00:11:10,580 ‫cognome da qui e ora salvare le impostazioni 181 00:11:11,620 --> 00:11:15,260 ‫ed eccoci qui, i dati sono stati aggiornati con successo. 182 00:11:15,260 --> 00:11:17,370 ‫Quindi, se ora ricarichiamo la pagina, 183 00:11:17,370 --> 00:11:20,520 ‫fondamentalmente recupereremo quei dati dal server e quindi se 184 00:11:20,520 --> 00:11:22,880 ‫è lo stesso, significa che i dati 185 00:11:22,880 --> 00:11:24,763 ‫sono stati effettivamente persistenti. 186 00:11:25,630 --> 00:11:28,680 ‫Quindi, ricarica e ci siamo. 187 00:11:28,680 --> 00:11:31,370 ‫Quindi, fantastico. In realtà ha funzionato. 188 00:11:31,370 --> 00:11:33,270 ‫Andiamo su un'altra pagina 189 00:11:33,270 --> 00:11:36,102 ‫qui e torniamo indietro solo per essere 190 00:11:36,102 --> 00:11:38,920 ‫davvero sicuri, ma in effetti ha funzionato. 191 00:11:38,920 --> 00:11:41,233 ‫E ora, proviamo uno di questi errori. 192 00:11:42,920 --> 00:11:46,090 ‫Va bene, e questo dovrebbe attivare un indirizzo email sbagliato 193 00:11:47,540 --> 00:11:50,190 ‫e così sembra molto più carino, giusto così 194 00:11:50,190 --> 00:11:51,960 ‫ci dà questo messaggio di 195 00:11:51,960 --> 00:11:54,634 ‫errore, che potremmo ovviamente formattare un po' meglio 196 00:11:54,634 --> 00:11:56,203 ‫per farlo sembrare migliore. 197 00:11:58,140 --> 00:12:00,730 ‫Ma penso che in questo modo vada 198 00:12:00,730 --> 00:12:03,080 ‫perfettamente bene per questa piccola applicazione. 199 00:12:03,080 --> 00:12:04,760 ‫E potremmo fare ogni genere 200 00:12:04,760 --> 00:12:08,600 ‫di cose come segnare questo campo qui in rosso o qualcosa del genere. 201 00:12:08,600 --> 00:12:10,830 ‫Ma per questo tipo di cose 202 00:12:10,830 --> 00:12:15,020 ‫probabilmente staresti meglio usando un vero e proprio framework front-end come 203 00:12:15,020 --> 00:12:16,791 ‫React o View. 204 00:12:16,791 --> 00:12:20,310 ‫Comunque questo modulo ora funziona qui tranne l'immagine, che di 205 00:12:20,310 --> 00:12:22,480 ‫nuovo faremo nella prossima sezione, quindi 206 00:12:22,480 --> 00:12:24,610 ‫tutto ciò che resta da 207 00:12:24,610 --> 00:12:29,233 ‫fare ora è aggiornare la password in modo che lo faremo nel prossimo video.