Nelle ultime lezioni abbiamo fatto la parte difficile che è quella di recuperare i dati in tempo reale
dall'API della mappa meteorologica aperta e quindi ottenere quei dati formattati e inseriti nel nostro sito Web.
In questo modo, ma è un po 'noioso se mostra solo il tempo per Londra giusto.
Questo non è molto di un sito Web.
E se potessimo convincere l'utente a digitare la città a cui sono interessati e quindi sostituiremo
semplicemente questa query con qualsiasi città desiderino.
Quindi, come forse Parigi, potremmo dire bene che al momento Parigi ha nuvole sparse ed ha circa
la stessa temperatura, ma ovviamente dovremo cambiare questo e dovremo aggiungere una
sorta di input per consentire all'utente di farlo invece di avere un'intera stringa lunga qui.
Ho intenzione di abbattere ciascuna delle parti del nostro tu sei regno.
Quindi creerò un concetto chiamato query e imposterò quella stessa Londra almeno
per ora e poi eliminerò questa parte qui e la sostituirò con la query ora.
Inoltre, eliminerò anche la mia app I. D. E lo salverò anche
come concetto separato e chiamerò quella chiave API e la salveremo con questi due nomi.
E poi posso sostituirlo con la mia chiave API.
E infine ho intenzione di eliminare le unità e aggiungerle alla fine, quindi
ora tutto ciò che dobbiamo fare per modificare i dati che riceviamo è aggiornare questa query.
Quindi, come possiamo farlo.
Come lo aggiorniamo.
Bene, se andiamo nel nostro indice ogni e-mail che al momento è completamente vuota, possiamo
iniziare creando un modello HMO e il nostro titolo verrà chiamato la nostra app meteo e all'interno del corpo.
Tutto quello che farò è aggiungere un input di testo.
Quindi questo sarà un input di tipo text e avrà un nome che si chiama il nome della città.
E non avrà alcun valore al momento.
Ora oltre a un input voglio anche avere un'etichetta ed è l'etichetta per questo input particolare.
Quindi diamo un I. D. e chiamiamo I. D. input della città e inseriamo anche input della città qui.
Ora la nostra etichetta dirà il nome della città chiamata hit save.
E ora vogliamo essere in grado di rendere questo indice o A. T. M. quando l'utente chiama abduct arriva alla
radice.
Quindi, invece di tutto questo, lo taglierò e lo incolterò qui e per ora mi limiterò a
mettere in comune questo codice.
Ora il nostro sito Web è di nuovo abbastanza semplice e all'interno della nostra app non capisco che proverò a inviare
questo indice di file pensando a HMO sul browser.
Chiamerò il file di invio di Red Dot e poi prenderò il nome della directory e
aggiungerò il punto dell'indice slash in avanti HCM.
E spero che quando aggiorno il mio sito Web ora verrà visualizzato quel sito Web.
Mostrerà la mia etichetta e il mio contributo.
Quindi ora che sono libero di digitare quello che voglio qui ho bisogno di un modo per inviare quei dati nel modo giusto.
Quindi ho bisogno di un pulsante anche qui.
Quindi aggiungiamo un pulsante e il tipo di pulsante sarà un pulsante di invio.
Ora questo pulsante non ha davvero bisogno di un nome ma ciò di cui ha bisogno è un po 'di testo.
Quindi chiameremo semplicemente questo.
E se avvolgo tutto questo all'interno di un modulo, sarò in grado di creare una richiesta di post quando
l'utente preme questo pulsante e quella richiesta di post è pronta qui
nel metodo ma l'azione andrà effettivamente alla nostra radice root o form invierà una richiesta di post a questa
radice sul nostro server e dovremmo prenderla usando l'app dot post quindi specificando la radice root che
è quella che abbiamo detto che avremmo incontrato nel nostro modulo e quindi creare la
nostra funzione con il nostro req e Reds all'interno che registrerà la posta ricevuta.
Quindi ora aggiorniamo il nostro sito Web, possiamo vedere la nostra etichetta il nostro input e il nostro pulsante di invio.
Vorrei solo scrivere la parola Londra qui, fare clic su Vai, quindi accedere al nostro hyper terminal e possiamo vedere le richieste
di posta ricevute.
Quindi ha raggiunto il nostro percorso postale ed è per questo che lo stiamo registrando.
Ma per ottenere effettivamente il testo digitato dall'utente nell'input, dobbiamo fare un po 'di più.
Dobbiamo effettivamente installare un altro pacchetto che abbiamo usato in precedenza.
Quindi sto usando il controllo C per uscire dal nodo uno in modo da
vedere di nuovo il mio prompt e userò NPM per installare body parser body dash parser e body parser è
il pacchetto che mi permetterà di esaminare il corpo della richiesta di post e recupera i dati
in base al nome del mio input che si chiama Nome città, quindi ora andiamo avanti e creiamo un parser di corpo di
codice costante che richiederà il body dash del modulo e quindi portiamo la nostra app a uso.
Postura del corpo e stiamo per impostare la tua codifica Rel per utilizzare l'impostazione estesa come vera dai moduli precedenti che abbiamo usato questo poche volte e questo
è solo il codice necessario per poter iniziare a passare attraverso
il corpo della richiesta di posta.
Ma una volta che abbiamo fatto tutto ciò invece di registrare la richiesta di post di registrazione della
console, possiamo fare un passo in più rispetto a quello che possiamo dire punto di richiesta punto corpo il nome dell'input che è il nome della città del codice e ora
dovremmo essere in grado di accedere alla console il testo inserito in quell'input, quindi eliminiamo il precedente hit del registro della console, salviamo,
riavviamo il nostro server senza richiesta rapimento J. S. e ora vai ad aggiornare il nostro
tipo di sito Web a Londra, vai vai e controlla il nostro hyper terminal e puoi vedere che ora stiamo ricevendo dati dalla
nostra richiesta di posta ora che abbiamo passato il corpo della richiesta che puoi vedere
ora come noi possiamo iniziare a usarlo come la nostra query, andiamo avanti e prendiamo tutto questo e incolliamolo nella nostra richiesta post
e quindi non comune usare la barra di inoltro dei comandi e invece di registrare la console sul nome della
città di body dot che stiamo per usare quello ovviamente come query.
Quindi, invece di avere London hardcoded, scriveremo il nome della città di body dot e ora possiamo cancellare
il nostro log della console.
Quindi ora se premiamo save torniamo al nostro aggiornamento del sito Web Digitiamo uno diverso
diciamo che tempo fa a Parigi e ora ci invia il tempo ma ovviamente dobbiamo modificare anche
questo testo.
Quindi quaggiù, dove si dice Londra, sbarazziamoci di questo e invece aggiungiamo la query qui.
Quindi torniamo indietro e controlliamo un posto diverso.
Vediamo che tempo fa a Bali.
Ecco qui.
La temperatura a Bali è abbastanza bella di 30 gradi ma al momento ci sono temporali.
Ed è quello che mostra anche la nostra immagine.
Quindi ora siamo in grado di ottenere dati dinamici in base a ciò che l'utente ha digitato nell'input.
Cattura quei dati nel nostro post per adulti e quindi utilizza quella query per strutturare la nostra U. R. L. e ottenere i
dati per quella particolare posizione.
Ora abbiamo visto tutti gli aspetti della nostra API in uso, inclusa l'autenticazione, inclusi i percorsi, comprese le query e siamo
stati in grado di trasmettere i dati Jason che otteniamo e di inviarli al browser utilizzando i
nostri moduli Express e Node.
Ora nella prossima lezione faremo un ulteriore passo avanti e costruiremo il nostro
progetto finale che è il nostro sito Web di raccolta e-mail di newsletter che sarà sostanzialmente una
landing page che puoi usare per raccogliere e-mail dell'utente.
Quindi tutto questo e altro vedrò nella prossima lezione.