Share
Acum cativa ani, ca multi oameni, am inceput sa aud mai multe despre Node.js. Am construit aplicații de tip server în ColdFusion timp de peste un deceniu, dar am fost întotdeauna curios să văd cum au funcționat și alte platforme. Mi-a plăcut JavaScript pe client și utilizarea lui pe server părea fascinantă. (Desi nu este neaparat nou, sunt destul de batran sa-mi amintesc cand Netscape a lansat SSJS in anii '90.) Am citit cateva tutoriale, am stat in cateva sesiuni si, in general, am plecat ....
De fiecare dată când citeam ceva despre Node, sa ajuns la aceeași poveste: construirea unui server web. Sincer, asta nu a fost incitant. Chiar și înapoi când am aplicat pentru prima oară aplicații web în scripturile Perl CGI, nu aveam de ce să-mi fac griji. Am putut vedea potențialul furnizorilor API mici și ușoare, dar aș construi un site simplu în el? În nici un caz!
Dar într-o zi am avut noroc. Am decis să stau într-o altă prezentare a nodului (în principal pentru că știam bine prezentatorul), iar în timpul prezentării vorbitorul a demonstrat Express. Un bec a dispărut. Aici era cadrul Nodului pe care îl așteptam! Da, teoretic, vă construiți în continuare propriul server web, dar acest aspect este minimizat și în schimb vă puteți concentra pe logica și conținutul site-ului dvs. Chiar mai bine, am văzut cum integrarea motoarelor template permite o experiență aproape de tip ColdFusion (sau PHP). În acest articol vă voi arăta cum să instalați Express și cum să începeți să construiți aplicații web utilizând cadrul.
Cel mai probabil ești deja un dezvoltator de noduri. Dacă sunteți nou pe platformă, atunci este posibil să fiți în continuare în primejdie de puterea de npm. Stiu ca sunt. După cum am spus, cea mai mare parte a vieții mele am petrecut făcând ColdFusion. Există un ecosistem bogat, dacă nu mare, de tip open source pentru acea platformă. Dar descoperirea și instalarea este o afacere manuală. În primele câteva ocazii pe care le-am folosit, am fost în primejdie. Sincer, mi-e greu sa imi imaginez acum folosind o platforma fara un instrument ca npm. Să începem cu a package.json dosar în care vom adăuga dependența Express.
"nume": "demo1", "descriere": "Prima expresie", "versiune": "0.0.1", "dependențe": "expres": "3.x"
Din nou, acest lucru ar trebui să fie destul de standard pentru dezvoltatorii de noduri. Trageți în jos la linia de comandă și executați:
npm install
Care va instala Express și dependențele sale.
În schimb, puteți instala, de asemenea, Express ca instrument de linie de comandă pentru a genera rapid aplicații schelet. Acest lucru se poate face prin rularea:
npm install -g expres
Odată ce ați făcut asta, puteți rula expres la linia de comandă pentru a genera o aplicație.
Să ne întoarcem la aplicația pe care am creat-o cu cea anterioară package.json fișier și adăugați un app.js fişier. Aplicația dvs. va crea, cel puțin, o nouă instanță a obiectului Express și va începe să ascultați pe un anumit port. Să începem cu acest lucru:
Accentsconagua
var express = necesită ("expres"); var app = expres (); app.listen (3000); Personal, am tendința de a lua lucrurile destul de încet atunci când învăț un nou cadru, așa că ar putea avea sens să se execute rapid aplicație nod doar pentru a se asigura că nimic nu a fost înșelat.
Acum, să încercăm să adăugăm câteva rute simple la aplicație. Aplicațiile Express pot răspunde la diverse verbe HTTP ca metode API. De exemplu,
// Regular HTTP obține app.get (un url, fa ceva); // Unele alte app.get de pagină (o altă adresă URL, faceți altceva); // pot răspunde la un formular post app.post (un url, face mai multe lucruri);
Să creați un exemplu real și să adăugați o pagină principală la aplicație:
app.get ('/', funcția (cerere, răspuns) response.send ("Aceasta ar fi ceva HTML");); Rețineți că Express adaugă un simplu trimite() metoda pentru a raspuns obiect. Aceasta rezumă o parte din codul de boilerplate pentru a răspunde la răspunsuri. Dacă ați făcut totul bine, acum puteți reporni aplicația și deschideți browserul la portul 3000.
cerere trimisă() De asemenea, API gestionează în mod inteligent diferite tipuri de date. Imaginați-vă că doriți să adăugați pe site-ul dvs. un simplu API bazat pe JSON. Prin returnarea pur și simplu a unui obiect în loc de un șir, Express va gestiona conversia rezultatului în JSON, precum și setarea anteturilor de răspuns adecvate.
app.get ('/ api', funcție (cerere, răspuns) response.send (nume: "Raymond", vârsta: 40);); După cum vă puteți imagina, în acest moment, construirea unei aplicații ar consta în adăugarea a tot mai multe rute pentru a face față oricăror necesități. Să construim un site static foarte simplu care să utilizeze ceea ce am învățat până acum.
Pentru primul nostru site, vom construi un blog. Da, acest lucru nu este cu totul nou sau interesant, dar este și ceva pe care toată lumea îl înțelege conceptual. Puteți găsi codul sursă complet pentru această aplicație în descărcarea atașată în blog1 pliant. Vom sari peste package.json Fișierul este exact același, cu excepția numelui. Să ne uităm mai degrabă la asta app.js.
var express = necesită ("expres"); var app = expres (); app.get ('/', funcția (req, res) res.sendfile ('./ views / index.html');); app.get ('/ about', funcția (req, res) res.sendfile ('./ views / about.html');); app.get ('/ article', funcția (req, res) res.sendfile ('./ views / article.html');); app.listen (3000); Unul dintre primele lucruri pe care le vei observa este că am trecut de la trimite api la Trimite fișier. În timp ce am putea încorpora șiruri mari HTML în noi app.js fișier, care ar fi destul de dezordonat repede. Avem trei rute pentru această aplicație. Unul pentru pagina de pornire, unul pentru o pagină "Despre" și unul pentru un articol. De obicei, pagina de articol ar reprezenta o intrare pe blog, dar pentru moment, păstrăm lucrurile simple.
HTML pentru paginile noastre este, de asemenea, destul de simplu. Iată pagina de pornire:
Pagina principala Blog!
Observați că nu este nimic special aici încă. Este HTML simplu static care va fi returnat de aplicația Express ca atare. Atât paginile Despre cât și articolul sunt aceleași în afara modificărilor aduse titlului și h1 valorile.
Încă o dată, declanșați acest lucru la linia de comandă și deschideți browserul. (Apropo, una dintre greșelile comune pe care le-am făcut atunci când Node-ul de învățare a fost să uiți să-mi omor susul demo-urilor anterioare. Dacă mai rulați ultima aplicație, va fi portul 3000. Fie omorâți-l, aplicație). Ar trebui să puteți naviga în jurul acestei aplicații simple în câteva clicuri simple.
Acum să trecem de la statică la dinamică.
Express acceptă o varietate de motoare templante. Motoarele cu template sunt ca multe lucruri în lumea tehnologiei - cu un pas mai mic decât religia și politica. Linia de comandă expresă poate adăuga suport pentru Jade, EJS, JSHTML și Hogan. Conform documentației Express, orice motor de template care se conformează unei anumite semnături va funcționa cu acesta. De asemenea, vă recomandăm să verificați biblioteca consolidate.js pentru o listă de motoare șablon acceptate.
Personal, eu sunt un mare fan al Handlebars (handlebarsjs.com). Am folosit-o în multe aplicații de la client și a fost o potrivire naturală pentru mine de a folosi pe partea de server. Pentru a utiliza Handlebars trebuie să instalați o bibliotecă de învelitoare numită hbs. Să adăugăm acest lucru aplicației noastre.
"nume": "blog2", "descriere": "aplicație blog", "versiune": "0.0.1", "dependență"
Acum, să ne actualizăm app.js pentru a utiliza acest motor:
var express = necesită ("expres"); var app = expres (); var hbs = necesită ('hbs'); app.set ("motor de vizualizare", "html"); app.engine ('html', hbs .__ expres); app.get ('/', funcție (req, res) res.render ('index');); app.get ('/ about', funcția (req, res) res.render ('despre');); app.get ('/ article', funcția (req, res) res.render ('articolul');); app.listen (3000); Am făcut câteva lucruri importante aici. Pentru a utiliza funcțiile Handlebars, încărcăm (prin intermediul cererii) biblioteca HBS wrapper. Apoi trebuie să-i spunem lui Express să o folosească. În mod implicit, Handlebars va funcționa cu fișiere care conțin o extensie care se potrivește cu motorul respectiv. În cazul nostru, something.hbs. Dar putem spune Expresului să trateze fișierele HTML ca fiind dinamice prin utilizarea "motor de vizualizare" directivă, vedeți mai sus. Acest lucru nu este necesar, dar prefer să lucrez cu fișiere HTML. Editorul meu poate să ofere o sugestie mai bună a codului și o evidențiere a sintaxei. De fapt, încărcarea motorului este efectuată prin intermediul app.engine.
În cele din urmă, toate rutele fac trecerea la utilizarea noului face metodă. Express implicit să folosească dosarul de vizualizări, pentru a putea lăsa asta. Din moment ce Express cunoaște și prelungirea pe care o preferăm, putem să uităm și de asta. In esenta, res.render ( 'ceva') echivalează cu a spune Express să caute vizualizari / something.html, analizați-l pe baza regulilor motorului nostru template și returnați-l în browser.
Puteți găsi acest exemplu în blog2 , în codul sursă atașat. După cum am spus mai devreme, îmi place să fac pași pentru copii, așa că, deși nu facem nimic dinamic, vă recomand să arunci acest lucru la linia de comandă și să vă asigurați că puteți naviga pe site.
Având în vedere că acceptăm acum șabloane dinamice, permiteți-le să devină dinamice. Deoarece construim un blog, trebuie să adăugăm asistență pentru listarea unui set de intrări de blog pe pagina de pornire și care vă permite să vă conectați la un anumit motor de blog. În timp ce am putea declanșa o conexiune la MySQL sau Mongo, să creăm un set static de date, precum și o bibliotecă simplă de împachetare. Aici este blog.js fișier care oferă atât pentru a obține un set de intrări, precum și obținerea doar unul.
var introducere = ["id": 1, "title": "Hello World!", "body": "Acesta este corpul intrării blogului meu. ", " id ": 2," titlu ":" Ouăle pentru micul dejun "," corp ":" Astăzi aveam ouă la micul dejun. "id": 3, "titlu": "Berea este bună", "corp": "Știri Flash! , "titlul": "Oameni obișnuiți suge", "corp": "Oamenii care sunt răi nu sunt frumos sau distractiv să stea în jur", "publicat": "6/5/2013", "id" 5, "title": "Eu părăsesc tehnologia X și ai grijă", "corp": "Lasă-mă să scriu câteva momeală despre cum nu mai folosesc o tehnologie particulară" 10/2013 ", " id ": 6," title ":" Ajutor My Kickstarter "," body ":" Vreau un nou XBox One. / 2013" ]; exports.getBlogEntries = funcția () returnează intrările; exports.getBlogEntry = funcția (id) pentru (var i = 0; i < entries.length; i++) if(entries[i].id == id) return entries[i];
De obicei, am avea și metode de adăugare, editare și ștergere, dar pentru moment acest lucru este suficient. Să vedem acum o actualizare app.js fișierul care utilizează acest motor.
var express = necesită ("expres"); var app = expres (); var hbs = necesită ('hbs'); var blogEngine = necesită ('./ blog'); app.set ("motor de vizualizare", "html"); app.engine ('html', hbs .__ expres); app.use (express.bodyParser ()); app.get ('/', funcția (req, res) res.render ('index', title: "Blogul meu, intrări: blogEngine.getBlogEntries ());)); app.get ('/ about', funcția (req, res) res.render ('despre', title: "Despre mine");); app.get ('/ article /: id', funcția (req, res) var entry = blogEngine.getBlogEntry (req.params.id); res.render (' intrare);); app.listen (3000); Să abordăm actualizările unul câte unul. (Această versiune poate fi găsită în blog3 .) În primul rând, încărcăm în motorul nostru utilizând un apel rapid necesar. Acest lucru ne dă posibilitatea să-l sunăm și să obținem intrări. Este posibil să observați o linie de apel nouă bodyParser, dar ignora asta pentru moment.
În ruterul de pagină de pornire, am trecut un al doilea argument la API-ul de redare. Argumentul este un obiect cu două chei, titlu și intrări. Valoarea pentru titlu este doar un șir, dar intrările sună la noi blogEngine API-ul. Iată unde lucrurile devin interesante. Toate datele pe care le transmitem vor fi disponibile pentru șabloanele noastre. În funcție de limba dvs. de șablon, informațiile despre modul în care o utilizați se pot modifica, dar vă permite să vedeți pagina de pornire.
Blog!
#există înregistrărititlu
/fiecare
Publicat: publicat
Dacă nu ați mai folosit niciodată Handlebars, probabil că veți avea grijă de ce se întâmplă aici. #fiecare directiva va itera pe o matrice. În interiorul blocului am folosit o combinație de jetoane de manevră care indică datele din blogul meu, precum și codul HTML pentru a genera o listă simplă de intrări în blog. Venind dintr-un fundal ColdFusion, acest lucru este foarte familiar.
Pun pariu că vă întrebați și de ce a mers restul HTML-ului. Când utilizați motoarele template pentru Express, beneficiați de suport automatizat. Asta inseamna ca pot crea un layout generic cu designul site-ului meu si Express va injecta o anumita pagina de iesire in el. Prin convenție, acest lucru este numit layout.something unde "ceva" este extensia specială pe care o utilizați. Deoarece am folosit HTML, aceasta va fi doar layout.html:
titlu corp
Destul de slick, nu? Pagina Despre nu este interesantă, așa că o să o ignorăm, dar verificați ruta articolului. Acum include un simbol, : id, în URL. Express ne permite să creăm adrese URL dinamice care pot apoi să creeze pentru a solicita argumente. Veți observa că înapoi în pagina de pornire am definit link-uri care arătau astfel: / Article / id.
Ar fi, teoretic, să adăugăm un traseu pentru fiecare intrare de blog pe care o avem, dar este mult mai bine să creați un traseu abstract care să corespundă oricărei solicitări din formularul respectiv. Pentru a avea acces la această valoare, adăugăm și o altă piesă, bodyParser linie pe care am definit-o mai devreme. (Această caracteristică particulară provine din cadrul Connect și de fapt vă oferă destul de mult ajutor în sprijinirea atât a organelor de șir de interogări cât și a formelor. Aproape fiecare aplicație Express va dori să includă acest lucru.)
Deoarece avem acces la valoarea dinamică de la sfârșitul adresei URL, putem pur și simplu să le transmitem blogEngine obiect și utilizați rezultatul ca argument în vederea vizualizării.
Iată-l article.html fişier:
Titlu de Blog
Publicat: blog.published Blog.body
Acum avem o aplicație cu adevărat dinamică, dar urâtă. Iată noua pagină de pornire:
Iată un articol dintr-o intrare specială pe blog:
Să adăugăm un stil de bază aplicației noastre pentru a deveni un pic mai frumos. Express oferă o modalitate simplă de a adăuga suport pentru resurse statice, cum ar fi imagini, biblioteci JavaScript și foi de stil. Prin definirea pur și simplu a unui dosar static, orice cerere va fi pentru un fișier va fi verificat împotriva acestui dosar special, înainte de a fi comparat cu rutele. Iată un exemplu din versiunea finală a motorului nostru de blog (care poate fi găsit în blog4 pliant):
app.use (express.static ( 'public'));
În acest moment, dacă solicitați /foo.css, și fișierul foo.css există în public dosar, acesta va fi returnat. Deoarece abilitățile mele de proiectare sunt la fel de bune ca orice dezvoltator, am luat calea ușoară și am apucat o copie a Bootstrap (http://twitter.github.io/bootstrap/). Am renunțat și o copie a jQuery, în mine public pliant.
Apoi, în interiorul meu layout.html, Mă refer la aceste resurse. Iată un exemplu de conectare bootstrap.css:
Express va verifica automat acest fișier în cadrul public pliant. Aveți mai multe foldere statice de acest gen și puteți seta prefixe personalizate pentru URL-uri. Rezultatul este - uimitoare. (Ok, comparativ cu prima versiune, este o imbunatatire imensa!)
Pagina principală:
Și un articol:
Doriți să aflați mai multe? Iată câteva linkuri care ar putea fi de ajutor.
