MARK COLVIN Va bene ragazzi, quindi dovreste essere abbastanza familiari nell'impostare nuovi progetti usando Node
ed esprimere ormai.
Quindi voglio impostarti questo come una sfida e proprio ora sullo schermo vedresti una lista di controllo di una serie
di cose che devi fare per impostare questo progetto.
E voglio che tu metta in pausa il video e provi a fare tutte quelle cose in modo da arrivare al punto in cui
siamo pronti per andare e possiamo iniziare a programmare il nostro modulo di iscrizione.
Quindi buona fortuna e ci vediamo presto.
Tutto ok.
Quindi spero che sia andato tutto bene.
Ripeteremo questi passaggi ogni volta che creiamo un nuovo progetto ed è abbastanza semplice una volta che
ci si abitua.
Quindi prima di tutto cambieremo la directory in una posizione in cui vogliamo
creare il nostro nuovo progetto e la chiameremo iscrizione alla newsletter.
E ora che abbiamo creato questa nuova directory, andiamo a vedere ad essa e all'interno creeremo i nostri nuovi file
e il file che stiamo per scrivere è il codice lato server in verrà chiamato punto app J
. S..
Ora in molti GST e soprattutto in nessun progetto GST che usano Express vedrai che il loro file server
principale si chiama Abdul Jess.
Ora in realtà dipende completamente da te come vuoi chiamarlo, ma questo è qualcosa
che vedrai anche in natura se non vuoi creare ognuno di questi file individualmente scrivendo tocca questo file tocca quel file
che puoi in realtà li unisci semplicemente usando il tocco una volta e poi puoi aggiungere tutti i
nomi di tutti i file che vuoi creare in una volta sola.
Quindi, per esempio, dobbiamo creare l'iscrizione Don ogni Timo, così come il successo, avviare ogni e-mail e anche il
punto mancante ogni G. M. avendo tutti e tre i file con una sola spaziatura tra di loro.
Quando premo invio puoi vedere che tutti e tre vengono creati contemporaneamente.
Quindi la riga di comando è super potente ed è qui per essere tuo amico.
Quindi la prossima cosa da fare è creare R NPM per inizializzare NPM.
E continuerò a queste opzioni standard semplicemente premendo invio.
E finalmente andrò a premere invio per creare il nostro pacchetto Don.
Jason Quindi ora che possiamo andare avanti e installare i nostri moduli NPM e di nuovo, proprio come ho fatto con il comando
touch, installerò un numero di moduli contemporaneamente, quindi aggiungi tutti i loro nomi e poi includerò un spazio
in mezzo in modo che possiamo installarli tutti allo stesso tempo in modo che quelli di cui
ho bisogno sono il parser del corpo Express e richiesta.
Quindi ora premi invio e lasceremo quel download in background.
Tutto ok.
Quindi ora che abbiamo fatto apriamo il nostro progetto in Atom e andiamo nel nostro app dock G. S. e richiedono quei moduli che
abbiamo appena installato.
Quindi il primo è stato espresso dopo è stato il parser per il corpo.
E finalmente abbiamo il nostro pacchetto di richiesta.
E lasciami solo aggiungere quel commento in modo che RJ J. S. hin non sta impazzendo con noi.
Tutto ok.
Ora che abbiamo fatto tutto ciò, l'ultima cosa da fare è configurare il nostro server per l'ascolto sulla porta
tremila.
Quindi, per prima cosa dobbiamo creare la costante della nostra app e questo equivale a una nuova istanza di Express.
E ora possiamo usare quell'app per ascoltare sulla porta tremila.
E una volta che la porta è stata configurata e pronta per andare, registreremo che il nostro server è in esecuzione sulla porta
tremila.
Va bene.
Questo è tutto.
Questo è tutto ciò che devi fare per creare un nuovo progetto.
E mentre procedi con la creazione di nuovi progetti, questo processo diventerà molto presto una seconda natura.
Ora che abbiamo fatto tutto ciò, la prossima cosa che dobbiamo fare è creare ogni pagina con
un modulo di iscrizione.
Quindi, dove possiamo ottenere uno di quelli in fretta.
Bene, è tempo di iniziare a mettere insieme alcune delle diverse cose che abbiamo imparato in questo corso.
Se ricordi nel modulo bootstrap abbiamo parlato di come bootstrap può ridurre i tempi di sviluppo e rendere
il nostro sito web davvero bello.
Quindi andiamo a prendere bootstrap dot com e passiamo a quella sezione di esempio.
Quindi qui hanno un sacco di esempi che ti consentono di avviare rapidamente un progetto ed è esattamente
quello che faremo.
Quindi, se scorri verso il basso, vedrai che ci sono alcune forme complesse che non sono ciò che vogliamo,
ma ci sono anche alcune forme semplici e questo è esattamente quello che useremo.
Quindi fai clic con il pulsante destro del mouse su questo sito Web e visualizzeremo l'origine della sua pagina,
quindi selezioneremo tutto questo e quindi lo incolliamo nel nostro punto di registrazione ogni e-mail.
Quindi ora se fai clic destro su questo e copi il percorso completo, puoi vedere che la nostra pagina non assomiglia a
quella che avevano qui.
Ora perché è quello.
Bene, la prima cosa che noti è che questo non sembra affatto un bootstrap.
I fondi non sono bootstrap i pulsanti non sembrano libri bootstrap.
Quindi non abbiamo abilitato bootstrap nel nostro sito web.
E perché è quello.
Bene, se dai un'occhiata alla sezione in cui si dice che il bootstrap core CSX Beh, in realtà hanno
capito che include il mooting come file locale e quel file che non abbiamo attualmente.
Quindi, andiamo su Internet e prendiamo la mediana dei bootstrap in modo che possiamo anche incorporare
bootstrap nel nostro sito Web.
Copierò solo questo intero link e sostituirò questa riga con quella.
Quindi ora andiamo avanti e aggiorna il nostro sito Web e puoi vedere che abbiamo molti elementi
bootstrap che sono stati abilitati.
I fondi sono ora di sabbia e sembrano un po 'più belli.
L'unico problema è che ancora non si assomigliano.
Giusto.
E il motivo è che se diamo un'occhiata alla fonte oltre al corso bootstrap delle
SS hanno anche un foglio di stile personalizzato per questo modello e puoi trovare questo modello
seguendo questo link.
Aha.
Quindi hanno un CSX personalizzato qui.
Bene, andiamo avanti e strappiamo anche quello in modo da poterlo inserire nel nostro sito Web.
Ora uso questi termini come fregare e rubare, ma in realtà è un ottimo bootstrap che ti consente di
farlo e ha impostato tutto questo in modo che possiamo accelerare i nostri tempi di sviluppo e semplificarci la creazione
di bellissimi siti web.
Quindi, all'interno della nostra newsletter, creerò un nuovo file chiamato styles dot CSX e
incollerò tutto quel CSF in lui.
E come al solito cambieremo il nostro riferimento link per fare riferimento a quel CSX che era chiamato CSX punto Stiles.
Quindi ora, quando aggiorniamo il nostro sito Web, puoi vedere che ci stiamo avvicinando
abbastanza all'aspetto desiderato.
Ora tutto ciò che dobbiamo fare è solo modificare le parole, gli input e i pulsanti per adattarli al nostro progetto.
Quindi all'interno del nostro punto di iscrizione ogni e-mail cambieremo il nostro titolo da segno e
modello per bootstrap che sembra che ovviamente l'abbiamo portato da qualche parte alla nostra newsletter iscrivendoci ora è questa immagine che è
il logo del marchio bootstrap che sembra Questo.
E invece includeremo la nostra immagine personalizzata.
Quindi ho intenzione di creare una cartella di immagini e all'interno di questa cartella di immagini ho intenzione di rilasciare un'immagine
che ho che si chiama Lab logo dot in sospeso.
Ora sentiti libero di aggiungere qualsiasi immagine desideri per il tuo sito Web di newsletter perché dopo tutto questo
riguarda il tuo sito Web.
Quindi ora posso sostituire questa fonte da questo indirizzo HDP due immagini slash lab logo dot PMG.
Questa è un'immagine chiamata lampada PMG di basso grado all'interno di una cartella chiamata images e corrisponde a ciò che
abbiamo qui.
Quindi premi Salva e controlliamo per assicurarci che appaia bene.
Sembra abbastanza buono.
Ora cambiamo alcuni di questi frammenti di testo invece di accedere, diciamo, iscriviamoci alla mia newsletter e invece di avere un indirizzo e-mail e
una password ciò che in realtà voglio tutti e tre i campi di input il nome
il cognome e la loro e-mail indirizzo perché non stiamo eseguendo l'accesso a nessuno.
Li stiamo registrando, quindi aggiungerò un altro input e cancellerò queste etichette perché attualmente
gli unici quattro screen reader e cancellerò anche la nostra casella di controllo che dice Ricordami
che non bisogno.
Quindi andiamo avanti e aggiungiamo un nuovo input.
Quindi ora ne abbiamo tre e il primo il tipo sarà solo un semplice
input di testo e il segnaposto sarà il nome.
Il secondo sarà di nuovo il tipo di testo e il segnaposto sarà il cognome.
Ora non abbiamo bisogno di un I. D. per i nostri input, quindi lo eliminerò.
E infine l'ultimo sarà digitare e-mail.
E il segnaposto dirà che sono necessarie e-mail o tre di queste.
E il primo si concentra automaticamente quando cariciamo il nostro sito Web.
Ciò significa che ha quel punto culminante blu intorno ad esso.
E ovviamente invece di dire accesso dovremmo dire registrati o registrati e l'imposta sul copyright quaggiù
cambierò per dire il birrificio per app o qualsiasi azienda o il tuo nome, se lo desideri.
Quindi, ora che siamo soddisfatti del nostro testo e delle nostre immagini, la prossima cosa da risolvere sono queste caselle di input.
Puoi vederlo nelle loro caselle di input.
Sembrano tutti molto uniti.
Giusto.
E questo perché il raggio dell'angolo viene applicato solo in alto a sinistra e a destra per il primo input e poi
in basso a sinistra e a destra ottiene un angolo arrotondato sul secondo input e possiamo vedere che quando andiamo
nelle stelle è la SS Puoi vedi che stanno prendendo di mira l'input che ha il tipo e-mail
e l'input che ha il tipo password per applicare anche queste cose.
Ora non abbiamo più un input con un tipo di password.
Quindi cambierò questo in punto in alto e in fondo e invaderò anche un'altra classe
chiamata Dot middle.
Quindi ora possiamo andare oltre e applicare quelle classi ai nostri input.
Quindi questo avrà una classe di vertice e questo sarà di mezzo.
E questo sarà in fondo.
Quindi ora se diamo un'occhiata alla pagina della newsletter renderizzata, allora puoi vedere che abbiamo gli angoli arrotondati
per la parte superiore e inferiore piuttosto belli.
Ora è solo quello di mezzo.
In realtà non ha bisogno di alcun arrotondamento degli angoli, quindi possiamo andare avanti e aggiungere il raggio del bordo a
zero.
Ciò significa che non ha più bordi curvi.
E l'ultima cosa che puoi sistemare se hai vinto è che quest'ultimo aspetto appare un po 'più pesante in termini
di ombra.
E questo perché abbiamo bisogno di un margine inferiore di meno 1 pixel solo per tirarlo su un po '.
E ora sembra perfetto.
Quindi, come puoi vedere in questo momento, accedo a questo sito Web come una pagina statica.
Ora non è più così che facciamo le cose quando abbiamo un server.
Ma affinché funzioni, devi impostare il metodo get per la nostra corsa a casa.
E devi anche assicurarti che ci siano due S in Express.
Quindi, come sfida, desidero che tu imposti il percorso di accesso alla nostra pagina di iscrizione in modo da poterlo testare
sul browser presso l'host locale 3000.000 di mettere in pausa il video e ricordare a te stesso cosa abbiamo fatto nelle lezioni
precedenti per ottenere il nostro app installata e in esecuzione
utilizzando il server OK, quindi questo non dovrebbe essere troppo difficile come abbiamo già fatto alcune volte.
La prima cosa da fare è dire che Abdullah riceverà e quindi specificheremo il percorso e
in questo caso useremo il percorso principale in modo che quando le persone accedono alla nostra home page vedano
per primi il nostro iscrizione alla newsletter quindi aggiungeremo la nostra funzione di callback con rec e rest ed è firmato
qui possiamo specificare che la nostra risposta è di inviare il file che si trova nella posizione del nome della nostra directory del file corrente più
la registrazione della stringa punto ogni T. M ..
Quindi ora quando richiediamo la rotta principale dal nostro server, allora dovrebbe consegnare il file con quel nome
di directory che qualcosa come il desktop per il suo grande trattino per newsletter iscriviti alla barra in avanti iscriviti punto
ogni squadra.
Vediamo se ha funzionato eseguendo il nostro server con node man.
E useremo l'app G. S. per girare il nostro server è in esecuzione sulla porta tremila.
Quindi andiamo all'host locale tremila e puoi vedere che al momento qualcosa non è del tutto corretto: le
modifiche al testo sono state replicate ma le immagini sono sparite e RC SS sembra essere sparito.
Allora perché?
Bene, se dai un'occhiata all'interno di questo sito Web, otteniamo il foglio di stile bootstrap da una posizione remota.
Ma il nostro foglio di stile personalizzato è locale.
Quindi questa è fondamentalmente una pagina statica nel nostro file system locale che stiamo cercando di recuperare.
Ed è esattamente la stessa storia con le nostre immagini.
Affinché il nostro server offra file statici come ISIS e immagini, dobbiamo usare una funzione
speciale di Express.
E questo è qualcosa che si chiama statico.
Quindi dobbiamo dire che l'app non usa Express dot static e tra parentesi aggiungeremo il nome di una
cartella che manterremo come nostra cartella statica.
E lo chiamerò pubblico.
Quindi ora nella mia iscrizione alla newsletter creerò una nuova cartella chiamata public e all'interno di questa cartella aggiungerò
una nuova cartella chiamata CFS e inserirò il punto SS del mio stile al suo interno.
Ora trascinerò anche le mie immagini in modo che sia anche nella nostra cartella pubblica.
E ora ho tutti i miei file statici in un posto sotto un nome di cartella particolare.
E usando l'uso per adulti Express statico che fornisce il percorso di r file statici, dovremmo essere in grado di fare riferimento a questi file
statici da una U relativa. R. L. e quello è relativo alla cartella pubblica.
Quindi immagina di essere attualmente nella cartella pubblica per accedere al nostro foglio di stile.
Dobbiamo andare agli stili di barra CSX punto CSX ora per le immagini.
È esattamente lo stesso nella cartella delle immagini per lab logo dot P G.
Quindi premi Salva e aggiorna e puoi vedere che tutti questi file statici CSX e le immagini sono ora
in grado di essere resi tutti grazie a questa riga di codice che specifica una cartella statica in
cui abbiamo tutti quei file ora che siamo riusciti a servire il nostro sito web usando il nostro server.
La prossima sfida per te è programmare il post percorso e useremo il parser del corpo per prendere i
dati dal modulo di iscrizione e li consoleremo dal nostro server.
Quindi metti in pausa il video e vedi se riesci a capire come farlo bene.
Quindi, al fine di creare la siccità post, andremo a dire apt up post
e mireremo di nuovo alla rotta di casa, quindi è il momento del nostro callback e all'interno del callback proveremo
a registrare alcuni di quelli cose che l'utente ha inserito nell'input per farlo.
Ricorda che dobbiamo usare il parser per il corpo.
E l'abbiamo già richiesto, ma dobbiamo dire alla nostra app di usarlo.
Quindi devi dire che l'app non usa il parser del corpo e più specificamente il metodo You are encoded
of body parser.
E stiamo andando a impostare su true come al solito.
Quindi quando inizi un nuovo progetto è praticamente inevitabile che tu usi Express e body parser.
Quindi alcune persone trovano che sia più semplice conservare una copia di tutto questo da qualche parte
e incollarlo per ogni singolo nuovo progetto.
Ora preferisco scrivere tutto perché da un lato questo ti darà più pratica nella programmazione.
E in secondo luogo a volte le cose cambiano.
E se non lo scrivi non sei sempre consapevole di ciò che hai messo lì.
Questo può portare a crash imprevisti.
Tutto ok.
Quindi ora che abbiamo impostato il parser del corpo per essere utilizzato dalla nostra app, la prossima cosa da fare è estrarre i valori
di quelle cose all'interno del nostro modulo.
Quindi creiamo una variabile chiamata first name e imposteremo quella uguale al nome del punto del
corpo del dump della richiesta dell'input.
Quindi per il primo input gli daremo un nome di f name e per il nostro secondo input
lo chiameremo l name.
E per il nostro ultimo che lo chiamerà e-mail ora che abbiamo impostato tutti quei nomi, possiamo recuperare i valori
facendo riferimento ad esso all'interno di un parser del corpo.
Quindi il punto richiesta punto corpo f nome dovrebbe essere uguale al nostro nome e il nostro cognome dovrebbe essere uguale
a richiedere punto corpo l nome.
E infine l'e-mail dovrebbe essere richiesta e-mail di stop body dot.
Quindi proviamo a registrare alcuni di questi valori, nome, cognome ed e-mail.
Facciamo clic su Salva e aggiorna e inseriamo alcuni valori qui.
Quindi il modulo è stato inviato ma non abbiamo attivato alcuna dichiarazione del registro.
Cosa sta succedendo qui.
Bene, se dai un'occhiata all'interno del nostro punto di iscrizione ogni T. M. puoi vedere che al momento
il modulo non ha azioni specificate.
Quindi, al fine di presentare una richiesta di post, dobbiamo prima specificare il metodo come post.
E dobbiamo anche specificare l'azione che è la posizione a cui invieremo la nostra richiesta di posta
a cui sarà la rotta principale.
Ciò garantisce che quando si fa clic sul pulsante Invia, le informazioni qui contenute vengono pubblicate in questa posizione in modo che il
nostro server possa quindi raccoglierle in questo percorso che è stato pianificato.
Quindi ora se proviamo di
nuovo puoi vedere che tutto ciò viene registrato nella nostra console in modo che il nostro codice di postura del corpo
funzioni e il nostro modulo di iscrizione sia in grado di inviare i dati negli input al nostro turno di casa utilizzando una richiesta di posta.
Quindi ora abbiamo fatto tutto il lavoro di preparazione per impostare la nostra pagina di iscrizione e ottenere i dati
all'interno degli input.
Ora nella prossima lezione configureremo la nostra pagina Web con l'API MailChimp per iniziare a inviare questi
dati ai loro server per tutto ciò e vedremo nella prossima lezione.