Share
For noen år siden begynte jeg, som mange, å høre mer og mer om Node.js. Jeg hadde bygd server-side applikasjoner i ColdFusion i over et tiår, men var alltid nysgjerrig på å se hvordan andre plattformer fungerte også. Jeg likte JavaScript på klienten og brukte det på serveren virket fascinerende. (Selv om det ikke er nødvendigvis nytt. Jeg er gammel nok til å huske når Netscape släppte SSJS tilbake på 90-tallet.) Jeg leste noen opplæringsprogrammer, satt i noen økter, og kom vanligvis unna ... unimpressed.
Hver gang jeg leser noe om Node, kom det til å komme tilbake til samme historie: å bygge en webserver. Helt ærlig, det var ikke spennende. Selv tilbake da jeg først gjorde webapplikasjoner i Perl CGI-skript, måtte jeg ikke bekymre meg om det. Jeg kunne se potensialet i små, lette API-leverandører, men ville jeg bygge et enkelt nettsted i det? Aldri!
Men da en dag ble jeg heldig. Jeg hadde bestemt meg for å sitte i en ny Node-presentasjon (hovedsakelig fordi jeg kjente presentatøren godt) og under presentasjonen viste taleren Express. En lyspære gikk av. Her var det Node-rammeverket jeg ventet på! Ja, i teorien bygger du fremdeles din egen webserver, men det aspektet er minimert, og i stedet kan du fokusere på logikk og innhold på nettstedet ditt. Enda bedre så jeg hvordan integrering av templerende motorer tillot en nesten ColdFusion (eller PHP) type opplevelse. I denne artikkelen skal jeg vise deg hvordan du installerer Express og hvordan du kommer i gang med å bygge webapplikasjoner ved hjelp av rammen.
Sannsynligvis er du allerede en Node-utvikler. Hvis du er ny på plattformen, kan du fortsatt være i ærefrykt for kraften til npm. Jeg vet jeg er. Som jeg sa, brukte jeg mesteparten av livet på ColdFusion. Det er et rikt, om ikke stort, økosystem for åpen kildekode for den plattformen. Men å oppdage og installere er en manuell affære. De første gangene jeg brukte npm var jeg i ærefrykt. Helt ærlig har jeg det vanskelig å forestille meg å bruke en plattform uten et verktøy som npm. La oss starte med en package.json fil der vi legger til uttrykksavhengigheten.
"navn": "demo1", "beskrivelse": "First Express app", "versjon": "0.0.1", "avhengigheter": "express": "3.x"
Igjen, dette bør være ganske standard til Node-utviklere. Gå ned til kommandolinjen og løp:
npm installasjon
Som vil installere Express og dens avhengigheter.
Omvendt kan du også installere Express som et kommandolinjeverktøy for å raskt generere skjelettapper. Dette kan gjøres ved å kjøre:
npm installer -g express
Når du har gjort det, kan du kjøre uttrykke på kommandolinjen for å generere et program.
La oss gå tilbake til programmet vi opprettet med den forrige package.json fil og legg til en app.js fil. I det minste vil programmet lage en ny forekomst av Express-objektet og begynne å lytte på en bestemt port. La oss starte med dette:
Accentsconagua
var express = kreve ('express'); var app = express (); app.listen (3000); Personlig pleier jeg å ta ting ganske sakte når jeg lærer et nytt rammeverk, så det kan være fornuftig å løpe raskt node app bare for å sikre at ingenting ble skrudd opp.
La oss nå prøve å legge til noen enkle ruter til søknaden. Ekspressprogrammer kan svare på ulike HTTP-verb som API-metoder. Så som et eksempel:
// Vanlig HTTP få app.get (noen url, gjør noe); // Noen annen side app.get (noen annen url, gjør noe annet); // Jeg kan svare på et skjema etter app.post (noen url, gjør flere ting);
La oss lage et reelt eksempel på dette og legge til en startside i programmet:
app.get ('/', funksjon (forespørsel, svar) response.send ("Dette ville være noen HTML");); Legg merke til at Express legger til en enkel sende() metode til respons gjenstand. Dette trekker ut noen av boilerplate-koden for å håndtere svar. Hvis du har gjort alt riktig, kan du nå starte programmet på nytt og åpne nettleseren din til port 3000.
De request.send () API håndterer også intelligent ulike typer data. Tenk deg at du vil legge til en enkel JSON-basert API til nettstedet ditt. Ved å bare returnere et objekt i stedet for en streng, vil Express håndtere å konvertere resultatet til JSON, samt sette de riktige svarhodene.
app.get ('/ api', funksjon (forespørsel, svar) response.send (navn: "Raymond", alder: 40);); Som du kan forestille deg, på dette tidspunkt ville det være å legge til flere og flere ruter for å håndtere hva dine behov måtte være, ved å bygge et søknad. La oss bygge et veldig enkelt statisk nettsted som bruker det vi har lært så langt.
For vårt første nettsted, vil vi bygge en blogg. Ja, dette er ikke veldig nytt eller spennende, men det er også noe som alle forstår konseptuelt. Du finner den komplette kildekoden for dette programmet i vedlagte nedlastning i blog1 mappe. Vi hopper over package.json filen som den er akkurat det samme, bortsett fra navnet. La oss i stedet se på app.js.
var express = kreve ('express'); var app = express (); app.get ('/', funksjon (req, res) res.sendfile ('./ views / index.html');); app.get ('/ om', funksjon (req, res) res.sendfile ('./ views / about.html');); app.get ('/ article', funksjon (req, res) res.sendfile ('./ views / article.html');); app.listen (3000); En av de første tingene du vil merke er at vi har byttet fra sende api til Send fil. Mens vi kunne legge inn store HTML-strenge i vår app.js fil, det ville bli rotete pen darn raskt. Vi har tre ruter for dette programmet. En for hjemmesiden, en for en "Om" -side, og en for en artikkel. Vanligvis vil artikkelsiden representere en blogginngang, men for nå holder vi ting enkelt.
HTML for våre sider er også ganske enkelt. Her er hjemmesiden:
Hjemmeside bloggen!
Legg merke til at det ikke er noe spesielt her ennå. Det er vanlig statisk HTML som vil bli returnert av Express-programmet som det er. Både Om- og Artikkel-sidene er de samme utenom endringer i tittelen og h1 verdier.
Igjen, brann dette opp på kommandolinjen og åpne nettleseren din. (Forresten, en av de vanlige feilene jeg gjorde da jeg først lærte Node, var å glemme å drepe mine tidligere demoer. Hvis du fortsatt kjører det siste programmet, vil det holde port 3000. Du kan enten drepe det eller bruke en annen port for dette søknad.) Du bør kunne bla gjennom dette enkle programmet i noen få enkle klikk.
La oss nå flytte fra statisk til dynamisk.
Express støtter en rekke templerende motorer. Template motorer er som mange ting i teknologien verden - ett skritt lavere enn religion og politikk. Ekspres kommandolinjen kan legge til støtte for Jade, EJS, JSHTML og Hogan. Ifølge Express-dokumentasjonen vil enhver templerende motor som samsvarer med en bestemt signatur, fungere med den. De anbefaler også å sjekke consolidate.js-biblioteket for en liste over støttede malmotorer.
Personlig er jeg en stor fan av Handlebars (handlebarsjs.com). Jeg har brukt den i mange applikasjoner på klientsiden, og det var en naturlig passform for meg å bruke på server siden. For å kunne bruke Handlebars må du installere et wrapper-bibliotek kalt hbs. La oss legge til dette i vår søknad.
"navn": "blog2", "beskrivelse": "Bloggapp", "versjon": "0.0.1", "avhengigheter": "express": "3.x", "hbs"
La oss nå oppdatere vår app.js å bruke denne motoren:
var express = kreve ('express'); var app = express (); var hbs = krever ('hbs'); app.set ('view engine', 'html'); app.engine ('html', hbs .__ express); app.get ('/', funksjon (req, res) res.render ('index');); app.get ('/ om', funksjon (req, res) res.render ('om');); app.get ('/ article', funksjon (req, res) res.render ('article');); app.listen (3000); Vi har gjort noen viktige ting her. For å bruke håndtak, laster vi inn (via krav) HBS wrapper-biblioteket. Vi må da fortelle Express å bruke den. Som standard vil Handlebars arbeide med filer som inneholder en utvidelse som samsvarer med den aktuelle motoren. I vårt tilfelle, something.hbs. Men vi kan fortelle Express å behandle HTML-filer som dynamiske ved å bruke "se motor" direktivet, ser du over. Dette er ikke nødvendig, men jeg foretrekker å jobbe med HTML-filer. Min redaktør kan da gi bedre koden hinting og syntaksutheving. Faktisk lastes motoren da gjennom app.engine.
Endelig bytter rutene alle til å bruke det nye gjengi metode. Uttrykk standardinnstillinger ved å bruke visningsmappen, slik at vi kan legge det av. Siden Express vet også utvidelsen vi foretrekker, kan vi også glemme det. I bunn og grunn, res.render ( 'noe') svarer til å fortelle Express å se etter visninger / something.html, analysere det basert på reglene i vår templerende motor, og returner den til nettleseren.
Du kan finne dette eksemplet i blog2 mappe, i vedlagte kildekoden. Som jeg sa før, liker jeg å ta barnetrinn, så selv om vi ikke egentlig gjør noe dynamisk, anbefaler jeg at du fyrer opp dette på kommandolinjen og sikrer at du fortsatt kan bla gjennom nettstedet.
Gitt at vi nå støtter dynamiske maler, kan vi faktisk gjøre dem dynamiske. Siden vi bygger en blogg, bør vi legge til støtte for å oppgi et sett med bloggoppføringer på hjemmesiden og la deg koble til en bestemt bloggmotor. Mens vi kunne brann opp en forbindelse til MySQL eller Mongo, la oss lage et statisk sett med data samt et enkelt wrapper-bibliotek for det. Her er en blog.js fil som gir både for å få et sett med oppføringer, så vel som å få bare en.
var oppføringer = ["id": 1, "tittel": "Hei verden!", "kropp": "Dette er kroppen til blogginnlegget mitt. Sooo spennende.", "publisert": "6/2/2013 "I dag hadde jeg egg til frokost. Sooo spennende.", "publisert": "6/3/2013", "id": 3, "tittel": "Øl er bra", "kropp": "News Flash! Øl er fantastisk!", "publisert": "6/4/2013", "id": 4 , "title": "Mean People Suck", "body": "Folk som er slemme, er ikke hyggelige eller morsomme å henge rundt.", "publisert": "6/5/2013", "id": 5, "tittel": "Jeg er Leaving Technology X og You Care", "body": "La meg skrive noen kobling agn om hvorfor jeg ikke bruker en bestemt teknologi lenger.", "Published": "6 / 10/2013 ", " id ": 6," title ":" Hjelp My Kickstarter "," body ":" Jeg vil ha en ny XBox One. Vennligst finansier min Kickstarter. "," Published ":" 6/12 /2013"]; exports.getBlogEntries = function () returoppføringer; exports.getBlogEntry = funksjon (id) for (var i = 0; i < entries.length; i++) if(entries[i].id == id) return entries[i];
Vanligvis vil vi også ha metoder for å legge til, redigere og slette, men for nå er dette tilstrekkelig. La oss nå se på en oppdatert app.js fil som bruker denne motoren.
var express = kreve ('express'); var app = express (); var hbs = krever ('hbs'); var blogEngine = krever ('./ blog'); app.set ('view engine', 'html'); app.engine ('html', hbs .__ express); app.use (express.bodyParser ()); app.get ('/', funksjon (req, res) res.render ('index', tittel: "Min blogg", oppføringer: blogEngine.getBlogEntries ();;); app.get ('/ om', funksjon (req, res) res.render ('om', tittel: "Om meg");); app.get ('/ article /: id', funksjon (req, res) var entry = blogEngine.getBlogEntry (req.params.id); res.render ('artikkel', tittel: entry.title, blog: oppføring);); app.listen (3000); La oss takle oppdateringene en etter en. (Denne versjonen finner du i blog3 mappe.) Først laster vi inn i vår motor ved hjelp av et raskt behov for anrop. Dette gir oss muligheten til å ringe det og få oppføringer. Du kan legge merke til en ny linjeanrop bodyParser, men ignorere det for nå.
I vår hjemmesiderrouter har vi passert et annet argument til gjengivelses-API. Argumentet er et objekt med to nøkler, tittel og innganger. Verdien for tittelen er bare en streng, men oppføringer kalles vår blogEngine API. Her er ting som blir interessante. Eventuelle data vi sender her vil være tilgjengelige for våre maler. Avhengig av malingsspråket ditt, kan opplysninger om hvordan du bruker det, endres, men vi kan se på hjemmesiden.
bloggen!
#each oppføringertittel
/Hver
Publisert: published
Hvis du aldri har brukt Handlebars før, kan du likevel nok ta et godt gjetning om hva som skjer her. De #Hver direktivet vil iterere over en matrise. Innsiden av blokken har jeg brukt en kombinasjon av Handlebar-tokens som peker tilbake til bloggdataene mine samt HTML for å generere en enkel liste over blogginnlegg. Kommer fra en ColdFusion-bakgrunn, er dette veldig kjent.
Jeg vedder på at du lurer på hvor resten av HTML-koden gikk. Når du bruker templerende motorer i Express, får du automatisk oppsettstøtte. Det betyr at jeg kan lage et generisk layout med nettstedet mitt design og Express vil injisere en bestemt side utgang i den. Etter konvensjon kalles dette layout.something hvor "noe" er den spesielle utvidelsen du bruker. Siden vi brukte HTML, vil dette bare være layout.html:
tittel kropp
Ganske glatt, ikke sant? Omsiden er ikke interessant, så vi hopper over det, men sjekk ut artikkelsruten. Den inneholder nå et token, : id, i nettadressen. Express tillater oss å lage dynamiske nettadresser som deretter kan kartlegge for å be om argumenter. Du vil legge merke til det tilbake på hjemmesiden, og vi definerte linker som så ut som dette: / Artikkel / id.
Vi vil i teorien legge til en rute for hver blogginnføring vi har, men det er mye bedre å lage en abstrakt rute som vil matche enhver forespørsel av den aktuelle form. For å få tilgang til denne verdien legger vi også til et annet stykke, bodyParser linje vi definerte tidligere. (Denne spesielle funksjonen kommer fra Connect-rammeverket, og gir deg ganske mye hjelp til å støtte både spørringsstreng og formlegemer. Nesten hver Express-app vil gjerne inkludere dette.)
Fordi vi får tilgang til den dynamiske verdien på slutten av nettadressen, kan vi bare sende denne til blogEngine objekt og bruk resultatet som et argument for visningen.
Her er article.html fil:
bloggtittel
Publisert: blog.published Blog.body
Nå har vi en virkelig dynamisk, men stygg, søknad. Her er vår nye hjemmeside:
Og her er en av en bestemt bloggoppføring:
La oss legge til noen grunnleggende styling til vår søknad for å gjøre det litt finere. Express gir en enkel måte å legge til støtte for statiske ressurser som bilder, JavaScript-biblioteker og stilark. Ved å bare definere en statisk mappe, vil enhver forespørsel for en fil bli sjekket mot den aktuelle mappen før den blir sammenlignet med ruter. Her er et eksempel fra den endelige versjonen av vår bloggmotor (som finnes i blog4 mappe):
app.use (express.static ( 'offentlige'));
På dette tidspunktet, hvis du ber om det /foo.css, og filen foo.css finnes i offentlig mappe, vil den bli returnert. Siden designkvaliteten min er like god som enhver utvikler, tok jeg den enkle veien ut og tok en kopi av Bootstrap (http://twitter.github.io/bootstrap/). Jeg droppet den og en kopi av jQuery, inn i min offentlig mappe.
Så i min layout.html, Jeg kan referere til disse ressursene. Her er et eksempel på å koble inn bootstrap.css:
Express vil nå automatisk sjekke for denne filen i offentlig mappe. Du kan ha flere statiske mapper som dette, og kan til og med sette opp tilpassede URL-prefikser for dem. Resultatet er - fantastisk. (Ok, sammenlignet med den første versjonen, er det en stor forbedring!)
Hjemmesiden:
Og en artikkel:
Vil du lære mer? Her er noen koblinger som kan være nyttige.
