node.js实现简单Crawler

写在前面

最近项目上不是很忙，在摸鱼群里看到水友分享爬虫方面的知识，就查些资料，自己摸索着也做了一个简单的爬虫，但其实在node和爬虫方面我还是一个小白，这篇文章主要是想和大家分享一下node和爬虫方面的基本知识，希望对大家有帮助，也想和大家一起交流，一起学习

一个简单的百度新闻Crawler

爬取对象

百度新闻（http://news.baidu.com）

一. 初始化项目

mkdir baiduNews

初始化package.json

cd baiduNews
npm init

安装依赖

express （使用express来搭建一个简单的Http服务器。当然，也可以使用node中自带的http模块）
superagent（superagent是node里一个非常方便的、轻量的、渐进式的第三方客户端请求代理模块，用它来请求目标页面）
cheerio （cheerio相当于node版的jQuery，用过jQuery的同学会非常容易上手。它主要是用来获取爬取到的页面元素和其中的数据信息）

yarn add express
yarn add superagent
yarn add cheerio

二. 使用express启动一个简单的本地Http服务器

在项目根目录下创建index.js文件，创建好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("服务器启动成功了端口是", port)
})

我们希望在访问本机地址http://localhost:3000的时候，这个服务能给我们返回一个Hello World！在index.js中加入如下代码：

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

此时，在项目根目录baiduNews下执行node index.js,让项目跑起来之后，打开浏览器，访问http://localhost:3000,你就会发现页面上显示’Hellow World!'字样。这样，在后面我们获取到百度新闻首页的信息后，就可以在访问http://localhost:3000时看到这些信息。

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

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

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

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

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

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

let hotNews = []  // 热点新闻


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()来爬取页面内的“热点新闻”数据。

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

let getHotNews = (res) => {
  let hotNews = [];
  // 访问成功，请求http://news.baidu.com页面所返回的数据会包含在res.text中。
  
  
  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！！这样，一个简单的百度“热点新闻”的Crawler就大功告成啦！！

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

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

node.js实现简单Crawler

Python相关栏目本月热门文章