Node.js vokser raskt; En av de største grunnene til dette er takk til utviklerne som lager fantastiske verktøy som forbedrer produktiviteten betydelig med Node. I denne artikkelen vil vi gå gjennom den grunnleggende installasjonen av Express, et utviklingsramme og skape et grunnleggende prosjekt med det.
Hva vi skal bygge i dag
Node er like i design til, og påvirket av, systemer som Ruby's Event Machine eller Python's Twisted. Node tar hendelsesmodellen litt lenger - den presenterer hendelsesløkken som en språkkonstruksjon i stedet for som et bibliotek.
I denne opplæringen vil vi skrape YouTube-startsiden, få alle vanlige miniatyrbilder fra siden, samt koblinger og videovarighetstid, send alle elementene til en jQueryMobile-mal, og spill videoene ved hjelp av YouTube-embed (som gjør en fin jobb med å oppdage enhetsmedierestøtte (flash / html5-video).
Vi vil også lære å begynne å bruke NPM og Uttrykke, npms modulinstallasjonsprosess, grunnleggende Express routing og bruken av to moduler av Node: be om og jsdom.
For de som ikke er kjent med Node.js, er og hvordan du installerer den, vennligst se på node.js hjemmeside og npm GitHub prosjektsiden.
Du bør også se vår "Node.js: Step by Step" -serie.
Merk: Denne opplæringen krever og forutsetter at du forstår hva Node.js er og at du allerede har node.js og npm installert.
Trinn 1: Konfigurere Express
Så hva er ekspress? Ifølge utviklerne er det en ...
Insanely raskt (og lite) server-side JavaScript webutvikling rammeverk bygget på Node and Connect.
Høres kult, ikke sant? La oss bruke npm til å installere express. Åpne et Terminal-vindu og skriv inn følgende kommando:
npm installere express -g
Ved å passere -g Som en parameter til install-kommandoen, forteller vi npm for å gjøre en global installasjon av modulen.
jeg bruker / home / node-server / nettuts for dette eksempelet, men du kan bruke det du føler deg komfortabel med.
Etter å ha opprettet vårt ekspresprosjekt, trenger vi å isntruct npm for å installere uttrykksmessige avhengigheter.
cd nodetube npm installere -d
Hvis det slutter med, "ok", så er du god til å gå. Du kan nå kjøre prosjektet ditt:
node app.js
I nettleseren din, gå til http: // localhost: 3000.
Trinn 2: Installere nødvendige moduler
JSDOM
En JavaScript-implementering av W3C DOM.
Gå tilbake til Terminal og, etter å ha stoppet din nåværende server (ctr + c), installer jsdom:
npm installere jsdom
Be om
Forenklet HTTP-forespørselsmetode.
Skriv inn følgende i terminalen:
npm installasjonsforespørsel
Alt skal settes opp nå. Nå er det på tide å komme inn i noen faktisk kode!
Trinn 3: Opprette en enkel skrape
app.js
Først, la oss inkludere alle våre avhengigheter. Åpne din app.js fil, og i de aller første linjene legger du til følgende kode:
Du vil legge merke til at Express har opprettet kode for oss. Det du ser i app.js er den mest grunnleggende strukturen for en Node-server ved hjelp av Express. I vår tidligere kodeblokk fortalte vi Express om å inkludere våre nylig installerte moduler: jsdom og be om. Vi inkluderer også URL-modulen, som hjelper oss med å analysere videoadressen vi vil skrape fra YouTube senere.
Skraping Youtube.com
Innenfor app.js, Søk etter "Ruter" -delen (rundt linje 40) og legg til følgende kode (les gjennom kommentarene for å forstå hva som skjer):
app.get ('/ nodetube', funksjon (req, res) // Fortell forespørselen om at vi vil hente youtube.com, send resultatene til en tilbakeringingsfunksjon forespørsel (uri: 'http://youtube.com ', funksjon (feil, svar, kropp) var self = this; self.items = new Array (); // Jeg føler at jeg vil lagre resultatene mine i en matrise // Bare en grunnleggende feil, se om && response.statusCode! == 200) console.log ('Request error.';; // // Send body param som HTML-koden vi vil analysere i jsdom // også fortelle jsdom å legge ved jQuery i skriptene og lastet inn fra jQuery.com jsdom.env (html: body, scripts: ['http://code.jquery.com/jquery-1.6.min.js'], funksjon (feil, vindu) // Bruk jQuery bare som i en vanlig HTML-side var $ = window.jQuery; console.log ($ ('title'). tekst ()); res.end ($ ('title'). tekst ()););) ;);
I dette tilfellet henter vi innholdet fra YouTube-hjemmesiden. Når du er ferdig, skriver vi ut teksten som finnes i sidens tittelkode (
). Gå tilbake til Terminal og kjør serveren din igjen.</p> <pre>node app.js</pre> <p>I nettleseren din, gå til: <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>Du bør se "YouTube - Broadcast Yourself", som er tittelen på YouTube. </p> <p>Nå som vi har alt satt opp og går, er det på tide å få noen video nettadresser. Gå til YouTube-hjemmesiden og høyreklikk på hvilken som helst miniatyrbilde fra delen "anbefalte videoer". Hvis du har installert Firebug, (som anbefales på det sterkeste) bør du se noe som følger:</p> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_6.png"> <p>Det er et mønster vi kan identifisere og som er tilstede i nesten alle andre vanlige videolinker:</p> <pre>div.vide-entry span.clip</pre> <p>La oss fokusere på disse elementene. Gå tilbake til redaktøren din, og i <code>app.js</code>, legg til følgende kode i <code>/ nodetube</code> rute:</p> <pre>app.get ('/ nodetube', funksjon (req, res) // Fortell forespørselen om at vi vil hente youtube.com, send resultatene til en tilbakeringingsfunksjon forespørsel (uri: 'http://youtube.com ', funksjon (feil, svar, kropp) var self = this; self.items = new Array (); // Jeg føler at jeg vil lagre resultatene mine i en matrise // Bare en grunnleggende feil, se om && response.statusCode! == 200) console.log ('Request error.';; // // Send body param som HTML-koden vi vil analysere i jsdom // også fortelle jsdom å legge ved jQuery i skriptene jsdom. env (html: body, scripts: ['http://code.jquery.com/jquery-1.6.min.js'], funksjon (feil, vindu) // Bruk jQuery akkurat som i en vanlig HTML-side var $ = window.jQuery, $ body = $ ('body'), $ videos = $ body.find ('videoinngang'); // Jeg vet .Videoinngangselementer inneholder miniatyrbilder av vanlig størrelse // for hver av videoopptakselementene fant $ videos.each (funksjon (jeg, element) // Jeg vil bruke vanlige jQuery selectors var $ a = $ (item) .children ('a'), // første anker element som er barn av våre .video-oppføringselement $ title = $ (item) .find ('video-title .video-long-title'). tekst (), // video tittel $ time = $ a.find (' .video-tid '). tekst (), // video varighetstid $ img = $ a.find (' span.clip img '); // thumbnail // og legg til alle de dataene til elementene mine selv.items [i] = href: $ a.attr ('href'), tittel: $ title.trim (), tid: $ time, // Det er noen ting med youtube video miniatyrbilder, de bildene som data-thumb attributten // er definert bruker url i det tidligere nevnte attributtet som src for miniatyrbildet, otheriwse // det vil bruke standard servert src attributt. miniatyrbilde: $ img.attr ('data-thumb')? $ img.attr ('data-thumb'): $ img.attr ('src'), urlObj: url.parse ($ a.attr ('href'), sant) // analysere nettadressen og spørrestrengen som vi vil ; ); // la oss se hva vi har console.log (self.items); res.end ( 'Ferdig'); ); ); );</pre> <p>Det er på tide å starte vår server en gang til, og last siden på nytt i nettleseren vår (http: // localhost: 3000 / nodetube). I terminalen din bør du se noe som følger:</p> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_7.png"> <p>Dette ser bra ut, men vi trenger en måte å vise resultatene våre i nettleseren. For dette vil jeg bruke Jade malmotor:<br></p><blockquote> <p> Jade er en høy ytelse malm motor tungt påvirket av Haml, men implementert med JavaScript for Node.</p> </blockquote> <p>I editoren din, åpne <code>visninger / layout.jade</code>, som er den grunnleggende layoutstrukturen som brukes når du gjør en side med Express. Det er fint, men vi må endre det litt.</p> <h3>visninger / layout.jade</h3> <pre>!!! 5 html (lang = 'en') hodet meta (charset = 'utf-8') meta (navn = 'visningsport', innhold = "startskala = 1, maksimumskala = 1") title = tittelkobling = 'stylesheet', href = "http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css") skript (src = 'http: //code.jquery.com/ jquery-1.6.2.min.js ') script (src =' http: //code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js ') kropp! = kropp</pre> <p>Hvis du sammenligner koden ovenfor med standardkoden i <code>layout.jade</code>, Du vil legge merke til at noen ting har endret seg - doktype, visningsport metakoden, stilen og skriptetikettene servert fra jquery.com. La oss lage vår listevisning:</p> <h3>visninger / list.jade</h3> <p>Før vi begynner, kan du bla gjennom jQuery Mobile's (JQM fra nå av) dokumentasjon på sideoppsett og anatomi.</p> <p>Den grunnleggende ideen er å bruke et JQM listevisning, en miniatyrbilde, tittel og video varighet etikett for hvert element inne i listevisningen sammen med en lenke til en videoside for hver av de listede elementene.</p> <p><strong>Merk:</strong> Vær forsiktig med innrykket du bruker i Jade-dokumentene dine, da det bare aksepterer mellomrom eller faner - men ikke begge deler i samme dokument.</p> <pre>div (data-roll = 'side') header (data-roll = 'header') h1 = tittel div (data-roll = 'innhold') // bare grunnleggende sjekk, vi vil alltid ha elementer fra youtube skjønt items.length) // lage en listevisning wrapper (data-roll = 'listview') // foreach av de samlede elementene - items.forEach (funksjon (element) // lage en li li // og en lenke ved hjelp av vår passerte urlObj Objekt a (href = '/ watch /' + item ['urlObj'] .query.v, title = item ['title']) // og et miniatyrbilde img (src = item ['miniatyrbilde'], alt = "Miniatyrbilde") // tittel og tidslabel h3 = element ['title'] h5 = item ['time'] -)</pre> <p>Det er alt vi trenger for å lage vår oppføring. Tilbake til <code>app.js</code> og erstatt følgende kode:</p> <pre> // la oss se hva vi har console.log (self.items); res.end ( 'Ferdig');</pre> <p>med dette:</p> <pre> // Vi har alt vi kom for, la oss nå gjengi visningen res.render ('list', title: 'NodeTube', elementer: self.items);</pre> <p>Start serveren på nytt en gang til, og last opp nettleseren din:</p> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_8.png"> <p><strong>Merk:</strong> Fordi vi bruker jQuery Mobile, anbefaler jeg at du bruker en webkitbasert nettleser eller en iPhone / Android-mobiltelefon (simulator) for bedre resultater.</p> <hr> <h2> Trinn 4: Vise videoer</h2> <p>La oss lage en visning for vår <code>/se</code> rute. Skape <code>visninger / video.jade</code> og legg til følgende kode:</p> <pre>div (data-roll = 'side') header (data-roll = 'header') h1 = tittel div (data-roll = 'innhold') // Vår video div div # video // Iframe fra youtube som fungerer riktig medieobjekt for enheten som brukes iframe (bredde = "100%", høyde = 215, src = "http://www.youtube.com/embed/" + vid, frameborder = "0", allowfullscreen)</pre> <p>Igjen, gå tilbake til Terminal, start serveren din, last siden på nytt, og klikk på noen av de oppførte elementene. Denne gangen vil en videoside vises, og du vil kunne spille innbøyningsvideoen!</p> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_9.png"> <hr> <h2> Bonus: Bruke Forever å kjøre serveren din</h2> <p>Det finnes måter vi kan holde serveren vår i gang i bakgrunnen, men det er en som jeg foretrekker, kalt Forever, en nodemodul som vi enkelt kan installere ved hjelp av <code>NPM</code>:</p> <pre>npm installere for alltid -g</pre> <p>Dette vil installere globalt for alltid. La oss starte vårt nodeTube-program:</p> <pre>for alltid begynne app.js</pre> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_10.png"> <p>Du kan også starte serveren din igjen, bruke egendefinerte loggfiler, pass miljøvariabler blant andre nyttige ting:</p> <pre>// Kjør din søknad i produksjonsmodus NODE_ENV = Produksjon for alltid, start app.js</pre> <hr> <h2>Siste tanker</h2> <p> Jeg håper jeg har demonstrert hvor lett det er å begynne å bruke Node.js, Express og npm. I tillegg har du lært hvordan du installerer Node-moduler, legge til ruter til Express, hente eksterne sider ved hjelp av Request-modulen, og mange andre nyttige teknikker. </p> <p> Hvis du har kommentarer eller spørsmål, vennligst gi meg beskjed i kommentarfeltet nedenfor!</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">Kode</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">Hvordan Screencast gratis</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">Slik skraver du websider for metadata</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="/">no.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Interessant informasjon og nyttige tips om programmering. Nettstedutvikling, webdesign og webutvikling. Photoshop opplæringsprogrammer. Opprettelse av dataspill og mobile applikasjoner. Bli en profesjonell programmerer fra grunnen av.
</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="Søke...">
<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