Node.js sta crescendo rapidamente; uno dei motivi principali per questo è grazie agli sviluppatori che creano strumenti straordinari che migliorano significativamente la produttività con Node. In questo articolo, passeremo attraverso l'installazione di base di Express, un framework di sviluppo e la creazione di un progetto di base con esso.
Cosa stiamo andando a costruire oggi
Il nodo è simile nel design e influenzato da sistemi come Ruby's Event Machine o Python's Twisted. Il nodo prende un po 'più avanti il modello di eventi - presenta il ciclo degli eventi come un costrutto linguistico invece che come una libreria.
In questo tutorial, analizzeremo la home page di YouTube, otterremo tutte le miniature di dimensioni normali dalla pagina così come i link e la durata del video, invieremo tutti quegli elementi a un modello jQueryMobile e riprodurli utilizzando l'embed di YouTube (che fa un bel lavoro di rilevamento del supporto multimediale del dispositivo (flash / html5-video).
Impareremo anche come iniziare a usare npm e Esprimere, il processo di installazione del modulo di npm, il routing Express di base e l'uso di due moduli di nodo: richiesta e jsdom.
Per quelli di voi che non hanno ancora familiarità con Node.js e come installarlo, fare riferimento alla home page node.js e la pagina del progetto GitHub npm.
Dovresti anche fare riferimento alla nostra serie "Node.js: Step by Step".
Nota: Questo tutorial richiede e presuppone che tu capisca cos'è Node.js e che tu abbia già installato node.js e npm.
Passaggio 1: impostazione Express
Quindi cos'è esattamente Express? Secondo i suoi sviluppatori, è un ...
Insanely veloce (e piccolo) framework di sviluppo web JavaScript lato server costruito su Node e Connect.
Sembra fantastico, vero? Usiamo npm per installare express. Aprire una finestra di Terminale e digitare il seguente comando:
npm install express -g
Passando -g come parametro del comando install, stiamo dicendo a npm di fare un'installazione globale del modulo.
sto usando / home / node-server / Nettuts per questo esempio, ma puoi usare qualunque cosa ti senti a tuo agio.
Dopo aver creato il nostro progetto express, dobbiamo isntruct npm per installare le dipendenze Express.
cd nodetube npm installazione -d
Se finisce con "ok", allora sei a posto. Ora puoi eseguire il tuo progetto:
nodo app.js
Nel tuo browser, vai a http: // localhost: 3000.
Passaggio 2: installazione dei moduli necessari
JSDOM
Un'implementazione JavaScript del DOM W3C.
Torna al tuo terminale e, dopo aver fermato il tuo attuale server (ctr + c), installa jsdom:
npm installa jsdom
Richiesta
Metodo di richiesta HTTP semplificato.
Digitare quanto segue nel terminale:
richiesta di installazione di npm
Tutto dovrebbe essere configurato ora. Ora è il momento di inserire un codice reale!
Passaggio 3: creazione di un raschietto semplice
app.js
Innanzitutto, includiamo tutte le nostre dipendenze. Apri i tuoi app.js file, e, nelle prime righe, aggiungere il seguente codice:
Noterai che Express ha creato un codice per noi. Quello che vedi app.js è la struttura più basilare per un server Node usando Express. Nel nostro precedente blocco di codice, abbiamo detto a Express di includere i nostri moduli installati di recente: jsdom e richiesta. Inoltre, includiamo il modulo URL, che ci aiuterà a analizzare l'URL del video che recupereremo da YouTube in seguito.
Raschiare Youtube.com
Entro app.js, cerca la sezione "Rotte" (intorno alla riga 40) e aggiungi il seguente codice (leggi i commenti per capire cosa sta succedendo):
app.get ('/ nodetube', function (req, res) // Indica alla richiesta che vogliamo recuperare youtube.com, inviare i risultati a una richiesta di funzione callback (uri: 'http://youtube.com ', funzione (err, response, body) var self = this; self.items = new Array (); // Mi sento come se volessi salvare i miei risultati in un array // Solo un errore di base controllare se (err && response.statusCode! == 200) console.log ('Request error.'); // Invia il parametro body come codice HTML che analizzeremo in jsdom // indica anche a jsdom di allegare jQuery negli script e caricato da jQuery.com jsdom.env (html: body, scripts: ['http://code.jquery.com/jquery-1.6.min.js'], function (err, window) // Usa solo jQuery come in una normale pagina HTML var $ = window.jQuery; console.log ($ ('title'). text ()); res.end ($ ('title'). text ()););) ;);
In questo caso, stiamo recuperando i contenuti dalla home page di YouTube. Una volta completato, stiamo stampando il testo contenuto nel tag del titolo della pagina (
). Ritorna al Terminale ed esegui nuovamente il tuo server.</p> <pre>nodo app.js</pre> <p>Nel tuo browser, vai a: <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>Dovresti vedere, "YouTube - Broadcast Yourself", che è il titolo di YouTube. </p> <p>Ora che abbiamo tutto pronto e funzionante, è tempo di ottenere alcuni URL video. Vai alla home page di YouTube e fai clic con il pulsante destro del mouse su una miniatura nella sezione "video consigliati". Se hai installato Firebug, (che è altamente raccomandato) dovresti vedere qualcosa di simile al seguente:</p> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_6.png"> <p>C'è un modello che possiamo identificare e che è presente in quasi tutti gli altri collegamenti video regolari:</p> <pre>div.vide-entry span.clip</pre> <p>Concentriamoci su questi elementi. Torna al tuo editore, e in <code>app.js</code>, aggiungi il seguente codice al <code>/ nodetube</code> itinerario:</p> <pre>app.get ('/ nodetube', function (req, res) // Indica alla richiesta che vogliamo recuperare youtube.com, inviare i risultati a una richiesta di funzione callback (uri: 'http://youtube.com ', funzione (err, response, body) var self = this; self.items = new Array (); // Mi sento come se volessi salvare i miei risultati in un array // Solo un errore di base controllare se (err && response.statusCode! == 200) console.log ('Request error.'); // Invia il parametro body come codice HTML che analizzeremo in jsdom // indica anche a jsdom di allegare jQuery negli script jsdom. env (html: body, scripts: ['http://code.jquery.com/jquery-1.6.min.js'], function (err, window) // Usa jQuery come in qualsiasi normale pagina HTML var $ = window.jQuery, $ body = $ ('body'), $ videos = $ body.find ('. video-entry'); // So che gli elementi di video-entry contengono le miniature di dimensioni regolari // per ognuno degli elementi .video-entry ha trovato $ videos.each (function (i, item) // Userò i normali selettori jQuery var $ a = $ (item) .children ('a'), // primo ancoraggio elemento che è figlio del nostro elemento .video-entry $ title = $ (item) .find ('. video-title .video-long-title'). text (), // titolo video $ time = $ a.find (' .video-time '). text (), // durata del video $ img = $ a.find (' span.clip img '); // thumbnail // e aggiungi tutti i dati al mio array di elementi self.items [i] = href: $ a.attr ('href'), titolo: $ title.trim (), ora: $ time, // ci sono alcune cose con le anteprime dei video di youtube, quelle immagini il cui attributo data-thumb // è definito usano l'url nell'attributo precedentemente citato come src per la miniatura, altrimenti // userà l'attributo src predefinito servito. miniatura: $ img.attr ('data-thumb')? $ img.attr ('data-thumb'): $ img.attr ('src'), urlObj: url.parse ($ a.attr ('href'), true) // analizza il nostro URL e la stringa di query come bene ; ); // vediamo cosa abbiamo console.log (self.items); res.end ( 'Fatto'); ); ); );</pre> <p>È ora di riavviare il nostro server ancora una volta e ricaricare la pagina nel nostro browser (http: // localhost: 3000 / nodetube). Nel tuo terminale, dovresti vedere qualcosa di simile al seguente:</p> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_7.png"> <p>Questo sembra buono, ma abbiamo bisogno di un modo per visualizzare i nostri risultati nel browser. Per questo, userò il motore di template di Jade:<br></p><blockquote> <p> Jade è un motore di template ad alte prestazioni fortemente influenzato da Haml, ma implementato con JavaScript per Node.</p> </blockquote> <p>Nel tuo editor, apri <code>views / layout.jade</code>, che è la struttura di base utilizzata per il rendering di una pagina con Express. È bello, ma dobbiamo modificarlo un po '.</p> <h3>views / layout.jade</h3> <pre>!!! 5 html (lang = 'en') head meta (charset = 'utf-8') meta (name = '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>Se confronti il codice sopra con il codice predefinito in <code>layout.jade</code>, noterai che alcune cose sono cambiate: doctype, il meta tag viewport, i tag di stile e script pubblicati da jquery.com. Creiamo la nostra visualizzazione elenco:</p> <h3>views / list.jade</h3> <p>Prima di iniziare, consulta la documentazione di jQuery Mobile (JQM d'ora in poi) su layout di pagina e anatomia.</p> <p>L'idea di base è utilizzare un listino JQM, un'anteprima, un titolo e un'etichetta di durata del video per ciascun elemento all'interno del listview insieme a un link a una pagina video per ciascuno degli elementi elencati.</p> <p><strong>Nota:</strong> Fai attenzione con il rientro che usi nei tuoi documenti Jade, in quanto accetta solo spazi o tabulazioni - ma non entrambi nello stesso documento.</p> <pre>div (data-role = 'page') header (data-role = 'header') h1 = title div (data-role = 'content') // solo controllo di base, avremo sempre gli elementi da youtube però - if (se ( items.length) // crea un wrapper listview ul (data-role = 'listview') // foreach degli elementi raccolti - items.forEach (funzione (elemento) // crea un li li // e un collegamento usando il nostro passato urlObj Object a (href = '/ watch /' + item ['urlObj']. query.v, title = elemento ['titolo']) // e una miniatura img (src = elemento ['miniatura'], alt = "Miniatura") // titolo e ora etichetta h3 = oggetto ['titolo'] h5 = oggetto ['ora'] -)</pre> <p>Questo è tutto ciò di cui abbiamo bisogno per creare il nostro elenco. Ritornare a <code>app.js</code> e sostituisci il seguente codice:</p> <pre> // vediamo cosa abbiamo console.log (self.items); res.end ( 'Fatto');</pre> <p>con questo:</p> <pre> // Abbiamo tutto ciò di cui siamo venuti, ora rendiamo la nostra vista res.render ('list', title: 'NodeTube', items: self.items);</pre> <p>Riavvia il tuo server ancora una volta e ricarica il browser:</p> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_8.png"> <p><strong>Nota:</strong> Poiché utilizziamo jQuery Mobile, consiglio di utilizzare un browser basato su Webkit o un cellulare iPhone / Android (simulatore) per risultati migliori.</p> <hr> <h2> Passaggio 4: visualizzazione di video</h2> <p>Creiamo una visione per il nostro <code>/orologio</code> itinerario. Creare <code>views / video.jade</code> e aggiungi il seguente codice:</p> <pre>div (data-role = 'page') header (data-role = 'header') h1 = title div (data-role = 'content') // Il nostro video div div # video // Iframe da youtube che serve il diritto oggetto multimediale per il dispositivo in uso iframe (width = "100%", height = 215, src = "http://www.youtube.com/embed/" + vid, frameborder = "0", allowfullscreen)</pre> <p>Di nuovo, torna al tuo terminale, riavvia il server, ricarica la pagina e fai clic su uno degli elementi elencati. Questa volta verrà visualizzata una pagina video e sarete in grado di riprodurre il video incorporato!</p> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_9.png"> <hr> <h2> Bonus: utilizzare Forever per eseguire il server</h2> <p>Ci sono modi in cui possiamo mantenere il nostro server in esecuzione in background, ma ce n'è uno che preferisco, chiamato Forever, un modulo nodo che possiamo facilmente installare usando <code>npm</code>:</p> <pre>npm install forever -g</pre> <p>Questo installerà globalmente Forever. Iniziamo la nostra applicazione nodeTube:</p> <pre>inizia per sempre app.js</pre> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_10.png"> <p>È anche possibile riavviare il server, utilizzare file di registro personalizzati, passare le variabili di ambiente tra le altre cose utili:</p> <pre>// avvia la tua applicazione in modalità produzione NODE_ENV = produzione inizia sempre app.js</pre> <hr> <h2>Pensieri finali</h2> <p> Spero di aver dimostrato quanto sia facile iniziare a utilizzare Node.js, Express e npm. Inoltre, hai imparato come installare i moduli Nodo, aggiungere rotte a Express, recuperare pagine remote usando il modulo Richiesta e molte altre tecniche utili. </p> <p> Se avete commenti o domande, fatemelo sapere nella sezione commenti qui sotto!</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">Codice</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">Come 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">Come raschiare le pagine Web per i metadati</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="/">it.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Informazioni interessanti e consigli utili sulla programmazione. Sviluppo di siti web, web design e sviluppo web. Tutorial di Photoshop. Creazione di giochi per computer e applicazioni mobili. Diventa un programmatore professionista da 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="Ricerca...">
<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