网页数据分页怎么显示在一个页面_generic-crawler: 一个通用的分页爬虫接口

分页爬虫要解决2个问题：一是获取每一页数据；二是获取每一页下每一个条目的详情数据。当然，主要是还是为了得到条目详情。

那么有没有想过有这么一个工具，当你填完几个预设好的坑后，可以像下面这样爬取分页数据：

const 

---

背景

写爬虫时，经常会遇到这样一类数据：数据很多，在页面上要分页显示。那么爬取时，代码也需要一页一页爬。纵观大部分带有分页功能的网页，其分页要么是基于页码，要么是基于游标。

基于页码的分页

这类分页请求通常会包含一个 pageNo 参数和一个 pageSize 参数，分别代表 第几页 和 每页显示多少条记录。

基于游标的分页

这类分页请求通常包含一个游标字段(可能叫 cursor 或 lastId 等)，用来追踪上次的分页位置；也会包含一个 pageSize 参数，来表示每页显示多少条记录。

无论基于哪一种，都需要考虑这一页爬取完成后，如何确定下一页的请求参数。

接口分析

为了封装一个通用的分页爬虫接口，我们需要将几个关键点抽取出来。

1. 确定某页的分页查询参数 PageParam；
2. 有了 PageParam，确定怎么进行分页查询，即，需要一个查询当前页的函数；
3. 当前页查询完成后，确定该页中每个条目如何查询其详情数据，即，需要一个查询详情的函数。
4. 当前页所有详情查询完成后，确定下一页的查询参数 PageParam，并回到第2步。

接口编写

有了以上分析，我们大概需要如下类型的封装：

1. 需要一个 PageParam 类型，用来封装分页请求参数；
2. 需要一个 Page 类型，用来封装当前页的数据；
3. 需要一个 PageItem 类型，用来封装当前列表中单个条目的信息；
4. 需要一个分页请求函数，用来爬取当前页的内容，其签名为 (PageParam) => Page<PageItem>；
5. 需要一个根据当前页参数，分析出下一页参数的的函数，其签名为 (PageParam) => PageParam；
6. 需要一个 Detail 类型，用来存放单个条目的详情数据；
7. 需要一个爬取详情信息的函数，其签名为 (PageItem)=>Detail。

由于实际应用中，每个网站的参数名或分页数据都是不同的，故上述类型都是泛型化的。

接口使用

有了以上简单介绍，到了应用 generic-crawler 模块的时候了，它是对以上思路的封装。

首先在你的 Node.js 项目中安装依赖：

npm i @youmoo/generic-crawler

然后引入它：

import 

假设我们要爬取网站 https://readhub.cn/topics 的内容，可编写代码如下：

// https://readhub.cn/topics

以上代码有3点要留意：

1. 定义好自己需要的数据类型；
2. 为 Crawler 对象填入自己的数据封装和爬取逻辑；
3. 调用 crawler.all() 获取所有详情数据。

通过把每一步抽取出来，让用户各个击破，再自动串联起来供用户调用，是不是更加清晰了呢？

https://github.com/Youmoo/generic-crawler​github.com