Aan de slag met Express.js

JavaScript neemt het voortouw in webontwikkeling, zijn rijkdom aan realtime verwerkingsroutines en bijbehorende veelzijdigheid hebben het tot een van de snelstgroeiende talen van de afgelopen 5 jaar gemaakt.

Sinds de release van Node.js Er is al veel gezegd over het maken van applicaties die gebruikmaken van één taal, en tegenwoordig is het mogelijk door gebruik te maken van Front-End-frameworks zoals AngularJS of Backbone.js, ook met behulp van databases zoals MongoDB of BankDB en tot slot aan de serverkant werken met de krachtige Node.js.

Maar om vanaf het begin met grote applicaties te werken Node.js we moeten veel repetitieve en complexe dingen doen, daar komt het om de hoek kijken Express.js, wat niets meer is dan een MVC-framework dat ons helpt om de uitwerking van onze logica te vereenvoudigen Back-end, en vertrouwen op Node.js resulteert in grote toepassingen die volledig in JavaScript.

VereistenOnze vereisten zijn vrij eenvoudig, we hoeven alleen maar te hebben: Node.js geïnstalleerd en actief op ons systeem, als we de nieuwste versie hebben, moeten we ervoor zorgen dat we ook: npm beschikbaar, wat de tool is waarmee we de verschillende pakketten kunnen installeren die we nodig hebben, zoals in het geval van het framework, Express.js.

1. Express.js

Dit framework is ontworpen om een ​​aantal functies te hebben die zijn geïnspireerd op andere frameworks, zoals: Rails of Sinatra, betekent dit dat wanneer een ervaren ontwikkelaar hem in handen krijgt, hij zich op zijn gemak kan voelen bij het hanteren van concepten die hij al kent, maar met de kracht van Node.js en alleen met behulp van JavaScript de ontwikkelingssnelheid wordt vermenigvuldigd.

Laten we, voordat we dieper op het onderwerp ingaan, eerst kijken naar de belangrijkste kenmerken van: Express.js:

MinimumHet idee achter het framework is om niet betrokken te raken bij andere zaken die niet bemiddelen tussen onze applicatie en de server, hiervoor compliceert het ons leven niet met duizenden componenten, maar voorziet het ons alleen van de meest noodzakelijke dingen.

FlexibelVanwege zijn minimale karakter, krijg je een grote flexibiliteit omdat de ontwikkelaar kan kiezen hoe hij wil werken en zijn eigen oplossingen mag implementeren of kant-en-klare oplossingen zoals ORM voor verschillende soorten Databases.

Gemaakt voor toepassingenHet doel van Express.js is om de bouw van webapplicaties te vergemakkelijken, of het nu gaat om pagina's, services RUST UIT, of zelfs hybride toepassingen.

2. de steigers

Dit is een term die we misschien hebben gezien van Rails en andere kaders, wordt het veel gebruikt in Express.js en het is niets meer dan het raamwerk dat een structuur en basiscode genereert, ook wel standaardtekst die ons helpt onze applicatie te starten.

Op deze manier kunnen we het raamwerk van een project creëren vanuit een commando en zo vergeten dat we elk van de benodigde mappen en basisbestanden moeten onthouden. Het is duidelijk dat, aangezien dit iets zo algemeens is, we vaak veel dingen herschrijven of onze eigen mappen maken, maar om een ​​startpunt te hebben is perfect.

3. Installeer Express.js

De installatie van het framework is vrij eenvoudig, dankzij de stappen die nodig zijn npm, voor installatie Express.js we hoeven alleen maar naar de opdrachtconsole te gaan waar we kunnen uitvoeren npm en plaats het volgende commando:

 npm install express --save

Hierdoor zal ons systeem alle benodigde code downloaden om onze projecten te kunnen genereren en ook om de verschillende tools te gebruiken die het plaatst Express.js Tot onze beschikking zullen we in de console zoiets als het volgende zien als de installatie is gelukt.

We kunnen zien dat er verschillende bijbehorende pakketten zijn geïnstalleerd en dat de versie van Express.js op het moment van schrijven is deze tutorial de 4.11.2, hier is het belangrijk om erop te wijzen dat er vanaf versie 4 een grote verandering was, dus het is belangrijk als we naar informatie zoeken om er zeker van te zijn dat het voor versie 4 en later is.

Onze eerste appVoor onze eerste toepassing gaan we een webpagina maken met twee secties, omdat we de tool net leren kennen, elke sectie zal een kleine tekst hebben, het belangrijkste is dat we een kleine server moeten maken en de verzoeken van onze gebruikers.

4. De server

Het eerste dat we moeten doen, is een map maken waar onze applicatie naartoe gaat en binnenin een bestand maken met de naam index.js, deze naam wordt over het algemeen als een conventie geplaatst, maar het kan elke andere naam zijn, in feite gaan we dingen veranderen en de naam van ons bestand plaatsen halloexpress.js.

Zodra we ons bestand hebben, beginnen we met het opnemen van: nadrukkelijk met behulp van instructie vereisen, hiermee hebben we alle tools van het raamwerk tot onze beschikking, dan zullen we de methoden gebruiken set() Y gebruik maken van (), waarbij we met de eerste de poort vaststellen waardoor onze server moet wachten op verbindingen, en met de tweede zullen we vaststellen wat er moet gebeuren als we een 404-fout of een 500-fout krijgen.

Eindelijk met de methode luister () we zullen onze applicatie laten opstaan ​​​​wanneer we ons bestand uitvoeren. Laten we de onderstaande code bekijken:

 var express = vereisen ('express'); var app = express (); app.set ('port', process.env.PORT || 3001); app.use (function (req, res) {res.type ( 'text / plain'); res.status (404); res.send ('404 - Not Found');}); app.use (function (err, req, res, next) {console.error (err. stack); res.type ('text / plain'); res.status (500); res.send ('500 - Er is iets mis!');}); app.listen (app.get ('port') , function () {console.log ('Express is gestart op http: // localhost:' + app.get ('port') + '; druk op Ctrl-C om de server te sluiten.');});

Nu hoeven we alleen de volgende opdracht in de console te schrijven:

 node helloexpress.js

Hiermee gaat onze server omhoog. Het probleem is dat we niets zullen zien, dit komt omdat we de routes van de applicatie niet hebben vastgesteld, maar als we het volgende scherm zien zien we dat het werkt omdat ons bericht dat we voor 404 hebben geplaatst is uitgekomen.

VERGROTEN

5. Inclusief de routes

Om een ​​resultaat te verkrijgen dat verder gaat dan de 404-pagina die we genereren, moeten we routes opnemen, wat niets meer is dan onze applicatie te vertellen dat wanneer een gebruiker een route aanvraagt ​​met een methode HTTP specifiek wordt een resultaat dat we definiëren geretourneerd, dus een route krijgen het is niet hetzelfde als een route na en daarom kunnen beide, ondanks dat ze onder dezelfde leiding staan, ons verschillende resultaten geven.

Dus laten we een paar routes maken krijgen, deze code moet net voor de code worden geplaatst die de 404 genereert, dus we gaan ons bestand aanpassen halloexpress.js en nu zou het als volgt moeten zijn:

 var express = vereisen ('express'); var app = express (); app.set ('port', process.env.PORT || 3001); app.get ('/', functie (req, res) { res.type ('tekst / gewoon'); res.send ('Hallo, welkom bij mijn eerste app');}); app.get ('/ ander pad', functie (req, res) {res.type ( ' tekst / gewoon '); res.send (' Dit is een ander pad van onze app ');}); app.use (functie (req, res) {res.type (' tekst / gewoon '); res.status ( 404); res.send ('404 - Niet gevonden');}); app.use (function (err, req, res, next) {console.error (err.stack); res.type ('text / plain '); res.status (500); res.send (' 500 - Er is iets mis! ');}); app.listen (app.get (' port '), function () {console.log (' Express gestart op http: // localhost: '+ app.get (' port ') +'; druk op Ctrl-C om de server af te sluiten. ');});

Hoe kunnen we de methode opmerken? krijgen ontvangt de route en vervolgens een anonieme functie, hierin sturen we in dit geval het type reactie tekst / gewoon en dan sturen we de inhoud, als we ons voorbeeld in de browser uitvoeren, krijgen we uiteindelijk zoiets als het volgende:

VERGROTEN

De routes na Ze werken op een vergelijkbare manier, alleen dan moeten we een verwerking opnemen voor de parameters die kunnen worden opgenomen, maar we moeten ons hier op dit moment niet al te veel zorgen over maken. We konden toen controleren hoe we het resultaat hebben beïnvloed van wat de gebruiker direct kan zien.

BelangrijkIets dat belangrijk is om op te merken, is dat elke keer dat we iets in onze code wijzigen, we de applicatie moeten sluiten en opnieuw moeten starten om de wijzigingen door te voeren. Deze start lijkt misschien heel eenvoudig en dat is het ook, het idee is dat we kunnen wennen aan het werken op een manier dat we de server begrijpen en hoe deze werkt, omdat we op deze manier de applicaties kunnen maken die we willen met de code die we echt willen en dat is de magie van Express.js.

Vanaf hier kunnen we beginnen te experimenteren met de soorten reacties en de inhoud die we willen aanbieden, maar de echte kracht komt wanneer we beginnen met het implementeren van een sjabloon-engine, maar dat is al een iets geavanceerder onderwerp in deze tutorial.

Hiermee hebben we deze tutorial afgerond, we hebben een kleine applicatie gebouwd om onze eerste stappen mee te zetten Express.js, als we het geweten hebben Node.js we zien meteen dat de zaken wat directer en eenvoudiger zijn. Maar de echte kracht zullen we zien wanneer we andere tools, zoals sjablonen of modellen, gaan implementeren.