Node.js crește rapid; unul dintre motivele cele mai mari pentru aceasta este datorită dezvoltatorilor care creează instrumente uimitoare care îmbunătățesc semnificativ productivitatea cu Nodul. În acest articol, vom trece prin instalarea de bază a Express, un cadru de dezvoltare și crearea unui proiect de bază cu acesta.
Ce vom construi astăzi
Nodul este asemănător în design și influențat de sisteme cum ar fi Ruby's Machine Event sau Python's Twisted. Nodul preia modelul evenimentului un pic mai departe - prezintă bucla eveniment ca construcție de limbă în loc de bibliotecă.
În acest tutorial, vom răsturna pagina de pornire YouTube, vom obține toate miniaturile de dimensiuni normale din pagină, precum și link-urile și durata de difuzare a videoclipurilor, vom trimite toate elementele într-un șablon jQueryMobile și vom reda clipurile video utilizând embedul YouTube o treabă bună de detectare a suportului pentru dispozitive media (flash / html5-video).
Vom învăța, de asemenea, cum să începem să folosim NPM și Expres, procesul de instalare a modulului npm, rutarea Express Basic și utilizarea a două module de nod: cerere și jsdom.
Pentru cei care nu sunteți încă familiarizați cu Node.js și cum să îl instalați, vă rugăm să consultați pagina de pornire node.js și pagina de proiect GitHub npm.
De asemenea, trebuie să vă referiți la seria noastră "Node.js: Pas cu pas".
Notă: Acest tutorial necesită și presupune că înțelegeți ce este Node.js și că aveți deja instalat node.js și npm.
Pasul 1: Configurarea Express
Deci, ce anume este Express? Potrivit dezvoltatorilor săi, ...
Site-ul de developare a web-ului JavaScript bazat pe server și construit pe Nod și conectat.
Sună rece, nu? Să folosim npm pentru a instala expres. Deschideți o fereastră Terminal și introduceți următoarea comandă:
npm install express -g
Trecând -g ca parametru pentru comanda de instalare, le spunem npm să facă o instalare globală a modulului.
eu folosesc / home / nod-server / nettuts pentru acest exemplu, dar puteți folosi orice vă simțiți confortabil.
După ce am creat proiectul nostru expres, trebuie să inscripționăm npm pentru a instala conexiuni exprese.
cd nodetube npm instalare -d
Dacă se termină cu "ok", atunci e bine să mergeți. Acum puteți executa proiectul:
nod app.js
În browser-ul dvs., mergeți la http: // localhost: 3000.
Pasul 2: Instalarea modulelor necesare
JSDOM
Implementarea JavaScript a domeniului W3C DOM.
Reveniți la Terminal și, după oprirea serverului dvs. curent (ctr + c), instalați jsdom:
npm instalează jsdom
Cerere
Metoda de solicitare HTTP simplificată.
Introduceți următoarele în Terminal:
Cerere de instalare npm
Totul ar trebui să fie setat acum. Acum, e timpul să intrăm într-un cod real!
Pasul 3: Crearea unui răzuitor simplu
app.js
Mai întâi, să includem toate dependențele noastre. Deschide-ți app.js fișier și, în primele linii, adăugați următorul cod:
Veți observa că Express a creat un cod pentru noi. Ce vezi tu app.js este structura cea mai de bază pentru un server Node care utilizează Express. În blocul nostru de cod anterioare, i-am spus lui Express să includă modulele noastre instalate recent: jsdom și cerere. De asemenea, includem modulul de adresă URL, care ne va ajuta să analizăm adresa URL a videoclipului pe care o vom elimina mai târziu de pe YouTube.
Scratind Youtube.com
În app.js, căutați secțiunea "Rute" (în jurul liniei 40) și adăugați următorul cod (citiți comentariile pentru a înțelege ce se întâmplă):
app.get ('/ nodetube', funcția (req, res) // Spuneți că doriți să preluați youtube.com, trimiteți rezultatele la o solicitare de apel invers (uri: 'http://youtube.com ', functie (eroare, raspuns, corp) var self = aceasta; self.items = new Array (); // Simt ca vreau sa salvez rezultatele intr-un array / && response.statusCode! == 200) console.log ('Eroare de solicitare.'); / Trimite paramul corporal ca cod HTML pe care îl vom analiza în jsdom //, de asemenea, spuneți jsdom să atașeze jQuery în script-uri și încărcate de la jQuery.com jsdom.env (html: body, scripts: ['http://code.jquery.com/jquery-1.6.min.js'], funcția (err, fereastră) // Utilizați jQuery doar ca într-o pagină HTML obișnuită var $ = window.jQuery; console.log ($ ('title').) ()); res.end ($ ('title' ;);
În acest caz, preluăm conținutul de pe pagina de pornire YouTube. După finalizare, tipărim textul din eticheta titlului paginii (
). Reveniți la Terminal și rulați din nou serverul.</p> <pre>nod app.js</pre> <p>În browserul dvs., accesați: <code>http: // localhost: 3000 / nodetube</code></p> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_5.png"> <p>Ar trebui să vedeți "YouTube - Broadcast yourself", care este titlul YouTube. </p> <p>Acum, când avem totul înființat și rulat, este timpul să obțineți câteva adrese URL video. Accesați pagina de pornire YouTube și faceți clic dreapta pe orice miniatură din secțiunea "Videoclipuri recomandate". Dacă aveți instalat Firebug (care este foarte recomandat), ar trebui să vedeți ceva de genul:</p> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_6.png"> <p>Există un model pe care îl putem identifica și care este prezent în aproape toate celelalte linkuri video regulate:</p> <pre>div.vide-intrare span.clip</pre> <p>Să ne concentrăm asupra acelor elemente. Du-te înapoi la editorul tău și în <code>app.js</code>, adăugați următorul cod la <code>/ nodetube</code> traseu:</p> <pre>app.get ('/ nodetube', funcția (req, res) // Spuneți că doriți să preluați youtube.com, trimiteți rezultatele la o solicitare de apel invers (uri: 'http://youtube.com ', functie (eroare, raspuns, corp) var self = aceasta; self.items = new Array (); // Simt ca vreau sa salvez rezultatele intr-un array / && response.statusCode! == 200) console.log ('Eroare de solicitare.'); / Trimite paramul corporal ca cod HTML pe care îl vom analiza în jsdom // și spuneți jsdom să atașați jQuery în script-urile jsdom. env (html: body, scripts: ['http://code.jquery.com/jquery-1.6.min.js'], funcția (err, fereastră) // Utilizați jQuery la fel ca în orice pagină HTML obișnuită var $ = fereastra.jQuery, $ body = $ ('body'), $ videos = $ body.find ('.video-entry'); // stiu. fiecare element de intrare video a găsit $ videos.each (funcția (i, item) // Voi folosi selectorii jQuery obișnuiți var $ a = $ (item) .children ('a'), // anchor element care sunt copii ai articolului nostru de intrare video $ title = $ (item) .find ('.video-title .video-long-title') text (), // title video $ time = $ a.find (' .video ") text (), // timpul de durată a videoclipului $ img = $ a.find ('span.clip img'); // thumbnail // și a adăuga toate aceste date la elementele mele matrice self.items [i] = href: $ a.attr ('href'), titlu: $ title.trim (), time: $ time, // există câteva lucruri cu miniaturi de videoclipuri YouTube, acele imagini ale căror date-atribut thumb // este folosită url în atributul menționat anterior ca src pentru miniatură, otheriwse // va folosi atributul implicit src. miniatură: $ img.attr ('data-thumb')? $ img.attr ('data-thumb'): $ img.attr ('src'), urlObj: url.parse ($ a.attr ('href'), true) // parse URL- bine ; ); // să vedem ce avem console.log (self.items); res.end ( 'Efectuat'); ); ); );</pre> <p>Este timpul să reporniți încă o dată serverul și să reîncărcați pagina în browserul nostru (http: // localhost: 3000 / nodetube). În terminalul dvs., ar trebui să vedeți ceva de genul:</p> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_7.png"> <p>Acest lucru arată bine, dar avem nevoie de o modalitate de a afișa rezultatele în browser. Pentru aceasta, voi folosi motorul șablonului Jade:<br></p><blockquote> <p> Jade este un motor de șablon de înaltă performanță puternic influențat de Haml, dar implementat cu JavaScript pentru Nod.</p> </blockquote> <p>În editorul tău, deschide-te <code>vizualizari / layout.jade</code>, care este structura layout-ului de bază utilizată la randarea unei pagini cu Express. Este frumos, dar trebuie să îl modificăm puțin.</p> <h3>vizualizari / layout.jade</h3> <pre>!!! 5 html (lang = 'en') capul meta (charset = 'utf-8') meta (name = 'viewport', content = "initial scale = 1, maximum-scale = = scriptul "stylesheet", href = "http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css") (src = 'http: //code.jquery.com/ jquery-1.6.2.min.js ') (src =' http: //code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js ') corp! = corp</pre> <p>Dacă comparăți codul de mai sus cu codul implicit în <code>layout.jade</code>, veți observa că câteva lucruri s-au schimbat - doctype, meta-tag-ul de vizualizare, stilul și etichetele de script furnizate de jquery.com. Să creați lista noastră de vizualizare:</p> <h3>vizualizari / list.jade</h3> <p>Înainte de a începe, vă rugăm să parcurgeți documentația jQuery Mobile (JQM de acum înainte) privind aspectul paginilor și anatomia.</p> <p>Ideea de bază este să utilizați o listă de vizualizări JQM, o miniatură, o etichetă cu titlul și durata de difuzare a videoclipului pentru fiecare element din listă, împreună cu un link către o pagină video pentru fiecare dintre elementele listate.</p> <p><strong>Notă:</strong> Aveți grijă cu indentația pe care o utilizați în documentele Jade, deoarece acceptă numai spații sau file - dar nu ambele în același document.</p> <pre>div (data-role = 'header') h1 = titlu div (data-role = 'content') // doar verificare de bază, items.length) // a crea un list wrapper ul (data-role = 'listview') // foreach a elementelor colectate - items.forEach (functie (item) // create a li li // si un link folosind a trecut urlObj Obiect a (href = '/ watch /' + item ['urlObj']. interogare.v, titlu = item ['title']) // și o miniatură img (src = item ['thumbnail' = "Miniatură") // titlu și etichetă de timp h3 = element ['titlu'] h5 = element ['timp'] -)</pre> <p>Asta este tot ce avem nevoie pentru a crea lista noastră. Intoarce-te <code>app.js</code> și înlocuiți următorul cod:</p> <pre> // să vedem ce avem console.log (self.items); res.end ( 'Efectuat');</pre> <p>cu asta:</p> <pre> // Avem totul pentru care am venit, acum să facem vizualizarea noastră res.render ('list', title: 'NodeTube', items: self.items);</pre> <p>Reporniți încă o dată serverul și reîncărcați browserul:</p> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_8.png"> <p><strong>Notă:</strong> Pentru că folosim jQuery Mobile, vă recomandăm să utilizați un browser bazat pe Webkit sau un telefon mobil iPhone / Android (simulator) pentru rezultate mai bune.</p> <hr> <h2> Pasul 4: Vizionarea videoclipurilor</h2> <p>Să facem o viziune pentru noi <code>/ceas</code> traseu. Crea <code>vizualizari / video.jade</code> și adăugați următorul cod:</p> <pre>div (data-role = 'header') h1 = titlu div (data-role = 'content') // Divizia noastra div div # video // Iframe de pe youtube obiect media pentru dispozitivul utilizat în cazul iframe (width = "100%", height = 215, src = "http://www.youtube.com/embed/" vid, frameborder = "0", allowfullscreen)</pre> <p>Din nou, reveniți la terminalul dvs., reporniți serverul, reîncărcați pagina și faceți clic pe oricare dintre elementele listate. De data aceasta va fi afișată o pagină video și veți putea reda videoclipul încorporat!</p> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_9.png"> <hr> <h2> Bonus: Utilizarea Forever pentru a rula serverul</h2> <p>Există modalități prin care putem să ne păstrăm serverul în fundal, dar există unul pe care îl prefer, numit Forever, un modul de nod pe care îl putem instala cu ușurință utilizând <code>NPM</code>:</p> <pre>npm instalează pentru totdeauna -g</pre> <p>Acest lucru va fi instalat global pentru totdeauna. Să începem aplicația noastră nodeTube:</p> <pre>pentru a începe întotdeauna app.js</pre> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_10.png"> <p>Puteți, de asemenea, să reporniți serverul, să utilizați fișierele jurnal personalizate, să transmiteți variabilele de mediu printre alte lucruri utile:</p> <pre>// rulați aplicația în modul de producție NODE_ENV = produceți întotdeauna start app.js</pre> <hr> <h2>Gândurile finale</h2> <p> Sper că am demonstrat cât de ușor este să începeți să utilizați Node.js, Express și npm. În plus, ați învățat cum să instalați modulele de noduri, să adăugați rute către Express, să preluați pagini de la distanță utilizând modulul Solicitare și multe alte tehnici utile. </p> <p> Dacă aveți comentarii sau întrebări, anunțați-ne în secțiunea de comentarii de mai jos!</p>
<div class="rek-block">
<center>
<ins class="adsbygoogle"
style="display:inline-block;width:580px;height:400px"
data-ad-client="ca-pub-3810161443300697"
data-ad-slot="9434875811"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
</div>
<div class="h-alltags">
<a href="articles/code">Cod</a>
</div>
</div>
</div>
</div>
</div>
<div class="next_posts clearfix">
<div class="n_post">
<div class="next_posts-h1 left_nh1"><a href="/articles/computers/how-to-screencast-for-free.html">Cum să Screencast gratuit</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_15/how-to-screencast-for-free_2.jpg');"></div>
</div>
<div class="n_post">
<div class="next_posts-h1 right_nh1"><a href="/articles/code/how-to-scrape-web-pages-for-metadata.html">Cum să scrapeți paginile Web pentru metadate</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_6/how-to-scrape-web-pages-for-metadata.png');"></div>
</div>
</div>
<footer>
<div class="container">
<div class="footer-langs">
<ul class="site-langs-list">
<li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li>
<li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li>
<li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li>
<li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li>
<li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li>
<li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li>
<li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li>
<li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li>
</ul>
</div>
<div class="h-block"><a href="/">ro.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Informații interesante și sfaturi utile privind programarea. Dezvoltarea de site-uri, web design si dezvoltare web. Tutoriale Photoshop. Crearea de jocuri pe calculator și aplicații mobile. Deveniți un programator profesionist de la zero.
</div>
</div>
</footer>
<div class="search">
<img class="searchico" src="//accentsconagua.com/img/search.svg" alt="">
</div>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<input class="searchmain" type="text" id="search-input" placeholder="Căutare...">
<ul class="searchli" id="results-container"></ul>
</div>
</div>
<link rel="stylesheet" href="css/flags.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#edeff5",
"text": "#838391"
},
"button": {
"background": "#4b81e8"
}
},
"theme": "classic",
"position": "bottom-right"
})});
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script src="js/scripts.min.js"></script>
<script src="js/common.js"></script>
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<script>
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".search");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>
<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json',
searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
})
</script>
<script src="jquery.unveil2.min.js"></script>
<script>
$('img').unveil();
</script>
</body>
</html>
Share
Accentsconagua