Aan de slag met Express.Js

Het maken van browser-facing-applicaties met Node.Js wordt vervelend. Express.js is een JavaScript Framework Toewijzing aan single-pagina en applicaties met meerdere pagina's gehost in de Node.js-omgeving.

• 29 Webontwerphulpmiddelen om uw workflow te versnellen

Het biedt een dunne laag fundamentele web-app-functies die de Node.js-functies niet bekend zijn, waarmee u al bekend bent, dus u kunt er zeker van zijn dat uw voltooide app op de juiste manier zal zijn. En het is ook geweldig voor het maken van robuuste API's, dankzij een stapel HTTP-hulpprogramma's en middleware klaar voor gebruik.

Als u een minder complexe optie wilt, kunt u een site maken zonder de codering met een website bouwer ​Hoe dan ook, zorg ervoor dat je je krijgt web hosting Service rechts. Wil je aan de slag? Dit is wat u moet weten over Express.Js.

01. Genereer een werkbare structuur

Express.js is trots op 'niet-niet-gebruik' - dat wil zeggen, het raamwerk stelt de ontwikkelaar in staat om te mengen in termen van architecturen, sjablonen en markupmotoren. Helaas komt met grote kracht grote verantwoordelijkheid.

Het express-ontwikkelaarsteam probeert de slag te verzachten door een projectgenerator te introduceren (als u naast een team ontstaat, implementeert het beste cloud opslag om dingen samenhangend te houden). Het gaat om uw werkstation in de vorm van een NPM-pakket en zal onze experimenten het volgende framework helpen:

 Tamhan @ Tamhan-ThinkPad: ~ / desktop /
Stuff / 2018Aug / FutureEExpressjs /
Workspace $ sudo npm install
Express-Generator -G 

De generator bevat ook tientallen projectopties - de figuur bij deze stap wordt de volledige help-uitvoer weergegeven. Voor de eenvoud zullen we ons beperken tot een project op basis van de standaardinstellingen. Bepart zijn generatieproces met:

 Tamhan @ Tamhan-ThinkPad: ~ / desktop /
Stuff / 2018Aug / FutureEExpressjs /
Workspace $ Express Futuretest 

WAARSCHUWING: De standaardweergave-engine is niet in toekomstige releases.

Wanneer gedaan, bevat de huidige werkdirectory een nieuwe map genaamd 'Futuretest'. Het is de thuisbasis van ons testproject en moet worden geconfigureerd met NPM's pakket download commando. Op het moment van schrijven omvat de generator de Jade-view-generator - het project is van plan dit in de nabije toekomst te veranderen, die een parameter doorgeven die de zoekmotor selecteert die bedoeld is. Als alternatief vraagt ​​u het gebruik van PUG - het is de officiële opvolger van de JADE-motor:

 CD futuretest /
NPM Installeer 

02. Begrijp de toepassingsstructuur

Nu de projectgenerator zijn ding heeft gedaan, laat ons App.js openen in een editor van keuze. Het is - veel verkorte - structuur presenteert zichzelf als volgt:

 Var-indexrouter = vereisen ('.//
Routes / index ');
Var Gebruikersrouter = vereisen ('./
routes / gebruikers);
var-app = express ();
// Bekijken Motor Setup
app.set ('bekeken', pad.join (__
dirname, 'Bekeken'));
app.set ('View Engine', 'Jade');
app.gebruik (logger ('dev'));
app.gebruik (express.json ());
app.gebruik (express.urlencodeed ({
uitgebreid: FALSE}));
app.gebruik (CookiedreparSer ());
app.gebruik (express.statisch (pad.
Doe mee (__ dirname, 'publiek'))))); 

Express.js is zeer modulair. App.js dient als toegangspunt, waarbij een of meer 'gebruik ()' functies mogelijk maken, het toevoegen van componenten die bedoeld zijn om verschillende verzoeken aan te pakken. Inrocaties van 'Set ()' laten je parameters in de motor aanpassen - waarvan er een de installatie van de Jade View Engine is die in de vorige stap is vermeld.

De daadwerkelijke emissie van webinhoud vindt plaats in de routerklassen. Laten we onszelf beperken tot index.js:

 Var Express = vereisen ('express');
var router = express.router ();
router.get ('/', functie (req, res,
De volgende) {
  res.Render ('index', {titel:
'Uitdrukken' });
​
module.exports = router; 

'Get ()' is voorzien van een koppelingsreeks en een gebeurtenishandler die wordt aangeroepen wanneer een overeenkomstige gebeurtenis plaatsvindt. In ons geval wordt de rendermethode van de gekozen sjabloonmotor verteld om inhoud terug te sturen naar de browser van de gebruiker die is ingelogd.

03. Voer de webpagina uit

Op dit moment zijn we klaar om de website voor de eerste keer voor een draai te nemen. Keer terug naar de terminal met de installatie van Express.js en bel op NPM-start met de Debug Flag Set:

 Debug = MyApp: * NPM Start 

Voer wanneer gedaan naar http: // localhost: 3000 / in een browser naar keuze om te kijken naar de steiger die door de projectgenerator is gemaakt. Druk op ctrl ​ C Om het venster te sluiten en de controle terug te sturen naar de opdrachtregelinterpreter - houd er rekening mee dat dit ook de foutopsporingswebserver sluit.

04. Het draait allemaal om routering en eindpunten

In het belang van de eenvoud, laten we het ermee eens zijn dat een webtoepassing meestal bestaat uit een reeks invoerpunten. Express.js verwerkt deze via de routerklasse - denk eraan als een repository van methoden die worden opgeroepen als reactie op een inkomend verzoek.

Het toevoegen van een nieuw eindpunt aan een aanvraag wordt bereikt door een nieuwe werknemer in de wachtrij toe te voegen. Ons automatisch gegenereerde voorbeeld creëert twee routertypen, die elk worden verhoogd met behulp van de methode 'eisen':

 Var-indexrouter = vereisen ('.//
Routes /
inhoudsopgave');
Var Gebruikersrouter = vereisen ('./
Routes /
gebruikers); 

'App.gebruik' registreert in de volgende stap de routers en verbindt hij ze aan op de aanvraagstrings. Onze Code voegt bovendien een foutbehandeling toe die is ingeroepen als een niet-bestaande URL wordt ingevoerd in het systeem:

 App.gebruik ('/', indexrouter);
app.gebruik ('/ gebruikers', gebruikersrouter);
app.gebruik (functie (req, res, volgende)
​
  volgende (ScheperError (404));
}); 

05. Maak een nieuwe route

Open gebruikers.js en wijzig zijn code zoals hieronder:

 Router.get ('/ user1', functie (req,
res,
De volgende) {
  Res.Send ('Toekomst zegt hallo
1 ');
​
router.get ('/', functie (req, res,
De volgende) {
  Res.Send ('Reageren met A
resource ');
}); 

Nieuwe routes toevoegen aan express.js is een mechanisch proces. Grijp het routerobject van keuze, en roep de methode aan die overeenkomt met het HTTP-werkwoord dat u zoekt. Voer vervolgens een tekenreeks in die wordt toegevoegd aan de 'offset' geregistreerd bij 'App.gebruik'. Vanaf dat moment, zowel http: // localhost: 3000 / gebruikers / user1 en http: // localhost: 3000 / gebruikers / retourneer een geldige reactie.

Houd in gedachten dat Express.js niet beperkt is tot het hanteren van 'Get' -bronnen. 'Post ()', 'Put ()' en 'Delete ()' handvat de traditionele vier HTTP-aanvragen, met tientallen extra werkwoordmethoden die op meer ongebruikelijke behoeften zijn. Ten slotte biedt het 'REQ'-object toegang tot de aanvraagopdrachten - leg het goed gebruik bij het parseren van parameters of clientinformatie.

06. Geavanceerde matching

Toevoegende routes met de hand wordt vervelend als de complexiteit van het programma groeit. Express.Js is geschikt voor dit probleem door zowel jokerteken als reguliere expressie-ondersteuning te introduceren. Kijk bijvoorbeeld naar de volgende aangifte die een reguliere expressie gebruikt om overeen te komen met verschillende snaren met de karaktervolle honden.

 App.get (/.* hond $ /, functie (req,
res) {
  ...}) 

07. Abnormale routing

Tijdens het hanteren zouden de vier HTTP-aanvragen voldoende moeten zijn voor iedereen (hoedentip tot Bill Gates), Express.js kan ook werken met aanvullende protocollen. Express-ws is een bijzonder smakelijke kandidaat voor deze sectie - het verlengt Express.js's bereik om websitetopcommunicatie op te nemen.

Zodra de plug-in wordt toegevoegd aan het MAIN-express.js-project, waardoor het wordt bereikt via een 'eisen' gesprek. Het retourneert een helperobject met alles behalve één methode - noem het om een ​​verbinding tot stand te brengen tussen de router en de plug-in:

 Var ExpressWS = vereisen ('Express-
WS ')
app);
Daarna kan een nieuwe methode 'WS ()' worden aangeroepen om nieuwe routes toe te voegen op basis van WebSocket-technologie:
app.ws ('/', functie (WS, Req) {
  WS.ON ('bericht', functie (MSG)
​
    console.log (MSG);
  ​
  console.log ('socket', req.
testen); }); 

Hun prototype verschilt van normale routes vanwege de aanwezigheid van het 'WS'-object - het biedt toegang tot het onderliggende websitetoestel dat is aangesloten op de klant die verantwoordelijk is voor de verbinding.

08. Integreer databases en sjablonenmotoren

Gebaseerd op Node.Js betekent dat het Rich Plugin Ecosystem tot uw opdracht staat bij het werken op webgebaseerde applicaties. Toegang tot de toegang tot SQL- en NOSQL-databases - meestal kan een buitengewoon vervelende taak worden behandeld met behulp van plug-ins van de database-leveranciers. De feitelijke implementatie is net zo eenvoudig als het installeren van de benodigde NPM-module - als uw code toegang heeft tot een Redis-database, voegt u eenvoudig het volgende toe:

var redis = vereisen ('redis')
Var-client = redis.createclient ()
client.set ('stringkey', 'Aval',
redis.print)
​​

Natuurlijk wordt ook in-geheugen SQLite ondersteund:

 Var SQLITE3 = vereisen ('sqlite3').
uitgebreid ()
var db = nieuwe sqlite3.
Database (': geheugen:')
db.Serialize (functie () {
  db.Run ('Create Table Lorem
(info-tekst) ') 

Houd er rekening mee dat de integratie van de Node.js niet beperkt is tot database-plug-ins. Avontuurlijke ontwikkelaars kunnen zo ver gaan om producten zoals Tessel op te nemen, waardoor webtoepassingen kunnen maken die ook kunnen communiceren met internet van dingen apparaten.

09. Templating in stijl

Eén gebied waar eenvoudige en echte programma's verschillen, is het creëren van opvattingen. Terwijl een klein voorbeeldproject meestal handgemaakte snaren gebruikt, is het assembleren van grote zwaden van HTML met een reeks verbonden dingen zeer irritant.

Sjabloonmotoren bieden een nette oplossing. Ze staan ​​de oprichting van vooraf gedefinieerde schema-bestanden toe, die programmatisch in uitvoering kunnen worden ingevuld.

In het geval van ons voorbeeldprogramma lag de weergaven in .jade-bestanden. Openingsindex onthult de volgende structuur:

 breidt lay-out uit
inhoud blokkeren
  H1 = titel
  P Welkom bij # {titel} 

Uitingen ingesloten in krullende beugels Wet als sjabloonvelden waarvan de waarden bij runtime moeten worden vervangen. Index.js roept zich terug met een parameterobject, wat leidt tot het weergeven van de startpagina die wordt weergegeven in de figuur die deze stap vergezelt:

 Router.get ('/', functie (req, res,
De volgende) {
  res.Render ('index', {titel:
'Uitdrukken' });
}); 

De meeste sjablonenmotoren kunnen ook arrays ontleden wanneer voorzien van een itemsjabloon. In dit geval wordt elke regel van de array weergegeven met één exemplaar van het DOM-model - overeenkomsten met het displaymodel van de lijst in Android zijn puur toevallig. Express.js is niet beperkt tot de vooraf gedefinieerde sjablonenmotoren. Moet je het gevoel hebben om een ​​of andere reden om je eigen uit te rollen, gewoon de geschetste stappen hier - In principe moet u alles behalve één functie overschrijven.

10. Behandel statische inhoud

Express.js-applicaties hebben de neiging om CSS-bestanden en afbeeldingen te bevatten. Het dienen van deze via de renderfunctie is inefficiënt - een slimmere manier zou inhouden met het verzenden van ze op hun maaltijd met een traditioneel HTTP-verzoek. Dit kan worden bereikt via de functie 'Express.statische ()', die volledige mappen kan markeren voor export:

 App.gebruik (express.statisch ('publiek'))
app.gebruik (express.statische ('bestanden')) 

11. Wijzig de gebeurtenisstroom

Sta tenslotte toe om binnenkort de termijn middleware te vermelden. In Express.Js-spraak is middleware een set van een of meer componenten die zich integreren in het stroomdiagram dat tegenovergesteld is. Ze kunnen dan worden gebruikt om verzoeken aan te passen terwijl ze door het routeringssysteem passeren - wanneer ze correct worden geïmplementeerd, kan onbeperkte functionaliteit worden bereikt.

Bovendien zijn enkele gereed-componenten gevonden hier - Bezoek deze site voordat u begint aan een grootschalig ontwikkelingsproject.

12. Hoe een express.js-app te hosten

Testen Express.js-gebaseerde applicaties is eenvoudig. Er komen problemen op zodra u wilt dat de pagina toegankelijk is voor derden - omdat het wordt gegenereerd door de Node.js-omgeving, is er geen manier om een ​​statische beeldvorming te krijgen voor FTP-implementatie op webhostingdiensten.

In theorie is er niets tegen het gebruik van een Raspberry PI, een oranjepi, een dedicated server of een virtuele machine die is verhuurd bij een cloudservice of een webhostaanbieder die virtuele hosting biedt. Het huren van een volledige virtuele machine kan u echter belasten met de verantwoordelijkheden om de uitvoeringsomgeving en het besturingssysteem up-to-date te houden.

Als deze taak niet aan je smaak is, kan een platform-as-a-service provider een aantrekkelijker zijn (zij het in de meeste gevallen, mooie prijzen).

Veel ontwikkelaars beschouwen Heroku, met zijn prijzen die worden getoond in de figuur die bij deze box-out begeleiden, om de gouden standaard te zijn voor alle dingen die gerelateerd zijn aan Node.js-hosting.

Dit is echter een beetje oneerlijk in waarheid - Amazon's Elastische Beanstalk, Google's Cloud Platform en Microsoft's Azure bieden allemaal een soortgelijke ondersteuning voor externe uitvoering van Node.js-gebaseerde payloads. In al deze systemen wordt het belangrijkste probleem afgehandeld - terwijl Azure bekend staat om zijn trage implementaties, de ontwikkelaars van andere providers met moeilijk te gebruiken back-end-services van extreem complexe configuratiesystemen.

Verder verschilt de ondersteunde versie van de Node.js-omgeving van de provider tot de provider. Natuurlijk hebben we niet genoeg ruimte om het onderwerp diep te dekken. Bezoek Mozilla's Deployment Tutorial en express.js ' Prestaties en betrouwbaarheid en veiligheid Pagina's voor het beste beoefenen voor enkele van de betrokken problemen. Zorg ervoor dat u de documentatie van de provider bekijkt om meer beste praktijken te verzamelen.

13. Toekomstbestendig Uw aanvragen

Express.js's ontwikkelingscyclus is verre van soepel: de ontwikkelaars staan ​​bekend om frequente API-wijzigingen die herschrouwen van clientcode vereisen. De schakelaar van 3.x naar 4.x was bijzonder pijnlijk, daarom kan de dreigende release van 5.x nogal wat van jullie ongemakkelijk voelen.

Terwijl Express.js 5.0 een paar brekende veranderingen brengt, is hun impact beperkter. Allereerst wordt een reeks reeds verouderde functies verwijderd voor Real - als de code ze nog steeds gebruikt, vereist het upgraden naar 5.x onderhoud.

Ontwerpers van weergave Motoren moeten het controleren van 'res.Render ():' Rankgroei met betrekking tot het bekijken van renderers, die heeft geleid tot een aantal synchrone implementaties die doorliggen. Versie 5 van het raamwerk verbetert de prestaties door het ensynchroon weer te geven.

Daarnaast, een reeks diverse verbeteringen en veranderingen gedocumenteerd hier Ziet de terugkeer van enkele uitgestorven kenmerken van eerdere versies - bovendien zullen sommige langdurige bugs in de nieuwe release worden opgelost.

Houd er ten slotte bewust dat u al de nieuwe versie kunt proberen. Maak eenvoudig een kopie van uw broncode, pak een terminal en voer de volgende opdracht in om een ​​archief van nauwelijks getestbloeding-edge JavaScript te downloaden. Wees veilig.

 $ NPM Installeer Express @ & GT; = 5.0.0-
ALPHA.1 --SAVE 

Dit artikel is oorspronkelijk gepubliceerd in kwestie 279 van Creative Web Design Magazine Web Designer. Koop Probleem 279 hier of Abonneer u hier op Web Designer ​

Gerelateerde artikelen:

• Alles wat u moet weten over het nieuwe NODE.JS 8
• 20 NODE.JS-modules die u moet weten
• 25 Game-veranderende JavaScript-gereedschappen