1.前言分析

往常都是利用 Python/.NET 語(yǔ)言實(shí)現(xiàn)爬蟲(chóng)，然現(xiàn)在作為一名前端開(kāi)發(fā)人員，自然需要熟練 NodeJS。下面利用 NodeJS 語(yǔ)言實(shí)現(xiàn)一個(gè)糗事百科的爬蟲(chóng)。另外，本文使用的部分代碼是 es6 語(yǔ)法。

實(shí)現(xiàn)該爬蟲(chóng)所需要的依賴(lài)庫(kù)如下。

request: 利用 get 或者 post 等方法獲取網(wǎng)頁(yè)的源碼。 cheerio: 對(duì)網(wǎng)頁(yè)源碼進(jìn)行解析，獲取所需數(shù)據(jù)。

本文首先對(duì)爬蟲(chóng)所需依賴(lài)庫(kù)及其使用進(jìn)行介紹，然后利用這些依賴(lài)庫(kù)，實(shí)現(xiàn)一個(gè)針對(duì)糗事百科的網(wǎng)絡(luò)爬蟲(chóng)。

2. request 庫(kù)

request 是一個(gè)輕量級(jí)的 http 庫(kù)，功能十分強(qiáng)大且使用簡(jiǎn)單。可以使用它實(shí)現(xiàn) Http 的請(qǐng)求，并且支持 HTTP 認(rèn)證， 自定請(qǐng)求頭等。下面對(duì) request 庫(kù)中一部分功能進(jìn)行介紹。

安裝 request 模塊如下：

npm install request

在安裝好 request 后，即可進(jìn)行使用，下面利用 request 請(qǐng)求一下百度的網(wǎng)頁(yè)。

const req = require('request');
req('http://www.baidu.com', (error, response, body) => {
 if (!error && response.statusCode == 200) {
 console.log(body)
 }
})

在沒(méi)有設(shè)置 options 參數(shù)時(shí)，request 方法默認(rèn)是 get 請(qǐng)求。而我喜歡利用 request 對(duì)象的具體方法，使用如下：

req.get({
 url: 'http://www.baidu.com'
},(err, res, body) => {
 if (!err && res.statusCode == 200) {
 console.log(body)
 }
});

然而很多時(shí)候，直接去請(qǐng)求一個(gè)網(wǎng)址所獲取的 html 源碼，往往得不到我們需要的信息。一般情況下，需要考慮到請(qǐng)求頭和網(wǎng)頁(yè)編碼。

網(wǎng)頁(yè)的請(qǐng)求頭網(wǎng)頁(yè)的編碼

下面介紹在請(qǐng)求的時(shí)候如何添加網(wǎng)頁(yè)請(qǐng)求頭以及設(shè)置正確的編碼。

req.get({
 url : url,
 headers: {
  "User-Agent" : "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36",
  "Host" : "www.zhihu.com",
  "Upgrade-Insecure-Requests" : "1"
 },
 encoding : 'utf-8'
}, (err, res, body)=>{
 if(!err)
  console.log(body);
})

設(shè)置 options 參數(shù), 添加 headers 屬性即可實(shí)現(xiàn)請(qǐng)求頭的設(shè)置；添加 encoding 屬性即可設(shè)置網(wǎng)頁(yè)的編碼。需要注意的是，若 encoding：null ，那么 get 請(qǐng)求所獲取的內(nèi)容則是一個(gè) Buffer 對(duì)象，即 body 是一個(gè) Buffer 對(duì)象。

上面介紹的功能足矣滿足后面的所需了

3. cheerio 庫(kù)

cheerio 是一款服務(wù)器端的 Jquery，以輕、快、簡(jiǎn)單易學(xué)等特點(diǎn)被開(kāi)發(fā)者喜愛(ài)。有 Jquery 的基礎(chǔ)后再來(lái)學(xué)習(xí) cheerio 庫(kù)非常輕松。它能夠快速定位到網(wǎng)頁(yè)中的元素，其規(guī)則和 Jquery 定位元素的方法是一樣的；它也能以一種非常方便的形式修改 html 中的元素內(nèi)容，以及獲取它們的數(shù)據(jù)。下面主要針對(duì) cheerio 快速定位網(wǎng)頁(yè)中的元素，以及獲取它們的內(nèi)容進(jìn)行介紹。

首先安裝 cheerio 庫(kù)

npm install cheerio

下面先給出一段代碼，再對(duì)代碼進(jìn)行解釋 cheerio 庫(kù)的用法。對(duì)博客園首頁(yè)進(jìn)行分析，然后提取每一頁(yè)中文章的標(biāo)題。

首先對(duì)博客園首頁(yè)進(jìn)行分析。如下圖：

對(duì) html 源代碼進(jìn)行分析后，首先通過(guò) .post_item 獲取所有標(biāo)題，接著對(duì)每一個(gè) .post_item 進(jìn)行分析，使用 a.titlelnk 即可匹配每個(gè)標(biāo)題的 a 標(biāo)簽。下面通過(guò)代碼進(jìn)行實(shí)現(xiàn)。

const req = require('request');
const cheerio = require('cheerio');

req.get({
 url: 'https://www.cnblogs.com/'
 }, (err, res, body) => {
 if (!err && res.statusCode == 200) {
  let cnblogHtmlStr = body;
  let $ = cheerio.load(cnblogHtmlStr);
  $('.post_item').each((index, ele) => {
  let title = $(ele).find('a.titlelnk');
  let titleText = title.text();
  let titletUrl = title.attr('href');
  console.log(titleText, titletUrl);
  });
 }
 });

當(dāng)然，cheerio 庫(kù)也支持鏈?zhǔn)秸{(diào)用，上面的代碼也可改寫(xiě)成：

let cnblogHtmlStr = body;
let $ = cheerio.load(cnblogHtmlStr);
let titles = $('.post_item').find('a.titlelnk');
titles.each((index, ele) => {
 let titleText = $(ele).text();
 let titletUrl = $(ele).attr('href');
 console.log(titleText, titletUrl);

上面的代碼非常簡(jiǎn)單，就不再用文字進(jìn)行贅述了。下面總結(jié)一點(diǎn)自己認(rèn)為比較重要的幾點(diǎn)。

使用 find() 方法獲取的節(jié)點(diǎn)集合 A，若再次以 A 集合中的元素為根節(jié)點(diǎn)定位它的子節(jié)點(diǎn)以及獲取子元素的內(nèi)容與屬性，需對(duì) A 集合中的子元素進(jìn)行 $(A[i]) 包裝，如上面的$(ele) 一樣。在上面代碼中使用 $(ele) ，其實(shí)還可以使用 $(this) 但是由于我使用的是 es6 的箭頭函數(shù)，因此改變了 each 方法中回調(diào)函數(shù)的 this 指針，因此，我使用 $(ele); cheerio 庫(kù)也支持鏈?zhǔn)秸{(diào)用，如上面的 $('.post_item').find('a.titlelnk') ，需要注意的是，cheerio 對(duì)象 A 調(diào)用方法 find()，如果 A 是一個(gè)集合，那么 A 集合中的每一個(gè)子元素都調(diào)用 find() 方法，并放回一個(gè)結(jié)果結(jié)合。如果 A 調(diào)用 text() ，那么 A 集合中的每一個(gè)子元素都調(diào)用 text() 并返回一個(gè)字符串，該字符串是所有子元素內(nèi)容的合并（直接合并，沒(méi)有分隔符）。

最后在總結(jié)一些我比較常用的方法。

first() last() children([selector]): 該方法和 find 類(lèi)似，只不過(guò)該方法只搜索子節(jié)點(diǎn)，而 find 搜索整個(gè)后代節(jié)點(diǎn)。

4. 糗事百科爬蟲(chóng)

通過(guò)上面對(duì) request 和 cheerio 類(lèi)庫(kù)的介紹，下面利用這兩個(gè)類(lèi)庫(kù)對(duì)糗事百科的頁(yè)面進(jìn)行爬取。

1、在項(xiàng)目目錄中，新建 httpHelper.js 文件，通過(guò) url 獲取糗事百科的網(wǎng)頁(yè)源碼，代碼如下：

//爬蟲(chóng)
const req = require('request');

function getHtml(url){
 return new Promise((resolve, reject) => {
  req.get({
   url : url,
   headers: {
    "User-Agent" : "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36",
    "Referer" : "https://www.qiushibaike.com/"
   },
   encoding : 'utf-8'
  }, (err, res, body)=>{
   if(err) reject(err);
   else resolve(body);
  })
 });
}
exports.getHtml = getHtml;

2、在項(xiàng)目目錄中，新建一個(gè) Splider.js 文件，分析糗事百科的網(wǎng)頁(yè)代碼，提取自己需要的信息，并且建立一個(gè)邏輯通過(guò)更改 url 的 id 來(lái)爬取不同頁(yè)面的數(shù)據(jù)。

const cheerio = require('cheerio');
const httpHelper = require('./httpHelper');
function getQBJok(htmlStr){
 let $ = cheerio.load(htmlStr);
 let jokList = $('#content-left').children('div');
 let rst = [];
 jokList.each((i, item)=>{
  let node = $(item);
  let titleNode = node.find('h2');
  let title = titleNode ? titleNode.text().trim() : '匿名用戶';
  let content = node.find('.content span').text().trim();
  let likeNumber = node.find('i[class=number]').text().trim();
  rst.push({
   title : title,
   content : content,
   likeNumber : likeNumber
  });
 });
 return rst;
}
async function splider(index = 1){
 let url = `https://www.qiushibaike.com/8hr/page/${index}/`;
 let htmlStr = await httpHelper.getHtml(url);
 let rst = getQBJok(htmlStr);
 return rst;
}
splider(1);

在獲取糗事百科網(wǎng)頁(yè)信息的時(shí)候，首先在瀏覽器中對(duì)源碼進(jìn)行分析，定位到自己所需要標(biāo)簽，然后提取標(biāo)簽的文本或者屬性值，這樣就完成了網(wǎng)頁(yè)的解析。

Splider.js 文件入口是 splider 方法，首先根據(jù)傳入該方法的 index 索引，構(gòu)造糗事百科的 url，接著獲取該 url 的網(wǎng)頁(yè)源碼，最后將獲取的源碼傳入 getQBJok 方法，進(jìn)行解析，本文只解析每條文本笑話的作者、內(nèi)容以及喜歡個(gè)數(shù)。

直接運(yùn)行 Splider.js 文件，即可爬取第一頁(yè)的笑話信息。然后可以更改 splider 方法的參數(shù)，實(shí)現(xiàn)抓取不同頁(yè)面的信息。

在上面已有代碼的基礎(chǔ)上，使用 koa 和 vue2.0 搭建一個(gè)瀏覽文本的頁(yè)面，效果如下：

源碼已上傳到 github 上。下載地址：https://github.com/StartAction/SpliderQB ;

項(xiàng)目運(yùn)行依賴(lài) node v7.6.0 以上， 首先從 Github 上面克隆整個(gè)項(xiàng)目。

git clone https://github.com/StartAction/SpliderQB.git

克隆之后，進(jìn)入項(xiàng)目目錄，運(yùn)行下面命令即可。

node app.js

5. 總結(jié)

通過(guò)實(shí)現(xiàn)一個(gè)完整的爬蟲(chóng)功能，加深自己對(duì) Node 的理解，且實(shí)現(xiàn)的部分語(yǔ)言都是使用 es6 的語(yǔ)法，讓自己加快對(duì) es6 語(yǔ)法的學(xué)習(xí)進(jìn)度。另外，在這次實(shí)現(xiàn)中，遇到了 Node 的異步控制的知識(shí)，本文是采用的是 async 和 await 關(guān)鍵字，也是我最喜歡的一種，然而在 Node 中，實(shí)現(xiàn)異步控制有好幾種方式。關(guān)于具體的方式以及原理，有時(shí)間再進(jìn)行總結(jié)。