Nell'esercizio della lezione precedente,
abbiamo creato un semplice server HTTP che potrebbe servire contenuto statico,
questo è stato costruito completamente utilizzando Node.js.
Ora che abbiamo imparato a conoscere Express,
il framework minimalista che supporta lo sviluppo del server in cima a Node.js,
esaminiamo ora come possiamo usare Express per costruire lo stesso server in questo esercizio.
Per iniziare, andare alla cartella Node.js che abbiamo utilizzato per memorizzare
tutto il codice per questo corso e quindi, creare una nuova cartella lì denominata node-express
e quindi spostare in questa cartella.
Ora, creeremo
una cartella pubblica qui all'interno della cartella express nodo.
Quindi, andremo a quella cartella pubblica HTTP nodo e quindi copiare questi due file,
il index.HTML e aboutus.html nella cartella pubblica node-express.
Stiamo andando a servire questi due file utilizzando
il server Express che stiamo per costruire in questo esercizio.
Ora, andiamo ai terminal.
Spostarsi nella cartella node-express nel terminale e quindi al prompt digitare npm init,
per inizializzare un'applicazione nodo.
Quindi, per il nome del pacchetto usiamo solo node-express,
e per la descrizione diremo Node Express Examples,
e il punto di ingresso è index.js,
e tutto il resto dello stesso come prima,
e creiamo il file package.json.
Ora, lasciami aprire
il progetto utilizzando l'editor Visual Studio Code nel mio caso e poi,
nel file package.json entriamo e aggiungiamo il nuovo script chiamato start,
che è l'indice del nodo e salviamo le modifiche.
Ora, che abbiamo inizializzato il modulo nodo,
andiamo avanti e installare il framework Express all'interno
del progetto per farne uso per costruire il nostro server espresso.
Quindi, al prompt,
digita npm install express.
Quindi questo è il modo in cui installeresti
un modulo nodo di terze parti se stai seguendo questo corso per
la prima volta e non hai
seguito i corsi precedenti, questo è qualcosa che è importante da notare.
Questo è il modo in cui si installerà un modulo nodo aggiungendo il meno salvare,
stiamo anche salvando le informazioni che
questo modulo nodo di terze parti è una dipendenza
per il nostro progetto e queste informazioni saranno salvate nel file package.json.
Se hai seguito i corsi precedenti della specializzazione,
allora conosci già queste informazioni.
Quindi, andiamo avanti e installiamo il modulo Express.
Come si può notare,
stiamo usando Express versione 4.16.3 in questo corso.
Quindi, torniamo ora al nostro codice.
Dando un'occhiata al file package.json,
si vede che all'interno del file package.json installando Express vediamo già
un'altra proprietà che è inclusa nel file package.json chiamato dipendenze.
Queste dipendenze tengono traccia di tutti i pacchetti
da cui dipende questo progetto corrente.
Qui si vede Express installato
lì e la versione corrispondente di Express viene installata qui,
quindi questo dichiara che questo particolare progetto
dipende dalla versione Express almeno 4.16.3.
Inoltre, si vede anche questa cartella chiamata moduli nodo creati qui.
Quindi questo è dove
verranno archiviati tutti i moduli del nodo di terze parti installati dall'applicazione.
Ora, quando facciamo un commit Git,
non vogliamo impegnare questa cartella dei moduli nodo.
Quindi, per ignorarlo
, creiamo un file
denominato.gitignore e all'interno del file.gitignore,
digitiamo i moduli node_.
Quindi, questo sta facendo sapere a Git che non vogliamo
impegnare la cartella dei moduli del nodo nel repository Git.
Quindi, con questo salviamo le modifiche.
Quindi ora quando crei un repository Git,
la cartella dei moduli del nodo verrà ignorata.
Non è richiesto perché puoi sempre ricreare la cartella dei moduli del nodo ogni
volta che cloni questo progetto dal tuo repository Git semplicemente digitando npm install.
Questo esaminerà il file package.json
e esaminerà tutte le dipendenze
e le dipendenze di sviluppo che si trovano nel
file package.json e verranno automaticamente installati tutti quei pacchetti per te.
Ora, che abbiamo completato questo,
creiamo il nostro primo progetto Express,
quindi per farlo creeremo un file chiamato index.js e nel index.js
dichiareremo un const express richiedono express.
Ora, noterete che express è un modulo nodo di terze parti ed è stato
installato nella nostra cartella moduli nodo nella directory corretta.
Quindi, quando dichiariamo questo qui dicendo che questo modulo Express è richiesto,
allora verrà automaticamente incluso dalla cartella dei moduli nodo nella nostra applicazione.
Ora, installa anche HTTP
il modulo principale qui.
Ora, che abbiamo installato questo,
creiamo il nome del corso come
host locale e numero di porta come 3000.
Quindi vedete che stiamo usando esattamente lo stesso modo di fare
questo esercizio come abbiamo fatto per l'esercizio HTTP in precedenza.
Ora, a questo punto,
dichiareremo questo const chiamato app come espresso.
Quindi in questo modo, stiamo dicendo che la nostra applicazione utilizzerà il modulo nodo Express.
Quindi, una volta fatto questo,
poi Express fornisce un sacco di metodi che possiamo usare per costruire il nostro server web.
Quindi, dopo questo, diremo app.use () e qui dentro,
dichiareremo una funzione che verrà chiamata per impostare il nostro server.
Quindi, questa funzione prende tre parametri req,
che è la richiesta; res,
che è la risposta, e successivo.
Ora, come abbiamo visto Express usa middleware aggiuntivo.
Quindi, il prossimo viene utilizzato quando è necessario
richiamare middleware aggiuntivo per occuparsi del lavoro per conto tuo.
Vedremo l'uso del prossimo in alcuni degli esercizi successivi,
ma la funzione qui avrà tre parametri req, res, e successivo.
Next è un parametro opzionale che
non può essere incluso se non lo userai all'interno del tuo codice.
Quindi, qui dentro diremo,
registro console e poi,
registreremo le intestazioni,
e risponderemo con il codice di stato impostato su 200.
Imposta il tipo di contenuto dell'intestazione
come HTML di testo.
Quindi, si nota che gran parte di questo codice sembra molto simile
al modo in cui abbiamo impostato la nostra applicazione nodo.
Quindi, diremo res.end e
qui HTML corpo h1.
Diciamo solo che questo è un server Express e chiudiamo
i carri armati lì, e basta.
Dalla tua comprensione del nodo HTTP,
capisci già cosa stanno facendo questi tre
e la stessa cosa viene fatta anche nel server Express.
Ora che abbiamo impostato il server utilizzando l'App,
ci sarà impostare il server,
e poi questo è dove useremo il CreateServer HTTP,
e quindi CreateServer sta per prendere app come è parametro funzione lì,
e successivamente, ci sarà semplicemente dire server.listen port,
hostname e la
funzione freccia qui all'interno della quale ho intenzione di stampare,
console, log back coat server in esecuzione su HTTP: //nome host: porta, il gioco
è fatto. Quindi vedrai che questa parte è molto simile
a quello che hai fatto per l'esercizio HTTP,
tranne che il CreateServer ora prende questa app,
che abbiamo dichiarato in precedenza Express.
Quindi, Express sta aggiungendo funzionalità aggiuntive che verranno
utilizzate dal server HTTP che creiamo utilizzando nota.
Una volta che abbiamo finito con questo,
salviamo le modifiche,
e poi andremo avanti e avviare il server,
e dare un'occhiata a ciò che il server servirà.
Entrando nel terminale, aggiungi il terminale,
digita NPM start e vedrai che il tuo server è attivo e funzionante.
Ora, quando accediamo a questo dal browser o dal postino,
vedrai cosa serve.
Quindi, qui ho Postman in piedi e soldi.
Permettetemi di inviare la richiesta GET a localhost 3.000 proprio come prima
e vedrete che questo sta servendo il codice HTML che includiamo lì,
e quindi questo è un server Express.
Cliccando sull'anteprima,
questo ti mostrerà come apparirà in un browser,
e questo mostra la versione grezza del codice che è stato inviato dal lato server,
e puoi vedere che il codice di stato è 200, ok?
E l'altro vettore di informazioni di intestazione è stato inviato dal sito del server.
Si noti in particolare che dice x powered by Express nell'intestazione.
Con questo, completiamo la prima parte di questo esercizio in cui abbiamo visto
come possiamo fare uso di Express per impostare un semplice server web.
Lasciami ora fermare il server e quindi inizializzare il repository Git,
quindi al prompt digiterò «git init» e
poi «git status» e vedrai che i file che sono stati non tracciati,
quindi dirò «get and dropped» e questi file vengono ora aggiunti nel repository Git,
e così quando dici git status,
vedi i file che sono stati aggiunti.
Si noti in particolare che la cartella dei moduli del nodo
non è stata aggiunta al repository Git perché nel
file.gitignore abbiamo esplicitamente dichiarato che
la cartella dei moduli del nodo non deve essere inclusa nel repository Git.
Così ora, controlliamo il nostro scambio di commit dicendo git
commit meno m esempio Express,
e abbiamo commesso questo al nostro repository Git.
Nella seconda parte di questo esercizio,
vedremo l'uso del middleware Express chiamato Morgan.
Morgan è usato per registrare le informazioni sullo schermo,
quindi registrerà le informazioni sulle richieste in arrivo allo schermo in modo che
possiamo vedere alcune informazioni stampate nella nostra console qui.
Inoltre, vedremo come possiamo impostare il nostro server Express per servire i file HTML statici.
Per iniziare, al prompt digitare npm
installa Morgan meno, meno salva.
Ora, Morgan sarà una dipendenza che useremo nella nostra Applicazione.
Quindi, ecco perché è meno,
meno salva e questo otterrebbe Installa,
e puoi vedere che sto usando Morgan versione 1.9.0 in questo corso.
Ora che abbiamo installato Morgan,
vediamo come possiamo farne uso all'interno della nostra Applicazione.
Quindi, andando alla nostra Applicazione,
il modo per fare uso di Morgan è dichiarare qui
const Morgan richiede Morgan,
e poi diremo,
«App usa Morgan con lo sviluppo».
Quindi, questa è la versione di sviluppo.
Quindi, stamperà informazioni aggiuntive sullo schermo come richiesto.
Ora, entrando nella nostra applicazione.
All' interno della nostra applicazione, non ho intenzione di registrare tutte le intestazioni.
Invece, lasciami rimuovere questo perché Morgan
registrerà informazioni sufficienti per noi da guardare,
e ho intenzione di impostare il mio server per servire i file HTML dalla cartella pubblica.
Quindi per fare questo,
ho intenzione di dichiarare l'uso ed esprimere statico.
Questo dice a Express di servire i file statici da dirname doppio sottolineatura.
Quindi, questo dice la radice di
questo progetto e troveranno quei file
in double_dirname, plus/ public.
Quindi, ricorda che abbiamo creato la cartella pubblica nella cartella del nodo Express.
Quindi, questo sta informando Express che guarderai
questa particolare cartella nella cartella principale di questo progetto e all'interno della cartella pubblica.
Quindi, questa sarà la cartella da cui
i file HTML statici verranno serviti dal mio server Express.
Dopo aver apportato queste modifiche,
salviamo le modifiche,
quindi riavviare il nostro server,
e quindi vedere come funziona.
Andando a quel prompt,
cerchiamo di digitare npm start,
per avviare il nostro server,
e una volta che il server è attivo e in esecuzione,
esaminiamo ciò che servirà quando invieremo varie richieste a questo server.
Usando Postman, inviamo prima una richiesta get all'host locale: 3.000
e noterai che sta servendo il file index.html.
Abbiamo impostato il nostro server per servire i file statici dalla cartella pubblica,
e se diciamo localhost: 3000 per impostazione predefinita,
servirà il file index.html.
Quindi, questo è il modo in cui funziona il tipico server Web.
Quindi, questo è quello che abbiamo finito per impostare il nostro server espresso per fare.
Ora, cerchiamo di digitare localhost: 3000 about.html e inviare la richiesta,
e dice che questo è circa la nostra strategia HTML,
e anche il file HTML su di noi è stato salvato qui.
Quindi, nell'anteprima,
puoi vedere il file risultante che è stato servito dal nostro sito server.
Proviamo ad accedere a un file inesistente
e vedrai che quando provi ad accedere a un file inesistente,
allora sarà predefinito per la seconda configurazione che abbiamo fatto nel nostro codice,
che dice che questo è un server Express.
Non abbiamo specificato al nostro server Express come gestire
situazioni in cui incontra un file che non esiste.
Quindi, questo è il motivo per cui sta usando il predefinito che hanno impostato proprio sotto la statica Express,
che è quello di servire il valore predefinito, e, naturalmente,
questo non è il comportamento più ideale,
ma questo è quello che abbiamo nel server Express in questo momento.
Successivamente, modificheremo il server Express per gestire
gli errori in modo più dettagliato, negli esercizi successivi.
Questo è anche un buon momento per fare un commit Git delle modifiche.
Quindi, controlliamo lo stato Git dopo aver fermato il server,
e aggiungeremo i file modificati,
e poi fare Git commit
meno m Express,
servire file statici.
Questo è tutto. Con questo,
completiamo questo esercizio.
In questo esercizio, abbiamo visto come possiamo impostare
un semplice server web per servire i contenuti per nostro conto.