[JavaScript知识库]《TypeScript》来吧-做个爬虫爬B站

前言

好吧，标题党了，就是无意中在npm上发现了一个东西，叫做：superagent， 官网的解释是：nodejs里一个非常方便的客户端请求代理模块（链接：中文官网），不大理解，随手一搜，根据文中解释：它是一个强大并且可读性很好的轻量级ajaxAPI，是一个关于HTTP方面的一个库（哦～原来是一个HTTP的库），它可以设置请求头的各种字段，这点对写爬虫非常友好，等等，爬虫程序？这东西能写爬虫，说到这个，突然就不困了，继续一搜，还真可以，那么，我突然有一个大胆的想法，爬个B站吧！
?

代码

本文代码已上传CSDN，具体地址：CSDN资源下载地址，如果资源还没审核通过或者资源无法下载，请联系博主留下邮箱，博主如果在线会及时发送代码；

创建项目

既然最近一直在记录TS相关的博客，那么，就用TS吧，首先肯定初始化package.json以及tsconfig.json；

新建一个文件夹，作为项目的主目录，接着初始化package.json

npm init

接着初始化tsconfig.json，用来配置typescript

tsc --init

然后，安装typescript

npm install typescript --save

为了方便编译，可以选择性的安装ts-node

npm install ts-node --save

如果选择安装了ts-node，那么就顺便在package.json中新增一条编译的命令吧，打开package.json，在script中新增一个dev的命令

{
    "name": "bilibilicrawler",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "ts-node ./app.ts"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "superagent": "^6.1.0",
        "typescript": "^4.5.2"
    },
    "devDependencies": {
        "@types/superagent": "^4.1.13",
        "ts-node": "^10.4.0"
    }
}

安装superagent， 因为是TS项目，所以superagent的types也是要一起安装的

npm install superagent @types/superagent -D

好了，项目初始化完毕
?

正文

目的

首先当然要定一个目标，程序的目标是：爬取B站首页上所有的信息，并对信息进行处理，看看首页上推荐的视频，作者是谁，视频标题是什么，播放量是多少，封面图片地址等等信息；
?

爬取HTML

定好了目标，那么第一步，那肯定是爬取到B站首页上整个页面的HTML代码，通过官网可知，superagent它有一些列的方法，并且对应各种请求，比如：get，post，delete等等，既然如此，我们只需要使用Get就可以了，打开项目文件夹，新建了app.ts文件，赶紧写上代码

/**
 * @description 程序本体
 */

import superagent from "superagent";

export default class BC {
    private static Bilibili: BC;
		// url就是对应的要爬取的网站地址
    constructor(private url: string) {
        this.start();
    }
    private async start() {
        // 获取HTML
        const BHtml = await superagent
                .get(this.url);
      
      	// 打印结果
      	console.log(BHtml)
    }
    static init(url: string, cookie: string) {
        if (!BC.Bilibili) {
            BC.Bilibili = new BC(url, cookie);
        }
        return BC.Bilibili;
    }
}


BC.init("https://www.bilibili.com/")

写完，运行编译命令

npm run dev

好家伙，直接403被拒绝了，这就尴尬了，老老实实打开B站，打开控制台，打开network，看看具体请求，是不是漏了什么，确实漏了，漏了cookie，通过请求得知，不管有没有登录都一定会带cookie信息，并且即使没有登录这个cookie也是有值的，只是不知道这个值代表什么意思，既然发现了，那就加上

/**
 * @description 程序本体
 */

import superagent from "superagent";

export default class BC {
    private static Bilibili: BC;
    constructor(private url: string, private cookie: string) {
        this.start();
    }
    private async start() {
        // 获取HTML
        const BHtml = await superagent
                .get(this.url)
                .set("cookie", this.cookie);
				
      	// 打印结果
      	console.log(BHtml)
    }
    static init(url: string, cookie: string) {
        if (!BC.Bilibili) {
            BC.Bilibili = new BC(url, cookie);
        }
        return BC.Bilibili;
    }
}

继续使用命令，运行代码，好家伙，真的取到了整个HTML代码，虽然这个HTML代码完全没有办法阅读，但是没关系，到这里基本已经确定了，方向上是对的，只是继续优化而已；
?

分析HTML

这里就要说到另外一个工具了，强烈推荐，cheerio，对应的官网在这里：cheerio官网，这是一个对JQ核心功能的实现：对DOM的操作，它能在服务端，对有DOM组成的字符串直接进行操作，直接先看个例子吧：

var cheerio = require('cheerio'),
    $ = cheerio.load('<h2 class = "title">Hello world</h2>');

$('h2.title').text('Hello there!');
$('h2').addClass('welcome');

$.html();

这个例子来自于网上，虽然简单，但是它一定程度上说明了这个插件的强大，有了这个插件，服务器端快乐的对DOM进行操作了
?

自然，这个插件也是需要安装的，同时因为是TS需要安装这个插件的type，安装代码如下：

npm install cheerio @types/cheerio -D

安装完成之后，写上对应的代码，代码如下：

/**
 * @description 程序本体
 */

import superagent from "superagent";
import cheerio from "cheerio";

export default class BC {
    private static Bilibili: BC;
    constructor(private url: string, private cookie: string) {
        this.start();
    }
    private async start() {
        // 获取HTML
        const BHtml = await superagent.get(this.url).set("cookie", this.cookie);
        if (BHtml.text === "") return false;

        //	初始化整个HTML
				const bc = cheerio.load(BHtml.text);
		
        //	初步处理HTML，获取对应区域的内容
        const infoBox = this._handleBHtml(bc);
        console.log(infoBox);
    }
    private _handleBHtml(bc: cheerio.Root) {
        return bc(".info-box");
    }
    static init(url: string, cookie: string) {
        if (!BC.Bilibili) {
            BC.Bilibili = new BC(url, cookie);
        }
        return BC.Bilibili;
    }
}

代码很简单，就是通过cheerio的load方法，将html加载完成，之后使用jq的语法，将我们需要的进一步分析的部分提取出来，值的注意的是，这里的“.info-box”是直接看B站上面的网页代码，取到我们需要对应部分的类名，熟悉JQ语法的同学应该很熟悉，甚至可以这样：

private _handleBHtml(html: string) {
    const $ = cheerio.load(html);

    return $(".info-box");
}

这样是不是更像JQ了…
?

转换HTML成数据

在这一部分，主要的目的就是将获取的区域DOM，进行进一步处理，这个处理其实也简单，说到底就是做一个遍历，遍历这个DOM，将需要的DOM下的各种文字提取出来，然后组成一个数组，在为这个数组加上时间戳，那么当前这个时间节点上的首页信息就完成了，不说了，上代码：

/**
 * @description 程序本体
 */

import superagent from "superagent";
import cheerio from "cheerio";

// 引入node中的核心模块，文件处理以及路径处理
import fs from "fs";
import path from "path";

type typeInfoItem = {
    title: string;
    author: string;
    img: string | undefined;
    url: string | undefined;
    play: string | undefined;
};
type InfoData = {
    time: number;
    data: typeInfoItem[];
};

export default class BC {
    private static Bilibili: BC;
    constructor(private url: string, private cookie: string) {
        this.start();
    }
    private async start() {
        // 获取HTML
        const BHtml = await superagent.get(this.url).set("cookie", this.cookie);
        if (BHtml.text === "") return false;

        //	初始化整个HTML
        const bc = cheerio.load(BHtml.text);

        //	初步处理HTML，获取对应区域的内容
        const infoBox = this._handleBHtml(bc);

        // 进一步处理，将infoBox转成数组格式
        const infoArray: InfoData = this._handleBArray(bc, infoBox);
				console.log(infoArray)
    }
    private _handleBHtml(bc: cheerio.Root) {
        return bc(".info-box");
    }
    private _handleBArray(bc: cheerio.Root, info: cheerio.Cheerio) {
        const data: typeInfoItem[] = [];

        info.map((index, element) => {
            // 链接
            const infoUrl = bc(element)
                .find("a")
                .attr("href");

            // 图片地址
            const imageSrc = bc(element)
                .find("img")
                .attr("src");

            // 标题
            const title = bc(element)
                .find(".info")
                .find("p.title")
                .text();

            // up主
            const author = bc(element)
                .find(".info")
                .find("p.up")
                .text();

            // 播放量
            const playNumber = bc(element)
                .find(".info")
                .find("p.play")
                .text();

            data.push({
                title,
                author,
                img: imageSrc,
                url: infoUrl,
                play: playNumber
            });
        });

        return {
            time: new Date().getTime(),
            data
        };
    }
    static init(url: string, cookie: string) {
        if (!BC.Bilibili) {
            BC.Bilibili = new BC(url, cookie);
        }
        return BC.Bilibili;
    }
}

?

存储数据

到这里，我们的数据其实已经有了，但是我们取到数据后，还是要存储起来的，不存储数据那不是白搭了，要存储数据，需要使用到node里面的两个核心功能，这里需要一点点node知识，这两个核心功能模块，分别是：fs和path，简单的说fs是可以对文件进行操作，path是可以对路径进行操作，有了这两个模块，那么就可以在本地创建文件以及保存数据；
另外，实现代码前，我们需要对数据的结构进行一个简单的设计，我们期望存储的数据结构是这样的：

{
	"时间戳":[
    {
    	"title":"xxx",
      "author":"xxx",
      "img":"xxx",
      "url":"xxx",
      "play":"xxx"
    }
  ],
  "时间戳":[
    {
    	"title":"xxx",
      "author":"xxx",
      "img":"xxx",
      "url":"xxx",
      "play":"xxx"
    }
  ]
}

这样，我们就可以根据时间戳判断当前时间下推荐的视频是什么了，具体代码如下：

/**
 * @description 程序本体
 */

import superagent from "superagent";
import cheerio from "cheerio";

// 引入node中的核心模块，文件处理以及路径处理
import fs from "fs";
import path from "path";

type typeInfoItem = {
    title: string;
    author: string;
    img: string | undefined;
    url: string | undefined;
    play: string | undefined;
};
type InfoData = {
    time: number;
    data: typeInfoItem[];
};
type JSONData = {
    [propName: number]: typeInfoItem[];
};

export default class BC {
    private static Bilibili: BC;
    constructor(private url: string, private cookie: string) {
        this.start();
    }
    private async start() {
        // 获取HTML
        const BHtml = await superagent.get(this.url).set("cookie", this.cookie);
        if (BHtml.text === "") return false;

        //	初始化整个HTML
        const bc = cheerio.load(BHtml.text);

        //	初步处理HTML，获取对应区域的内容
        const infoBox = this._handleBHtml(bc);

        // 进一步处理，将infoBox转成数组格式
        const infoArray: InfoData = this._handleBArray(bc, infoBox);

        // 存储数据
        const saveStatus = this._saveBArray(infoArray);
        console.log(saveStatus);
    }
    private _handleBHtml(bc: cheerio.Root) {
        return bc(".info-box");
    }
    private _handleBArray(bc: cheerio.Root, info: cheerio.Cheerio) {
        const data: typeInfoItem[] = [];

        info.map((index, element) => {
            // 链接
            const infoUrl = bc(element)
                .find("a")
                .attr("href");

            // 图片地址
            const imageSrc = bc(element)
                .find("img")
                .attr("src");

            // 标题
            const title = bc(element)
                .find(".info")
                .find("p.title")
                .text();

            // up主
            const author = bc(element)
                .find(".info")
                .find("p.up")
                .text();

            // 播放量
            const playNumber = bc(element)
                .find(".info")
                .find("p.play")
                .text();

            data.push({
                title,
                author,
                img: imageSrc,
                url: infoUrl,
                play: playNumber
            });
        });

        return {
            time: new Date().getTime(),
            data
        };
    }
    private _saveBArray(data: InfoData) {
        // 获取存储的文件的路径
        const filePath = path.resolve(__dirname, "../data/bilibiliData.json");

        let jsonData: JSONData = {};
        // 如果路径存在路径，那么代表要先读取，合并
        if (fs.existsSync(filePath)) {
            jsonData = JSON.parse(fs.readFileSync(filePath, "utf-8"));
        }
        jsonData[data.time] = data.data;

        // 写入
        fs.writeFileSync(filePath, JSON.stringify(jsonData));
        return "写入成功";
    }
    static init(url: string, cookie: string) {
        if (!BC.Bilibili) {
            BC.Bilibili = new BC(url, cookie);
        }
        return BC.Bilibili;
    }
}

到这里，实际上基本代码流程性的部分就完成了，剩下的就是做优化，比如，抽离一些具体的实现型代码，接着就是写一些定时器，让程序周期性的去执行，在周期性的执行了一轮又一轮，那么就可以对数据进行分析了；
?

小结

本文主要记录了如何使用node+TS开发一个爬虫，具体利用到了superagent做数据的爬取，使用cheerio去获取我们需要分析的部分，之后通过遍历将内容拆解成我们需要的格式，之后利用node的核心模块fs以及path将爬取到的数据存储到本地；