OK, torneremo per i prossimi video.
Ci concentreremo sulla creazione dell'app blog che ho mostrato nell'ultimo video.
E ci vorranno alcuni video.
Andremo su un percorso alla volta a causa dell'importanza di questi percorsi riposanti in questo
primo video.
Ci concentreremo sull'indice e poi andremo in ordine.
Concentrati su nuovo e crea e quindi mostra modifica e aggiornamento.
l'interfaccia utente semantica, che è un'altra struttura simile al bootstrap per CSSA e Javascript.
E infine un video su destroy e insieme alla creazione dell'app e l'aggiunta nei sette percorsi di
cui abbiamo più bisogno introdurrà
Quindi, di nuovo negli ultimi che ho citato, perché davvero mi piace solo come sembra.
Questa è una delle ragioni, ma la cosa più importante è che voglio esporvi a un altro framework in modo
da poter vedere come sono simili le cose.
Forse starai pensando che sia una cattiva idea per me mostrarti un altro quadro per bombardarti di tutte queste
informazioni, ma la buona notizia è che le cose sono così simili.
inizi a vedere solo quanto hanno in comune e che è molto più che hanno in comune rispetto a loro.
Una volta che ne vedi due o tre,
Quindi, semanticamente, perché, ma inizieremo creando la nostra app.
Quindi sono all'interno di una directory chiamata instradamento tranquillo.
Se vuoi seguire, c'è già una soluzione.
Quindi, se vuoi fare riferimento a ciò, sentiti libero di farlo e se non vuoi passare attraverso la
creazione dell'app se non vuoi coprire l'indice nuovo e creare perché lo hai visto prima di poter
saltare avanti .
Ma ti consiglio di seguire tutti i percorsi insieme a me.
È davvero importante che ci arriviamo.
È davvero il pane e il burro delle nostre app express.
OK.
Quindi creeremo la nostra applicazione, la chiamerò semplicemente l'app del blog.
In realtà chiamiamolo app per blog riposante e poi CD e poi il nostro NPM preferito e in
effetti sì è il nostro punto di ingresso.
Grande.
Va bene.
OK.
Ora installiamo alcune cose di cui abbiamo bisogno per installare NPM e il primo ovviamente è express e
poi aggiungerà anche in mangusta.
E mentre siamo qui faremo il parser del corpo.
Quindi, questi tre trattini salvano come ricordo che il parser del corpo è come otteniamo i dati dal modulo che il modulo invia i dati nel
corpo della richiesta e quindi analizziamo il corpo della richiesta usando la persona del corpo.
Quindi sarebbe nel prossimo video.
Per ora stiamo solo facendo l'indice.
Quindi abbiamo creato questo set o in realtà sì.
Ora apriremo gli apparati e faremo il nostro standard top
del file dove richiediamo express express espresso e poi faremo app equals Express e aggiungeremo anche parser Vadi mentre siamo
qui perché richiedono un parser Dasch del corpo.
E alla fine faremo
la mangusta e mi piace pulire questo.
Mi piacerebbe ordinarli anche per lunghezza.
Quindi finiamo con parti del corpo o prima se seguiamo la mia convenzione.
Ma non è così importante, ma dì semplicemente no, mi piace farlo.
Le parti del corpo sono le prime e poi dopo abbiamo la mangusta e poi esprimere e poi a.
E questo è solo per allinearli di lunghezza e quindi possiamo indentare le cose se vogliamo davvero ma
non è il punto di questo video, quindi non passerò troppo tempo a farlo.
OK, lo abbiamo fatto ora.
Assicurati di ogni punto e virgola.
Avanti, dobbiamo preparare la mangusta.
Quindi sono il nostro modello di blog.
Si chiamerà blog avrà un titolo che avrà un'immagine di Arel e poi avremo semplicemente chiamato il corpo
che sarà il testo del blog il contenuto di quel post.
Quindi, titolo immagine e corpo e sono tutte stringhe e aggiungi anche qualcosa di nuovo che non hai visto,
che è una data così creata sarà una data.
Quindi è arrivato a questo.
E prima di poter fare tutto ciò, dobbiamo configurare mongoose. Quindi abbiamo bisogno del
nostro mongoose connect e ci collegheremo a Mongo divi Cole e slash
slash. L'host locale taglierà il nome della nostra app e la nostra app sarà chiamata blog restful.
E ancora non importa.
Lo stiamo creando per la prima volta.
Quindi, finché non lo cambiamo in futuro, si collegherà sempre a una camminata riposante alla prima volta.
Lo creerà.
OK.
E solo così non dovremo farlo più tardi.
Ma impostare il nostro motore di visualizzazione del set di dati per essere sì, che dobbiamo anche installare.
avvenga, facciamo un'app che esprima quella statica e la directory pubblica in modo da poter servire il nostro foglio di stile personalizzato.
E mentre aspettiamo che ciò
Quando arriviamo a questa semplice pratica da fare all'inizio di qualsiasi app Express e aggiungiamo anche un'app
non usiamo il parser del corpo che è il nostro parser del corpo.
Siete tutti codificati, vera chiamata estesa e vero tipo di boccone, ma queste tre linee possono essere copiate
anche da app preesistenti.
Quindi abbiamo impostato il tutto in fondo solo per assicurarsi che la nostra app Express funzioni.
Facciamo la lezione di opt-out in cui abbiamo process daddy nel processo di porta env dot IP e aggiungi callback Il server
di registro per adulti di Council è in esecuzione.
Tutto ok.
Proviamoci.
Nessun problema.
Grande.
Quindi ora lavoriamo su mangusta.
Quindi abbiamo la mangusta connessa.
Ora dobbiamo creare il nostro schema e il nostro modello.
Quindi inizieremo con lo schema.
Faremo solo uno schema log var equivale a una nuova mangusta con uno schema simile e per avere titolo che
è una stringa un'immagine che è una stringa un corpo che è anche una stringa.
E poi stiamo creando i nostri lanci di trucchi di dati.
E quello che possiamo fare è solo dire che non è così conveniente perché dovremo specificare manualmente
la data.
Non vogliamo utilizzare o digitare effettivamente la data.
Volevamo solo prendere la data corrente quando questo utente ha creato il post o creato il blog.
Prendi questa data in modo da poter impostare un valore predefinito su qualcosa di nuovo.
Specifichiamo il tipo data, ma poi specificiamo anche il punto predefinito.
Ora e questo funzionerà bene per noi.
E questo dice che creato dovrebbe essere una data e che ora ci sono dati di valore di default.
Quindi potremmo fare la stessa cosa anche per l'immagine se volessimo avere un'immagine di default.
Potremmo digitare string e quindi i valori di default se l'utente non ha inserito un'immagine.
Potremmo avere una stringa come immagine segnaposto e peg o qualcosa del genere ma non lo faremo ma potremmo
farlo facilmente se lo volessimo.
OK.
E un'ultima nota qui vedrai questo rientro a volte come questo.
È solo un oggetto quindi perché è breve.
Non ho intenzione di farlo.
Occupa troppo spazio o effettivamente sì.
Sarà ingombrato com'è.
Quindi lo lascio così.
OK corpo dell'immagine del titolo creato e quindi il passo successivo.
Sbarazzarsi di questi per ora è compilarlo in quel modello.
Finora blog è uguale a mongoose dot lo schema log del log del modello.
Eccoci.
Salvalo e aggiungo qui un commento che dice semplicemente configurazione del modello slash di mangusta.
Quassù aggiungerò un altro commento qui.
Si chiama app config e quindi aggiungeremo un commento qui route.
Chiamiamolo per Rex.
Quindi questo è il punto in cui andremo ora e aggiungeremo il nostro percorso di indicizzazione o il percorso di presentazione nuovo creare tutti e sette i rappresentanti.
E sì, questo file sarà un po 'disordinato.
Di nuovo sono un disco rotto su questo, ma lo suddivideremo in cose separate molto presto.
Ti mostrerò come possiamo avere file di modelli di file di modelli multipli su come possiamo avere i file
di percorso e possiamo avere file per la configurazione e per il middleware.
Un sacco di cose diverse ma per mantenerlo semplice.
All'inizio non voglio confonderti o penso che sia difficile vedere se qualcuno cambia file costantemente.
È difficile tenere traccia.
Quindi lo faremo in un unico file.
Ma ricorda che questa non è necessariamente la migliore pratica.
Se questa fosse un'app davvero grande e soprattutto se ci fossero un sacco di sviluppatori che ci lavoravano.
Quindi ora abbiamo iniziato gli involti di wrestle.
Quindi ricorda che stiamo iniziando con l'indice dei nomi degli indici.
Quel percorso dovrebbe essere slash blog come richiesta get e dovrebbe elencare tutti i blog.
Quindi facciamolo ora, prima di farlo assicuriamoci che le cose funzionino.
Se eseguo la mia app non ci sono ancora problemi.
E facciamo una singola creazione di un blog, quindi abbiamo qualcosa da guardare.
Quindi saremo molto semplici.
Questo blog di recensione crea e quindi vogliamo avere il titolo chiamalo immagine del blog di prova e prenderò un'immagine da questo
sito e splash dot com è una grande risorsa.
Ti mostrerò in un video futuro che ha un sacco di immagini gratis gratis che puoi fare quello che
vuoi.
E così prenderà questo cane e copierò quello lì dentro che può essere davvero qualcuno che tu
voglia solo avere qualcosa da testare e poi avremo il nostro corpo e il nostro corpo sarà solo un saluto.
Questo è un post del blog e abbiamo creato vuoto.
Tutto lo stupro
Quindi proviamo.
Non faremo nulla per quanto riguarda la callback, penseremo solo che funzioni e poi testeremo
i nostri mongoli. Quindi non eseguiamo il file.
Non succede nulla o sembra che non sia successo niente.
Ma se andate a Mangu e usiamo
il resto del registro completo, così lo abbiamo chiamato solo per ricontrollare e poi facciamo il diario D-B. Scopriamo che abbiamo il nostro primo blog lì che è fantastico.
Quindi queste due cose per noi.
dovrebbe elencare tutti i blog.
Uno dimostra che il nostro modello è impostato correttamente ma una volta che otteniamo l'indice vogliamo assicurarci di avere qualcosa da vedere perché
Se non abbiamo blog per vedere che è
un po 'travolgente e non saremo in grado di dire se funziona.
Quindi esco di là.
Ora concentriamoci sul nostro percorso.
Intendo sbarazzarmi di questo, non voglio creare
un nuovo blog ogni volta che eseguo questa app, soprattutto non sempre la stessa, anche se quel cane è davvero adorabile.
Quello che vogliamo fare è creare la nostra rotta indice.
Ancora una volta i blog
di slash quando si ottiene una richiesta che appare come apt aggiungono i tag di slash nel nostro callback di risposta alla richiesta standard e quindi eseguiremo un
rendering di riavvio e il template che renderizzerà sarà chiamato punto indice Ejay us e non bisogno di Ejay Sì o solo indice.
E questo è ancora a causa di questa linea qui non abbiamo bisogno di
Ejay, ma abbiamo bisogno è un modello chiamato indice essendo una directory chiamata viste.
Quindi lo faremo ora.
Fai in modo che le viste della directory tocchino l'indice della barra delle viste.
E ho fatto un piccolo errore indicizzato.
E. J. Sì.
Quindi,
per un po 'di pratica o rimuovere quel file, lo rimuoverò o almeno userò l'indice di Flash e poi lo ricreamo.
Tocca il punto indice di utilizzo della barra.
E. J. Sì.
E poi aprilo e inizieremo questa semplice pagina indice H-1 e salveremo.
Quindi vediamo che otteniamo quella pagina indice.
Al momento non soddisfa la funzionalità della pagina indice.
Ora, se andiamo a un'anteprima che puoi ottenere da alcuni modi, vado su Web Dev
Bootcamp dot com dash imparando con il punto C9 del codice che mi insegni o puoi andare all'anteprima dell'applicazione in esecuzione in anteprima.
Si aprirà qui ma poi puoi fare clic su questo pulsante per
vederlo nel tuo browser o puoi mantenerlo qui se lo preferisci.
OK.
Quindi
otteniamo un errore qui e questo perché non abbiamo una route route, quindi abbiamo bisogno di slash log e otteniamo il nostro percorso della pagina indice.
Reddit o di Facebook.
È convenzionale per la pagina del percorso della home page andare all'indice di qualcosa che pensi di
Per esempio su reddit vai alla home
page e vedi un indice di tutti i post di Reddit su Facebook vedi un indice di tutti i post e le foto e qualsiasi altra cosa ci sia.
Quindi facciamolo ora dopo avere ottenuto
la risposta alla richiesta di funzione slash e faremo semplicemente una redstart read diretta per tagliare i blog.
Ora per il riavvio ci aggiorniamo.
Niente dovrebbe cambiare.
Ma se vado allo slash finisco anche nei blog slash.
OK.
Ora aggiungerei la funzionalità dell'indice.
Quindi abbiamo bisogno di recuperare tutti i blog dal database.
Quindi questo sarà un blog trovato su trovare tutto e poi avremo la nostra chiamata indietro con un errore.
E poi i nostri dati che chiamerò blog e poi
faremo un errore F e questo è solo per venire a quel registro.
Ogni altro aggiungeremo nel nostro indice di rendering del redstart eccetto che non vogliamo semplicemente mantenerlo così.
Vogliamo rendere l'indice con i dati.
Quindi i nostri dati saranno
chiamati blog e uguali ai blog.
Quindi stiamo passando i dati che tornano dal database dalla nostra Dopp per trovare qualsiasi cosa ritorni.
Lo inviamo quindi sotto il nome di blog.
Sì, è un po 'confuso, ma questo è
davvero abbastanza convenzionale per vedere dove hanno lo stesso identico nome.
OK, quindi ora andiamo a un modello e aggiungiamo del codice.
Diamo solo un'occhiata ai blog per iniziare proprio così.
Assicurati che ci arrivi.
Ricarica la pagina.
E stiamo ricevendo la nostra lista.
È un blog in questo momento, ma lo stiamo vedendo qui.
Grande.
Quindi ora mostriamolo un po 'più bello.
Non faremo nulla di pazzesco, ma quello che faremo
è passare in rassegna tutti i blog, quindi i blog per ogni registro delle funzioni e quindi abbiamo bisogno di questo qui.
E poi quaggiù abbiamo bisogno di altri tag, la parentesi di chiusura, e poi abbiamo bisogno anche di parentesi.
E per ognuno faremo un div all'interno di quel div.
Facciamo un H 2.
E questo sarebbe il titolo di LUGG quel titolo.
Ricorda che abbiamo bisogno del segno di uguale lì ma non su ciascuna o sulle parentesi.
Quindi mostrerà un'immagine e la fonte è uguale alle parentesi Ejaz.
Immagine di Lagat e ho dimenticato di dirlo.
per noi perché l'abbiamo detta come valore predefinito in modo che possiamo mostrarla appena sotto l'immagine.
Se dai un'occhiata al creato puoi vedere che qui abbiamo creato questa bella ora pazzesca che è stata creata automaticamente
Basta fare uno spanna per ora che ha creato Lagat
e poi ovviamente abbiamo bisogno del nostro post sul blog che sarà un paragrafo che è
il corpo.
Tutto ok.
Un sacco di contenuti lì.
Aggiorna la pagina e puoi vedere il nostro primo post che ho pubblicato.
Dovrai semplicemente aver fiducia che questo funzioni per ora.
Sì, ce ne mostra uno.
Tecnicamente non sappiamo se
ci sta mostrando tutti loro perché abbiamo solo uno dei database nel prossimo video.
Lavoreremo su nuovi e creare