Kom godt i gang med Express.js

Oprettelse af browser-vendende applikationer med node.js bliver kedelig. Express.js. er en JavaScript Framework. Dedikeret til single-page og multi-page applikationer hostet i node.js miljø.

• 29 Web Design Tools til at fremskynde din workflow

Det giver et tyndt lag af grundlæggende webapp-funktioner, der ikke vil skjule de node.js-funktioner, du allerede er bekendt med, så du kan være sikker på, at din færdige app vil være op for at ridse ydeevne. Og det er også fantastisk til at skabe robust API'er takket være en stak HTTP-værktøjsmetoder og middleware klar til brug.

Hvis du vil have en mindre kompleks mulighed, kan du oprette et websted uden kodning med a Website Builder. . Uanset hvad, skal du sørge for at få din Web Hosting. Service ret. Vil du komme i gang? Her er hvad du behøver at vide om Express.js.

01. Generer en brugbar struktur

Express.js er stolt af at være 'uopindrettet' - det vil sige, at rammen tillader udvikleren at blande og matche med hensyn til arkitekturer, templatering og markupmotorer. Desværre, med stor magt kommer stort ansvar.

Express Developer-teamet søger at blødgøre slaget ved at introducere en projektgenerator (hvis du designer sammen med et hold, implementere det bedste Sky lagring at holde tingene sammenhængende). Det kommer til din arbejdsstation i form af en NPM-pakke og vil hjælpe vores eksperimenter med følgende rammer:

 Tamhan @ Tamhan-ThinkPad: ~ / Desktop /
STOFF / 2018AUG / FREATINGEXPRESSJS /
WORKSPACE $ SUDO NPM Installer
Express-generator -g 

Generatoren indeholder også snesevis af projektindstillinger - figuren, der ledsager dette trin, viser den fulde hjælpeproduktion. For enkelhedens skyld vil vi begrænse os til et projekt baseret på standardindstillingerne. Kick off sin generation proces med:

 Tamhan @ Tamhan-ThinkPad: ~ / Desktop /
STOFF / 2018AUG / FREATINGEXPRESSJS /
WORKSPACE $ Express Futuretest 

ADVARSEL: Standardvisningsmotoren vil ikke være jade i fremtidige udgivelser.

Når det er gjort, indeholder den nuværende arbejdskatalog en ny mappe kaldet 'Futuretest'. Det er hjemsted for vores testprojekt og skal konfigureres ved hjælp af NPMs pakke download kommando. På tidspunktet for skrivningen omfatter generatoren Jade View Generator - projektet planlægger at ændre dette i den nærmeste fremtid, der forpligter dig til at passere i en parameter, der vælger Vismotoren, der er beregnet. Alternativt kan du anmode om brugen af ​​pug - det er den officielle efterfølger af jademotoren:

 CD Futuretest /
NPM installer 

02. Forstå ansøgningsstrukturen

Nu da projektgeneratoren har gjort sin ting, lad os åbne app.js i en redaktør af valg. Dens - meget forkortet - struktur præsenterer sig som følgende:

 VAR INDEXROUTER = Kræv ('.
ruter / indeks ');
var usersrouter = krav ('./
ruter / brugere ');
Var app = Express ();
// Vis motoropsætning
app.set ('visninger', path.join (__
dirname, 'visninger'));
app.set ('se motor', 'jade');
app.use (logger ('dev'));
app.use (express.json ());
app.use (express.urlencoded ({{{
Udvidet: FALSE}));
app.use (cookieparser ());
app.use (express.statisk (sti.
Deltag (__ dirname, 'Public'))); 

Express.js er meget modulært. App.js tjener som et indgangspunkt, hvor en eller flere 'brug ()' funktioner gør det muligt at tilføje komponenter, der er beregnet til at håndtere forskellige anmodninger. Invokationer af 'Set ()' giver dig mulighed for at justere parametre i motoren - hvoraf den ene er installationen af ​​Jade View-motoren, der er nævnt i det foregående trin.

Den faktiske emission af webindhold foregår i routerklasserne. For korthedens skyld, lad os begrænse os til indeks.js:

 Var Express = Kræv ('Express');
var router = express.router ();
router.get ('/', funktion (req, res,
Næste) {
  res.render ('indeks', {titel:
'Express'});
});
module.Exports = router; 

'Get ()' er forsynet med en matcher streng og en begivenhedshåndterer, der bliver påberåbt, når der opstår en tilsvarende hændelse. I vores tilfælde bliver den valgte metode til den valgte template-motor fortalt at returnere indhold til browseren af ​​den bruger, der logger ind.

03. Kør websiden

På dette tidspunkt er vi klar til at tage hjemmesiden til et spin for første gang. Gå tilbage til terminalen, der indeholder Express.js installation, og ring på NPM Start med Debug Flag Set:

 DEBUG = MyApp: * NPM Start 

Når du er færdig, skal du indtaste http: // localhost: 3000 / i en browser af valg for at se på stilladset, der er oprettet af projektgeneratoren. Når det er færdigt, tryk på Ctrl. + C. For at lukke vinduet og returnere kontrol til kommandolinjen tolk - Husk på, at dette også lukker debugging webserveren.

04. Det handler om routing og endepunkter

For enkelhedens skyld, lad os være enige om, at en webapplikation normalt består af en sekvens af indgangspunkter. Express.js håndterer disse via routerklassen - tænk på det som et depot af metoder, der bliver opfordret som svar på en indgående anmodning.

Tilføjelse af et nyt endepunkt til en applikation opnås ved at tilføje en ny arbejdstager i køen. Vores auto-genererede eksempel skaber to routertyper, der hver især hæves ved hjælp af 'Kræver' -metoden:

 VAR INDEXROUTER = Kræv ('.
ruter /
indeks');
var usersrouter = krav ('./
ruter /
Brugere '); 

I det næste trin registrerer 'app.use' routerne og forbinder dem med anmodningsstrengene. Vores kode tilføjer desuden en fejlhandler, der bliver påberåbt, hvis en ikke-eksisterende URL er indgået i systemet:

 app.use ('/', indexrouter);
app.use ('/ brugere', usersrouter);
app.use (funktion (req, res, næste)
{
  næste (CreateError (404));
}); 

05. Opret en ny rute

Åbne brugere.js, og ændre dens kode som nedenfor:

 ROUTER.GET ('/ User1', funktion (req,
res,
Næste) {
  res.send ('fremtiden siger hej
1 ');
});
router.get ('/', funktion (req, res,
Næste) {
  res.send ('reagere med a
ressource ');
}); 

Tilføjelse af nye ruter til Express.js er en mekanisk proces. Grib routerobjektet for valg, og påberåbe den metode, der svarer til HTTP-verb, du søger at håndtere. Derefter passere i en streng, der vil blive tilføjet til 'offset' registreret med 'app.use'. Fra det øjeblik fremadrettede begge http: // localhost: 3000 / brugere / user1 og http: // localhost: 3000 / brugere / returnere et gyldigt svar.

Husk på, at Express.js ikke er begrænset til at håndtere 'få' ressourcer. 'POST ()', 'PUT ()' og 'DELETE ()' Håndter de traditionelle fire HTTP-anmodninger, med snesevis af yderligere verbmetoder, der catering til mere usædvanlige behov. Endelig giver 'Req' -objektet adgang til anmodningsoverskriften - sæt den til god brug, når du analyserer parametre eller klientoplysninger.

06. Avanceret matchning

Tilføjelse af ruter med hånd bliver kedelig, da programkompleksiteten vokser. Express.js henvender sig til dette problem ved at introducere både wildcard og regelmæssig ekspressionsstøtte. Se for eksempel på følgende erklæring, der bruger et regelmæssigt udtryk for at matche forskellige strenge, der indeholder tegnsekvenshunden.

 app.get (/.* hund $ /, funktion (req,
res) {
  ...}) 

07. Unormal routing.

Mens du håndterer de fire HTTP-anmodninger, burde være nok til nogen (hat tip til Bill Gates), kan Express.js også arbejde med yderligere protokoller. Express-Ws. Er en særlig velsmagende kandidat til dette afsnit - det udvider Express.js rækkevidde til at omfatte websocket kommunikation.

Når pluginet er tilføjet til hovedpress.js-projektet, er det muligt at opnå det via et 'kræver' opkald. Det returnerer et hjælperobjekt, der indeholder alt, men en metode - kalder det for at etablere en forbindelse mellem routeren og pluginet:

 Var Expressws = Kræv ('Express-
ws ')
app);
Derefter kan en ny metode kaldet 'WS ()' blive påberåbt for at tilføje nye ruter baseret på websocket-teknologi:
app.ws ('/', funktion (WS, req) {
  ws.on ('besked', funktion (msg)
{
    console.log (msg);
  });
  Console.log ('socket', req.
testning); }); 

Deres prototype adskiller sig fra normale ruter på grund af tilstedeværelsen af ​​'WS'-objektet - det giver adgang til den underliggende websocket-instans, der er forbundet med klienten, der er ansvarlig for forbindelsen.

08. Integrer databaser og templateringsmotorer

At være baseret på node.js betyder, at Rich Plugin Ecosystemet er på din kommando, når du arbejder på web-baserede applikationer. For eksempel kan adgang til SQL og NOSQL databaser - normalt en ekstraordinært kedelig opgave - håndteres ved hjælp af plugins, der leveres af databaseleverandørerne. Den egentlige implementering er lige så nemt som at installere det nødvendige NPM-modul - hvis din kode er at få adgang til en REDIS-database, skal du blot tilføje følgende:

var redis = kræve ('redis')
Var Client = Redis.createClient ()
klient.set ('stringkey', 'aval',
redis.print)
. . . 

Selvfølgelig understøttes også in-memory SQLITE:

 var sqlite3 = krav ('sqlite3').
ordrig()
VAR DB = NEW SQLITE3.
Database (': Hukommelse:')
db.Serialize (funktion () {
  db.run ('Opret bord lorem
(Info Text) ') 

Husk på, at node.js integration ikke er begrænset til database plugins. Eventyrlige udviklere kunne gå så langt som at inkludere produkter som Tessel, hvorved der skabes webapplikationer, der også kan interagere med Internet af ting enheder.

09. Mulling i stil

Et område, hvor enkle og reelle programmer er forskellige, er skabelsen af ​​synspunkter. Mens et lille eksempelprojekt normalt bruger håndlavede strenge, samler de store skår af HTML med en streng af tilsluttede ting meget irriterende.

Skabelonmotorer giver en pæn løsning. De tillader oprettelse af foruddefinerede skema-filer, som kan befolkes programmatisk i udførelsen.

I tilfælde af vores eksempelprogram ligger synspunkterne i .Jade-filer. Åbningsindekset afslører følgende struktur:

 udvider layout
blokere indhold
  H1 = Titel
  P VELKOMMEN TIL # {TITLE} 

Udtryk indesluttet i krøllede parenteser fungerer som skabelonfelter, hvis værdier skal udskiftes på runtime. Index.js påberåber sig gengivelse med et parameterobjekt, hvilket fører til gengivelse af startsiden vist i figuren, der ledsager dette trin:

 router.get ('/', funktion (req, res,
Næste) {
  res.render ('indeks', {titel:
'Express'});
}); 

De fleste templateringsmotorer kan også analysere arrays, når de er forsynet med en elementskabelon. I dette tilfælde vises hver linje af arrayet med en forekomst af DOM-modellen - Ligheder til listedisplayet, der findes i Android, er rent tilfældige. Express.js er ikke begrænset til de foruddefinerede templateringsmotorer. Skulle du have lyst til at rulle din egen af ​​en eller anden grund, skal du blot følge de trin, der er skitseret her - I princippet skal du tilsidesætte alt, men en funktion.

10. Håndter statisk indhold

Express.js applikationer har tendens til at indeholde CSS-filer og billeder. Servering af disse via renderfunktionen er ineffektiv - en smartere måde ville indebære at sende dem på deres glædelige måde med en traditionel HTTP-anmodning. Dette kan opnås via funktionen 'Express.static ()', som kan markere hele mapper til eksport:

 App.use (Express.Static ('Public'))
app.use (express.static ('filer')) 

11. Rediger begivenhedsstrømmen

Endelig tillader os at nævne udtrykket middleware kort tid. I Express.js Parlance er middleware et sæt af en eller flere komponenter, som integrerer sig i rutediagrammet vist modsat. De kan så bruges til at ændre anmodninger, da de passerer gennem rutesystemet - når de implementeres korrekt, kan ubegrænset funktionalitet opnås.

Desuden kan nogle klare komponenter findes her - Besøg dette websted, før du påbegynder et stort udviklingsprojekt.

12. Sådan er du vært for en Express.js app

Testing Express.js-baserede applikationer er nemt. Problemer opstår, når du vil have, at siden bliver tilgængelig for tredjepart - på grund af at den bliver genereret af node.js-miljøet, er der ingen måde at få et statisk billede, der passer til FTP-implementering til web hosting-tjenester.

I teorien er der intet imod at bruge en raspberry pi, en orangepi, en dedikeret server eller en virtuel maskine, der lejes fra en sky service eller en webhostbyder, der tilbyder virtuel hosting. Men at leje en fuld virtuel maskine kan byrde dig med ansvaret for at holde eksekveringsmiljøet og operativsystemet opdateret.

Hvis denne opgave ikke er til din smag, kan en platform-as-en-tjenesteudbyder være en mere attraktiv (omend i de fleste tilfælde, ret dyrt) valg.

Mange udviklere anser Heroku, med sin prisfastsættelse, der er vist i figuren, der ledsager denne boxout, for at være guldstandarden for alle ting, der er relateret til Node.js Hosting.

Dette er imidlertid lidt uretfærdigt i sandhed - Amazons elastiske beanstalk, Googles cloud platform og Microsofts Azure alle giver tilsvarende støtte til fjern udførelse af node.js-baserede nyttelast. I alle disse systemer håndterer hovedproblemet - mens Azure er kendt for sine langsomme implementeringer, andre udbydere byrder udviklere med vanskelige at bruge back-end-tjenester af ekstremt komplekse konfigurationssystemer.

Desuden adskiller den understøttede version af Node.js-miljøet fra udbyderen til udbyderen. Selvfølgelig har vi ikke nok plads til at dække emnet i dybden. Besøg Mozilla's Deployment Tutorial og express.js ' ydeevne og pålidelighed og sikkerhed bedste praksis sider for nogle af de involverede spørgsmål. Sørg for at se på udbyderens dokumentation for at opsamle mere bedste praksis.

13. Fremtidssikre dine ansøgninger

Express.js udviklingscyklus er langt fra glat: Udviklerne er velkendte for hyppige API-ændringer, der kræver omskrivninger af klientkode. Skiftet fra 3.x til 4.x var særligt smertefuld, hvorfor den forestående frigivelse af 5.x kan efterlade et par af jer, der føler sig ubehageligt.

Mens Express.js 5.0 bringer sammen med et par brydningsændringer, er deres indflydelse mere begrænset. Først og fremmest fjernes et sæt af allerede afskrivede funktioner for reel - hvis kode stadig bruger dem, opgraderes til 5.x kræver vedligeholdelse.

Designere af visningsmotorer skal checke 'RES.Render ():' Rank Vækst med hensyn til at se Renderers, som har ført til nogle synkroniske implementeringer, der glider igennem. Version 5 af rammerne forbedrer ydeevnen ved at håndhæve asynkrongengivelse.

Ud over det, et sæt af diverse forbedringer og ændringer dokumenteret her ser afkastet af nogle uddøde funktioner fra tidligere versioner - desuden vil nogle langvarige bugs blive rettet i den nye udgivelse.

Endelig være opmærksom på, at du allerede kan prøve den nye version. Du skal blot oprette en kopi af din kildekode, tag en terminal og indtast følgende kommando for at downloade et arkivets værdi af næppe testet blødningskanten JavaScript. Pas godt på dig selv.

 $ npm install express @ & gt; = 5.0.0-
Alpha.1 --Save 

Denne artikel blev oprindeligt offentliggjort i udstedelse 279 af Creative Web Design Magazine Web Designer. Køb problem 279 her eller Abonner på Web Designer her .

Relaterede artikler:

• Alt hvad du behøver at vide om den nye node.js 8
• 20 node.js moduler, du har brug for at vide
• 25 Game-Changing JavaScript Tools