Iniziamo
Assumerò che tu abbia il nodo.js installato ma in caso contrario, può essere scaricato qui.
Inizieremo impostando il nostro nodo.js Web Server e testarlo. Quindi aggiungi codice simile a prima per connetterti e interrogare il nostro database SQL Server.
Useremo il framework Web Server minimalista per node.js, Espresso. Si installa come un pacchetto npm.
Come per molte cose, c’è sempre di più da imparare, quindi quando ho digitato un comando, sicuramente leggi di più sul comando e sulle sue opzioni.
Come impostare
- Per il progetto, creare una directory / cartella.
- Aprire Visual Studio Code (VSCode) e aprire la cartella.
- Apri una nuova finestra di terminale e digita,
npm init
Accetta i valori predefiniti per creare il tuo pacchetto.json.
4. Creare un file in VSCode e salvarlo come indice.js. Se si guarda nel vostro pacchetto.file json, vedrai dove puoi cambiare il file “principale” predefinito.
5. Nel tipo di finestra Terminale,
start npm Questo avvia il nodo.server js.
Il server Web
Nel tipo di finestra del terminale,npm install express
Installa il Framework Web.
Siamo pronti per il rock and roll!
Il nucleo del Server Web è quello di richiedere il pacchetto express e assegnarlo a un titolare (variabile o const.) Tutti i riferimenti al Server Web saranno attraverso questo titolare.
Dobbiamo avviare il server web e farlo ascoltare su una porta HTTP, sceglierò 5000. 8080 è comune, solo qualcosa disponibile.
Vorremo che il server Web risponda almeno a un metodo HTTP get. Ciò consentirà l’uso di “calciare le gomme” e assicurarsi che funzioni. C’è di più nei metodi HTTP qui su MDN. Useremo GET e POST.
- GET viene utilizzato per recuperare da una risorsa.
- POST viene utilizzato per inviare a una risorsa.
Inserisci il seguente codice e ne discuteremo.
Esempio di server Web
- Abbiamo bisogno del pacchetto express, memorizzando il riferimento in express per convenzione, ma chiamandolo come desiderato.
- Inizializza un’istanza di express, memorizzando il riferimento in app per convenzione, ma chiamalo come desiderato.
- Nella riga 11, memorizziamo un riferimento a dove il nostro server web sarà in ascolto. Porta 5000.
- Nella riga 5, usiamo HTTP GET with out istanza del server web utilizzando app.ottenere. Questo, per impostazione predefinita, cercherà di ottenere i dati dalla directory principale (‘/’). La funzione di callback è abbastanza importante in quanto contiene gli oggetti Request (req) e Response (res). I nomi req e res sono per convenzione.
Richiesta e risposta
- La richiesta verrà fornita dall’URL del nostro browser. Maggiori informazioni possono essere trovate qui.
- Response è la risposta a una richiesta. Più può essere trovato qui.
In poche parole, il nostro browser farà una richiesta e vi invieremo indietro una risposta.
Calcia le gomme
- In VSCode, premi F5 (abbreviazione di Start Debugging nel menu Debug.) La tua console dovrebbe apparire come segue.
2. Vai al tuo browser e digita LocalHost: 5000 e premi Invio. Dovresti vedere quanto segue.
Il tuo browser ha fatto una richiesta GET e abbiamo inviato una risposta utilizzando res.send.
Node SQL Server Connection
(Opzionale se fatto prima.) Nella finestra del terminale, digitare
npm install mssql
Questo installa i driver di SQL Server.
Esempio di database
Questo è esattamente lo stesso codice di partenza del mio precedente articolo, quindi non lo esaminerò in dettaglio. Tuttavia, la sua posizione nell’oggetto app sarà importante.
Un paio di cose da notare che saranno diverse da prima, dopo il nostro test iniziale,
- la performance dei nostri dipendenti verrà inviata da una pagina Web (pubblicata.)
- il risultato della Query verrà inviato a una pagina Web utilizzando Response.
Connessione al database / Query Example
Inserisci il codice qui sotto.
Qualcosa di importante da notare è che abbiamo un server Web e una connessione al database e una query. Ma non interagiscono. Ancora!
Run it with by stopping and starting the web server or refreshing
and you will see the web server is running e c’è l’output della console dei dati dalla query. Ma non stiamo ottenendo nulla dal server web né inviando nulla a una pagina web.
HTML
Abbiamo bisogno di una pagina per cucinare fino a quando l’utente accede al nostro sito. Questa pagina consentirà loro di inviare un parametro (PerformanceRating) che può essere utilizzato nella query del database.
Nota: non sarò preoccupato per lo styling della nostra pagina web. Sarà semplice e al punto.
Stiamo anche salvando tutto nella radice. Una buona pratica? Non esiste! Ma stiamo andando per la funzionalità. Pulire può accadere più tardi.
- Creare le seguenti pagine web e denominarle indice.html e dipendenti.HTML.
- indice.html sarà la nostra pagina principale di origine.
- Dipendenti.html sarà dove il nostro risultato finisce.
Note the <form action=”/Employees…
This is where our output will go.
Add the following to Employees.html
2. This next step is going to require a couple of things. Uno dei quali è come sto scegliendo di servire l’indice.HTML. Altre fonti che leggi potrebbero entrare nel routing. Il routing è un’area molto importante, ma al di fuori del nostro ambito. Il nostro modo è solo uno dei tanti modi. Le nuove aggiunte al nostro codice saranno,
- path — questo ci aiuterà a utilizzare res. sendFile per server il file che vogliamo quando un visitatore arriva al nostro sito.
- bodyParser-rende i dati del modulo disponibili una volta che un POST è fatto
- sendFile — consente di servire la pagina predefinita desiderata.
Apportare le seguenti modifiche al codice,
Eseguire con l’arresto e avvio del web server o rinfrescante. Nel tuo browser, dopo l’aggiornamento del browser,si dovrebbe vedere,
Utilizzando i dati del modulo HTML nella nostra query
Per questo, abbiamo bisogno di aggiungere un app.post. Questo coinvolgerà tutto ciò che desideriamo quando l’indice.html per è pubblicato dalla pagina web.
Questo è un passo importante. La nostra connessione al database e la query devono essere all’interno dell’app.funzione di callback post.
- Linea 13 avvia l’applicazione.post. Nel corpo del callback ci sono i nostri componenti del database.
- Linea 52 chiude l’applicazione.post.
Potremmo strutturare tutto questo in modo diverso, sì. Lo sto facendo in questo modo per darci una fondazione che funzionerà. Quindi possiamo esplorare altre opzioni
Usando i dati del modulo
Usare i dati del modulo sarà facile.
- Linea 35, ottenere i dati di un modulo da l’elemento di selezione. bodyParser è ciò che ci sta aiutando qui. req.corpo.elementname.
- Linea 37, la query, utilizza il valore dal modulo.
- La riga 50 invia i dati non elaborati interrogati ai dipendenti.HTML.
Eseguirlo arrestando e avviando il server web o aggiornandolo.
- Vai alla tua pagina web e aggiorna.
2. Scegli “Media” dal menu a discesa valutazione e fai clic su”Ottieni risultati ”
3. Dovresti ottenere l’output nei dipendenti.HTML. Non attraente, ma è un inizio.
ora Abbiamo una connessione dal nostro Front-End per il nostro Back-End per il nostro Front-End. Questo è un GROSSO PROBLEMA.
Ultimi passi-Ripulire l’output (un po’.)
Questa è la parte più semplice e più difficile. Più difficile perché ci sono così tante opzioni. Stiamo andando ad andare con le basi delle basi in modo da avere un assaggio di ciò che sta accadendo nel profondo.
Questa è una zona che si sta andando a voler esplorare in modo molto più dettagliato. Non solo metodi aggiuntivi di res, ma l’idea di un “motore di visualizzazione”.
E esplorerò alcuni di questi nei prossimi articoli. In particolare, uno dei miei preferiti, express-manubrio.
Per ora, stiamo andando a costruire il nostro output. Sì. Costruitelo noi stessi. Costruisci una tabella dei nostri dati in codice e inviala! Basta scorrere i nostri dati.recordset e costruire.
Consultare il seguente
È necessario aggiungere linee 50-57.
L’output sarà il seguente quando la ricerca di “Media”
Cosa fare dopo (sì, tu)
Gioca con esso, aggiungi altro, cambia la struttura. Lavorare partendo dalle basi e lavorare.
Stiamo lavorando con i primi principi per aiutarci a capire cosa succede dietro alcuni dei livelli che vengono aggiunti da modelli JavaScript, framework e librerie in questi giorni.
Abbiamo costruito da soli, un sistema full-stack. Sì, che ci crediate o no abbiamo.
Ciò che ha bisogno di più lavoro, l’output. Ma tutto questo esercizio apre un mondo di esplorazione e opportunità. Quindi vogliamo espandere i concetti di,
- Altre operazioni CRUD
- Routing
- Visualizza motori/modelli
Grazie per aver intrapreso questo viaggio e esploreremo di più.
Si può anche godere,