Node.js växer snabbt En av de största orsakerna till detta är tack vare utvecklarna som skapar fantastiska verktyg som förbättrar produktiviteten väsentligt med Node. I den här artikeln kommer vi att gå igenom den grundläggande installationen av Express, en utvecklingsram och skapa ett grundläggande projekt med det.
Vad vi ska bygga idag
Node har samma utformning som, och påverkas av, system som Ruby's Event Machine eller Python's Twisted. Noder tar händelsemodellen lite längre - det presenterar händelsesslingan som en språkkonstruktion istället för som ett bibliotek.
I den här handledningen skrapar vi YouTube-hemsidan, får alla miniatyrerna med regelbunden storlek från sidan, samt länkar och video-varaktighet, skickar alla element till en jQueryMobile-mall och spelar videon med hjälp av YouTube-inbäddning (vilket gör en trevligt jobb att upptäcka enhetsmediestöd (flash / html5-video).
Vi lär oss också att börja använda npm och uttrycka, npms modulinstallationsprocess, grundläggande Express routing och användningen av två moduler av Node: begäran och jsdom.
För de av er som ännu inte är bekanta med Node.js är och hur man installerar det, hänvisar du till node.js hemsida och npm GitHub-projektsidan.
Du bör också referera till vår "Node.js: Steg för steg" -serie.
Notera: Denna handledning kräver och förutsätter att du förstår vad Node.js är och att du redan har node.js och npm installerat.
Steg 1: Konfigurera Express
Så vad exakt är Express? Enligt dess utvecklare är det en ...
Insanely snabb (och liten) server-sida JavaScript webbutveckling ram byggd på Node and Connect.
Høres coolt, eller hur? Låt oss använda npm för att installera express. Öppna ett terminalfönster och skriv följande kommando:
npm installera express -g
Genom att passera -g Som en parameter till installationskommandot talar vi om npm för att göra en global installation av modulen.
Jag använder / home / nod-server / nettuts för detta exempel, men du kan använda vad du känner dig bekväm med.
Efter att vi skapat vårt uttryckliga projekt behöver vi isntruct npm för att installera uttryckliga beroenden.
cd nodetube npm installera -d
Om det slutar med, "ok", då är du bra att gå. Du kan nu köra ditt projekt:
nod app.js
I din webbläsare, gå till http: // localhost: 3000.
Steg 2: Installera nödvändiga moduler
JSDOM
En JavaScript-implementering av W3C DOM.
Gå tillbaka till din terminal och, efter att ha stoppat din nuvarande server (ctr + c), installera jsdom:
npm installera jsdom
Begäran
Förenklad HTTP-begäran metod.
Skriv följande i terminalen:
npm installationsförfrågan
Allt ska vara inställt nu. Nu är det dags att komma in i någon faktisk kod!
Steg 3: Skapa en enkel skrapa
app.js
Låt oss först ta med alla våra beroende. Öppna din app.js fil, och i de allra första raderna, lägg till följande kod:
Du kommer märka att Express har skapat en kod för oss. Vad du ser i app.js är den mest grundläggande strukturen för en Node-server med Express. I vårt tidigare kodblock berättade vi Express att inkludera våra nyligen installerade moduler: jsdom och begäran. Vi inkluderar också URL-modulen, som hjälper oss att analysera videoadressen vi ska skrapa från YouTube senare.
Skrapning Youtube.com
Inom app.js, sök efter avsnittet "Rutter" (runt rad 40) och lägg till följande kod (läs igenom kommentarerna för att förstå vad som händer):
app.get ('/ nodetube', funktion (req, res) // Berätta förfrågan om att vi vill hämta youtube.com, skicka resultaten till en återuppringningsfunktionsförfrågan (uri: 'http://youtube.com ', funktion (fel, svar, kropp) var self = this; self.items = new Array (); // Jag tycker att jag vill spara mina resultat i en array // Bara en grundläggande fel kontrollera om && response.statusCode! == 200) console.log ('Request error.';; // // Skicka kroppen param som HTML-koden vi kommer att analysera i jsdom // också berätta för jsdom att bifoga jQuery i skript och laddade från jQuery.com jsdom.env (html: body, scripts: ['http://code.jquery.com/jquery-1.6.min.js'], funktion (fel, fönster) // Använd jQuery bara som i en vanlig HTML-sida var $ = window.jQuery; console.log ($ ('title') .text ()), res.end ($ ('title') .text ()););) ;);
I det här fallet hämtar vi innehållet från YouTube-hemsidan. När vi är färdiga skriver vi ut texten som finns i sidans titel tagg (
). Återgå till Terminal och kör din server igen.</p> <pre>nod app.js</pre> <p>Gå till din webbläsare 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>Du bör se "YouTube - sänd dig själv", vilket är YouTube-titeln. </p> <p>Nu när vi har allt igång, är det dags att få några videoadresser. Gå till YouTube-hemsidan och högerklicka på en miniatyrbild från avsnittet "rekommenderade videor". Om du har installerat Firebug (som rekommenderas starkt) bör du se något som följande:</p> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_6.png"> <p>Det finns ett mönster vi kan identifiera och som är närvarande i nästan alla andra vanliga videolänkar:</p> <pre>div.vide-entry span.clip</pre> <p>Låt oss fokusera på dessa element. Gå tillbaka till din redaktör, och i <code>app.js</code>, lägg till följande kod till <code>/ nodetube</code> rutt:</p> <pre>app.get ('/ nodetube', funktion (req, res) // Berätta förfrågan om att vi vill hämta youtube.com, skicka resultaten till en återuppringningsfunktionsförfrågan (uri: 'http://youtube.com ', funktion (fel, svar, kropp) var self = this; self.items = new Array (); // Jag tycker att jag vill spara mina resultat i en array // Bara en grundläggande fel kontrollera om && response.statusCode! == 200) console.log ('Request error.';; // // Skicka kroppen param som HTML-koden vi kommer att analysera i jsdom // också berätta för jsdom att bifoga jQuery i skript jsdom. env (html: body, scripts: ['http://code.jquery.com/jquery-1.6.min.js'], funktion (fel, fönster) // Använd jQuery precis som i någon vanlig HTML-sida var $ = window.jQuery, $ body = $ ('body'), $ videos = $ body.find ('video-entry'); // Jag vet .Video-element innehåller de vanliga miniatyrbilderna // för var och en av video-inmatningselementen hittade $ videos.each (funktion (jag, objekt) // Jag använder vanliga jQuery selectors var $ a = $ (item) .children ('a'), // första ankare element som är barn i vårt .video-postobjekt $ title = $ (item) .find ('video-title .video-long-title') .text (), // videotitel $ time = $ a.find (' .video-tid "). text (), // videolängdstid $ img = $ a.find ('span.clip img'); // thumbnail // och lägg till all den informationen till mina poster array self.items [i] = href: $ a.attr ('href'), titel: $ title.trim (), tid: $ time, // Det finns några saker med youtube video miniatyrbilder, de bilder vars data-thumb attribut // är definierad använder URL-adressen i det tidigare nämnda attributet som src för miniatyrbilden, otheriwse // det kommer att använda standardattributet src-attributet. miniatyrbild: $ img.attr ('data-thumb')? $ img.attr ('data thumb'): $ img.attr ('src'), urlObj: url.parse ($ a.attr ('href'), sant) // analysera vår URL och frågesträngen som väl; ); // Låt oss se vad vi har console.log (self.items); res.end ( 'Klar'); ); ); );</pre> <p>Det är dags att starta om vår server en gång till och ladda om sidan i vår webbläsare (http: // localhost: 3000 / nodetube). I din terminal bör du se något som följande:</p> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_7.png"> <p>Det ser bra ut, men vi behöver ett sätt att visa våra resultat i webbläsaren. För detta kommer jag att använda jademallmotorn:<br></p><blockquote> <p> Jade är en högpresterande mallmotor som starkt påverkas av Haml, men implementeras med JavaScript for Node.</p> </blockquote> <p>Öppna din editor i din editor <code>visningar / layout.jade</code>, vilken är den grundläggande layoutstrukturen som används vid återgivning av en sida med Express. Det är trevligt men vi behöver ändra det lite.</p> <h3>visningar / layout.jade</h3> <pre>!!! 5 html (lang = 'en') huvudmeta (charset = 'utf-8') meta (namn = 'viewport', innehåll = "initialskala = 1, maximal skala = 1") title = titellänk = 'stylesheet', href = "http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css") manus (src = 'http: //code.jquery.com/ jquery-1.6.2.min.js ') -skriptet (src =' http: //code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js ') kropp! = kropp</pre> <p>Om du jämför koden ovan med standardkoden i <code>layout.jade</code>, Du kommer att märka att några saker har ändrats - doktyp, visningsmetataggen, stilen och skriptmarkeringarna betjänades från jquery.com. Låt oss skapa vår listvy:</p> <h3>visningar / list.jade</h3> <p>Innan vi börjar, var god bläddra igenom jQuery Mobile s (JQM från och med nu) dokumentation på sidlayouter och anatomi.</p> <p>Grundtanken är att använda en JQM listvy, en miniatyrbild, titel och videolängdslabel för varje objekt i listvisningen tillsammans med en länk till en videosida för var och en av de listade elementen.</p> <p><strong>Notera:</strong> Var försiktig med indrymmet du använder i dina Jade-dokument, eftersom det bara accepterar mellanslag eller flikar - men inte båda i samma dokument.</p> <pre>div (data-roll = 'page') header (data-roll = 'header') h1 = title div (data-roll = 'content') // bara grundläggande kontroll, vi kommer alltid ha saker från youtube items.length) // skapa en listview wrapper ul (data-roll = 'listview') // för de uppsamlade elementen - items.forEach (funktion (item) // skapa en li li // och en länk med vår passerade urlObj Objekt a (href = '/ watch /' + item ['urlObj'] .query.v, title = item ['title']) // och en miniatyrbild img (src = item ['thumbnail'], alt = "Thumbnail") // titel och tid etikett h3 = objekt ['title'] h5 = item ['time'] -)</pre> <p>Det är allt vi behöver för att skapa vår lista. Återvänd till <code>app.js</code> och ersätt följande kod:</p> <pre> // Låt oss se vad vi har console.log (self.items); res.end ( 'Klar');</pre> <p>med detta:</p> <pre> // Vi har allt vi kom för, nu låt oss göra vår uppfattning res.render ("list", title: 'NodeTube', objekt: self.items);</pre> <p>Starta om servern en gång till och ladda om din webbläsare:</p> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_8.png"> <p><strong>Notera:</strong> Eftersom vi använder jQuery Mobile rekommenderar jag att du använder en webkitbaserad webbläsare eller en iPhone / Android-mobil (simulator) för bättre resultat.</p> <hr> <h2> Steg 4: Visa videoklipp</h2> <p>Låt oss skapa en vy för vår <code>/Kolla på</code> rutt. Skapa <code>visningar / video.jade</code> och lägg till följande kod:</p> <pre>div (data-roll = 'page') header (data-roll = 'header') h1 = title div (data-roll = 'content') // Vår video div div # video // Iframe från youtube som fungerar rätt medieobjekt för enheten som används iframe (bredd = "100%", höjd = 215, src = "http://www.youtube.com/embed/" + vid, frameborder = "0", allowfullscreen)</pre> <p>Återigen, gå tillbaka till din terminal, starta om servern, ladda om din sida och klicka på något av de listade objekten. Den här gången visas en videosida och du kan spela in den inbäddade videon!</p> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_9.png"> <hr> <h2> Bonus: Använda Forever att köra din server</h2> <p>Det finns sätt att vi kan hålla servern igång i bakgrunden, men det finns en som jag föredrar, kallad Forever, en nodmodul som vi enkelt kan installera med <code>npm</code>:</p> <pre>npm installera för alltid -g</pre> <p>Detta kommer globalt att installeras för evigt. Låt oss starta vår nodeTube-applikation:</p> <pre>för alltid börja app.js</pre> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_10.png"> <p>Du kan också starta om servern, använda anpassade loggfiler, skicka miljövariabler bland andra användbara saker:</p> <pre>// kör din ansökan i produktionsläge NODE_ENV = produktion för alltid starta app.js</pre> <hr> <h2>Slutgiltiga tankar</h2> <p> Jag hoppas jag har visat hur lätt det är att börja använda Node.js, Express och npm. Dessutom har du lärt dig hur du installerar Node-moduler, lägg till vägar till Express, hämta fjärransider med hjälp av modulen Request och massor av andra användbara tekniker. </p> <p> Om du har några kommentarer eller frågor, var god och låt mig veta i kommentarfältet nedan!</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">Koda</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">Hur man kan 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">Så här skrapar du webbsidor för 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="/">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