Share
Alcuni anni fa, come molte persone, ho iniziato a sentire sempre di più su Node.js. Avevo sviluppato applicazioni lato server in ColdFusion per oltre un decennio, ma ero sempre curioso di vedere come funzionavano anche le altre piattaforme. Mi è piaciuto JavaScript sul client e utilizzarlo sul server sembrava affascinante. (Anche se non necessariamente nuovo, sono abbastanza vecchio da ricordare quando Netscape ha rilasciato SSJS negli anni '90.) Ho letto alcuni tutorial, mi sono seduto in alcune sessioni e in generale sono venuto via ... non impressionati.
Ogni volta che ho letto qualcosa su Node, ho finito per tornare alla stessa storia: costruire un server web. Francamente, non era eccitante. Anche quando ho realizzato per la prima volta applicazioni Web in script Perl CGI, non dovevo preoccuparmene. Potrei vedere il potenziale in provider di API piccoli e leggeri, ma dovrei creare un sito semplice in esso? Non c'è modo!
Ma poi un giorno sono stato fortunato. Avevo deciso di partecipare a un'altra presentazione di Node (principalmente perché conoscevo bene il presentatore) e durante la sua presentazione l'oratore ha dimostrato Express. Una lampadina si spense. Ecco la struttura del nodo che stavo aspettando! Sì, in teoria, stai ancora creando il tuo server web, ma questo aspetto è ridotto al minimo e puoi concentrarti sulla logica e sul contenuto del tuo sito. Ancora meglio, ho visto come l'integrazione dei motori di template permettesse un'esperienza di tipo quasi ColdFusion (o PHP). In questo articolo ti mostrerò come installare Express e come iniziare a costruire applicazioni web usando il framework.
Molto probabilmente sei già uno sviluppatore di nodi. Se sei nuovo sulla piattaforma, allora potresti comunque rimanere impressionato dalla potenza di npm. So di esserlo. Come ho detto, ho passato la maggior parte della mia vita a fare ColdFusion. Esiste un ricco, se non grande, ecosistema di open source per quella piattaforma. Ma scoprire e installare è un affare manuale. Le prime volte che usavo npm ero in soggezione. Francamente, ho difficoltà ora immaginando di usare una piattaforma senza uno strumento come npm. Iniziamo con a package.json file in cui aggiungeremo la dipendenza Express.
"name": "demo1", "description": "First Express app", "version": "0.0.1", "dependencies": "express": "3.x"
Ancora una volta, questo dovrebbe essere abbastanza standard per gli sviluppatori Node. Scendi alla riga di comando ed esegui:
installazione di npm
Che installerà Express e le sue dipendenze.
Al contrario, è anche possibile installare Express come strumento da riga di comando per generare rapidamente app skeleton. Questo può essere fatto eseguendo:
npm install -g express
Una volta che lo hai fatto, puoi correre esprimere alla riga di comando per generare un'applicazione.
Torniamo all'applicazione che abbiamo creato con la precedente package.json file e aggiungere un app.js file. Al minimo, l'applicazione creerà una nuova istanza dell'oggetto Express e inizierà l'ascolto su una particolare porta. Iniziamo con questo:
Accentsconagua
var express = require ('express'); var app = express (); app.listen (3000); Personalmente, tendo a prendere le cose molto lentamente quando apprendo un nuovo framework, quindi potrebbe avere senso correre velocemente nodo app solo per assicurarsi che nulla fosse rovinato.
Ora proviamo ad aggiungere alcuni semplici percorsi all'applicazione. Le app Express possono rispondere a vari verbi HTTP come metodi API. Quindi, ad esempio:
// Regular HTTP get app.get (un po 'di url, fai qualcosa); // Qualche altra pagina app.get (qualche altro url, fai qualcos'altro); // Posso rispondere a un modulo post app.post (un po 'di url, fare più cose);
Creiamo un vero esempio di questo e aggiungiamo una home page all'applicazione:
app.get ('/', function (request, response) response.send ("Questo sarebbe un po 'di HTML");); Si noti che Express aggiunge un semplice inviare() metodo per il risposta oggetto. Ciò astrae parte del codice boilerplate per gestire le risposte. Se hai fatto tutto bene, ora puoi riavviare l'applicazione e aprire il browser alla porta 3000.
Il Richiesta inviata() API gestisce anche in modo intelligente diversi tipi di dati. Immagina di voler aggiungere una semplice API basata su JSON al tuo sito. Semplicemente restituendo un oggetto anziché una stringa, Express gestirà la conversione del risultato in JSON e l'impostazione delle intestazioni di risposta appropriate.
app.get ('/ api', function (request, response) response.send (name: "Raymond", age: 40);); Come puoi immaginare, a questo punto, la creazione di un'applicazione consisterebbe nell'aggiunta di sempre più percorsi per gestire qualsiasi tua esigenza. Costruiamo un sito statico molto semplice che utilizza ciò che abbiamo imparato finora.
Per il nostro primo sito, costruiremo un blog. Sì, questo non è terribilmente nuovo o eccitante, ma è anche qualcosa che tutti concettualmente comprendono. È possibile trovare il codice sorgente completo per questa applicazione nel download allegato in blog1 cartella. Salteremo il package.json file in quanto è esattamente lo stesso, ad eccezione del nome. Guardiamo invece app.js.
var express = require ('express'); var app = express (); app.get ('/', function (req, res) res.sendfile ('./ views / index.html');); app.get ('/ about', function (req, res) res.sendfile ('./ views / about.html');); app.get ('/ article', function (req, res) res.sendfile ('./ views / article.html');); app.listen (3000); Una delle prime cose che noterai è che siamo passati da inviare api a inviare file. Mentre potremmo incorporare stringhe HTML di grandi dimensioni nel nostro app.js file, che sarebbe diventato dannatamente dannatamente veloce. Abbiamo tre percorsi per questa applicazione. Uno per la pagina iniziale, uno per una pagina "Informazioni" e uno per un articolo. In genere la pagina dell'articolo rappresenta un post di blog, ma per ora, stiamo mantenendo le cose semplici.
Anche l'HTML per le nostre pagine è piuttosto semplice. Ecco la home page:
Home Page blog!
Notate che non c'è ancora niente di speciale qui. È un semplice codice HTML statico che verrà restituito dall'applicazione Express così com'è. Entrambe le pagine Informazioni e Articolo sono le stesse al di fuori delle modifiche al titolo e h1 valori.
Ancora una volta, attivalo alla riga di comando e apri il browser. (A proposito, uno degli errori più comuni che ho commesso durante il primo apprendimento del Nodo è stato quello di dimenticare di uccidere i miei demo precedenti. Se si sta ancora utilizzando l'ultima applicazione, sarà in possesso della porta 3000. O uccidere o utilizzare un'altra porta per questo applicazione.) Dovresti essere in grado di navigare intorno a questa semplice applicazione in pochi semplici clic.
Passiamo ora da statico a dinamico.
Express supporta una varietà di motori di modelli. I motori di template sono come molte cose nel mondo della tecnologia - un passo più in basso rispetto a religione e politica. La linea di comando express può aggiungere il supporto per Jade, EJS, JSHTML e Hogan. Secondo la documentazione di Express, qualsiasi motore di template che sia conforme a una particolare firma funzionerà con esso. Si consiglia inoltre di controllare la libreria consolidate.js per un elenco di motori di template supportati.
Personalmente, sono un grande fan di Handlebars (handlebarsjs.com). L'ho usato in molte applicazioni lato client ed è stato naturale per me utilizzarlo sul lato server. Per utilizzare Handlebars è necessario installare una libreria wrapper chiamata hbs. Aggiungiamo questo alla nostra applicazione.
"nome": "blog2", "descrizione": "Blog app", "versione": "0.0.1", "dipendenze": "express": "3.x", "hbs": "*"
Ora aggiorniamo il nostro app.js usare questo motore:
var express = require ('express'); var app = express (); var hbs = require ('hbs'); app.set ('view engine', 'html'); app.engine ('html', hbs .__ express); app.get ('/', function (req, res) res.render ('index');); app.get ('/ about', function (req, res) res.render ('about');); app.get ('/ article', function (req, res) res.render ('article');); app.listen (3000); Abbiamo fatto alcune cose importanti qui. Per usare Handlebars, carichiamo (via require) la libreria wrapper HBS. Quindi dobbiamo dire a Express di usarlo. Per impostazione predefinita, Handlebars funzionerà con i file che contengono un'estensione corrispondente al motore particolare. Nel nostro caso, something.hbs. Ma possiamo dire a Express di trattare i file HTML come dinamici usando il "visualizza motore" direttiva, vedi sopra. Questo non è richiesto, ma preferisco lavorare con i file HTML. Il mio editor può quindi fornire suggerimenti sul codice più interessanti e l'evidenziazione della sintassi. In realtà il caricamento del motore viene quindi effettuato tramite app.engine.
Finalmente, i percorsi passano tutti a usare il nuovo rendere metodo. Esprimere le impostazioni predefinite per utilizzare la cartella visualizzazioni, in modo che possiamo lasciarlo spento. Poiché Express conosce anche l'estensione che preferiamo, possiamo anche dimenticarcene. Essenzialmente, res.render ( 'qualcosa') equivale a dire a Express di cercare views / something.html, analizzarlo in base alle regole del nostro motore di template e restituirlo al browser.
Puoi trovare questo esempio nel blog2 cartella, nel codice sorgente allegato. Come ho detto prima, mi piace fare piccoli passi, quindi anche se in realtà non stiamo facendo nulla di dinamico, ti consiglio di attivarlo alla riga di comando e assicurarti di poter ancora navigare nel sito.
Dato che ora supportiamo i modelli dinamici, rendiamoli effettivamente dinamici. Poiché stiamo creando un blog, dovremmo aggiungere il supporto per elencare una serie di post di blog nella home page e consentire il collegamento a un particolare motore di blog. Mentre potremmo attivare una connessione a MySQL o Mongo, creiamo un set di dati statici e una semplice libreria di wrapper. Ecco un blog.js file che fornisce sia per ottenere una serie di voci, sia per ottenerne una sola.
var entries = ["id": 1, "title": "Hello World!", "body": "Questo è il corpo del mio post di blog. Sooo exciting.", "published": "6/2/2013 ", " id ": 2," title ":" Eggs for Breakfast "," body ":" Oggi ho avuto uova per colazione. Sooo exciting. "," published ":" 6/3/2013 ", "id": 3, "title": "Beer is Good", "body": "Notizie Flash! Beer è fantastico!", "pubblicato": "6/4/2013", "id": 4 , "title": "Mean People Suck", "body": "Le persone che sono cattive non sono simpatiche o divertenti da tenere in giro.", "published": "6/5/2013", "id": 5, "titolo": "I'm Leaving Technology X and You Care", "body": "Lasciatemi scrivere qualche link esca sul motivo per cui non sto usando più una particolare tecnologia.", "Pubblicato": "6 / 10/2013 ", " id ": 6," title ":" Help My Kickstarter "," body ":" Voglio un nuovo XBox One. Finanziare il mio Kickstarter. "," Pubblicato ":" 6/12 / 2013" ]; exports.getBlogEntries = function () return entries; exports.getBlogEntry = function (id) for (var i = 0; i < entries.length; i++) if(entries[i].id == id) return entries[i];
In genere, avremmo anche metodi per aggiungere, modificare e cancellare, ma per ora questo è sufficiente. Vediamo ora un aggiornamento app.js file che utilizza questo motore.
var express = require ('express'); var app = express (); var hbs = require ('hbs'); var blogEngine = require ('./ blog'); app.set ('view engine', 'html'); app.engine ('html', hbs .__ express); app.use (express.bodyParser ()); app.get ('/', function (req, res) res.render ('index', title: "Il mio blog", voci: blogEngine.getBlogEntries ());); app.get ('/ about', function (req, res) res.render ('about', title: "About Me");); app.get ('/ article /: id', function (req, res) var entry = blogEngine.getBlogEntry (req.params.id); res.render ('article', title: entry.title, blog: voce);); app.listen (3000); Affrontiamo gli aggiornamenti uno ad uno. (Questa versione può essere trovata nel blog3 cartella.) In primo luogo, carichiamo nel nostro motore utilizzando una chiamata di richiesta rapida. Questo ci dà la possibilità di chiamarlo e ottenere le voci. Potresti notare una nuova chiamata di linea bodyParser, ma ignoralo per ora.
Nel router della nostra home page, abbiamo passato un secondo argomento all'API di rendering. L'argomento è un oggetto con due chiavi, titolo e inserimenti. Il valore per il titolo è solo una stringa, ma le voci chiamano le nostre BlogEngine API. Ecco dove le cose si fanno interessanti. Tutti i dati che passeremo qui saranno disponibili per i nostri modelli. A seconda del linguaggio del template, i dettagli su come lo si utilizza potrebbero cambiare, ma consente di guardare la home page.
blog!
#each entriestitolo
/ogni
Pubblicato: published
Se non hai mai usato Handlebars prima, puoi comunque probabilmente fare una buona ipotesi su cosa sta succedendo qui. Il #ogni direttiva itererà su un array. All'interno del blocco ho usato una combinazione di token Handlebar che rimandano ai miei dati del blog e HTML per generare un semplice elenco di post di blog. Provenendo da uno sfondo di ColdFusion, questo è molto familiare.
Scommetto che ti stai anche chiedendo dove sia andato il resto dell'HTML. Quando si utilizzano i motori di template in Express si ottiene il supporto per il layout automatico. Ciò significa che posso creare un layout generico con il mio design del sito e Express inietterà l'output di una particolare pagina al suo interno. Per convenzione, questo è chiamato layout.something dove "qualcosa" è l'estensione particolare che stai usando. Visto che abbiamo usato l'HTML, sarà solo così layout.html:
titolo corpo
Molto carino, vero? La pagina Informazioni su non è interessante, quindi la salterò, ma controlla il percorso dell'articolo. Ora include un token, : id, nell'URL. Express ci consente di creare URL dinamici che possono quindi mappare per richiedere argomenti. Noterai che di nuovo nella home page, abbiamo definito i link che assomigliavano a questo: / Article / id.
In teoria, aggiungeremo un percorso per ogni post di blog che abbiamo, ma è molto meglio creare un percorso astratto che corrisponda a qualsiasi richiesta di quel particolare modulo. Per ottenere l'accesso a questo valore, aggiungiamo anche un altro pezzo, il bodyParser linea che abbiamo definito in precedenza. (Questa particolare caratteristica proviene dal framework Connect e in realtà fornisce un po 'di aiuto per supportare sia la stringa di query sia i corpi dei moduli. Quasi tutte le app Express vorranno includerla.)
Poiché otteniamo l'accesso al valore dinamico alla fine dell'URL, possiamo semplicemente passare questo al BlogEngine oggetto e utilizzare il risultato come argomento per la vista.
Ecco il article.html file:
Titolo del Blog
Pubblicato: blog.published Blog.body
Ora abbiamo un'applicazione veramente dinamica, ma brutta. Ecco la nostra nuova home page:
Ed ecco uno di un particolare blog:
Aggiungiamo uno stile di base alla nostra applicazione per renderlo un po 'più carino. Express fornisce un modo semplice per aggiungere supporto per risorse statiche come immagini, librerie JavaScript e fogli di stile. Definendo semplicemente una cartella statica, qualsiasi richiesta verrà verificata per un file rispetto a quella particolare cartella prima di essere confrontata con le rotte. Ecco un esempio dalla versione finale del nostro motore di blog (che può essere trovato nel blog4 cartella):
app.use (express.static ( 'pubblico'));
A questo punto, se lo chiedi /foo.css, e il file foo.css esiste nel pubblico cartella, sarà restituito. Dal momento che le mie capacità di progettazione sono buone come qualsiasi sviluppatore, ho preso la via più semplice e ho preso una copia di Bootstrap (http://twitter.github.io/bootstrap/). L'ho lasciato cadere e una copia di jQuery, nella mia pubblico cartella.
Quindi dentro il mio layout.html, Posso fare riferimento a queste risorse. Ecco un esempio di collegamento in bootstrap.css:
Express ora controllerà automaticamente questo file all'interno di pubblico cartella. Puoi avere più cartelle statiche come questa e persino impostare prefissi URL personalizzati per loro. Il risultato è - sorprendente. (Ok, rispetto alla prima versione, è un enorme miglioramento!)
La Home page:
E un articolo:
Vuoi saperne di più? Ecco alcuni link che potrebbero essere utili.
