Share
För några år sedan började jag, som många, börja höra mer och mer om Node.js. Jag hade byggt upp applikationer på serversidan i ColdFusion i över ett decennium, men var alltid nyfiken på hur andra plattformar fungerade också. Jag åtnjöt JavaScript på klienten och använde det på servern verkade fascinerande. (Även om det inte är nödvändigtvis nytt. Jag är gammal nog att komma ihåg när Netscape släppte SSJS tillbaka på 90-talet.) Jag läste några tutorials, satt i några sessioner och kom generellt iväg ... unimpressed.
Varje gång jag läste någonting om Node kom det slut på samma historia: bygga en webbserver. Uppriktigt sagt var det inte spännande. Till och med när jag först gjorde webbapplikationer i Perl CGI-skript behövde jag inte oroa mig för det. Jag kunde se potentialen i små, lätta API-leverantörer, men skulle jag bygga en enkel webbplats i den? Aldrig!
Men då en dag hade jag tur. Jag hade bestämt mig för att sitta i en enda nodpresentation (främst för att jag kände till presentatören bra) och under sin presentation demonstrerade talaren Express. En glödlampa gick av. Här var det Node-ramverket som jag väntade på! Ja, i teorin bygger du fortfarande din egen webbserver, men den aspekten minimeras och istället kan du fokusera på logik och innehåll på din webbplats. Ännu bättre såg jag hur integrering av templerande motorer tillåts för en nästan ColdFusion (eller PHP) typupplevelse. I den här artikeln visar jag hur du installerar Express och hur du börjar bygga webbapplikationer med hjälp av ramverket.
Troligtvis är du redan en Node-utvecklare. Om du är ny på plattformen, kanske du fortfarande är i ont för kraften i npm. Jag vet att jag är. Som jag sa gjorde jag mest av mitt liv att göra ColdFusion. Det finns ett rikt, om inte stort, öppet ekosystem för den plattformen. Men att upptäcka och installera är en manuell affär. De första gångerna jag använde npm var jag i ærefrykt. Uppriktigt sagt har jag svårt att tänka mig att använda en plattform utan ett verktyg som npm. Låt oss börja med a package.json fil där vi lägger till expressberoendet.
"namn": "demo1", "beskrivning": "First Express app", "version": "0.0.1", "beroenden": "express": "3.x"
Återigen bör detta vara ganska standard för Node-utvecklare. Släpp ner till kommandoraden och kör:
npm installera
Vilket kommer att installera Express och dess beroenden.
Omvänt kan du också installera Express som ett kommandoradsverktyg för att snabbt generera skelettapp. Detta kan göras genom att springa:
npm installera -g express
När du har gjort det kan du springa uttrycka på kommandoraden för att generera en applikation.
Låt oss gå tillbaka till den ansökan vi skapade med föregående package.json fil och lägg till en app.js fil. Minst kommer din ansökan att skapa en ny instans av Express-objektet och börja lyssna på en viss port. Låt oss börja med detta:
Accentsconagua
var express = kräver ("express"); var app = express (); app.listen (3000); Personligen tenderar jag att ta saker ganska långsamt när jag lär mig en ny ram, så det kan vara vettigt att snabbt springa nod app bara för att försäkra sig om att ingenting var skruvat upp.
Låt oss nu försöka lägga till några enkla vägar till applikationen. Express-appar kan svara på olika HTTP-verb som API-metoder. Så som ett exempel:
// Vanlig HTTP få app.get (lite url, gör något); // Någon annan sida app.get (någon annan webbadress, gör något annat); // Jag kan svara på ett formulär efter app.post (vissa webbadresser, göra fler saker);
Låt oss skapa ett riktigt exempel på detta och lägg till en hemsida till programmet:
app.get ('/', funktion (begäran, svar) response.send ("Detta skulle vara lite HTML");); Observera att Express lägger till en enkel skicka() metod till svar objekt. Detta sammanfaller bort några av kedjeplattformen för att hantera svaren. Om du har gjort allt rätt, kan du nu starta om din ansökan och öppna din webbläsare till port 3000.
De request.send () API hanterar också intelligent olika typer av data. Tänk dig att du vill lägga till ett enkelt JSON-baserat API till din webbplats. Genom att helt enkelt returnera ett objekt istället för en sträng, kommer Express att hantera omvandling av resultatet till JSON samt inställning av lämpliga svarhuvuden.
app.get ('/ api', funktion (begäran, svar) response.send (namn: "Raymond", ålder: 40);); Som du kan föreställa dig, skulle byggandet av en ansökan vid denna tidpunkt bestå av att lägga till fler och fler rutter för att hantera vad dina behov kan vara. Låt oss bygga en mycket enkel statisk webbplats som använder det vi hittills har lärt oss.
För vår första webbplats bygger vi en blogg. Ja, det här är inte väldigt nytt eller spännande, men det är också något som alla begreppsmässigt förstår. Du kan hitta den fullständiga källkoden för den här applikationen i den bifogade nedladdningen i blog1 mapp. Vi hoppar över package.json filen eftersom den är exakt densamma, med undantag för namnet. Låt oss istället titta på app.js.
var express = kräver ("express"); var app = express (); app.get ('/', funktion (req, res) res.sendfile ('./ views / index.html');); app.get ('/ om', funktion (req, res) res.sendfile ('./ views / about.html');); app.get ('/ article', funktion (req, res) res.sendfile ('./ views / article.html');); app.listen (3000); En av de första sakerna du märker är att vi bytte från skicka api till skicka Fil. Medan vi kunde integrera stora HTML-strängar i vårt app.js fil, det skulle bli ruttigt vackert darn snabbt. Vi har tre rutter för denna applikation. En för hemsidan, en för en "Om" -sida och en för en artikel. Vanligtvis representerar artikelsidan en blogginmatning, men för närvarande håller vi på att hålla sakerna enkla.
HTML för våra sidor är också ganska enkelt. Här är hemsidan:
Hemsida blogg!
Lägg märke till att det inte är något speciellt här än. Det är vanlig statisk HTML som kommer att returneras av Express-programmet som det är. Både om- och artikelsidorna är desamma utanför ändringar i titeln och h1 värden.
Återigen, brand upp det här på kommandoraden och öppna din webbläsare. (Förresten, ett av de vanliga misstag som jag gjorde när jag lärde mig att lära känna Nod var att glömma att döda mina tidigare demonstrationer. Om du fortfarande kör den sista applikationen kommer den att hålla port 3000. Du kan antingen döda den eller använda en annan port för detta ansökan.) Du bör kunna bläddra runt den här enkla applikationen med några enkla klick.
Låt oss nu flytta från statisk till dynamisk.
Express stöder olika templerande motorer. Mallmotorer är som många saker i teknikvärlden - ett steg lägre än religion och politik. Den uttryckliga kommandoraden kan lägga till stöd för Jade, EJS, JSHTML och Hogan. Enligt Express dokumentationen kommer alla templerande motorer som överensstämmer med en viss signatur att fungera med det. De rekommenderar också att du kontrollerar consolidate.js-biblioteket för en lista över stödda mallmotorer.
Personligen är jag ett stort fan av Handlebars (handlebarsjs.com). Jag har använt den i många applikationer på klientsidan och det var en naturlig passform för mig att använda på serverns sida. För att kunna använda Handlebars måste du installera ett wrapper-bibliotek som heter hbs. Låt oss lägga till detta i vår ansökan.
"namn": "blog2", "beskrivning": "Bloggapp", "version": "0.0.1", "beroenden": "express": "3.x", "hbs"
Låt oss nu uppdatera vår app.js att använda denna motor:
var express = kräver ("express"); var app = express (); var hbs = kräver ('hbs'); app.set ('view engine', 'html'); app.engine ('html', hbs .__ express); app.get ('/', funktion (req, res) res.render ('index');); app.get ('/ om', funktion (req, res) res.render ('about');); app.get ('/ article', funktion (req, res) res.render ('article');); app.listen (3000); Vi har gjort några viktiga saker här. För att använda Handlebars laddas vi in (via krav) HBS wrapper-biblioteket. Vi måste sedan berätta för Express att använda den. Som standard kommer Handlebars att fungera med filer som innehåller en förlängning som matchar den aktuella motorn. I vårat fall, something.hbs. Men vi kan säga Express att behandla HTML-filer som dynamiska genom att använda "visa motor" direktivet ser du ovan. Detta är inte nödvändigt, men jag föredrar att arbeta med HTML-filer. Min redaktör kan sedan ge trevligare kod hinting och syntax markering. Faktum är att laddning av motorn görs via app.engine.
Slutligen byter rutorna alla till att använda det nya göra metod. Uttryck standardinställningarna för att använda visningsmappen, så vi kan lämna det av. Eftersom Express också känner till den förlängning vi föredrar, kan vi också glömma det. Väsentligen, res.render ( 'någonting') motsvarar att säga Express att leta efter visningar / something.html, analysera den baserat på reglerna för vår templerande motor och returnera den till webbläsaren.
Du kan hitta detta exempel i blog2 mappen i den bifogade källkoden. Som jag sa tidigare gillar jag att ta barnsteg, så även om vi inte gör någonting dynamiskt rekommenderar jag att du bränner upp detta på kommandoraden och ser till att du fortfarande kan bläddra på webbplatsen.
Med tanke på att vi nu stöder dynamiska mallar, kan vi faktiskt göra dem dynamiska. Eftersom vi bygger en blogg borde vi lägga till stöd för att lista en uppsättning blogginlägg på hemsidan och låta dig länka till en viss bloggmotor. Medan vi kunde koppla upp en anslutning till MySQL eller Mongo, låt oss skapa en statisk uppsättning data samt ett enkelt omslagsbibliotek för det. Här är en blog.js fil som ger både för att få en uppsättning poster samt få bara en.
var entries = ["id": 1, "title": "Hej World!", "body": "Detta är kroppen i min blogginlägg. Sååå spännande.", "publicerad": "6/2/2013 "Ägg till frukost", "kropp": "Idag hade jag ägg till frukost. Så spännande.", "publicerad": "6/3/2013", "id": 3, "title": "Öl är bra", "kropp": "News Flash! Öl är fantastiskt!", "publicerat": "6/4/2013", "id": 4 , "title": "Mean People Suck", "body": "Människor som är medelvärda är inte trevliga eller roliga att hänga.", "publicerad": "6/5/2013", "id": 5, "title": "Jag lämnar tekniken X and You Care", "body": "Låt mig skriva lite länk bete om varför jag inte använder någon speciell teknik längre.", "Publicerad": "6 / 10/2013 ", " id ": 6," title ":" Hjälp My Kickstarter "," body ":" Jag vill ha en ny XBox One. Vänligen funda min Kickstarter. "," Publicerad ":" 6/12 / 2013" ]; exports.getBlogEntries = function () return entries; exports.getBlogEntry = funktion (id) for (var i = 0; i < entries.length; i++) if(entries[i].id == id) return entries[i];
Vanligtvis skulle vi också ha metoder för att lägga till, redigera och ta bort, men för närvarande är det tillräckligt. Låt oss nu titta på en uppdaterad app.js fil som använder den här motorn.
var express = kräver ("express"); var app = express (); var hbs = kräver ('hbs'); var blogEngine = kräver ('./ blogg'); app.set ('view engine', 'html'); app.engine ('html', hbs .__ express); app.use (express.bodyParser ()); app.get ('/', funktion (req, res) res.render ('index', title: "My Blog", poster: blogEngine.getBlogEntries ());); app.get ('/ om', funktion (req, res) res.render ('about', title: "About Me");); app.get ('/ article /: id', funktion (req, res) var entry = blogEngine.getBlogEntry (req.params.id); res.render ('article', title: entry.title, blog: post;); app.listen (3000); Låt oss ta itu med uppdateringarna en efter en. (Den här versionen finns i blog3 mapp.) Först laddar vi i vår motor med ett snabbt behov av samtal. Detta ger oss möjlighet att ringa det och få poster. Du kanske märker en ny linjeanrop bodyParser, men ignorera det för nu.
I vår hemsida router har vi passerat ett andra argument till render API. Argumentet är ett objekt med två nycklar, titel och anteckningar. Värdet för titel är bara en sträng, men poster kallar vår blogEngine API. Här är saker som blir intressanta. Alla data som vi skickar här kommer att finnas tillgängliga för våra mallar. Beroende på ditt malspråk kan uppgifterna om hur du använder det ändras, men vi kan titta på hemsidan.
blogg!
#each entriestitel
/varje
Publicerad: published
Om du aldrig har använt Handlebars tidigare kan du fortfarande troligen ta en bra gissning om vad som händer här. De #varje direktivet kommer att iterera över en array. Inne i blocket har jag använt en kombination av Handlebar-tokens som pekar på min blogginformation samt HTML för att skapa en enkel lista över blogginlägg. Ur en ColdFusion-bakgrund är detta mycket bekant.
Jag slår vad om att du också undrar var resten av HTML-filen gick. När du använder templerande motorer i Express får du automatisk layoutstöd. Det betyder att jag kan skapa en generell layout med min webbplatsdesign och Express kommer att injicera en viss sidas utdata inom den. Enligt konvention kallas detta layout.something där "något" är den specifika förlängningen du använder. Eftersom vi använde HTML, kommer det bara att vara layout.html:
titel kropp
Ganska slick, eller hur? Omsidan är inte intressant så vi kommer att hoppa över det, men kolla in artikelrutten. Det innehåller nu ett token, : id, i webbadressen. Express tillåter oss att skapa dynamiska webbadresser som då kan kartläggas för att begära argument. Du märker det tillbaka på hemsidan, vi definierade länkar som såg ut så här: / Artikeln / id.
Vi skulle i teorin lägga till en rutt för varje blogginmatning vi har, men det är mycket bättre att skapa en abstrakt rutt som matchar alla önskemål från den aktuella formuläret. För att få tillgång till detta värde lägger vi också till i ett annat stycke, bodyParser linje vi definierade tidigare. (Denna speciella funktion kommer från Connect-ramen och ger dig en hel del hjälp för att stödja både frågesträng och formulärkroppar. Nästan varje Express-app vill inkludera detta.)
Eftersom vi får tillgång till det dynamiska värdet i slutet av webbadressen kan vi helt enkelt sedan vidarebefordra detta till blogEngine objekt och använd resultatet som ett argument för vyn.
Här är article.html fil:
Bloggtitel
Publicerad: blog.publicated Blog.body
Nu har vi en verkligt dynamisk, men grym applikation. Här är vår nya hemsida:
Och här är en av en viss blogginmatning:
Låt oss lägga till några grundläggande styling till vår ansökan för att göra det lite sötare. Express ger ett enkelt sätt att lägga till stöd för statiska resurser som bilder, JavaScript-bibliotek och stilark. Genom att helt enkelt definiera en statisk mapp kommer varje begäran för en fil att kontrolleras mot den specifika mappen innan den jämförs med rutter. Här är ett exempel från den slutliga versionen av vår bloggmotor (som finns i blog4 mapp):
app.use (express.static ( 'allmänheten'));
Vid denna punkt, om du begär /foo.css, och filen foo.css finns i offentlig mappen kommer den att returneras. Eftersom mina designkunskaper är lika bra som någon utvecklare tog jag den enkla vägen ut och grep en kopia av Bootstrap (http://twitter.github.io/bootstrap/). Jag släppte den och en kopia av jQuery, in i min offentlig mapp.
Sedan inom min layout.html, Jag kan hänvisa till dessa resurser. Här är ett exempel på att länka in bootstrap.css:
Express kommer nu automatiskt att kolla efter den här filen inom offentlig mapp. Du kan ha flera statiska mappar så här och kan även konfigurera anpassade URL-prefix för dem. Resultatet är - fantastiskt. (Ok, jämfört med den första versionen, det är en stor förbättring!)
Hemsidan:
Och en artikel:
Vill du lära dig mer? Här är några länkar som kan vara till hjälp.
