Bene, torna in questo video e inizieremo con l'applicazione del campo Yelp su cui lavoreremo
per il resto del corso.
Inizieremo con l'impostazione di base in corso.
Ottenere l'app Express e avere i nostri primi percorsi e modelli.
Ma prima di parlare di questo, voglio solo spiegare il flusso di lavoro qui e
come funzionerà mentre aggiungiamo continuamente funzionalità diverse.
Voglio che tu sia in grado di vedere il codice in qualsiasi momento, non voglio che tu veda la soluzione finale.
Quindi quello che ho intenzione di fare è lavorare in diverse cartelle.
Quindi ho una directory del campo dei guai e poi, invece del campo di Yelp, aggiungerò versioni diverse.
Quindi non devi farlo.
Sarai in grado di aggiungere continuamente a una versione te stesso se vuoi seguire e
realizzare versioni diverse.
Indico sempre la versione in cui ci troviamo, ma l'obiettivo è che, se vuoi che ripensi a
ciò che ho aggiunto tra la versione 2 e la versione 3, puoi aprire le directory della versione 2 e della
versione 3 e confrontarle.
OK ora che è fuori mano iniziamo qui.
Quello che andremo a fare è impostare l'app di base che installerà Express e ogni sì, otterremo la
directory delle visualizzazioni e quindi aggiungeremo due percorsi diversi.
Quindi avremo una home page in pratica come un benvenuto al campo di Yelp.
Ecco una piccola descrizione di ciò che facciamo.
Ecco un pulsante di registrazione.
Ecco un link di contatto che in realtà non funzionerà ancora.
E poi da lì andremo a creare la pagina dei campeggi che sarà la pagina principale della nostra
app che elencherà tutti i campeggi nel nostro database e non abbiamo ancora un database.
Quindi sarà solo una serie di campeggi proprio come abbiamo fatto nell'ultimo video con gli amici in cui
avevamo una schiera di amici.
Molto presto migreremo ad un nuovo database per ora un campeggio avrà solo
due informazioni diverse.
Entro la fine del campo del corso ci saranno da 10 a 15 pezzi diversi, ma per
ora è solo un nome come il salmone o il punto Dewey o qualunque sia il nome del nostro campeggio
e poi avremo un'immagine che possiamo mostrare e l'immagine sarà solo aur l.
Quindi andiamo.
Inizierò eseguendo NPM al suo interno e poi premiamo invio qui e inseriremo di nuovo.
Chiameremo semplicemente la videocamera v1.
Farò apt come il mio punto di ingresso.
E noi andiamo.
Autore e premi invio.
Un'altra volta.
OK.
Ora eseguiamo NPM install Express e sì.
Dash dash save.
Non ti ho ancora mostrato questo, ma questo è un modo molto più
semplice se vuoi installare più pacchetti contemporaneamente li separi da uno spazio.
E se guardi lo stub del pacchetto Jason puoi vedere che ha SJS ed express.
Quindi ora creiamo l'app.
Sì e apri questo e dentro di qui aggiungi la nostra importazione express di base che dovresti essere abbastanza
confortevole con adesso richiede Express.
viene eseguita e poi salterà giù e farà l'opt out che anche tu dovresti essere abbastanza familiare con il processo now.
E poi la variabile app è uguale alla funzione express che
La porta Ian VI elabora l'IP EMV e il callback e
qui eseguirò un registro consolare che dice che il campo Yelp è stato avviato.
Facciamo il camp-server proprio così e salviamo.
E ora torniamo indietro e inizia aggiungendo la nostra pagina di destinazione.
E come la maggior parte delle applicazioni, la pagina di destinazione è sulla strada giusta.
e quindi inizieremo il server si assicura che
il server del campo sia stato avviato, quindi torniamo indietro e aggiorniamo sul nostro percorso.
Quindi aggiungiamo semplicemente un'app che diventa flash e inizieremo con una semplice redstart send per assicurarci che le cose funzionino correttamente e
invieremo solo questa sarà la pagina di destinazione a breve e salvi
OK.
E otteniamo la risposta che è tutto ciò che stiamo cercando.
Ora andiamo avanti e configuriamo i nostri modelli, quindi abbiamo bisogno di creare una directory di notizie
che crei viste di directory e faremo un modello chiamato atterraggio che ognuno di noi ha all'interno della directory delle viste.
Sì, ci siamo.
E poi apriremo l'uso di slash landing e inseriremo qui un markup molto semplice.
Landing Page e poi fatto qui possiamo mettere un paragrafo.
Benvenuto nel campo di Oprah.
E ovviamente questo sarà tutto cambiato e sarà modellato in modo molto diverso entro la fine del corso.
Ma per ora vogliamo solo assicurarci che le cose stiano funzionando.
Quindi torniamo all'APT.
Sì.
E la prima cosa che faremo è cambiarla in modo che sia un atterraggio per il resto e lasceremo il
punto.
Sì.
E per farlo ho bisogno di aggiungere nel motore di visualizzazione set app per essere J. S. E poi non dobbiamo scrivere.
E. J. come qui e salveremo il riavvio del server.
James si aggiorna e otteniamo il modello della pagina di destinazione.
Grande.
Quindi lavoriamo sul percorso del campeggio.
Quindi avremo un'app per ottenere e il tuo
auroral dovrebbe essere un campo da campeggio e questo dovrebbe mostrare tutti i campeggi che abbiamo adesso che non abbiamo nulla.
Ma tra poco ci saranno richieste e risposte come queste.
E poi abbiamo bisogno di definire l'array dei campeggi che ricordano solo un array temporaneamente.
Il prossimo grande cambiamento che farai è di aggiungere un database e di avere i nostri campeggi salvati
nel database per ora è un array e ogni campeggio ha un nome e un'immagine.
Quindi assomiglierà a questo.
Oppure abbiamo una matrice e quindi ogni elemento nella matrice è un oggetto.
E ognuno ha un nome e poi diciamo solo che il nome è Salmon Creek da qualche
parte dove sono andato recentemente in campeggio e poi l'immagine e poi sarà un URL di un'immagine come HTP qualunque sia l'immagine di GWW.
Eccoci.
E poi avremo una serie di questi.
Quindi potremmo avere 10 diversi campeggi 100 entro la fine del corso.
Ognuno di loro ha un nome e un'immagine e alla fine avranno
caratteristiche come la latitudine e la longitudine della città e la stagionalità
della capacità dello stato di tutti questi diversi attributi, ma stiamo iniziando un nome e un'immagine semplici.
Torniamo ad Apter Sì.
uguale a un array.
E quello che faremo è trovare quell'array e possiamo iniziare semplicemente facendolo qui fin qui lo chiameremo campeggi
E poi all'interno della matrice e semplicemente
formattare questo un po 'meglio mentre andiamo all'interno della matrice avremo alcuni oggetti di partenza.
E il primo avrà un nome e io andrò con Semon Creek.
Puoi semplicemente inventare qualcosa e avere un'immagine e tornerò a riempire le immagini.
E poi il prossimo lo farà fare un altro
sito che chiameremo per la collina dei Graniti e poi un'altra pattuglia chiamata capro delle capre di montagna.
Tutto ok.
Quindi tre campeggi tre nomi completamente romanzati e per immagini.
In realtà userò alcune foto creative commons solo per evitare problemi.
Questi non corrisponderanno a nessuno dei campeggi che
ho visitato ma selezionerò solo alcune immagini qui.
Andiamo con questo per iniziare.
Quindi copierò l'immagine o tornerò qui e saranno le capre di montagna a riposare.
Perchè no.
E poi torneremo di nuovo e prenderò questo qui.
Copia lui in RL e questo sarà Salmon Creek.
E poi ne abbiamo bisogno ancora uno e prenderò solo questo.
Ovviamente questo non è proprio un campeggio, ma non è questo il punto.
Ti incoraggio a utilizzare i nomi di un vero campeggio nelle immagini dei campeggi reali se ti interessa.
Se no, se odi il campeggio che è qualcosa a cui pensavo,
temevo che questo potesse alienare alcune persone, ma se odi il
campeggio, immagino che sia comprensibile, potresti facilmente cambiare questa applicazione in qualcos'altro.
variabili che noi abbiamo.
Una volta terminato, potresti trasformare in un'applicazione per eventi l'applicazione di un party in un sito di recensioni di ristoranti, ma ti consiglio di aspettare fino
alla fine del corso per farlo in modo da non confonderti con le denominazioni e le diverse
Campeggi di oggi Per ora campeggio falso
di oggi e farà risparmiare assicurarsi che aggiungiamo o virgole tra i diversi elementi nella matrice.
Eccoci e inizieremo con il
rendering di un modello redstart render e si chiamerà campgrounds e non passeremo ancora i dati.
Ci assicureremo che il modello funzioni correttamente.
Ora abbiamo bisogno di fermare il server a sfiorare un nuovo file viste slash che il campeggio aumenta E. J. lo apriremo.
noi e poi
È così e qui aggiungeremo un H1.
Questa è la pagina del campeggio e salva
e assicuriamoci di vedere quella pagina quando avvieremo il server, possiamo aggiornarci e andiamo a tagliare i campeggi e ci arriveremo.
Questa è la pagina dei campeggi.
E mentre siamo qui sarebbe bello aggiungere alcuni battiti di ciglia.
e devi andare al modello di prestito
e in fondo a un tag ancorato all'attributo ref e l'ATF deve essere Slash campeggio.
Quindi aggiungo un link alla pagina di destinazione che dice Visualizza tutti i campeggi e per farlo
E ti dirò che tutti
i campeggi e risparmi riavvia la vista di aggiornamento del server dei campeggi ora ci porta alla pagina del campeggio.
Va bene, ora andiamo e assicurati
di passare i dati attraverso il nostro campeggio al resto della chiamata di rendering e quindi possiamo scorrere tutto
e visualizzare ogni immagine e ogni nome nel nostro modello inizierà andando ad aggiornarci e aggiungendo in questo secondo argomento qui
che è un oggetto di tutti i dati che vogliamo passare e passeremo nei campeggi sotto il nome di campeggi.
Quindi ricorda che questi sono i dati che stiamo passando e questo è il nome che vogliamo dargli.
Potremmo chiamare ciò che volevamo, ma è comune vederli nominare la stessa cosa.
Così salveremo ora e torneremo al nostro
modello e inizieremo semplicemente a fare questo campeggio e se vediamo qualcosa sembrerà un oggetto oggetto.
Se l'abbiamo fatto correttamente, sappiamo che abbiamo passato
i dati attraverso il riavvio del server o l'aggiornamento di Rigaud di un array con tre oggetti all'interno.
Quindi ora passiamo in rassegna e visualizziamo ciascun titolo o nome e immagine.
Quindi terrò qui queste parentesi, ma mi sbarazzerò del segno di uguale e ne faremo una per ciascuna.
poi quaggiù abbiamo bisogno di allegare questo anche a ciascuno di noi.
Quindi questo sarà un campeggio per ognuno e poi passerà in quella funzione anonima il callback e lo chiameremo campeggio e faremo clic
su entra qui e poi dobbiamo tornare indietro e assicurarci di aggiungere la chiusura corretta. parentesi e
OK.
In questo modo
dovremmo passare attraverso i campeggi e poi cosa vogliamo fare per ognuno di essi, per prima cosa visualizzeremo il nome.
Quindi inizieremo con un alleato.
Perchè no.
E faremo il nostro E. J. facile vedere cosa sta succedendo.
s con il segno di uguale e tutti creano uno spazio in modo che sia un po 'più
E stiamo andando a mostrarci all'interno del campeggio Y.
Dot name e salva tutto lo spazio che è fuori.
Ora cariciamo la pagina e aggiorniamo questo e otteniamo tre nomi di campeggi.
L'ultima cosa che voglio fare è assicurarsi di mostrare le immagini.
Quindi torneremo qui e piuttosto che
un alleato cambiamo questo in modo che abbiamo un tag div per ogni campeggio.
E nel tag div verrà visualizzata una h.
Facciamo un 4 con il nome del campeggio e poi sotto verrà inserito un tag immagine.
E quello che dobbiamo fare è dare all'immagine una fonte e dentro le virgolette
piuttosto che una cosa come questa, qualunque cosa tu sia ELAS, metti
l'immagine dal campeggio e non possiamo semplicemente fare quell'immagine al campeggio.
Abbiamo bisogno di quegli Ejay come parentesi.
Quindi dobbiamo farlo all'interno delle virgolette
che all'inizio sono un po 'confuse per alcuni dei miei studenti, perché il campeggio quell'immagine è già una stringa.
nel modello, quelle citazioni non arrivano.
E puoi vedere qui, ma ricorda che quando prendiamo questo e lo aggiungiamo
È appena aggiunto come testo.
Quindi sembrerebbe che questo colon HTP tagli qualunque cosa abbiamo bisogno di virgolette attorno ad esso.
Quindi dobbiamo assicurarci di aggiungere i tag Ejaz all'interno delle virgolette proprio così.
OK.
Quindi quello che vogliamo fare è l'immagine del campeggio, assicurati di usare l'immagine.
Eccoci.
Io sono A-G e abbiamo scritto qui esattamente nello stesso modo e farò ripartire il server.
Torniamo indietro e aggiorniamo la pagina e otteniamo i tre campeggi con le tre immagini.
Va bene, grande
Quindi questo è tutto quello che voglio fare in questo video è stato ottenere la struttura di base impostata dei nostri due percorsi.
Torniamo indietro per assicurarci di fare tutte le cose che abbiamo deciso di fare.
Quindi alla pagina di destinazione sì, l'abbiamo fatto nella pagina del campeggio che elenca tutti i campeggi.
Abbiamo anche fatto in modo che ogni campeggio avesse un nome e un'immagine.
Tutto ok