簡單總結(jié)一下，其實(shí)步驟很簡單：


express啟動(dòng)一個(gè)簡單的Http服務(wù)
分析目標(biāo)頁面DOM結(jié)構(gòu)，找到所要抓取的信息的相關(guān)DOM元素
使用superagent請(qǐng)求目標(biāo)頁面
使用cheerio獲取頁面元素，獲取目標(biāo)數(shù)據(jù)
返回?cái)?shù)據(jù)到前端瀏覽器

現(xiàn)在，繼續(xù)我們的目標(biāo)，抓取“本地新聞”數(shù)據(jù)（編碼過程中，我們會(huì)遇到一些有意思的問題）
有了前面的基礎(chǔ)，我們自然而然的會(huì)想到利用和上面相同的方法“本地新聞”數(shù)據(jù)。
1、 分析頁面中“本地新聞”部分的DOM結(jié)構(gòu)，如下圖：

F12打開控制臺(tái)，審查“本地新聞”DOM元素，我們發(fā)現(xiàn)，“本地新聞”分為兩個(gè)主要部分，“左側(cè)新聞”和右側(cè)的“新聞資訊”。這所有目標(biāo)數(shù)據(jù)都在id為#local_news的div中?！白髠?cè)新聞”數(shù)據(jù)又在id為#localnews-focus的ul標(biāo)簽下的li標(biāo)簽下的a標(biāo)簽中，包括新聞標(biāo)題和頁面鏈接?！氨镜刭Y訊”數(shù)據(jù)又在id為#localnews-zixun的div下的ul標(biāo)簽下的li標(biāo)簽下的a標(biāo)簽中，包括新聞標(biāo)題和頁面鏈接。

2、OK！分析了DOM結(jié)構(gòu)，確定了數(shù)據(jù)的位置，接下來和爬取“熱點(diǎn)新聞”一樣，按部就班，定義一個(gè)getLocalNews()函數(shù)，爬取這些數(shù)據(jù)。

/**
 * [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
};

對(duì)應(yīng)的，在superagent.get()中請(qǐng)求頁面后，我們需要調(diào)用getLocalNews()函數(shù)，來爬去本地新聞數(shù)據(jù)。
superagent.get()函數(shù)修改為：

superagent.get("http://news.baidu.com/").end((err, res) => {
  if (err) {
    // 如果訪問失敗或者出錯(cuò)，會(huì)這行這里
    console.log(`熱點(diǎn)新聞抓取失敗 - ${err}`)
  } else {
   // 訪問成功，請(qǐng)求http://news.baidu.com/頁面所返回的數(shù)據(jù)會(huì)包含在res
   // 抓取熱點(diǎn)新聞數(shù)據(jù)
   hotNews = getHotNews(res)
   localNews = getLocalNews(res)
  }
});

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

/**
 * [description] - 跟路由
 */
// 當(dāng)一個(gè)get請(qǐng)求 http://localhost:3000時(shí)，就會(huì)后面的async函數(shù)
app.get("/", async (req, res, next) => {
  res.send({
    hotNews: hotNews,
    localNews: localNews
  });
});

編碼完成，激動(dòng)不已！！DOS中讓項(xiàng)目跑起來，用瀏覽器訪問http://localhost:3000

尷尬的事情發(fā)生了?。》祷氐臄?shù)據(jù)只有熱點(diǎn)新聞，而本地新聞返回一個(gè)空數(shù)組[ ]。檢查代碼，發(fā)現(xiàn)也沒有問題，但為什么一直返回的空數(shù)組呢？
經(jīng)過一番原因查找，才返現(xiàn)問題出在哪里！！

為了找到原因，首先，我們看看用superagent.get("http://news.baidu.com/").end((err, res) => {})請(qǐng)求百度新聞首頁在回調(diào)函數(shù).end()中的第二個(gè)參數(shù)res中到底拿到了什么內(nèi)容？

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

// superagent.get()中將res存入pageRes
superagent.get("http://news.baidu.com/").end((err, res) => {
  if (err) {
    // 如果訪問失敗或者出錯(cuò)，會(huì)這行這里
    console.log(`熱點(diǎn)新聞抓取失敗 - ${err}`)
  } else {
   // 訪問成功，請(qǐng)求http://news.baidu.com/頁面所返回的數(shù)據(jù)會(huì)包含在res
   // 抓取熱點(diǎn)新聞數(shù)據(jù)
   // 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，頁面展示如下內(nèi)容：

可以看到，返回值中的text字段應(yīng)該就是整個(gè)頁面的HTML代碼的字符串格式。為了方便我們觀察，可以直接把這個(gè)text字段值返回給前端瀏覽器，這樣我們就能夠清晰地看到經(jīng)過瀏覽器渲染后的頁面。

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

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

訪問瀏覽器http://localhost:3000，頁面展示如下內(nèi)容：

審查元素才發(fā)現(xiàn)，原來我們抓取的目標(biāo)數(shù)據(jù)所在的DOM元素中是空的，里面沒有數(shù)據(jù)！
到這里，一切水落石出！在我們使用superagent.get()訪問百度新聞首頁時(shí)，res中包含的獲取的頁面內(nèi)容中，我們想要的“本地新聞”數(shù)據(jù)還沒有生成，DOM節(jié)點(diǎn)元素是空的，所以出現(xiàn)前面的情況！抓取后返回的數(shù)據(jù)一直是空數(shù)組[ ]。

在控制臺(tái)的Network中我們發(fā)現(xiàn)頁面請(qǐng)求了一次這樣的接口：
http://localhost:3000/widget?id=LocalNews&ajax=json&t=1526295667917，接口狀態(tài) 404。
這應(yīng)該就是百度新聞獲取“本地新聞”的接口，到這里一切都明白了！“本地新聞”是在頁面加載后動(dòng)態(tài)請(qǐng)求上面這個(gè)接口獲取的，所以我們用superagent.get()請(qǐng)求的頁面再去請(qǐng)求這個(gè)接口時(shí)，接口URL中hostname部分變成了本地IP地址，而本機(jī)上沒有這個(gè)接口，所以404，請(qǐng)求不到數(shù)據(jù)。

找到原因，我們來想辦法解決這個(gè)問題！！

直接使用superagent訪問正確合法的百度“本地新聞”的接口，獲取數(shù)據(jù)后返回給前端瀏覽器。
使用第三方npm包，模擬瀏覽器訪問百度新聞首頁，在這個(gè)模擬瀏覽器中當(dāng)“本地新聞”加載成功后，抓取數(shù)據(jù)，返回給前端瀏覽器。

以上方法均可，我們來試試比較有意思的第二種方法

Electron可以讓你使用純JavaScript調(diào)用Chrome豐富的原生的接口來創(chuàng)造桌面應(yīng)用。你可以把它看作一個(gè)專注于桌面應(yīng)用的Node.js的變體，而不是Web服務(wù)器。其基于瀏覽器的應(yīng)用方式可以極方便的做各種響應(yīng)式的交互
Nightmare是一個(gè)基于Electron的框架，針對(duì)Web自動(dòng)化測(cè)試和爬蟲，因?yàn)槠渚哂懈?b>PlantomJS一樣的自動(dòng)化測(cè)試的功能可以在頁面上模擬用戶的行為觸發(fā)一些異步數(shù)據(jù)加載，也可以跟Request庫一樣直接訪問URL來抓取數(shù)據(jù)，并且可以設(shè)置頁面的延遲時(shí)間，所以無論是手動(dòng)觸發(fā)腳本還是行為觸發(fā)腳本都是輕而易舉的。

// 安裝nightmare
yarn add nightmare

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

const Nightmare = require("nightmare");          // 自動(dòng)化測(cè)試包，處理動(dòng)態(tài)頁面
const nightmare = Nightmare({ show: true });     // show:true  顯示內(nèi)置模擬瀏覽器

/**
 * [description] - 抓取本地新聞頁面
 * [nremark] - 百度本地新聞在訪問頁面后加載js定位IP位置后獲取對(duì)應(yīng)新聞，
 * 所以抓取本地新聞需要使用 nightmare 一類的自動(dòng)化測(cè)試工具，
 * 模擬瀏覽器環(huán)境訪問頁面，使js運(yùn)行，生成動(dòng)態(tài)頁面再抓取
 */
// 抓取本地新聞頁面
nightmare
.goto("http://news.baidu.com/")
.wait("div#local_news")
.evaluate(() => document.querySelector("div#local_news").innerHTML)
.then(htmlStr => {
  // 獲取本地新聞數(shù)據(jù)
  localNews = getLocalNews(htmlStr)
})
.catch(error => {
  console.log(`本地新聞抓取失敗 - ${error}`);
})

修改getLocalNews()函數(shù)為：

/**
 * [description]- 獲取本地新聞數(shù)據(jù)
 */
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] - 跟路由
 */
// 當(dāng)一個(gè)get請(qǐng)求 http://localhost:3000時(shí)，就會(huì)后面的async函數(shù)
app.get("/", async (req, res, next) => {
  res.send({
    hotNews: hotNews,
    localNews: localNews
  })
});

此時(shí)，DOS命令行中重新讓項(xiàng)目跑起來，瀏覽器訪問https://localhost:3000，看看頁面展示的信息，看是否抓取到了“本地新聞”數(shù)據(jù)！

至此，一個(gè)簡單而又完整的抓取百度新聞頁面“熱點(diǎn)新聞”和“本地新聞”的爬蟲就大功告成啦！！

最后總結(jié)一下，整體思路如下：

express啟動(dòng)一個(gè)簡單的Http服務(wù)
分析目標(biāo)頁面DOM結(jié)構(gòu)，找到所要抓取的信息的相關(guān)DOM元素
使用superagent請(qǐng)求目標(biāo)頁面
動(dòng)態(tài)頁面（需要加載頁面后運(yùn)行JS或請(qǐng)求接口的頁面）可以使用Nightmare模擬瀏覽器訪問
使用cheerio獲取頁面元素，獲取目標(biāo)數(shù)據(jù)

爬蟲完整代碼GitHub地址：完整代碼

后面，應(yīng)該還會(huì)做一些進(jìn)階，來爬取某些網(wǎng)站上比較好看的圖片（手動(dòng)滑稽），會(huì)牽扯到并發(fā)控制和反-反爬蟲的一些策略。再用爬蟲取爬去一些需要登錄和輸入驗(yàn)證碼的網(wǎng)站，歡迎到時(shí)大家關(guān)注和指正交流。

再次感謝大家的點(diǎn)贊和關(guān)注和評(píng)論，謝謝大家的支持，謝謝！我自己覺得我算是一個(gè)愛文字，愛音樂，同時(shí)也喜歡coding的半文藝程序員。之前也一直想著寫一寫技術(shù)性和其他偏文學(xué)性的文章。雖然自己的底子沒有多么優(yōu)秀，但總是覺得在寫文章的過程中，不論是技術(shù)性的還是偏文學(xué)性的，這個(gè)過程中可以督促自己去思考，督促自己去學(xué)習(xí)和交流。畢竟每天忙忙碌碌之余，還是要活出自己不一樣的生活。所以，以后如果有一些好的文章我會(huì)積極和大家分享！再次感謝大家的支持！