Node を使用して、単純な book_html/css_WEB-ITnose を作成します。

今年はとても早く、私に多くの変化をもたらし、とても疲れましたが、より多くの知識をもたらしました。確かにとても疲れていて、毎晩2時か3時に疲れ果てるまで寝なかったのを覚えています。しかし、特に腹部から変化したお腹は大きかったです。知らず知らずのうちに筋肉が腹筋に変わってしまった、これは私にとってとても悲しい話です。

はい、話はやめてください。これは私のスタイルではありません。今日は、Node.js (以下、Node) を使用して、この短い本を読み進めるための小さなクローラーを作成します。 。まずは Node を受け入れましょう

私のブログを読んでいる人は私が IOS の開発をしていることも知っていますが、なぜ今日突然 Node について書くのでしょうか?個人的には、どのような開発を行っていても、バックエンドについて少しでも知っていれば苦労することはないと思います。結局のところ、ネットワーク層についてもっと知っておくことは常に良いことです。将来的にはアプリケーションか何かを作成するかもしれませんが、少なくともバックエンドをどうするかについては心配する必要はありません。

では、クローラを作成する利点は何でしょうか? 少なくとも、作成したアプリケーションに必要なデータを取得できるようになります。画像などを表示するにはデータが必要です。では、Node を使用してクローラーを作成するメリットは何でしょうか。なぜ Node を選択する必要があるのでしょうか? 1. JavaScript は Node の記述に使用され、JavaScript はフロントエンドの対話でもよく使用されるため、学習コストと開発コストが削減される一方で、JavaScript 構文を練習でき、他方では開発が可能になります。バックエンド、一石二鳥; 2. ノード 効率が利点です。ノードのネットワークは非同期であるため、基本的には数百の同時プロセスと同じくらい強力で、メモリと CPU の使用量は非常に少なくなります。

ここまで述べてきましたが、Node は実際にはあなたが思っているほど悪くないということだけをお伝えしたいと思います。さて、今日からコードを始めましょう

まず、Node をダウンロードする必要があります。ダウンロード後は、簡単なインストール手順をいくつか行うだけです。もちろん、システムに備わっているテキスト エディタも使用できますが、ここでは、sublineText を模倣したものである Atom エディタを使用します。一方、sublineText を使用すると、パートナーはすぐに使い始めることができます。そのインターフェイスのデザインは非常に優れており、私にとって非常に魅力的です。また、サードパーティのパッケージをダウンロードするためのツールは組み込みの apm (atom package manage) であり、非常に便利です。良い。

以下はクロールする必要がある HTML 構造です

HTML 構造

非常にわかりにくいですが、皆さんもそれが難しいと思います。挑戦すべきことは

1. shjian.js ファイルを作成する

2. 必要なモジュールを導入する

// 引入 node 的网络模块，这个模块对 node 来说很重要var http = require('http');// 引入 `cheerio` 这个模块，gitHub 上有介绍，它就是一个服务端的 JQuery  库var cheerio = require('cheerio');// 以下这个 url 是我个人主页的，请使用的小伙伴换一下自己的主页喔var url =   'http://www.jianshu.com/users/53fb509bd05c/latest_articles';

3. a get リクエストを実行し、返された HTML 文字列を解析します

http.get(url, function(res){// 用于拼接接受到的 html 字符串var html = '';// on 是 node 的一个监听事件res.on('data', function(data) {  html += data;});res.on('end', function() {    // 解析 html 字符串的方法，返回文章数据的对象     var articlesData = filterChapter(html);    // 输出这个对象的属性      printArticleInfo(articlesData);  });}).on('error', function(){  console.log('个人主页数据失败');});

4. HTML 文字列を解析するメソッドは、記事データのオブジェクト配列を返します

function filterChapter(html) {var $ = cheerio.load(html);var articleList = $('.article-list').children('li');// 创建一个空数组，用来装载我们的文章对象var articlesData = [];articleList.each(function(item) {  // 以下 JQ 的方法，相信会一点 JQ 的人都能看懂啦，哈  var article = $(this);  var title = article.find('div').find('.title').find('a').text();  var span =  article.find('div').find('div.list-footer').find('span');  var loveCount = span.text();  // .eq(i) 通过索引筛选匹配的元素。使用.eq(-i)就从最后一个元素向前数。  var readCount = span.parent().find('a').eq(0).text(); // 因为我们只要 喜欢的数量，并不想要这两个字，所以用 JS 的方法把它去掉了，以下阅读二字也是一样的  var loveNum = parseFloat(loveCount.substring(loveCount.search('喜欢') + '喜欢'.length)) ;  var readNum = parseFloat(readCount.substring(readCount.search('阅读') + '阅读'.length)); // 创建文章对象，JS 的对象确实跟 json 的很像呀var articleData = {    title : title,     love  : loveNum.toString(),    readCount : readNum.toString()};  articlesData.push(articleData);});  return articlesData;}

5.記事オブジェクトは文字列出力に変換されます

function printArticleInfo(articlesData) {console.log('止于浮水的简书 ：\n');articlesData.forEach(function(item) {  var title = item.title;  var loveCount = item.love;  var readCount = item.readCount;  console.log('《' + title + '》' + ' \n ' + '阅读数为: ' + readCount  +   '\n'  + '喜欢数为:'  + loveCount + '\n');  });}

上記のコードを書きました。今度はそれを実行する必要があります。ターミナルを開いてノード jianshu.js を入力します。

以下はこれは私の出力です

これらの方法に従って、より多くのデータを含むいくつかの Web ページをクロールすることができます。同時にデータをクロールするクローラが増えるため、アプリを再度作成するときにデータがないことを心配する必要がなくなります。もちろん、これらのデータにはデータベースが必要ですが、それは将来友人に伝えるつもりです。

@end

心は穏やかで前に進みます