Node.js groeit snel; een van de grootste redenen hiervoor is te danken aan de ontwikkelaars die geweldige tools maken die de productiviteit met Node aanzienlijk verbeteren. In dit artikel zullen we de basisinstallatie van Express, een ontwikkelingsraamwerk, doorlopen en er een basisproject mee maken.
Wat we vandaag gaan bouwen
Knooppunt is vergelijkbaar in ontwerp met en wordt beïnvloed door systemen zoals Ruby's Event Machine of Python's Twisted. Knooppunt neemt het gebeurtenismodel een beetje verder - het presenteert de lus van de gebeurtenis als een taalconstructie in plaats van als een bibliotheek.
In deze zelfstudie schrapen we de startpagina van YouTube, krijgen we alle miniaturen van normaal formaat van de pagina, koppelingen en duur van de video, verzenden we al die elementen naar een jQueryMobile-sjabloon en spelen we de video's af met YouTube-embed (die een leuke taak om apparaatmedia-ondersteuning te detecteren (flash / html5-video).
We zullen ook leren hoe te beginnen met gebruiken NPM en uitdrukken, npm's module installatieproces, eenvoudige Express routing en het gebruik van twee modules van Node: verzoek en jsdom.
Voor degenen onder u die nog niet bekend zijn met Node.js is en hoe het te installeren, kijk dan op de node.js startpagina en de npm GitHub projectpagina.
U moet ook onze serie 'Node.js: Step by Step' raadplegen.
Notitie: Deze tutorial vereist en veronderstelt dat je begrijpt wat Node.js is en dat je al node.js en npm geïnstalleerd hebt.
Stap 1: Express instellen
Dus wat is Express precies? Volgens de ontwikkelaars is het een ...
Waanzinnig snel (en klein) JavaScript-webontwikkelingsraamwerk op de server gebouwd op Node and Connect.
Klinkt cool, toch? Laten we npm gebruiken om express te installeren. Open een Terminal-venster en typ de volgende opdracht:
npm install express -g
Door te passeren -g als een parameter voor de opdracht install, vertellen we npm om een globale installatie van de module te maken.
ik gebruik / Home / knooppunt-server / nettuts voor dit voorbeeld, maar je kunt gebruiken waar je je prettig bij voelt.
Nadat we ons express-project hebben gemaakt, moeten we nNntruct omn om de afhankelijkheid van express te installeren.
cd nodetube npm install -d
Als het eindigt met "ok", dan ben je klaar om te gaan. U kunt nu uw project uitvoeren:
knooppunt app.js
Ga in uw browser naar http: // localhost: 3000.
Stap 2: Benodigde modules installeren
JSDOM
Een JavaScript-implementatie van de W3C DOM.
Ga terug naar je Terminal en installeer, nadat je je huidige server hebt gestopt (ctr + c) jsdom:
npm jsdom installeren
Verzoek
Vereenvoudigde HTTP-verzoekmethode.
Typ het volgende in de Terminal:
npm installatie verzoek
Alles zou nu moeten worden opgezet. Nu is het tijd om een code in te voeren!
Stap 3: Een eenvoudige scraper maken
app.js
Laten we eerst al onze afhankelijkheden opnemen. Open je app.js bestand en voeg in de eerste regels de volgende code toe:
U zult merken dat Express een code voor ons heeft gemaakt. Wat je ziet app.js is de meest eenvoudige structuur voor een knooppuntserver die Express gebruikt. In ons vorig codeblok vertelden we aan Express dat we onze onlangs geïnstalleerde modules moesten opnemen: jsdom en verzoek. We nemen ook de URL-module op, die ons helpt de video-URL te analyseren die we later van YouTube zullen schrapen.
Scraping Youtube.com
Binnen app.js, zoek naar de sectie "Routes" (rond regel 40) en voeg de volgende code toe (lees de opmerkingen om te begrijpen wat er gaande is):
app.get ('/ nodetube', functie (req, res) // Vertel de aanvraag dat we youtube.com willen ophalen, stuur de resultaten naar een callback-functieverzoek (uri: 'http://youtube.com ', functie (err, respons, body) var self = this; self.items = new Array (); // Ik heb het gevoel dat ik mijn resultaten in een array wil opslaan // Alleen een basisfoutcontrole als (err && response.statusCode! == 200) console.log ('Verzoek om foutmelding.'); // Stuur de body param als de HTML-code die we zullen parseren in jsdom // en vertel jsdom ook om jQuery aan de scripts te koppelen en te laden van jQuery.com jsdom.env (html: body, scripts: ['http://code.jquery.com/jquery-1.6.min.js'], function (err, window) // Gebruik jQuery gewoon zoals in een normale HTML-pagina var $ = window.jQuery; console.log ($ ('title'). text ()); res.end ($ ('title'). text ()););) ;);
In dit geval halen we de inhoud op van de YouTube-startpagina. Als het is voltooid, drukken we de tekst in de title-tag van de pagina af (
). Keer terug naar de Terminal en voer je server opnieuw uit.</p> <pre>knooppunt app.js</pre> <p>Ga in uw browser naar: <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>Je zou het volgende moeten zien: "YouTube - Broadcast Yourself", de YouTube-titel. </p> <p>Nu alles is ingesteld en wordt uitgevoerd, is het tijd om een aantal video-URL's te ontvangen. Ga naar de startpagina van YouTube en klik met de rechtermuisknop op een miniatuur in het gedeelte 'aanbevolen video's'. Als je Firebug hebt geïnstalleerd (wat ten zeerste wordt aanbevolen), zou je ongeveer het volgende moeten zien:</p> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_6.png"> <p>Er is een patroon dat we kunnen identificeren en dat aanwezig is in bijna alle andere reguliere videolinks:</p> <pre>div.vide-entry span.clip</pre> <p>Laten we ons concentreren op die elementen. Ga terug naar je editor en in <code>app.js</code>, voeg de volgende code toe aan de <code>/ nodetube</code> route:</p> <pre>app.get ('/ nodetube', functie (req, res) // Vertel de aanvraag dat we youtube.com willen ophalen, stuur de resultaten naar een callback-functieverzoek (uri: 'http://youtube.com ', functie (err, respons, body) var self = this; self.items = new Array (); // Ik heb het gevoel dat ik mijn resultaten in een array wil opslaan // Alleen een basisfoutcontrole als (err && response.statusCode! == 200) console.log ('Verzoek om foutmelding.'); // Stuur de body param als de HTML-code die we zullen parseren in jsdom // en vertel jsdom ook om jQuery aan de scripts jsdom toe te voegen. env (html: body, scripts: ['http://code.jquery.com/jquery-1.6.min.js'], function (err, window) // Gebruik jQuery op dezelfde manier als in elke reguliere HTML-pagina var $ = window.jQuery, $ body = $ ('body'), $ videos = $ body.find ('. video-entry'); // ik weet het .video-entry-elementen bevatten de thumbnails van normale grootte // voor elk van de .video-entry-elementen gevonden $ videos.each (functie (i, item) // ik zal gewone jQuery selectors gebruiken var $ a = $ (item) .children ('a'), // eerste anker element dat zijn kinderen van ons .video-item item $ title = $ (item) .find ('. video-title .video-long-title'). text (), // video title $ time = $ a.find (' .video-time '). text (), // video duur tijd $ img = $ a.find (' span.clip img '); // thumbnail // en voeg al die gegevens toe aan mijn items array self.items [i] = href: $ a.attr ('href'), title: $ title.trim (), time: $ time, // er zijn enkele dingen met youtube videominiaturen, die afbeeldingen waarvan het data-thumb attribuut // is gedefinieerd, gebruiken de url in het eerder genoemde attribuut als src voor de thumbnail, otheriwse // het zal het standaard dienende src attribuut gebruiken. thumbnail: $ img.attr ('data-thumb')? $ img.attr ('data-thumb'): $ img.attr ('src'), urlObj: url.parse ($ a.attr ('href'), true) // ontleed onze URL en de vraagstring als goed ; ); // laten we zien wat we console.log (self.items) hebben; res.end ( 'OK'); ); ); );</pre> <p>Het is tijd om onze server opnieuw te starten en de pagina opnieuw te laden in onze browser (http: // localhost: 3000 / nodetube). In uw Terminal zou u ongeveer het volgende moeten zien:</p> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_7.png"> <p>Dit ziet er goed uit, maar we hebben een manier nodig om onze resultaten in de browser weer te geven. Hiervoor gebruik ik de Jade-sjabloonengine:<br></p><blockquote> <p> Jade is een krachtige template-engine die sterk wordt beïnvloed door Haml, maar geïmplementeerd met JavaScript voor Node.</p> </blockquote> <p>Open in je editor <code>views / layout.jade</code>, Dit is de standaard lay-outstructuur die wordt gebruikt bij het renderen van een pagina met Express. Het is leuk, maar we moeten het een beetje aanpassen.</p> <h3>views / layout.jade</h3> <pre>!!! 5 html (lang = 'en') head meta (charset = 'utf-8') meta (naam = 'viewport', content = "initial-scale = 1, maximum-scale = 1") title = title link (rel = 'stylesheet', href = "http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css") script (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 ') body! = body</pre> <p>Als u de bovenstaande code vergelijkt met de standaardcode in <code>layout.jade</code>, je zult merken dat een paar dingen zijn veranderd - doctype, de metatag van de viewport, de stijl- en script-tags die worden aangeboden via jquery.com. Laten we onze lijstweergave maken:</p> <h3>views / list.jade</h3> <p>Voordat we beginnen, blader door de documentatie van jQuery Mobile (JQM vanaf nu) over paginalay-outs en anatomie.</p> <p>Het basisidee is om een JQM-lijstweergave, een miniatuur-, titel- en video-duurlabel te gebruiken voor elk item in de lijstweergave, samen met een koppeling naar een videopagina voor elk van de vermelde elementen.</p> <p><strong>Notitie:</strong> Wees voorzichtig met de inspringing die u gebruikt in uw Jade-documenten, omdat deze alleen spaties of tabs accepteert, maar niet beide in hetzelfde document.</p> <pre>div (data-role = 'page') header (data-role = 'header') h1 = title div (data-role = 'content') // gewoon basiscontrole, we zullen altijd wel items van youtube hebben - if (als items.length) // maak een listview-wrapper ul (data-role = 'listview') // voor elk van de verzamelde elementen - items.forEach (functie (item) // create a li li // en een link met behulp van onze doorgegeven urlObj Object a (href = '/ watch /' + item ['urlObj']. query.v, title = item ['title']) // en een thumbnail img (src = item ['thumbnail'], alt = "Thumbnail") // titel en tijdlabel h3 = item ['titel'] h5 = item ['tijd'] -)</pre> <p>Dat is alles wat we nodig hebben om onze aanbieding te maken. Terug keren naar <code>app.js</code> en vervang de volgende code:</p> <pre> // laten we zien wat we console.log (self.items) hebben; res.end ( 'OK');</pre> <p>hiermee:</p> <pre> // We hebben alles waar we voor kwamen, laten we nu onze weergave res.render ('list', title: 'NodeTube', items: self.items);</pre> <p>Start uw server opnieuw op en laad uw browser opnieuw:</p> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_8.png"> <p><strong>Notitie:</strong> Omdat we jQuery Mobile gebruiken, raad ik aan een op Webkit gebaseerde browser of een iPhone / Android-mobiel (simulator) te gebruiken voor betere resultaten.</p> <hr> <h2> Stap 4: Video's bekijken</h2> <p>Laten we een beeld creëren voor onze <code>/kijk maar</code> route. creëren <code>views / video.jade</code> en voeg de volgende code toe:</p> <pre>div (data-role = 'page') header (data-role = 'header') h1 = title div (data-role = 'content') // Onze video div div # video // Iframe van youtube die de juiste dient media-object voor het apparaat dat in gebruik is iframe (width = "100%", height = 215, src = "http://www.youtube.com/embed/" + vid, frameborder = "0", allowfullscreen)</pre> <p>Nogmaals, ga terug naar je Terminal, herstart je server, laad je pagina opnieuw en klik op een van de vermelde items. Deze keer wordt een videopagina weergegeven en kun je de ingesloten video afspelen!</p> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_9.png"> <hr> <h2> Bonus: voor altijd gebruiken om uw server te gebruiken</h2> <p>Er zijn manieren waarop we onze server op de achtergrond kunnen laten werken, maar er is er een die ik prefereer, genaamd Forever, een knooppuntmodule die we eenvoudig kunnen installeren met behulp van <code>NPM</code>:</p> <pre>npm installeer voor altijd -g</pre> <p>Dit zal Forever wereldwijd installeren. Laten we onze nodeTube-app starten:</p> <pre>start voor altijd app.js</pre> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_10.png"> <p>U kunt ook uw server opnieuw opstarten, aangepaste logbestanden gebruiken, omgevingsvariabelen onder andere handige dingen doorgeven:</p> <pre>// voer uw toepassing uit in productiemodus NODE_ENV = productie start voor altijd app.js</pre> <hr> <h2>Laatste gedachten</h2> <p> Ik hoop dat ik heb laten zien hoe eenvoudig het is om Node.js, Express en npm te gebruiken. Bovendien hebt u geleerd knoopmodules te installeren, routes toe te voegen aan Express, externe pagina's op te halen met behulp van de module Verzoek en tal van andere nuttige technieken. </p> <p> Als u opmerkingen of vragen heeft, kunt u me dit laten weten in de sectie Opmerkingen hieronder!</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">Code</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">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">Hoe webpagina's voor metadata schrapen</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="/">nl.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Interessante informatie en nuttige tips over programmeren. Website ontwikkeling, webdesign en webontwikkeling. Photoshop-zelfstudies. Creatie van computerspellen en mobiele applicaties. Word een volledig professionele programmeur.
</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="Zoeken...">
<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