Share
Een paar jaar geleden begon ik, zoals veel mensen, steeds meer over Node.js. Ik was al meer dan een decennium bezig met het bouwen van server-side applicaties in ColdFusion, maar was altijd nieuwsgierig om te zien hoe andere platforms ook werkten. Ik heb genoten van JavaScript op de client en het gebruik ervan op de server leek me fascinerend. (Hoewel niet per se nieuw, ik ben oud genoeg om te onthouden wanneer Netscape SSJS in de jaren 90 uitbracht.) Ik las een paar tutorials, zat in een paar sessies en kwam in het algemeen weg ... niet onder de indruk.
Elke keer dat ik iets over Node las, kwam het uiteindelijk terug op hetzelfde verhaal: een webserver bouwen. Eerlijk gezegd was dat niet spannend. Zelfs toen ik voor het eerst webtoepassingen deed in Perl CGI-scripts, hoefde ik me daar geen zorgen over te maken. Ik zag het potentieel in kleine, lichtgewicht API-providers, maar zou ik er een eenvoudige site in bouwen? Echt niet!
Maar toen kreeg ik op een dag geluk. Ik had besloten om in een andere Node-presentatie te zitten (voornamelijk omdat ik de presentator goed kende) en tijdens zijn presentatie demonstreerde de spreker Express. Er ging een gloeilamp af. Hier was het Node-raamwerk waar ik op zat te wachten! Ja, in theorie bouw je nog steeds je eigen webserver, maar dat aspect wordt geminimaliseerd en in plaats daarvan kun je je richten op de logica en inhoud van je site. Sterker nog, ik zag hoe integrerende template-engines een bijna ColdFusion (of PHP) -type ervaring mogelijk maakten. In dit artikel laat ik zien hoe je Express installeert en hoe je aan de slag gaat met het bouwen van webtoepassingen met behulp van het framework.
Hoogstwaarschijnlijk bent u al een Node-ontwikkelaar. Als je nieuw bent op het platform, dan ben je misschien nog steeds onder de indruk van de kracht van npm. Ik weet dat ik dat ben. Zoals ik al zei, heb ik het grootste deel van mijn leven doorgebracht met ColdFusion. Er is een rijk, zo niet een groot, ecosysteem van open source voor dat platform. Maar ontdekken en installeren is een manuele aangelegenheid. De eerste paar keer dat ik npm gebruikte, had ik ontzag. Eerlijk gezegd kan ik me nu moeilijk voorstellen dat ik een platform zonder een tool zoals npm gebruik. Laten we beginnen met een package.json bestand waar we de Express-afhankelijkheid zullen toevoegen.
"name": "demo1", "description": "First Express app", "version": "0.0.1", "dependencies": "express": "3.x"
Nogmaals, dit zou vrij standaard moeten zijn voor Node-ontwikkelaars. Ga naar de opdrachtregel en voer uit:
npm installeren
Die Express en zijn afhankelijkheden zal installeren.
Omgekeerd kunt u Express ook als een opdrachtregelhulpprogramma installeren om snel skelet-apps te genereren. Dit kan gedaan worden door:
npm install -g express
Als je dat eenmaal hebt gedaan, kun je rennen uitdrukken op de opdrachtregel om een applicatie te genereren.
Laten we teruggaan naar de applicatie die we met de vorige hebben gemaakt package.json bestand en voeg een toe app.js het dossier. Uw toepassing zal minimaal een nieuw exemplaar van het Express-object maken en beginnen met luisteren op een bepaalde poort. Laten we beginnen met dit:
Accentsconagua
var express = require ('express'); var app = express (); app.listen (3000); Persoonlijk neem ik de neiging om dingen vrij langzaam te doen bij het leren van een nieuw raamwerk, dus het kan logisch zijn om snel te rennen knooppunt app alleen maar om ervoor te zorgen dat er niets werd verpest.
Laten we nu een paar eenvoudige routes toevoegen aan de toepassing. Express-apps kunnen op verschillende HTTP-werkwoorden reageren als API-methoden. Dus als voorbeeld:
// Regelmatige HTTP krijg app.get (sommige URL's, doe iets); // Een andere pagina app.get (een andere URL, doe iets anders); // Ik kan reageren op een formulier na app.post (sommige URL's, meer dingen doen);
Laten we hier een echt voorbeeld van maken en een startpagina toevoegen aan de applicatie:
app.get ('/', functie (verzoek, antwoord) response.send ("Dit zou wat HTML zijn");); Merk op dat Express een eenvoudig toevoegt sturen() methode om de antwoord voorwerp. Hiermee wordt een deel van de boilerplate-code weggelaten om antwoorden af te handelen. Als je alles goed hebt gedaan, kun je nu je applicatie opnieuw opstarten en je browser openen naar poort 3000.
De aanvraag verstuurd() API verwerkt ook op intelligente wijze verschillende soorten gegevens. Stel u voor dat u een eenvoudige JSON-gebaseerde API aan uw site wilt toevoegen. Door simpelweg een object in plaats van een tekenreeks te retourneren, zal Express het resultaat naar JSON converteren en de juiste antwoordheaders instellen.
app.get ('/ api', functie (request, response) response.send (name: "Raymond", age: 40);); Zoals je je kunt voorstellen, zou het bouwen van een applicatie op dit moment bestaan uit het toevoegen van meer en meer routes om aan te pakken wat je wensen ook zijn. Laten we een heel eenvoudige statische site bouwen die gebruikmaakt van wat we tot nu toe hebben geleerd.
Voor onze eerste site zullen we een blog bouwen. Ja, dit is niet erg nieuw of spannend, maar het is ook iets dat iedereen conceptueel begrijpt. U vindt de volledige broncode voor deze toepassing in de bijgevoegde download in de blog1 map. We zullen de package.json bestand zoals het precies hetzelfde is, behalve de naam. Laten we in plaats daarvan kijken app.js.
var express = require ('express'); var app = express (); app.get ('/', functie (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); Een van de eerste dingen die je zult opvallen, is dat we zijn overgestapt van de sturen api aan verstuur bestand. Hoewel we grote HTML-strings in onze kunnen opnemen app.js bestand, dat snel rommelig zou worden. We hebben drie routes voor deze toepassing. Eén voor de startpagina, één voor een 'Over'-pagina en één voor een artikel. Meestal zou de artikelpagina één blogbericht vertegenwoordigen, maar voorlopig houden we de dingen eenvoudig.
De HTML voor onze pagina's is ook vrij eenvoudig. Hier is de startpagina:
Startpagina blog!
Merk op dat hier nog niets speciaals is. Het is gewoon statische HTML die door de Express-toepassing wordt geretourneerd zoals deze is. Zowel de About- als Article-pagina's zijn hetzelfde buiten de wijzigingen in de titel en h1 waarden.
Nogmaals, start dit op via de commandoregel en open je browser. (Trouwens, een van de veelgemaakte fouten die ik maakte toen ik Node voor het eerst leerde was om te vergeten mijn vorige demo's te doden. Als je nog steeds de laatste applicatie gebruikt, dan zal het poort 3000 vasthouden. Of het doden of een andere poort gebruiken voor dit toepassing.) Met een paar klikken moet u rond deze eenvoudige toepassing kunnen bladeren.
Laten we nu van statisch naar dynamisch gaan.
Express ondersteunt verschillende template-engines. Sjabloonmotoren zijn net als veel dingen in de technologische wereld - een stap lager dan religie en politiek. De express-opdrachtregel kan ondersteuning toevoegen voor Jade, EJS, JSHTML en Hogan. Volgens de Express-documentatie werkt elke template-engine die voldoet aan een bepaalde handtekening ermee. Ze raden ook aan de consolidate.js-bibliotheek te controleren op een lijst met ondersteunde sjabloonengines.
Persoonlijk ben ik een grote fan van Handlebars (handlebarsjs.com). Ik heb het in veel client-side applicaties gebruikt en het was een natuurlijke fit voor mij om te gebruiken aan de serverkant. Om Handlebars te gebruiken, moet je een wrapperbibliotheek genaamd hbs installeren. Laten we dit toevoegen aan onze applicatie.
"naam": "blog2", "beschrijving": "Blog-app", "versie": "0.0.1", "afhankelijkheden": "express": "3.x", "hbs": "*"
Laten we nu onze app.js om deze motor te gebruiken:
var express = require ('express'); var app = express (); var hbs = require ('hbs'); app.set ('view engine', 'html'); app.engine ('html', hbs .__ express); app.get ('/', functie (req, res) res.render ('index');); app.get ('/ about', functie (req, res) res.render ('about');); app.get ('/ article', function (req, res) res.render ('article');); app.listen (3000); We hebben hier een paar belangrijke dingen gedaan. Om het Stuur te gebruiken, laden we (via eiste) de HBS-wikkelbibliotheek in. Vervolgens moeten we Express vertellen het te gebruiken. Handelingen werken standaard met bestanden die een extensie bevatten die overeenkomt met de betreffende engine. In ons geval, something.hbs. Maar we kunnen Express vertellen HTML-bestanden dynamisch te behandelen met behulp van de "bekijk motor" richtlijn, zie je hierboven. Dit is niet verplicht, maar ik werk liever met HTML-bestanden. Mijn redacteur kan dan een mooiere codehinting en syntaxisaccentuering bieden. Het laden van de motor gebeurt dan via app.engine.
Ten slotte schakelen de routes allemaal over naar het gebruik van het nieuwe geven methode. Express gebruikt standaard de viewmap, zodat we die kunnen laten staan. Omdat Express ook de extensie kent die wij prefereren, kunnen we dat ook vergeten. In wezen, res.render ( 'iets') komt neer op het vertellen van Express om naar te zoeken views / something.html, ontleed het op basis van de regels van onze templating-engine en stuur het terug naar de browser.
Je kunt dit voorbeeld vinden in de blog2 map, in de bijgevoegde broncode. Zoals ik al eerder zei, ik hou ervan om kleine stapjes te zetten, dus hoewel we eigenlijk niets dynamischs doen, raad ik aan dit op te roepen op de opdrachtregel en ervoor te zorgen dat je nog steeds op de site kunt bladeren.
Aangezien we nu dynamische sjablonen ondersteunen, laten we ze in feite dynamisch maken. Omdat we een blog aan het bouwen zijn, moeten we ondersteuning toevoegen voor het aanbieden van een reeks blogberichten op de startpagina, zodat u kunt linken naar een bepaalde blogmotor. We zouden een verbinding met MySQL of Mongo kunnen starten, maar laten we een statische gegevensset maken, evenals een eenvoudige wrapper-bibliotheek. Hier is een blog.js bestand dat zowel voorziet in het verkrijgen van een reeks items als het ontvangen van slechts één.
var entries = ["id": 1, "title": "Hello World!", "body": "Dit is de kern van mijn blog entry. Sooo spannend.", "published": "6/2/2013 ", " id ": 2," title ":" Eggs for Breakfast "," body ":" Vandaag had ik eieren voor het ontbijt. Sooo spannend. "," published ":" 6/3/2013 ", "id": 3, "titel": "Bier is goed", "lichaam": "Nieuwsflash! Bier is geweldig!", "gepubliceerd": "6/4/2013", "id": 4 , "title": "Mean People Suck", "body": "Mensen die gemeen zijn, zijn niet leuk of leuk om rond te hangen.", "published": "6/5/2013", "id": 5, "title": "I'm Leaving Technology X and You Care", "body": "Laat me wat linkbait schrijven over waarom ik geen bepaalde technologie meer gebruik.", "Published": "6 / 10/2013 ", " id ": 6," title ":" Help My Kickstarter "," body ":" Ik wil een nieuwe XBox One. Financier mijn Kickstarter. "," Published ":" 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];
Meestal zouden we ook methoden hebben voor toevoegen, bewerken en verwijderen, maar voorlopig is dit voldoende. Laten we nu kijken naar een update app.js bestand dat deze engine gebruikt.
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 ('/', functie (req, res) res.render ('index', title: "My Blog", entries: blogEngine.getBlogEntries ());); app.get ('/ about', function (req, res) res.render ('about', title: "Over Me");); app.get ('/ article /: id', functie (req, res) var entry = blogEngine.getBlogEntry (req.params.id); res.render ('article', title: entry.title, blog: invoer);); app.listen (3000); Laten we de updates een voor een aanpakken. (Deze versie is te vinden in de Blog3 map.) Allereerst laden we onze engine in met een snel vereiste oproep. Dit geeft ons de mogelijkheid om het te bellen en inzendingen te krijgen. U kunt een nieuwe lijnoproep opmerken bodyParser, maar negeer dat voor nu.
In onze router voor startpagina hebben we een tweede argument doorgegeven aan de render-API. Het argument is een object met twee sleutels, titel en entries. De waarde voor titel is slechts een tekenreeks, maar vermeldingen oproepen onze BlogEngine API. Hier worden dingen interessant. Alle gegevens die we hier doorgeven, zijn beschikbaar voor onze sjablonen. Afhankelijk van de taal van uw sjabloon kunnen de gegevens over de manier waarop u deze gebruikt, veranderen, maar kunt u de startpagina bekijken.
blog!
#each entriestitel
/elk
Gepubliceerd: published
Als je nog nooit stuurknuppel hebt gebruikt, kun je waarschijnlijk wel raden wat hier aan de hand is. De #elk directive zal een array herhalen. Binnen in het blok heb ik een combinatie van stuurstokens gebruikt die verwijzen naar mijn bloggegevens en HTML om een eenvoudige lijst met blogberichten te genereren. Afkomstig van een ColdFusion-achtergrond is dit zeer bekend.
Ik wed dat je je ook afvraagt waar de rest van de HTML naartoe is gegaan. Bij het gebruik van templating-engines in Express krijgt u automatische lay-outondersteuning. Dat betekent dat ik een generieke lay-out kan maken met mijn site-ontwerp en dat Express de uitvoer van een bepaalde pagina erin zal injecteren. Volgens afspraak wordt dit genoemd layout.something waar "iets" de specifieke extensie is die u gebruikt. Sinds we HTML gebruikten, zal dit gewoon zo zijn layout.html:
titel lichaam
Behoorlijk glad, toch? De About-pagina is niet interessant dus we zullen het overslaan, maar bekijk de artikelroute. Het bevat nu een token, :ID kaart, in de URL. Met Express kunnen we dynamische URL's maken die vervolgens kunnen worden toegewezen om argumenten aan te vragen. U zult opmerken dat we terug op de startpagina links hebben gedefinieerd die er als volgt uitzagen: / Article / id.
We zouden in theorie één route toevoegen voor elk blogbericht dat we hebben, maar het is veel beter om een abstracte route te maken die overeenkomt met elk verzoek van dat specifieke formulier. Om toegang te krijgen tot deze waarde, voegen we ook een ander stuk toe, het bodyParser regel die we eerder hebben gedefinieerd. (Deze specifieke functie is afkomstig van het Connect-framework en biedt eigenlijk nogal wat hulp voor u bij het ondersteunen van zowel query-tekenreeksen als formulier-instanties. Bijna elke Express-app wil dit opnemen.)
Omdat we aan het einde van de URL toegang hebben tot de dynamische waarde, kunnen we dit eenvoudig doorgeven aan de BlogEngine object en gebruik het resultaat als een argument voor de weergave.
Hier is de article.html het dossier:
Blog Titel
Gepubliceerd: blog.published Blog.body
Nu hebben we een echt dynamische, maar lelijke toepassing. Dit is onze nieuwe startpagina:
En hier is een van een bepaald blogbericht:
Laten we wat basisstyling toevoegen aan onze applicatie om het een beetje mooier te maken. Express biedt een eenvoudige manier om ondersteuning toe te voegen voor statische bronnen, zoals afbeeldingen, JavaScript-bibliotheken en stijlpagina's. Door simpelweg een statische map te definiëren, wordt elke aanvraag voor een bestand vergeleken met die specifieke map voordat deze met routes wordt vergeleken. Hier is een voorbeeld uit de definitieve versie van onze blog-engine (die te vinden is in de blog4 map):
app.use (express.static ( 'public'));
Op dit moment, als u daarom vraagt /foo.css, en het bestand foo.css bestaat in de openbaar map, wordt deze geretourneerd. Omdat mijn ontwerpvaardigheden net zo goed zijn als welke ontwikkelaar dan ook, nam ik de eenvoudige weg en pakte ik een kopie van Bootstrap (http://twitter.github.io/bootstrap/). Ik liet het en een kopie van jQuery in mijn openbaar map.
Dan in mijn layout.html, Ik kan naar deze bronnen verwijzen. Hier is een voorbeeld van koppelen bootstrap.css:
Express zoekt nu automatisch naar dit bestand in de openbaar map. U kunt meerdere statische mappen zoals deze hebben en u kunt er zelfs aangepaste URL-voorvoegsels voor instellen. Het resultaat is - verbluffend. (Oké, vergeleken met de eerste versie is dit een enorme verbetering!)
De startpagina:
En een artikel:
Wilt u meer weten? Hier zijn enkele links die nuttig kunnen zijn.
