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格式，方便查看。

OK！！這樣，一個簡單的百度“熱點新聞”的爬蟲就大功告成啦！！

簡單總結一下，其實步驟很簡單：


express啟動一個簡單的Http服務
分析目標頁面DOM結構，找到所要抓取的信息的相關DOM元素
使用superagent請求目標頁面
使用cheerio獲取頁面元素，獲取目標數據
返回數據到前端瀏覽器

現在，繼續我們的目標，抓取“本地新聞”數據（編碼過程中，我們會遇到一些有意思的問題）
有了前面的基礎，我們自然而然的會想到利用和上面相同的方法“本地新聞”數據。
1、 分析頁面中“本地新聞”部分的DOM結構，如下圖：

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，頁面展示如下內容：

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

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

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

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

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

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

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

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

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

Electron可以讓你使用純JavaScript調用Chrome豐富的原生的接口來創造桌面應用。你可以把它看作一個專注于桌面應用的Node.js的變體，而不是Web服務器。其基于瀏覽器的應用方式可以極方便的做各種響應式的交互
Nightmare是一個基于Electron的框架，針對Web自動化測試和爬蟲，因為其具有跟PlantomJS一樣的自動化測試的功能可以在頁面上模擬用戶的行為觸發一些異步數據加載，也可以跟Request庫一樣直接訪問URL來抓取數據，并且可以設置頁面的延遲時間，所以無論是手動觸發腳本還是行為觸發腳本都是輕而易舉的。

// 安裝nightmare
yarn add nightmare

給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的半文藝程序員。之前也一直想著寫一寫技術性和其他偏文學性的文章。雖然自己的底子沒有多么優秀，但總是覺得在寫文章的過程中，不論是技術性的還是偏文學性的，這個過程中可以督促自己去思考，督促自己去學習和交流。畢竟每天忙忙碌碌之余，還是要活出自己不一樣的生活。所以，以后如果有一些好的文章我會積極和大家分享！再次感謝大家的支持！