Bentornata in questa lezione, ti mostrerò come possiamo scrivere.
H m l.
In un file separato e possiamo rimandare il file nella risposta piuttosto che in quello che
abbiamo fatto finora usando il redstart send.
Ci sono tre obiettivi principali qui.
Il primo è usare il rendering redstart per renderlo disponibile a inviare un file da ciascun file e questo avrà più senso una
volta che parleremo di ciò che ognuno di noi è.
E questo è il prossimo obiettivo.
Spiega cos'è Ejaz e perché lo usiamo.
E infine passare le variabili ad Ejay come modelli.
Quindi, per iniziare qui ho bisogno di una nuova app Express e ho intenzione di creare
l'app express di base da zero che non continuerò a fare in tutti i video, ma è ancora abbastanza presto
nel corso .
E voglio solo assicurarmi che ti abitui a vederlo e farlo perché è
qualcosa che dovrai fare senza sosta.
creerò una nuova directory all'interno di quella e chiameremo questa demo di Ejay us.
Quindi ho una directory chiamata More express da cui lavorerò per questa unità e
E invece di Ejaz demo eseguiremo il NPM e accelererò il processo.
Quindi quel nome va bene.
La versione va bene la descrizione è vuota.
Mi piace sempre cambiare questo in app.
Sì.
Solo una preferenza personale.
Premi Invio qualche altra volta.
Non è necessario riempire nessuno di questi e ci andiamo.
E ora se ci permettiamo di avere un pacchetto che Jason creerà il nostro
atto J us e eseguiremo anche NPM install express dash dash save.
Eccoci.
Ora apriamo il file jazz e iniziamo ad aggiungere del codice.
E invece di fare solo ls e poi cliccare su J. S. e cliccando su Apri di recente ho trovato un
altro modo per farlo.
9 recentemente aggiunto che è se si digita lo spazio C9 e quindi il nome di un file o il percorso di un file.
Quel Cloud
Quindi l'app di base C9.
Sì, questo lo aprirà per te nell'editor.
È molto più veloce di dover digitare ls e quindi fare clic sul file e quindi fare clic su Apri.
Quindi prendiamo qui il codice express di base, per cui esprimere express equivale a express e quindi var app uguale express
lo esegue come una funzione.
Una cosa che si vedrà occasionalmente è questa in cui qualcuno ha detto che l'app Savar è uguale a richiedere express
e quindi eseguirla immediatamente come una funzione.
La maggior parte delle persone però lo farà in due passaggi separati e più comunemente vedrai semplicemente Xpress e
app che possono essere qualsiasi cosa.
Ora diamo il via.
Ascolta andando in fondo che avvierà il server in modo che avrebbe bisogno della porta
che processa la porta EMV e quindi elabora l'IP D-NV e quelle sono le variabili d'ambiente che cloud 9 ha
impostato che stiamo accedendo alla porta e Indirizzo IP.
E poi aggiungo il mio callback che verrà eseguito una volta che il server è stato configurato una volta in
ascolto e vedremo solo cosa succede sul log.
Il server sta ascoltando proprio così e salverà.
Ora aggiungiamo nel nostro primo percorso e faremo il percorso del percorso.
Mi piace sempre iniziare da lì e questa è sempre una frase confusa per alcuni dei
miei studenti perché questa parola che pronuncio alcuni di loro si pronuncia come root.
Cerco di renderlo molto chiaro quando dico radici.
Sto solo parlando di R O T come in questo.
La via principale.
quindi avranno questi due oggetti richiesti in risposta e andremo avanti e chiameremo solo il rez invia e faremo semplicemente una cosa semplice.
OK quindi aggiungiamo che in apt ottieni root o barra e quindi la nostra funzione di callback
verrà eseguita ogni volta che una richiesta di richieste viene fatta per tagliare e
Benvenuti nella home page.
Proprio così dovrebbero essere tutti recensione a questo punto.
Iniziamo il server in modo nodo j.
Sembra che tutto vada bene.
Passiamo ora alla pagina principale qui e aggiorniamo.
Benvenuti nella home page.
Ovviamente questo tipo di contenuto una singola riga di testo è piuttosto noioso.
Quello che possiamo fare per ridimensionarlo un po 'è che possiamo tornare qui e rendere questo un H-2A Mel.
Se volessimo solo quello e poi potremmo aggiungere sotto quello e H-2 che dice bla bla.
Proprio così.
Eccoci.
E se salviamo questo e riavvia il server.
E poi torniamo qui e ci aggiorniamo.
HVM ci vengono resi, ma è ancora incredibilmente doloroso scrivere una pagina intera.
Gli album
È tecnicamente possibile ma sarebbe così difficile.
Non è solo una buona idea.
Quindi fortunatamente c'è un modo più semplice in cui possiamo scrivere tutto il nostro codice in
un file separato tutto il tempo che vogliamo tutti i C S e sì tutto il javascript front-end che vogliamo
inviare all'utente, in modo che possiamo usare un metodo chiamato render e quel metodo di rendering vive sull'oggetto risposta qualunque lo
chiamiamo.
Nel nostro caso i giri così riposano non rendono.
E poi gli diamo il nome di un file come la home page o l'home point invecchiato da lui o Dogstar
invecchiato o qualcosa del genere.
E ovviamente abbiamo bisogno di creare quel file e di avere dei contenuti in esso.
Ma anche prima di farlo c'è un piccolo problema che mi libererò di questa linea e
il problema è che quando usiamo Express non scriviamo semplici file hm.
Ci sono modi per farlo.
Richiede un po 'più di configurazione, ma la maggior parte delle nostre app Web non saranno solo file statici standard
di Tim che vengono restituiti.
Quello che stiamo cercando sono i file html dinamici che sono chiamati template e nella seconda parte
di questo video li introdurremo.
Ma per ora ho intenzione di andare qui e cambiarlo in E. J. e tutto ciò che dirò su E. J. è che è l'acronimo
di javascript incorporato e che imparerai molto di più su di esso in circa cinque
minuti quando viene richiesta di tagliare il nostro codice renderà un file chiamato Dogstar.
Sì.
E cambiamolo a casa solo perché questo ha più senso con il percorso.
abbiamo bisogno di creare quel file e in realtà non lo creiamo nella stessa directory di noi.
E quindi
Quello che dobbiamo fare è creare una nuova directory chiamata views e non è un nome arbitrario che è
una directory che express cercherà.
Quindi, ogni volta che eseguiamo il rendering di un file, qualunque sia il suo nome, cercherà prima nella directory views
e cercherà di trovare questo file esatto all'interno di un fusibile.
Quindi ora creiamo quello.
Quindi farò un tocco di vista a casa che ci fa Ejay proprio così.
E poi la prossima cosa che voglio fare è aggiungere del contenuto.
Quindi apriamo il file con quel nuovo comando C9 C-9 viste barra casa.
E. J. Sì e aggiungiamo alcune cose qui.
Questa è la home page.
Risolviamo questo.
E aggiungiamo anche un'immagine e ho un'immagine che vorrei usare qui.
Questo è qualcosa chiamato uno sci di palma.
È un mix di Pomerania e husky.
Presumibilmente questo è un Parsky adulto che è piuttosto pazzo se è vero.
Sembra un husky miniaturizzato o solo un cucciolo di husky permanente.
Ad ogni modo, copiaremo questo URL e torneremo indietro.
E ovviamente puoi fare qualsiasi immagine che desideri.
Non devi andare a cercarlo o senz'altro sarai Ellaby e salverà.
E ora chiudiamo fuori da questo e dovremmo essere a posto.
A parte il fatto che manca una cosa e in effetti lascerò che ci dica cosa ci manca.
Riceverai un messaggio di errore.
Quindi ho intenzione di chiarire questo solo per creare un po 'più spazio per te.
E ora avvierò il server.
E quando andiamo sulla rotta, chiameremo il metodo di rendering che cercherà casa.
Sì.
All'interno di una directory denominata viste.
E poi, una volta trovato, prenderà il contenuto e lo invierà
di nuovo nella risposta, così torneremo alla nostra app e aggiorneremo e riceviamo un messaggio di errore che dice che non riesce a trovare Montreuil.
E. J. Sì.
il file Ejaz.
E ciò significa che Express sta cercando un pacchetto chiamato Ejay us che deve essere utilizzato per il rendering e
Quindi dobbiamo installare Ejay su NPM e tutto questo avrà senso perché stiamo usando Ejaz in pochi minuti.
Ma per ora fidati di me NPM installa Ejay noi e faremo il cruscotto salva.
E una volta finito, possiamo solo fare il nodo.
J. S. di nuovo e aggiornare la pagina ora e otteniamo questa è la home page
e i nostri adorabili cuccioli ultimo pieno cresciuto Tomsky.
Così ora abbiamo un file di h t m l che abbiamo scritto che
stiamo inviando all'utente e che viene reso nel browser.
E questo è grandioso, ma questo è ancora estremamente limitato per le applicazioni web.
Questo invierà solo la
stessa identica pagina ogni volta e nella maggior parte delle applicazioni web non è quello che vogliamo.
Forse la home page è la stessa o la pagina di accesso è la stessa.
Ma poi, una
volta che l'utente ha effettuato l'accesso, ad esempio, di solito c'è un messaggio che dice bentornato o bentornato.
Adulto adorabile dell'adulto del cucciolo di Parsky.
Lascia che ti mostri cosa intendo con un rapido esempio.
Quindi tornerò indietro e aggiungerò una nuova rotta e il nostro percorso sarà qualcosa come Slash.
Innamorarsi di e poi una cosa come Rustie e poi possiamo anche innamorarci di uno sci di palma.
Penso che sia come è scritto.
E vogliamo un file HMO che ci mostrerà un messaggio che contiene la variabile dal parametro
route path.
Quindi direbbe come se ti fossi innamorato di un arrugginito così da farlo che devi definire o fare in modo che lo Slash si innamori della
cosa di Slash.
Questo è ciò che chiameremo.
E poi abbiamo bisogno della nostra richiesta e risposta all'interno del callback.
E proprio come
l'ultimo esercizio catturerà la cosa che sarà la cosa di VAR equivale a
richiedere la cosa di harams e quindi possiamo iniziare con questo semplice punto rosso, proprio come abbiamo fatto con l'esercizio di parlamento animale.
Il maiale dice oink.
La mucca dice che moo può fare la stessa cosa qui.
Quindi diremo che ti sei innamorato di una cosa positiva.
Tutto ok.
Quindi questa è una recensione e se riavvio il server ora e torno indietro e ora vado allo
slash
innamorarsi di Slash ske ti facciamo innamorare di Tomsky che non è esattamente grammaticalmente corretto ma di nuovo neanche la parola pomps.
Quindi tornerò indietro e ora quello che vogliamo è capire come possiamo inviare una H a lui. Mi limiterò a dire che
ti sei innamorato di plus
e poi qualche cosa possiamo iniziare creando il file e noi chiamerò questo
file all'interno della directory views e lo chiameremo come vuoi, ma andrò con amore E. J. per farla breve e poi la riempiremo.
Quindi abbiamo bisogno della barra delle viste C-9.
Amore che.
Sì, l'abbiamo aperto e iniziamo aggiungendo semplicemente di esserti innamorato e poi dobbiamo compilare
lo spazio vuoto.
Ma non sappiamo cosa mettere qui, quindi lasceremo semplicemente così e mettiamo qui una nota che dice
P. S. Questo è l'amore che Ejay ci archivia solo per sapere che proviene dal file Ejaz.
Non è l'invio redstart che abbiamo adesso.
In realtà per sbarazzarsi di quello.
Quindi quello che vogliamo fare è rendere quel file così letto non è renderizzato.
E il nome del file è amore che E. J. Sì, guarderà automaticamente nella directory delle viste che è proprio lì.
Andiamo avanti abbiamo due file, iniziamo il server up Node.
Sì si riavvierà e si aggiornerà.
OK.
Quindi il nostro file è qui.
Ti sei innamorato e abbiamo bisogno di compilare lo spazio vuoto qui.
i dati provenienti da
un database o dati che un utente ha fornito dove non è un file di uccisione statico.
E so che questo è un esempio molto semplice che è il punto che non voglio confonderti con qualcosa di pazzesco, ma questo tipo di logica è davvero importante dove possiamo riempire un modello con
Questo è esattamente lo stesso ogni volta.
Fondamentalmente vogliamo aggiungere variabili in HTL e questo è ciò che ogni Sì ci lascia fare.
Quindi E. J. S sta per javascript incorporato.
Ci consente di incorporare le variabili di codice javascript se le istruzioni si ripetono all'interno di H Timo.
Quindi è come potremmo fare qualcosa di simile.
Ti sei
innamorato e poi qui non funzionerà ancora, ma potremmo inserire la nostra variabile chiamata cosa, facciamolo in una variabile tutto maiuscola.
Ma questo non funzionerà
perché lo tratterà come normale HMO e ci mostrerà solo la variabile parola cosa.
Dobbiamo fare qualcosa per dire a ognuno
di noi che questo codice javascript non glielo insegnerà. Tratterò questo come javascript.
Fortunatamente ci dà un modo per farlo.
È un po 'strano quando lo vedi per la prima volta.
Sembra così
uguale sulla parentesi di apertura e qualsiasi cosa vada tra queste due parentesi qui verrà trattata come Javascript.
Quindi abbiamo le nostre parentesi e quindi i segni di percentuale e quindi il segno di
Quindi ti mostrerò cosa intendo
dire che possiamo usare solo qualcosa come cinque più cinque che nel normale H M L e lo farò effettivamente per mostrarti cinque più cinque.
Senza queste parentesi Ejay Yes stamperemo solo cinque
più cinque, ma se lo facciamo proprio qui ne otterremo 10 stampati.
Quindi salverò questo modello per uscire o avviare nuovamente il nodo
sul server dopo J us e aggiornare la pagina e ti faremo innamorare di cinque più cinque dieci.
E lo capisco davvero.
Se metto in pausa cinque dieci è una presa completa, va bene tutto bene.
Quindi torneremo.
Quindi non vogliamo che vengano stampati cinque più cinque.
Ma in realtà vogliamo la variabile cosa.
Lo chiameremo VAR o andremo solo lontano.
E questo deve venire dal nostro codice qui.
Quindi quello che dobbiamo fare è passare questa cosa di valore al nostro amore che E. J. come modello e vogliamo stamparlo e mentre siamo
qui anche a sbarazzarci dei cinque più cinque.
Quindi ti innamoriamo di te e poi abbiamo bisogno di definire la cosa lontano
e potresti pensare che potremmo fare questa cosa var.
Il Var equivale a richiedere dalla slot cosa.
E potresti sperare che l'espressione espressa invii automaticamente tutte quelle variabili in qualche modo a questo modello.
E sa solo di cosa var.
Sfortunatamente non è così che funziona.
E ti mostrerò che riavviare il server riceverai un messaggio di errore e mi dice
che var non è definito.
Quindi ora ho bisogno di tornare indietro e definire la barra delle cose.
E il modo in cui lo faccio è in realtà passarlo al mio amato E. J. s template e lo faccio sulla linea di rendering del punto quando lo passi come
oggetto.
E in quell'oggetto posso inserire più pezzi di dati che voglio avere nel mio modello.
Quindi, piuttosto che le cose, chiameremo la cosa per renderlo
più chiaro e poi qui passerò i dati e dirò che nel modello var varrebbe essere uguale alla cosa.
Ciò che questo farà sarà prendere il valore della cosa e applicarlo qui.
Quindi sembrerà una cosa lontana da Rusty.
E poi qui la cosa var sarà sostituita.
Tutto questo sarebbe stato sostituito da arrugginito.
OK, quindi lasceremo perdere.
Torna qui e perché non iniziamo semplicemente codificandolo come resti proprio così e
riavvieremo il server e aggiornerò la pagina e ti farò innamorare di Rusty.
Quindi, piuttosto che fare una stringa, il passo
successivo è solo tornare a ciò che avevamo, che è l'intera variabile della variabile save
e la passerò sotto la barra dei nomi e poi la renderizziamo qui con lì.
E. J. ha taggato questa cosa dall'aspetto vistoso.
Riavvia il server di nuovo indietro.
Ora ti sto innamorando di Parsky.
E se vado da te ti sei innamorato di Tater Tots che si riflette anche qui.
Questo è un concetto molto potente che useremo.
Come ho detto e praticamente ogni app da questo momento
in avanti avendo queste pagine dinamiche che gli hanno preannunciato tutte le risposte che possono cambiare a seconda di ciò che l'utente
ha richiesto in specifici pezzi di dati nella richiesta.
L'altra cosa che mostrerò è che questo è solo Javascript normale.
Quindi qui posso fare cose come maiuscole e questo verrà eseguito prima e poi restituirà qualcosa che verrà
stampato come arrugginito.
Quindi è solo javascript regolare e parleremo di più su cosa dovrebbe andare qui e cosa non dovrebbe.
Perché ci sono alcune regole che non vuoi ingombrare il tuo vecchio modello di Ejaz con
tonnellate e tonnellate di javascript.
Vuoi mantenerlo al minimo ma per ora lo farò e salverò.
E questa sarà l'ultima cosa che facciamo.
Riavvia l'aggiornamento del server.
E ora ottengo una versione maiuscola.
Va bene, ora ricapitoliamo tutto ciò di cui abbiamo parlato.
C'è un bel po 'in questa lezione.
La prima cosa è che possiamo inviare il contenuto di un file usando il redstart render come
abbiamo fatto qui e qui e quei modelli devono esistere nelle viste che directory express automaticamente guarda lì.
La prossima cosa che abbiamo parlato del suo
Ejaz che sta per javascript incorporato ed è ciò che ci permette di avere modelli dinamici HDMI out che cambieranno a seconda di alcuni dati che forniamo.
Abbiamo visto che dovevamo fare ogni Sì e poi il nostro file essere chiamato qualcosa DOD Ejay Sì.
E poi abbiamo anche bisogno di eseguire l'installazione di NPM Ejay e quindi l'ultima cosa è che possiamo
usare le parentesi di Ejay che sono molto strane in un primo momento per digitare.
Probabilmente non sei abituato a usare questa parte della tastiera più di tanto, ma ci sono parentesi in cui il
segno di percentuale e un segno di uguale e poi dall'altra parte è solo un segno di percentuale e tutto ciò
che viene dentro viene trattato prima come codice JavaScript e
poi qualunque sia il codice restituito viene quindi stampato sull'HMO e per passare i dati.
Possiamo passare un oggetto nella chiamata di rendering punto rosso dove abbiamo coppie di valori chiave.
È solo un normale oggetto javascript.
E nel modello abbiamo accesso alle variabili che definiamo sono le proprietà dell'oggetto.
In questo caso, cosa è uguale a qualunque sia il valore della cosa che cambia ogni volta.
E qui possiamo usare la cosa.
OK, quindi so che c'è molto in questo video molto da digerire.
In particolare, svilupperemo molta più pratica con questi concetti.
E. J. Sì e quello E. J. ha parentesi e quindi passare i dati a un modello
è qualcosa che faremo in ogni video da qui in poi