node.js实现简单爬虫（二）

三.爬取新闻首页的新闻信息

1. 首先，我们先来分析一下页面信息。

百度新闻首页大体上分为“热点要闻”、“本地新闻”、“国内新闻”、…等。这次我们只尝试爬取“热点新闻”的新闻数据。

F12打开Chrome的控制台，审查页面元素，查看“热点新闻”信息所在DOM的结构，我们发现所有的“热点新闻”信息（包括新闻标题和新闻页面链接）都在id为#pane-news的div下面ul下li下的a标签中。

2、为了爬取新闻数据，首先我们要用superagent请求目标页面，获取整个新闻首页信息

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

let hotNews = []  // 热点新闻

/**
 * 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((inx, ele) => {
    // cherrio中$('selector').each()用来遍历所有匹配到的DOM元素
    // 参数idx是当前遍历的元素的索引，ele就是当前便利的DOM元素
    let news = {
      title: $(ele).text(),        // 获取新闻标题
      href: $(ele).attr('href')    // 获取新闻网页链接
    };
    hotNews.push(news)              // 存入最终结果数组
  });
  return hotNews
};

4、将爬取的数据返回给前端浏览器

// 当一个get请求 http://localhost:3000时，就会走后面的async函数,把之前的hello world 改为爬取到的数据
app.get('/', async (req, res, next) => {
  res.send(hotNews);
});

在项目根目录baiduNews下执行nodeindex.js,让项目跑起来之后，打开浏览器，访问http://localhost:3000,你就会发现爬取到的数据返回到了前端页面。我运行代码后浏览器展示的返回信息如下：

注：因为我的Chrome安装了JSON美化插件，所以返回的数据在页面展示的时候会被自动格式化为结构性的JSON格式，方便查看。

OK！！这样，一个简单的百度“热点新闻”的爬虫就大功告成啦！！

简单总结一下，其实步骤很简单：

1. express启动一个简单的Http服务
2. 分析目标页面DOM结构，找到所要爬取的信息的相关DOM元素 使用superagent请求目标页面
3. 使用cheerio获取页面元素，获取目标数据 返回数据到前端浏览器