Node.js se développe rapidement; L'une des principales raisons à cela est que les développeurs ont créé des outils incroyables qui améliorent considérablement la productivité avec Node. Dans cet article, nous allons passer en revue l'installation de base d'Express, un framework de développement, et la création d'un projet de base avec celui-ci..
Ce que nous allons construire aujourd'hui
Node est similaire dans sa conception et influencé par des systèmes tels que Ruby's Event Machine ou Python's Twisted. Le nœud va un peu plus loin dans le modèle d'événement - il présente la boucle d'événement comme une construction de langage plutôt que comme une bibliothèque..
Dans ce didacticiel, nous allons parcourir la page d'accueil de YouTube, obtenir toutes les miniatures de taille normale de la page, ainsi que des liens et la durée de la vidéo, envoyer tous ces éléments à un modèle jQueryMobile et lire les vidéos à l'aide de YouTube Embed beau travail de détection du support de périphérique (flash / html5-video).
Nous allons aussi apprendre à commencer à utiliser npm et Express, Le processus d'installation des modules de npm, le routage Express de base et l'utilisation de deux modules de Node: demande et jsdom.
Pour ceux d'entre vous qui ne connaissent pas encore Node.js et comment l'installer, veuillez vous reporter à la page d'accueil de node.js. et la page du projet npm GitHub.
Vous devriez également vous référer à notre série "Node.js: Step by Step".
Remarque: Ce tutoriel nécessite et suppose que vous compreniez ce qu'est Node.js et que vous avez déjà installé node.js et npm..
Étape 1: Configuration d'Express
En quoi consiste exactement Express? Selon ses développeurs, c'est un…
Infrastructure de développement Web JavaScript extrêmement rapide (et petite) côté serveur, basée sur Node and Connect.
Ça a l'air cool, non? Utilisons npm pour installer express. Ouvrez une fenêtre de terminal et tapez la commande suivante:
npm install express -g
En passant -g en tant que paramètre de la commande install, nous demandons à npm de procéder à une installation globale du module.
j'utilise / home / node-server / nettuts pour cet exemple, mais vous pouvez utiliser tout ce avec quoi vous êtes à l'aise.
Après avoir créé notre projet express, nous devons utiliser npm pour installer les dépendances express..
cd nodetube npm install -d
Si cela se termine par "ok", alors vous êtes prêt à partir. Vous pouvez maintenant exécuter votre projet:
noeud app.js
Dans votre navigateur, allez à http: // localhost: 3000.
Étape 2: Installation des modules nécessaires
JSDOM
Une implémentation JavaScript du DOM W3C.
Retournez à votre terminal et, après avoir arrêté votre serveur actuel (ctr + c), installez jsdom:
npm installer jsdom
Demande
Méthode de requête HTTP simplifiée.
Tapez ce qui suit dans le terminal:
demande d'installation npm
Tout devrait être configuré maintenant. Maintenant, il est temps d'entrer dans un code réel!
Étape 3: Créer un simple grattoir
app.js
Commençons par inclure toutes nos dépendances. Ouvrez votre app.js fichier, et, dans les toutes premières lignes, ajoutez le code suivant:
Vous remarquerez qu'Express a créé du code pour nous. Ce que vous voyez dans app.js est la structure la plus élémentaire d’un serveur de nœud utilisant Express. Dans notre précédent bloc de code, nous avions dit à Express d'inclure nos modules récemment installés: jsdom et demande. De plus, nous incluons le module d'URL, qui nous aidera à analyser l'URL de la vidéo que nous allons extraire de YouTube ultérieurement..
Gratter Youtube.com
Dans app.js, recherchez la section "Routes" (autour de la ligne 40) et ajoutez le code suivant (lisez les commentaires pour comprendre ce qui se passe):
app.get ('/ nodetube', fonction (req, res) // Indiquez à la demande que nous voulons extraire youtube.com, envoyez les résultats à une demande de fonction de rappel (uri: 'http://youtube.com ', fonction (err, réponse, corps) var self = this; self.items = new Array (); // je sens que je veux enregistrer mes résultats dans un tableau // une simple vérification d'erreur fondamentale si (err && response.statusCode! == 200) console.log ('Erreur de requête.'); Envoyez le paramètre body comme le code HTML que nous analyserons dans jsdom // indiquons également à jsdom de joindre jQuery dans les scripts et chargé de jQuery.com jsdom.env (html: body, scripts: ['http://code.jquery.com/jquery-1.6.min.js']], function (err, window) // Utiliser jQuery simplement comme dans une page HTML normale var $ = window.jQuery; console.log ($ ('title'). text ()); res.end ($ ('title'). text ());)) ;);
Dans ce cas, nous extrayons le contenu de la page d'accueil de YouTube. Une fois terminé, nous imprimons le texte contenu dans la balise de titre de la page (
). Retournez au terminal et relancez le serveur.</p> <pre>noeud app.js</pre> <p>Dans votre navigateur, allez à: <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>Vous devriez voir "YouTube - Broadcast Yourself", le titre de YouTube.. </p> <p>Maintenant que tout est configuré et opérationnel, il est temps d’obtenir des URL de vidéos. Accédez à la page d'accueil YouTube et cliquez avec le bouton droit de la souris sur l'une des vignettes de la section "Vidéos recommandées". Si vous avez installé Firebug (ce qui est fortement recommandé), vous devriez voir quelque chose comme ce qui suit:</p> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_6.png"> <p>Il existe un modèle que nous pouvons identifier et qui est présent dans presque tous les autres liens vidéo classiques:</p> <pre>div.vide-entry span.clip</pre> <p>Concentrons-nous sur ces éléments. Retournez dans votre éditeur, et dans <code>app.js</code>, ajoutez le code suivant à la <code>/ nodetube</code> route:</p> <pre>app.get ('/ nodetube', fonction (req, res) // Indiquez à la demande que nous voulons extraire youtube.com, envoyez les résultats à une demande de fonction de rappel (uri: 'http://youtube.com ', fonction (err, réponse, corps) var self = this; self.items = new Array (); // je sens que je veux enregistrer mes résultats dans un tableau // une simple vérification d'erreur fondamentale si (err && response.statusCode! == 200) console.log ('Erreur de requête.'); Envoyez le paramètre body comme le code HTML que nous analyserons dans jsdom // indiquons également à jsdom de joindre jQuery dans les scripts jsdom. env (html: body, scripts: ['http://code.jquery.com/jquery-1.6.min.js'], function (err, window) // Utilisez jQuery exactement comme dans n'importe quelle page HTML normale var $ = window.jQuery, $ body = $ ('body'), $ videos = $ body.find ('. video-entry'); // Je sais que les éléments .video-entry contiennent les vignettes de taille normale // pour chacun des éléments .video-entry trouvés $ videos.each (fonction (i, item) // je vais utiliser les sélecteurs jQuery classiques var $ a = $ (item) .children ('a'), // premier ancre élément qui est les enfants de notre élément .video-entry $ title = $ (item) .find ('. video-title .video-long-title'). text (), // titre de la vidéo $ time = $ a.find (' .video-time '). text (), // durée de la vidéo $ img = $ a.find (' span.clip img '); // miniature // et ajoute toutes ces données à mon tableau d'éléments self.items [i] = href: $ a.attr ('href'), titre: $ title.trim (), heure: $ heure, // il existe certaines choses avec les vignettes vidéo youtube, les images dont l'attribut data-thumb est défini utilisent l'url de l'attribut mentionné précédemment comme src pour la vignette, sinon // il utilisera l'attribut src fourni par défaut. thumbnail: $ img.attr ('data-thumb')? $ img.attr ('data-thumb'): $ img.attr ('src'), urlObj: url.parse ($ a.attr ('href'), true) // parse notre URL et la chaîne de requête comme bien ; ); // voyons ce que nous avons console.log (self.items); res.end ('Terminé'); ); ); );</pre> <p>Il est temps de redémarrer notre serveur une fois de plus et de recharger la page dans notre navigateur (http: // localhost: 3000 / nodetube). Dans votre terminal, vous devriez voir quelque chose comme ce qui suit:</p> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_7.png"> <p>Cela a l'air bien, mais nous avons besoin d'un moyen d'afficher nos résultats dans le navigateur. Pour cela, je vais utiliser le moteur de template Jade:<br></p><blockquote> <p> Jade est un moteur de template hautes performances fortement influencé par Haml, mais implémenté avec JavaScript pour Node..</p> </blockquote> <p>Dans votre éditeur, ouvrez <code>views / layout.jade</code>, qui est la structure de présentation de base utilisée lors du rendu d'une page avec Express. C'est bien mais il faut le modifier un peu.</p> <h3>views / layout.jade</h3> <pre>!!! 5 html (lang = 'en') tête meta (jeu de caractères = 'utf-8') meta (nom = '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>Si vous comparez le code ci-dessus avec le code par défaut dans <code>layout.jade</code>, vous remarquerez que quelques éléments ont changé: doctype, la balise méta de la fenêtre d'affichage, le style et les balises de script fournies par jquery.com. Créons notre vue liste:</p> <h3>views / list.jade</h3> <p>Avant de commencer, veuillez parcourir la documentation de jQuery Mobile (JQM à partir de maintenant) sur les mises en page et l'anatomie..</p> <p>L'idée de base est d'utiliser une liste de vues JQM, une vignette, un titre et une étiquette de durée de la vidéo pour chaque élément de la liste, ainsi qu'un lien vers une page vidéo pour chacun des éléments répertoriés..</p> <p><strong>Remarque:</strong> Faites attention à l'indentation que vous utilisez dans vos documents Jade, car elle n'accepte que des espaces ou des tabulations, mais pas les deux dans le même document..</p> <pre>div (data-role = 'page') en-tête (data-role = 'header') h1 = titre div (data-role = 'content') // vérification de base, nous aurons toujours des éléments de youtube bien que - if ( items.length) // crée un wrapper listview ul (data-role = 'listview') // pour chaque élément collecté - items.forEach (fonction (item) // crée un li li // et un lien utilisant notre passé urlObj Objet a (href = '/ watch /' + item ['urlObj']. query.v, title = item ['title']) // et une vignette img (src = item ['thumbnail'], Alt = "Vignette") // libellé titre et heure h3 = élément ['titre'] h5 = élément ['heure'] -)</pre> <p>C'est tout ce dont nous avons besoin pour créer notre liste. Retourner à <code>app.js</code> et remplacez le code suivant:</p> <pre> // voyons ce que nous avons console.log (self.items); res.end ('Terminé');</pre> <p>avec ça:</p> <pre> // Nous avons tout ce que nous sommes venus chercher, rendons maintenant notre vue res.render ('list', title: 'NodeTube', items: self.items);</pre> <p>Redémarrez votre serveur une fois de plus et rechargez votre navigateur:</p> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_8.png"> <p><strong>Remarque:</strong> Comme nous utilisons jQuery Mobile, je vous recommande d’utiliser un navigateur Webkit ou un téléphone portable iPhone / Android (simulateur) pour obtenir de meilleurs résultats..</p> <hr> <h2> Étape 4: Visionner des vidéos</h2> <p>Créons une vue pour notre <code>/regarder</code> route. Créer <code>vues / video.jade</code> et ajoutez le code suivant:</p> <pre>div (data-role = 'page') en-tête (data-role = 'header') h1 = titre div (data-role = 'content') // Notre vidéo div div # video // Iframe de youtube qui sert le droit Objet multimédia pour le périphérique utilisé iframe (width = "100%", height = 215, src = "http://www.youtube.com/embed/" + vid, frameborder = "0", allowfullscreen)</pre> <p>Encore une fois, retournez à votre terminal, redémarrez votre serveur, rechargez votre page et cliquez sur l'un des éléments répertoriés. Cette fois, une page vidéo sera affichée et vous pourrez lire la vidéo intégrée.!</p> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_9.png"> <hr> <h2> Bonus: utiliser Forever pour exécuter votre serveur</h2> <p>Il existe des moyens de garder notre serveur actif en arrière-plan, mais je préfère un de ceux-ci, appelé Forever, un module de noeud que nous pouvons facilement installer à l'aide de <code>npm</code>:</p> <pre>npm installer pour toujours -g</pre> <p>Cela installera globalement Forever. Commençons notre application nodeTube:</p> <pre>pour toujours démarrer app.js</pre> <img src="//accentsconagua.com/img/images_26/how-to-scrape-web-pages-with-nodejs-and-jquery_10.png"> <p>Vous pouvez également redémarrer votre serveur, utiliser des fichiers journaux personnalisés, transmettre des variables d’environnement, entre autres choses utiles:</p> <pre>// lancez votre application en mode production NODE_ENV = production démarrez depuis le début app.js</pre> <hr> <h2>Dernières pensées</h2> <p> J'espère avoir démontré à quel point il est facile de commencer à utiliser Node.js, Express et npm. De plus, vous avez appris à installer des modules de nœud, à ajouter des itinéraires à Express, à récupérer des pages distantes à l'aide du module de requête, et à de nombreuses autres techniques utiles.. </p> <p> Si vous avez des commentaires ou des questions, s'il vous plaît faites le moi savoir dans la section commentaires ci-dessous!</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">Comment screencast gratuitement</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">Comment supprimer des pages Web pour des métadonnées</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="/">fr.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Informations intéressantes et conseils utiles sur la programmation. Développement de sites Web, conception de sites Web et développement Web. Tutoriels Photoshop. Création de jeux informatiques et d'applications mobiles. Devenez un programmeur professionnel à partir de zéro.
</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="Chercher...">
<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