使用TS爬虫爬取百度武汉疫情数据

近期疫情比较严重，每天起来看下疫情的通报数据，就想着使用技术做一些简单的东西，能否抓取百度网上公布的疫情数据

爬取网址：https://voice.baidu.com/act/n...

中间红色框框的数据
选择TypeScript，练习下TS的语法和使用
1.建立目录初始化
新建一个目录spiderTS
初始化npm init -y,
初始化TS的配置 tsc --init，生成tsconfig.json文件

目录结构如下

2.爬取数据处理
src的目录下主要2个文件:
spider.ts // 抓去数据，写入文件
whCovid19Data.ts //处理数据
要爬取网页的数据，主要使用的superagent的库，使用superagent.get(url)的方法获取到页面的数据
使用TS编写，因此要安装superagent的d.ts的库文件
执行
npm install --save @types/superagent
代码如下：

`import path from 'path'
import WhCovid19Data from './WhCovid19Data';
const whCovid19Data = WhCovid19Data.getInstance();
class Spider {

private filePath = path.resolve(__dirname,'../data/data.json')
constructor () {
    this.getHtmlContent();
}
async getHtml() {
   const url = await whCovid19Data.getUrl();
   const res = await superagent.get(url)
   return res.text;
}
writeFile(content: string) {
    fs.writeFileSync(this.filePath,content)
}
async getHtmlContent() {
    const htmlContent = await this.getHtml();
    const fileContent = whCovid19Data.handleData(htmlContent);
    this.writeFile(fileContent);
}

}
const spider = new Spider();`

2.whCovid19Data处理数据
对网页数据的处理用到cheerio库，类似jquery的语法，获取到对应数据，同样安装对应的的，cheerio.d.ts文件

网页上右键检查

需要取到以上数据

但是抓取到源代码，缺发现完全不一样（可以在网页上右键查看源代码）

推断下百度应该用类似react的第三方框架来动态渲染数据的，seo下爬取不到对应标签的数据

怎么办？

进一步全局搜索源代码，发现了我需要的数据，在<script>标签中发现这一段代码

原来数据在这里等着呢，于是在WhCovid19Data.ts中处理代码

` getHtmlContent(html :string) : string{

    const $ = cheerio.load(html);
    if($('script')[11].children[0] && $('script')[11].children[0].data) {
        this.data = ($('script')[11].children[0].data);
        if(this.data) {
            const sumData = JSON.parse(this.data);
             if(sumData) {
                 console.log(sumData.component[0].summaryDataIn);
                 return this.parseData(sumData.component[0].summaryDataIn);
             }
         }
    }  
    return ''
}`

ts-node执行ts文件，可以获取到summaryDataIn的数据

3.ts的文件的编译和自动执行
packjson.js中，
` "scripts": {

"dev:build": "tsc -w",
"dev:start": "nodemon node ./build/spider.js",
"dev": "concurrently npm:dev:*"

},`
build中执行tsc -w,实时监控ts的变化，编译处理城js文件，
start 使用nodemon 实时监控js的变化，执行js文件
安装concurrently 可以一次执行2个命令

执行结果写入data.json文件：

总结

1.设计将将抓取文件和处理数据分开，爬取的文件可以做成通用模版，每个网页处理方式不同，可以做成不同文件引入处理
2.改写TS文件之后，一些后端设计模式可以使用，文件内的实现私有变量，组合和单例的设计模式都可以使用
3.处理数据有些繁琐，欢迎大家提供更加简便的方法
源码地址：https://github.com/haohao809/...