Începeți cu Express.js

Crearea aplicațiilor orientate spre browser cu NODE.JS devine plictisitoare. Express.js. este A. Cadrul JavaScript Dedicat aplicațiilor cu o singură pagină și multi-pagină găzduite în mediul NODE.JS.

• 29 Instrumente de design web pentru a accelera fluxul de lucru

Acesta oferă un strat subțire de caracteristici fundamentale de aplicații web care nu vor observa caracteristicile NODE.JS cu care sunteți deja familiarizați, astfel încât să puteți fi siguri că aplicația dvs. finalizată va fi de până la zgârieturi de performanță. Și este, de asemenea, minunat pentru a crea API robust, datorită unui teanc de metode de utilitate HTTP și middleware gata de utilizare.

Dacă doriți o opțiune mai puțin complexă, puteți crea un site fără codarea cu a Builder de site-uri web . Oricum, asigurați-vă că vă veți obține web hosting dreptul de serviciu. Doriți să începeți? Iată ce trebuie să știți despre Express.js.

01. Generați o structură funcțională

Express.js se mândrește în a fi "neoplinați" - adică cadrul permite dezvoltatorului să se amestece și să se potrivească în ceea ce privește arhitecturile, motoarele templative și marcaj. Din păcate, cu mare putere vine o mare responsabilitate.

Echipa Express Developer încearcă să înmoaie lovitura prin introducerea unui generator de proiect (dacă proiectați alături de o echipă, implementați cele mai bune Stocare in cloud pentru a păstra lucrurile coezive). Ea vine vorba de stația dvs. de lucru sub forma unui pachet NPM și va contribui la experimentele noastre cu următorul cadru:

 Tamhan @ Tamhan-ThinkPad: ~ / desktop /
Chestii / 2018Ag / FutureExpressjs /
Spațiul de lucru $ sudo npm instalare
Express-generator -G 

Generatorul conține, de asemenea, zeci de opțiuni de proiect - cifra care însoțește această etapă arată ieșirea completă de ajutor. Pentru motivele simplității, ne vom limita la un proiect bazat pe setările implicite. Începeți procesul de generare cu:

 Tamhan @ Tamhan-ThinkPad: ~ / desktop /
Chestii / 2018Ag / FutureExpressjs /
Spațiul de lucru $ Express FutureTest 

AVERTISMENT: Motorul de vizualizare implicit nu va fi jad în viitoarele versiuni.

Când ați terminat, directorul de lucru curent conține un nou folder numit "FutureTest". Acasă la proiectul nostru de testare și trebuie să fie configurat utilizând comanda de descărcare a pachetului NPM. La momentul scrisului, generatorul include generatorul de vizualizare Jade - proiectul intenționează să schimbe acest lucru în viitorul apropiat, obligând să treci într-un parametru Selectarea motorului Vizualizare destinat. Alternativ, cereți utilizarea PUG - este succesorul oficial al motorului Jade:

 CD FutureTest /
Instalarea NPM 

02. Înțelegeți structura aplicației

Acum că generatorul de proiect și-a făcut chestia, să deschidem App.Js într-un editor de alegere. Structura sa de înaltă prescrisă se prezintă după cum urmează:

 Var indexrouter = necesită ('./
rute / index ");
VAR UsersroUster = necesită ('./
rute / utilizatori);
Var App = Express ();
// Vizualizați configurarea motorului
App.set ("Vizualizări", Path.join (__
dirname, "vizualizări");
app.set ("View motor", "Jade");
aplicație (logger ("dev"));
app.use (Express.json ());
app.use (express.urlencoded ({
extins: falsă}));
aplicație (cookieparsars ());
App.use (Express.Static (Calea.
Alăturați-vă (__ DIRNAME, "PUBLIC"))); 

Express.js este foarte modulară. App.js servește ca punct de intrare, în cazul în care una sau mai multe funcții "Utilizare ()" permit adăugarea de componente destinate să gestioneze diferite cereri. Invocările de "set ()" vă permit să reglați parametrii din motor - dintre care unul este instalarea motorului de vizualizare Jade menționat în etapa anterioară.

Emisia reală a conținutului web are loc în clasele de router. Pentru dragul lui Brevity, să ne limităm la index.js:

 Var Express = necesită ("Express");
var router = express.roster ();
Router.Get ('/', Funcție (REQ, RES,
Următorul) {
  res.Render ("Index", {titlu:
"Express"});
});
modulul.exports = router; 

"Obțineți ()" este prevăzut cu un șir de potrivire și un handler de evenimente care este invocat ori de câte ori apare un eveniment corespunzător. În cazul nostru, metoda de redare a motorului șablon ales este spus să returneze conținutul în browserul utilizatorului care a fost înregistrat.

03. Rulați pagina web

În acest moment, suntem gata să luăm site-ul pentru o rotire pentru prima dată. Reveniți la terminalul care conține instalarea Express.js și apelați la NPM Start cu Steagul de Debug Set:

 Debug = MyApp: * NPM Start 

Când ați terminat, introduceți http: // localhost: 3000 / într-un browser de alegere pentru a privi schelele create de generatorul de proiect. Când ați terminat, apăsați Ctrl. +. C. Pentru a închide fereastra și a returna controlul la interpretul liniei de comandă - rețineți că acest lucru închide și serverul Web Debugging.

04. Este vorba despre rutare și puncte finale

Din motive de simplitate, să acceptăm că o aplicație web este de obicei formată dintr-o secvență de puncte de intrare. Express.js se ocupă de acestea prin clasa de router - gândiți-vă ca un depozit de metode care sunt chemate ca răspuns la o solicitare de intrare.

Adăugarea unui nou punct final la o aplicație este realizată prin adăugarea unui nou lucrător în coadă. Exemplul nostru de auto-generate creează două tipuri de routere, fiecare dintre care este ridicată folosind metoda "necesită":

 Var indexrouter = necesită ('./
rute /
index');
VAR UsersroUster = necesită ('./
rute /
utilizatori); 

În etapa următoare, "App.use" înregistrează routerele și le conectează la corzile de solicitare. Codul nostru, în plus, adaugă un handler de eroare care este invocat dacă o adresă URL există este introdusă în sistem:

 App.use ('/', indexrouter);
app.use ('/ Utilizatori', UtilizatorRourter);
app.use (funcție (req, res, următor)
{
  Apoi (CreațiError (404));
}); 

05. Creați un nou traseu

Deschideți utilizatorii.js și modificați codul după cum urmează:

 Router.Get ('/ user1', funcția (REQ,
res,
Următorul) {
  res.Send ("viitorul spune Hello
1 ');
});
Router.Get ('/', Funcție (REQ, RES,
Următorul) {
  res.Send (răspunsul cu a
resursă');
}); 

Adăugarea de noi rute către Express.js este un proces mecanic. Prindeți obiectul de alegere al routerului și invocați metoda corespunzătoare verbului HTTP pe care îl căutați să vă ocupați. Apoi, treceți într-un șir care va fi adăugat la "offset" înregistrat cu "App.use". Din acel moment, atât http: // localhost: 3000 / utilizatori / user1 și http: // localhost: 3000 / utilizatori / return un răspuns valid.

Rețineți că Express.js nu se limitează la manipularea resurselor "obține". "Post ()", "PUT ()" și "Șterge (ștergere ()" cereri tradiționale de patru cereri HTTP, cu zeci de metode de verb suplimentare care catering la nevoile mai neobișnuite. În cele din urmă, obiectul "REQ" oferă acces la antetul de solicitare - puneți-l la o bună utilizare atunci când parametrii de parsare sau informațiile despre client.

06. Potrivire avansată

Adăugarea de rute cu mâna devine obositoare, deoarece crește complexitatea programului. Express.js se ocupă de această problemă introducând atât wildcard cât și suport regulat de expresie. De exemplu, uitați-vă la următoarea declarație care utilizează o expresie regulată pentru a se potrivi cu diferitele șiruri de caractere care conțin câinele de secvență de caractere.

 App.get (/.* câine $ /, funcție (req,
res) {
  ...}) 

07. Rotarea anormală

În timp ce manipulați cele patru cereri HTTP ar trebui să fie suficiente pentru oricine (Hat Sfat la Bill Gates), Express.js poate lucra și cu protocoale suplimentare. Express-ws Este un candidat deosebit de gustos pentru această secțiune - extinde REACH-ul Express.js pentru a include comunicațiile de site-uri web.

Odată ce pluginul este adăugat la proiectul principal Express.js, care să permită realizarea unui apel "necesită". Returnează un obiect helper care conține toate, cu excepția unei metode - numiți-o pentru a stabili o legătură între router și plugin:

 VAR Expresws = necesită ("Express-
ws ')
aplicație);
După aceasta, o nouă metodă numită "WS ()" poate fi invocată pentru a adăuga noi rute bazate pe tehnologia WebSocket:
app.ws ('/', function (ws, req) {
  WS.ON ("MESAJ", FUNCTION (MSG)
{
    consola.log (MSG);
  });
  consola.log ("soclu", req.
testarea); }); 

Prototipul lor diferă de căile normale datorită prezenței obiectului "WS" - oferă acces la instanța Websocket de bază conectată la clientul responsabil pentru conexiune.

08. Integrați bazele de date și motoarele templative

Fiind bazate pe NODE.JS înseamnă că ecosistemul bogat plugin este la comanda dvs. atunci când lucrați la aplicații bazate pe web. De exemplu, accesarea bazelor de date SQL și NOSQL - de obicei o sarcină extraordinar de oboseală - poate fi tratată utilizând pluginurile furnizate de furnizorii de baze de date. Deplomentul real este la fel de ușor ca instalarea modulului NPM necesar - dacă codul dvs. este de a accesa o bază de date Redis, adăugați pur și simplu următoarele:

var redis = necesită ("redis")
var client = redis.createcient ()
client.set ("șiret", "aval",
redis.print)
. . . 

Desigur, este de asemenea acceptată Sqlite în memorie:

 var sqlite3 = necesită ('sqlite3').
verbose ()
var db = noul sqlite3.
Baza de date (": Memorie:")
db.serialize (funcția () {
  DB.Run ("Creați Lorem de masă
(Text Info) ') 

Rețineți că integrarea NODE.JS nu se limitează la pluginurile de baze de date. Dezvoltatorii aventuroși ar putea merge atât de departe încât să includă produse precum Tessel, creând astfel aplicații web care pot, de asemenea, interacționa cu internetul Lucrurilor dispozitive.

09. Templarea în stil

O zonă în care programele simple și reale diferă este crearea de opinii. În timp ce un mic proiect de exemplu folosește de obicei șiruri artizanale, asamblarea unor viermi mari de HTML cu un șir de lucruri conectate este foarte enervant.

Motoarele șablonului oferă o soluție curată. Acestea permit crearea de fișiere scheme predefinite, care pot fi populate în mod programate în execuție.

În cazul programului nostru exemplu, vizualizările stau în fișiere .Jade. Indicele de deschidere dezvăluie următoarea structură:

 Extinde aspectul
blocați conținutul
  H1 = Titlu
  P Bine ați venit la # {titlu} 

Expresii închise în paranteze Curly acționează ca câmpuri de șablon ale căror valori trebuie înlocuite la Runtime. Index.js invocă Render cu un obiect parametru, ceea ce duce la redarea paginii de start afișate în figura care însoțește acest pas:

 Router.Get ('/', Funcție (REQ, RES,
Următorul) {
  res.Render ("Index", {titlu:
"Express"});
}); 

Cele mai multe motoare de templare pot, de asemenea, să analizeze matrice atunci când sunt prevăzute cu un șablon de element. În acest caz, fiecare linie a matricei este afișată cu o singură instanță a modelului DOM - asemănările cu modelul de afișare a listei găsite în Android sunt pur coincidență. Express.js nu se limitează la motoarele de templare predefinite. Dacă vă simțiți ca să vă rostogoliți propriile din anumite motive, pur și simplu urmați pașii descriși Aici - În principiu, trebuie să înlocuiți cu excepția unei singure funcții.

10. Manipulați conținutul static

Aplicațiile Express.js tind să conțină fișiere și imagini CSS. Deservirea acestora prin intermediul funcției de renume este ineficientă - un mod mai inteligent ar implica trimiterea lor în modul lor vesel, cu o cerere tradițională HTTP. Acest lucru poate fi realizat prin funcția "Express.Static (), care poate marca întregul dosare pentru export:

 App.use (Express.Static (public "))
App.use (Express.Static (fișiere ")) 

11. Modificați fluxul de evenimente

În cele din urmă, permiteți-ne să menționăm termenul de middleware în curând. În Parlața Express.js, middleware este un set de unul sau mai multe componente care se integrează în fluxul de debit prezentat opus. Apoi pot fi utilizați pentru a modifica cererile pe măsură ce trece prin sistemul de rutare - atunci când sunt implementate corect, se poate obține o funcționalitate nelimitată.

În plus, pot fi găsite unele componente gata Aici - Vizitați acest site înainte de a începe un proiect de dezvoltare la scară largă.

12. Cum de a găzdui o aplicație Express.js

Testarea aplicațiilor bazate pe Express.js este ușoară. Problemele apar odată ce doriți ca pagina să devină accesibilă unor terțe părți - datorită faptului că este generat de mediul NODE.JS, nu există nici o modalitate de a obține o imagine statică potrivită pentru implementarea FTP la serviciile de găzduire web.

În teorie, nu există nimic împotriva utilizării unei zmeură PI, un OerangiPi, un server dedicat sau o mașină virtuală închiriată de la un serviciu de cloud sau un furnizor de gazdă web care oferă hosting virtual. Cu toate acestea, închirierea unei mașini virtuale complete vă poate împovăra cu responsabilitățile de menținere a mediului de execuție și a sistemului de operare actualizat.

Dacă această sarcină nu este gustul dvs., un furnizor de platformă-AS-Service poate fi o alegere mai atractivă (deși, în cele mai multe cazuri, destul de importantă).

Mulți dezvoltatori consideră Heroku, cu prețurile sale prezentate în figura care însoțește acest box, pentru a fi standardul de aur pentru toate lucrurile care sunt legate de găzduirea NODE.JS.

Acest lucru, totuși, este un pic nedrept în adevăr - Beanstalk elastic Amazon, platforma Cloud Google și Azura Microsoft oferă un suport similar pentru execuția la distanță a sarcinilor utilitare bazate pe NODE.JS. În toate aceste sisteme, problema principală este manipularea - în timp ce Azure este cunoscută pentru desfășurarea sa lentă, alți furnizori sarcini dezvoltatori cu servicii de back-end greu de utilizat de sisteme de configurare extrem de complexe.

În plus, versiunea acceptată a mediului NODE.JS diferă de la furnizor la furnizor. Desigur, nu avem suficient spațiu pentru a acoperi subiectul în profunzime. Vizita Tutorialul de implementare al Mozilla și express.js ' Performanță și fiabilitate și Securitate cele mai bune pagini pentru unele dintre problemele implicate. Asigurați-vă că vă uitați la documentația furnizorului pentru a culege cele mai bune practici.

13. Dovada viitoare aplicațiile dvs.

Ciclul de dezvoltare al lui Express.js este departe de a fi neted: Dezvoltatorii sunt bine cunoscuți pentru schimbări frecvente API care necesită rescrieri ale codului clientului. Comutatorul de la 3.x la 4.x a fost deosebit de dureros, motiv pentru care eliberarea iminentă de 5.x ar putea lăsa destul de puțini dintre voi simțiți inconfortabil.

În timp ce Express.js 5.0 aduce pe câteva schimbări de rupere, impactul lor este mai limitat. În primul rând, un set de funcții deja depreciate este eliminat pentru realitate - dacă codul încă le utilizează, modernizarea la 5.x necesită întreținere.

Designerii motoarelor de vizualizare trebuie să verifice "res.Render ():" Creșterea rangului în ceea ce privește vizualizarea Rendererilor, care a dus la alunecarea unor implementări sincrone. Versiunea 5 a cadrului îmbunătățește performanța prin aplicarea asincronă.

În plus, un set de îmbunătățiri și modificări diverse documentate Aici vede returnarea unor caracteristici dispărute din versiunile anterioare - în plus, unele bug-uri de lungă durată vor fi fixate în noua versiune.

În cele din urmă, fiți conștienți de faptul că puteți încerca deja noua versiune. Pur și simplu creați o copie a codului sursă, apucați un terminal și introduceți următoarea comandă pentru a descărca o valoare de arhivă de JavaScript de sângerare de sângerare. Fii sigur.

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

Acest articol a fost publicat inițial în numărul 279 al revistei Creative Web Design Designer Web. Cumpăra problema 279 aici sau Aboneaza-te la designerul web aici .

Articole similare:

• Tot ce trebuie să știți despre noul NODE.JS 8
• 20 module node.js trebuie să știi
• 25 Instrumente JavaScript la jocuri