分分鐘教你用node.js寫個爬蟲

2019年8月24日 116次阅读来源: MagicEyes

分分鐘教你用node.js寫個爬蟲

寫在前面

異常感謝人人的點贊和關注。實在，這是我第一次在
segmentfault上寫文章。由於我也是前段時刻偶然之間才最先相識和進修爬蟲，而且進修node的時刻也不是很長。雖然用node做過一些後端的項目，但實在在node和爬蟲方面我照樣一個新人，這篇文章主假如想和人人分享一下node和爬蟲方面的基本學問，願望對人人有協助，也想和人人一同交換，一同進修，再次感謝人人的支撐！

對了，我開通了個人的 GitHub主頁 ，內里有本身的技術文章，還會有個人的隨想、思索和日記。今後統統的文章都邑第一時刻更新到這裏，然後同步到其他平台。有喜好的朋儕可以沒事去走走，再次感謝人人的支撐！

一、什麼是爬蟲

收集爬蟲（又被稱為網頁蜘蛛，收集機器人，在
FOAF社區中心，更常常的稱為網頁追逐者），是一種根據肯定的劃定規矩，自動地抓取萬維網信息的順序或許劇本。別的一些不常運用的名字另有螞蟻、自動索引、模仿順序或許蠕蟲。
WIKIPEDIA 爬蟲引見

二、爬蟲的分類

通用收集爬蟲（全網爬蟲）

匍匐對象從一些
種子URL 擴充到全部 Web，重要為流派站點搜刮引擎和大型 Web 效勞供應商收集數據。

《分分鐘教你用node.js寫個爬蟲》

聚焦收集爬蟲（主題收集爬蟲）

是
指挑選性 地匍匐那些與預先定義好的主題相干頁面的收集爬蟲。

增量式收集爬蟲

指對已下載網頁採用增量式更新和
只匍匐新發生的或許已發生變化網頁 的爬蟲，它可以在肯定程度上保證所匍匐的頁面是盡量新的頁面。

Deep Web 爬蟲

匍匐對象是一些在用戶填入關鍵字搜刮或登錄后才接見到的
深層網頁信息的爬蟲。

三、爬蟲的匍匐戰略

通用收集爬蟲（全網爬蟲）

深度優先戰略、廣度優先戰略

《分分鐘教你用node.js寫個爬蟲》

聚焦收集爬蟲（主題收集爬蟲）

基於內容評價的匍匐戰略（內容相干性），基於鏈接構造評價的匍匐戰略、基於加強進修的匍匐戰略（鏈接重要性），基於語境圖的匍匐戰略（間隔，圖論中兩節點間邊的權重）

增量式收集爬蟲

一致更新法、個別更新法、基於分類的更新法、自適應調頻更新法

Deep Web 爬蟲

Deep Web 爬蟲匍匐歷程當中最重要部份就是表單填寫，包含兩種範例：基於範疇學問的表單填寫、基於網頁構造剖析的表單填寫

當代的網頁爬蟲的行動通常是四種戰略組合的結果：

挑選戰略：決議所要下載的頁面；
從新接見戰略：決議什麼時刻搜檢頁面的更新變化；
均衡規矩戰略：指出如何防止站點超載；
并行戰略：指出怎樣協同到達分佈式抓取的結果；

《分分鐘教你用node.js寫個爬蟲》

四、寫一個簡樸網頁爬蟲的流程

肯定爬取對象（網站/頁面）
剖析頁面內容（目的數據/DOM構造）
肯定開闢言語、框架、東西等
編碼測試，爬取數據
優化

一個簡樸的百度消息爬蟲

肯定爬取對象（網站/頁面）

百度消息（
http://news.baidu.com/）

剖析頁面內容（目的數據/DOM構造）

······

肯定開闢言語、框架、東西等

node.js (express) +
SublimeText 3

編碼，測試，爬取數據

coding ···

Let’s start

新建項目目次

1.在適宜的磁盤目次下建立項目目次
baiduNews（我的項目目次是：
F:\web\baiduNews）

注：由於在寫這篇文章的時刻用的電腦至心比較渣。裝置WebStorm或許VsCode跑項目有些費勁。所今背面的命令行操縱我都是在Window自帶的DOS命令行窗口中實行的。

初始化package.json

1.在DOS命令行中進入項目根目次
baiduNews
2.實行
npm init，初始化
package.json文件

裝置依靠

express （運用express來搭建一個簡樸的Http效勞器。固然，你也可以運用node中自帶的
http模塊）
superagent （superagent是node里一個異常輕易的、輕量的、漸進式的第三方客戶端要求代辦模塊，用他來要求目的頁面）
cheerio （cheerio相當於node版的jQuery，用過jQuery的同硯會異常輕易上手。它主假如用來獵取抓取到的頁面元素和个中的數據信息）

// 個人比較喜好運用yarn來裝置依靠包,固然你也可以運用 npm install 來裝置依靠，看個人習氣。
yarn add express
yarn add superagent
yarn add cheerio

依靠裝置完成后你可以在package.json中檢察適才裝置的依靠是不是勝利。
裝置準確后以下圖：

《分分鐘教你用node.js寫個爬蟲》

最先coding

一、運用express啟動一個簡樸的當地Http效勞器

1、在項目根目次下建立index.js文件（背面都邑在這個index文件中舉行coding）

2、建立好index.js后，我們起首實例化一個express對象，用它來啟動一個當地監聽3000端口的Http效勞。

const express = require('express');
const app = express();

// ...

let server = app.listen(3000, function () {
  let host = server.address().address;
  let port = server.address().port;
  console.log('Your App is running at http://%s:%s', host, port);
});

對，就是這麼簡樸，不到10行代碼，搭建啟動一個簡樸的當地Http效勞。

3、根據國際慣例，我們願望在接見本機地點http://localhost:3000的時刻，這個效勞能給我們犯規一個Hello World！在index.js中到場以下代碼：

app.get('/', function (req, res) {
  res.send('Hello World!');
});

此時，在DOS中項目根目次
baiduNews下實行
node index.js,讓項目跑起來。以後，翻開瀏覽器，接見
http://localhost:3000,你就會發明頁面上顯現’Hellow World!’字樣。
如許，在背面我們獵取到百度消息首頁的信息后，就可以在接見
http://localhost:3000時看到這些信息。

二、抓取百度消息首頁的消息信息

1、起首，我們先來剖析一下百度消息首頁的頁面信息。
《分分鐘教你用node.js寫個爬蟲》

百度消息首頁大體上分為“熱點消息”、“當地消息”、“國內消息”、“國際消息”……等。此次我們先來嘗試抓取左邊
“熱點消息”和下方的
“當地消息”兩處的消息數據。

《分分鐘教你用node.js寫個爬蟲》

F12翻開
Chrome的掌握台，檢察頁面元素，經由檢察左邊“熱點消息”信息地點
DOM的構造，我們發明統統的“熱點消息”信息（包含消息標題和消息頁面鏈接）都在
id為
#pane-news的
<div>下面
<ul>下
<li>下的
<a>標籤中。用
jQuery的挑選器示意為：
#pane-news ul li a。

2、為了爬取消息數據，起首我們要用superagent要求目的頁面，獵取全部消息首頁信息

// 引入所須要的第三方包
const superagent= require('superagent');

let hotNews = [];                                // 熱點消息
let localNews = [];                              // 當地消息

/**
 * index.js
 * [description] - 運用superagent.get()要領來接見百度消息首頁
 */
superagent.get('http://news.baidu.com/').end((err, res) => {
  if (err) {
    // 假如接見失利或許失足，會這行這裏
    console.log(`熱點消息抓取失利 - ${err}`)
  } else {
   // 接見勝利，要求http://news.baidu.com/頁面所返回的數據會包含在res
   // 抓取熱點消息數據
   hotNews = getHotNews(res)
  }
});

3、獵取頁面信息后，我們來定義一個函數getHotNews()來抓取頁面內的“熱點消息”數據。

/**
 * index.js
 * [description] - 抓取熱點消息頁面
 */
// 引入所須要的第三方包
const cheerio = require('cheerio');

let getHotNews = (res) => {
  let hotNews = [];
  // 接見勝利，要求http://news.baidu.com/頁面所返回的數據會包含在res.text中。
  
  /* 運用cheerio模塊的cherrio.load()要領，將HTMLdocument作為參數傳入函數
     今後就可以運用相似jQuery的$(selectior)的體式格局來獵取頁面元素
   */
  let $ = cheerio.load(res.text);

  // 找到目的數據地點的頁面元素，獵取數據
  $('div#pane-news ul li a').each((idx, ele) => {
    // cherrio中$('selector').each()用來遍歷統統匹配到的DOM元素
    // 參數idx是當前遍歷的元素的索引，ele就是當前方便的DOM元素
    let news = {
      title: $(ele).text(),        // 獵取消息標題
      href: $(ele).attr('href')    // 獵取消息網頁鏈接
    };
    hotNews.push(news)              // 存入終究結果數組
  });
  return hotNews
};

這裏要多說幾點：
async/await據說是異步編程的終級處置懲罰方案,它可以讓我們以同步的頭腦體式格局來舉行異步編程。Promise處置懲罰了異步編程的“回調地獄”，async/await同時使異步流程掌握變得友愛而有清楚，有興緻的同硯可以去相識進修一下，真的很好用。
superagent模塊供應了許多比方get、post、delte等要領，可以很輕易地舉行Ajax要求操縱。在要求完畢后實行.end()回調函數。.end()接收一個函數作為參數，該函數又有兩個參數error和res。當要求失利，error會包含返回的錯誤信息，要求勝利，error值為null，返回的數據會包含在res參數中。
cheerio模塊的.load()要領，將HTML document作為參數傳入函數，今後就可以運用相似jQuery的$(selectior)的體式格局來獵取頁面元素。同時可以運用相似於jQuery中的.each()來遍曆元素。另外，另有許多要領，人人可以自行Google/Baidu。

4、將抓取的數據返回給前端瀏覽器

前面，
const app = express();實例化了一個
express對象
app。
app.get('', async() => {})接收兩個參數，第一個參數接收一個String範例的路由途徑，示意Ajax的要求途徑。第二個參數接收一個函數Function，當要求此途徑時就會實行這個函數中的代碼。

/**
 * [description] - 跟路由
 */
// 當一個get要求 http://localhost:3000時，就會背面的async函數
app.get('/', async (req, res, next) => {
  res.send(hotNews);
});

在DOS中項目根目次
baiduNews下實行
node index.js,讓項目跑起來。以後，翻開瀏覽器，接見
http://localhost:3000,你就會發明抓取到的數據返回到了前端頁面。我運轉代碼后瀏覽器展現的返回信息以下：
注：由於我的Chrome裝置了JSONView擴大順序，所以返回的數據在頁面展現的時刻會被自動花樣化為構造性的JSON花樣，輕易檢察。

《分分鐘教你用node.js寫個爬蟲》

OK！！如許，一個簡樸的百度“熱點消息”的爬蟲就功德圓滿啦！！

簡樸總結一下，實在步驟很簡樸：
express啟動一個簡樸的Http效勞
剖析目的頁面DOM構造，找到所要抓取的信息的相干DOM元素
運用superagent要求目的頁面
運用cheerio獵取頁面元素，獵取目的數據
返回數據到前端瀏覽器

如今，繼承我們的目的，抓取“當地消息”數據（編碼歷程當中，我們會碰到一些有意思的題目）
有了前面的基本，我們自然而然的會想到運用和上面雷同的要領“當地消息”數據。
1、剖析頁面中“當地消息”部份的DOM構造，以下圖：

《分分鐘教你用node.js寫個爬蟲》

F12翻開掌握台，檢察“當地消息”
DOM元素，我們發明，“當地消息”分為兩個重要部份，“左邊消息”和右邊的“消息資訊”。這統統目的數據都在
id為
#local_news的
div中。“左邊消息”數據又在
id為
#localnews-focus的
ul標籤下的
li標籤下的
a標籤中，包含消息標題和頁面鏈接。“當地資訊”數據又在
id為
#localnews-zixun的
div下的
ul標籤下的
li標籤下的
a標籤中，包含消息標題和頁面鏈接。

2、OK！剖析了DOM構造，肯定了數據的位置，接下來和爬取“熱點消息”一樣，循序漸進，定義一個getLocalNews()函數，爬取這些數據。

/**
 * [description] - 抓取當地消息頁面
 */
let getLocalNews = (res) => {
  let localNews = [];
  let $ = cheerio.load(res);
    
  // 當地消息
  $('ul#localnews-focus li a').each((idx, ele) => {
    let news = {
      title: $(ele).text(),
      href: $(ele).attr('href'),
    };
    localNews.push(news)
  });
    
  // 當地資訊
  $('div#localnews-zixun ul li a').each((index, item) => {
    let news = {
      title: $(item).text(),
      href: $(item).attr('href')
    };
    localNews.push(news);
  });

  return localNews
};

對應的，在superagent.get()中要求頁面后，我們須要挪用getLocalNews()函數，來爬去當地消息數據。
superagent.get()函數修正成：

superagent.get('http://news.baidu.com/').end((err, res) => {
  if (err) {
    // 假如接見失利或許失足，會這行這裏
    console.log(`熱點消息抓取失利 - ${err}`)
  } else {
   // 接見勝利，要求http://news.baidu.com/頁面所返回的數據會包含在res
   // 抓取熱點消息數據
   hotNews = getHotNews(res)
   localNews = getLocalNews(res)
  }
});

同時，我們要在app.get()路由中也要將數據返回給前端瀏覽器。app.get()路由代碼修正成：

/**
 * [description] - 跟路由
 */
// 當一個get要求 http://localhost:3000時，就會背面的async函數
app.get('/', async (req, res, next) => {
  res.send({
    hotNews: hotNews,
    localNews: localNews
  });
});

編碼完成，激動不已！！
DOS中讓項目跑起來，用瀏覽器接見
http://localhost:3000

為難的事變發生了！！返回的數據只要熱點消息，而當地消息返回一個空數組[ ]。搜檢代碼，發明也沒有題目，但為何一向返回的空數組呢？
經由一番緣由查找，才返現題目出在那裡！！

一個有意思的題目

為了找到緣由，起首，我們看看用
superagent.get('http://news.baidu.com/').end((err, res) => {})要求百度消息首頁在回調函數
.end()中的第二個參數res中究竟拿到了什麼內容？

// 新定義一個全局變量 pageRes
let pageRes = {};        // supergaent頁面返回值

// superagent.get()中將res存入pageRes
superagent.get('http://news.baidu.com/').end((err, res) => {
  if (err) {
    // 假如接見失利或許失足，會這行這裏
    console.log(`熱點消息抓取失利 - ${err}`)
  } else {
   // 接見勝利，要求http://news.baidu.com/頁面所返回的數據會包含在res
   // 抓取熱點消息數據
   // hotNews = getHotNews(res)
   // localNews = getLocalNews(res)
   pageRes = res
  }
});

// 將pageRes返回給前端瀏覽器，便於檢察
app.get('/', async (req, res, next) => {
  res.send({
    // {}hotNews: hotNews,
    // localNews: localNews,
    pageRes: pageRes
  });
});

接見瀏覽器
http://localhost:3000，頁面展現以下內容：

《分分鐘教你用node.js寫個爬蟲》

可以看到，返回值中的
text字段應當就是全部頁面的
HTML代碼的字符串花樣。為了輕易我們視察，可以直接把這個
text字段值返回給前端瀏覽器，如許我們就可以清楚地看到經由瀏覽器襯着后的頁面。

修正給前端瀏覽器的返回值

app.get('/', async (req, res, next) => {
  res.send(pageRes.text)
}

接見瀏覽器http://localhost:3000，頁面展現以下內容：

《分分鐘教你用node.js寫個爬蟲》

檢察元素才發明，本來我們抓取的目的數據地點的
DOM元素中是空的，內里沒有數據！
到這裏，統統真相大白！在我們運用
superagent.get()接見百度消息首頁時，
res中包含的獵取的頁面內容中，我們想要的“當地消息”數據還沒有天生，
DOM節點元素是空的，所以湧現前面的狀況！抓取后返回的數據一向是空數組
[ ]。

《分分鐘教你用node.js寫個爬蟲》

在掌握台的
Network中我們發明頁面要求了一次如許的接口：
http://localhost:3000/widget?id=LocalNews&ajax=json&t=1526295667917，接口狀況
404。
這應當就是百度消息獵取
“當地消息”的接口，到這裏統統都邃曉了！“當地消息”是在頁面加載后動態要求上面這個接口獵取的，所以我們用
superagent.get()要求的頁面再去要求這個接口時，接口
URL中
hostname部份變成了當地
IP地點，而本機上沒有這個接口，所以
404，要求不到數據。

找到緣由，我們來想方法處置懲罰這個題目！！

直接運用superagent接見準確正當的百度“當地消息”的接口，獵取數據后返回給前端瀏覽器。
運用第三方npm包，模仿瀏覽器接見百度消息首頁，在這個模仿瀏覽器中當“當地消息”加載勝利后，抓取數據，返回給前端瀏覽器。

以上要領都可，我們來嘗嘗比較有意思的第二種要領

運用`Nightmare`自動化測試東西

Electron可以讓你運用純
JavaScript挪用
Chrome雄厚的原生的接口來製造桌面運用。你可以把它看做一個專註於桌面運用的
Node.js的變體，而不是
Web效勞器。其基於瀏覽器的運用體式格局可以極輕易的做種種相應式的交互
Nightmare是一個基於Electron的框架，針對Web自動化測試和爬蟲，由於其具有跟PlantomJS一樣的自動化測試的功用可以在頁面上模仿用戶的行動觸發一些異步數據加載，也可以跟Request庫一樣直接接見URL來抓取數據，而且可以設置頁面的延遲時刻，所以無論是手動觸發劇本照樣行動觸發劇本都是易如反掌的。

裝置依靠

// 裝置nightmare
yarn add nightmare

為獵取“當地消息”，繼承coding…

給index.js中新增以下代碼：

const Nightmare = require('nightmare');          // 自動化測試包，處置懲罰動態頁面
const nightmare = Nightmare({ show: true });     // show:true  顯現內置模仿瀏覽器

/**
 * [description] - 抓取當地消息頁面
 * [nremark] - 百度當地消息在接見頁面后加載js定位IP位置后獵取對應消息，
 * 所以抓取當地消息須要運用 nightmare 一類的自動化測試東西，
 * 模仿瀏覽器環境接見頁面，使js運轉，天生動態頁面再抓取
 */
// 抓取當地消息頁面
nightmare
.goto('http://news.baidu.com/')
.wait("div#local_news")
.evaluate(() => document.querySelector("div#local_news").innerHTML)
.then(htmlStr => {
  // 獵取當地消息數據
  localNews = getLocalNews(htmlStr)
})
.catch(error => {
  console.log(`當地消息抓取失利 - ${error}`);
})

修正getLocalNews()函數為：

/**
 * [description]- 獵取當地消息數據
 */
let getLocalNews = (htmlStr) => {
  let localNews = [];
  let $ = cheerio.load(htmlStr);

  // 當地消息
  $('ul#localnews-focus li a').each((idx, ele) => {
    let news = {
      title: $(ele).text(),
      href: $(ele).attr('href'),
    };
    localNews.push(news)
  });

  // 當地資訊
  $('div#localnews-zixun ul li a').each((index, item) => {
    let news = {
      title: $(item).text(),
      href: $(item).attr('href')
    };
    localNews.push(news);
  });

  return localNews
}

修正app.get('/')路由為：

/**
 * [description] - 跟路由
 */
// 當一個get要求 http://localhost:3000時，就會背面的async函數
app.get('/', async (req, res, next) => {
  res.send({
    hotNews: hotNews,
    localNews: localNews
  })
});

此時，
DOS命令行中從新讓項目跑起來，瀏覽器接見
https://localhost:3000，看看頁面展現的信息，看是不是抓取到了
“當地消息”數據！

至此，一個簡樸而又完全的抓取百度消息頁面“熱點消息”和“當地消息”的爬蟲就功德圓滿啦！！

末了總結一下，團體思緒以下：

express啟動一個簡樸的Http效勞
剖析目的頁面DOM構造，找到所要抓取的信息的相干DOM元素
運用superagent要求目的頁面
動態頁面（須要加載頁面后運轉JS或要求接口的頁面）可以運用Nightmare模仿瀏覽器接見
運用cheerio獵取頁面元素，獵取目的數據

完全代碼

爬蟲完全代碼GitHub地點：
完全代碼

背面，應當還會做一些進階，來爬取某些網站上比較悅目的圖片（手動詼諧），會牽扯到併發掌握和反-反爬蟲的一些戰略。再用爬蟲取爬去一些須要登錄和輸入驗證碼的網站，迎接到時人人關注和斧正交換。

我想說

再次感謝人人的點贊和關注和批評，感謝人人的支撐，感謝！我本身以為我算是一個愛筆墨，愛音樂，同時也喜好coding的半文藝順序員。之前也一向想着寫一寫技術性和其他偏文學性的文章。雖然本身的基礎沒有何等優異，但老是以為在寫文章的歷程當中，不論是技術性的照樣偏文學性的，這個歷程當中可以催促本身去思索，催促本身去進修和交換。
畢竟天天忙忙碌碌之餘，照樣要活出本身不一樣的生涯。所以，今後假如有一些好的文章我會主動和人人分享！再次感謝人人的支撐！

    原文作者：MagicEyes
    原文地址: https://segmentfault.com/a/1190000014811373
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。