50行代码，Node爬虫练手项目 🕷️

前言

项目地址：Crawler-for-Github-Trending
项目中基本每一个操作都写有注释，适合对 Node 爬虫感兴趣的同学对其有基础的了解。

介绍

50 lines, minimalist node crawler for Github Trending.
一个50行的 node 爬虫，一个简单的 axios, express, cheerio 体验项目。

体验

首先保证电脑已存在 node10.0+ 环境，然后

1.拉取本项目

git clone https://github.com/poozhu/Crawler-for-Github-Trending.git
cd Crawler-for-Github-Trending
npm i
node index.js

2.或者下载本项目压缩包，解压

cd Crawler-for-Github-Trending-master  // 进入项目文件夹
npm i
node index.js

示例

当启动项目后，可以看到控制台输出

Listening on port 3000!

此时打开浏览器，进入本地服务 http://localhost:3000/

http://localhost:3000/time-language // time 表示周期，language 代表语言  例如：

http://localhost:3000/  // 默认抓取今日全部语言的情况
http://localhost:3000/daily  // 代表今日 可选参数：weekly,monthly
http://localhost:3000/daily-JavaScript  // 代表今日的 JavaScript 分类 可选参数：任意语言

稍微等待即可看到爬取完毕的返回数据示例：

[
 {
  "title": "lib-pku / libpku",
  "links": "https://github.com/lib-pku/libpku",
  "description": "贵校课程资料民间整理",
  "language": "JavaScript",
  "stars": "14,297",
  "forks": "4,360",
  "info": "3,121 stars this week"
 },
 {
  "title": "SqueezerIO / squeezer",
  "links": "https://github.com/SqueezerIO/squeezer",
  "description": "Squeezer Framework - Build serverless dApps",
  "language": "JavaScript",
  "stars": "3,212",
  "forks": "80",
  "info": "2,807 stars this week"
 },
 ...
]

解析

首先引入爬虫所需要的依赖包

const cheerio = require('cheerio')   //页面抓取模块，可以像 JQ 一样获取页面的内容
const axios = require('axios');  //请求处理
const express = require('express')  //服务器模块

拼接请求地址

function getData(time, language) {
    //确定好爬取函数所需要的参数后，通过参数的判断来做好请求地址的拼接
    let url = 'https://github.com/trending' + (!!language ? '/' + language : '') + '?since=' + time;
}

发起一个简单的get请求

function getData(time, language) {
    let url = 'https://github.com/trending' + (!!language ? '/' + language : '') + '?since=' + time;
    axios.get(url)
        .then(function (response) {
            let html_string = response.data.toString(); 
            const $ = cheerio.load(html_string); // 传递页面到模块
            //此时我们已经可以像用 JQ 一样对获取到的页面 $ 进行元素获取了
            });
        })
        .catch(function (error) {
            console.log(error);
        })
}

分析Github Trending页面结构，编写数据提取部分

可以发现列表存在于 Box 这一个元素之下，所以根据此结构，像 JQ 一样获取对应位置的数据即可：

$('.Box .Box-row').each(function () { // 像 jQuery 一样获取对应节点值
    let obj = {};
    obj.title = $(this).find('h1').text().trimStart().trimEnd(); // 获取标题
    obj.links = 'https://github.com/' + obj.title.replace(/\s/g, "");   // 拼接链接
    obj.description = $(this).find('p').text().trimStart().trimEnd();  // 获取获取描述
    obj.language = $(this).find('>.f6 .repo-language-color').siblings().text().trimStart().trimEnd();  // 获取语言
    obj.stars = $(this).find('>.f6 a').eq(0).text().trimStart().trimEnd();  // 获取 start 数
    obj.forks = $(this).find('>.f6 a').eq(1).text().trimStart().trimEnd();  // 获取分支数
    obj.info = $(this).find('>.f6 .float-sm-right').text().trimStart().trimEnd();  // 获取对应时期 star 信息
    obj.avatar = $(this).find('>.f6 img').eq(0).attr('src');  // 获取首位作者头像
}

路由配置

在完成了核心函数后，接下来只要配置一下对应路由即可抓取相应的数据并返回：

const app = express()

//默认抓取页配置
app.get('/', (req, res) => {
    let promise = getData('daily'); // 发起抓取
    promise.then(response => {
        res.json(response); // 数据返回
    });
})

//存在两个参数时
app.get('/:time-:language', (req, res) => {
    const {
        time, // 获取排序时间
        language // 获取对应语言
    } = req.params;
    let promise = getData(time, language); // 发起抓取
    promise.then(response => {
        res.json(response); // 数据返回
    });
})

//存在时间参数时
app.get('/:time', (req, res) => {
    const {
        time, // 获取排序时间
    } = req.params;
    let promise = getData(time); // 发起抓取
    promise.then(response => {
        res.json(response); // 数据返回
    });
})

app.listen(3000, () => console.log('Listening on port 3000!')) // 监听3000端口

结语

本项目每次访问都会实时爬取数据，所以数据返回速度会非常慢，期望作为接口数据请定时爬取到数据库。

但了解项目代码可以带来以上各个 node 模块和爬虫最基础的用法和概念，希望可以帮到大家。 😀