使用Typescript爬取网站

开门见山

本篇文章主要是使用typescript爬取一个网站，写的不好请大家多多批评指教

兵马未动粮草先行

安装所需依赖
yarn add  superagent @types/superagent typescript ts-node -D

代码演示

export {} //防止重名
import cheerio from 'cheerio' //引入选择器
import superagent from 'superagent' //这个库类似axios,用来发起请求
import fs from 'fs' //引入node内置模块
import path from 'path' //引入node内置模块

//定义接口包含title和desc并且规定类型为string
interface Target {
  title: string
  desc: string
}

//定义接口包含time/status/Target接口
interface retData {
  time: number
  status: number
  data: Target[]
}

//定义文件数据接口
interface FileDate {
  [propName: string]: Target[]
}

class Crawler {
  //定义访问地址 属性为私有属性
  private url = `https://toscrape.com/`

  //拿到数据方法
  async getComposition() {
    //异步请求数据
    const responseRet = await superagent.get(this.url) //获取html

    //拿到想要数据内容
    const responseHtml = responseRet.text

    //返回拿到的数据
    return responseHtml
  }
  getTargetDate(html: string) {
    //定义空数组,并且对数据类型进行约束
    const targetDate: Target[] = []

    //相当于的jQuery选择器 用cheerio.load包裹一下数据变成jQuery选择器
    const $ = cheerio.load(html)

    //拿到第二个table,然后查找tr元素,还需要用$包裹一下
    const trList = $($('.table')[1]).find('tr')

    //对选中的数据进行遍历 并且返回一个新数组
    trList.map((index, item) => {
      //逻辑判断
      if (index > 0) {
        //拿到a的内容
        const title = $(item).find('a').text()

        //拿到td的内容
        const desc = $(item).find('td').text()

        //把数据填充进数组
        targetDate.push({ title: title, desc: desc })
      }
    })

    //自定义数据格式
    const retData: retData = {
      time: new Date().getTime(),
      status: 200,
      data: targetDate,
    }
    return retData
  }

  assemblyData(data: retData) {
    //其实这个函数对数据进行组合

    //定义空数据
    const fileDate: FileDate = {}

    //拿到文件路径
    const filePath = path.resolve('../data/ret.json')

    //判断是否存在文件 也就是判断之前是否已经请求过
    if (fs.existsSync(filePath)) {
      //说明文件存在
      //重新定义文件,定义文件路径和文件读取格式
      fileDate[data.time] = JSON.parse(fs.readFileSync(filePath, 'utf-8'))
    }

    //如果不存在文件,重新定义数据
    fileDate[data.time] = data.data

    //返回文件数据
    return fileDate
  }
  //此方法调用 把所有的逻辑代码进行组合
  async crewProcess() {
    //拿到文件路径
    const filePath = path.resolve('data/ret.json')

    //1、爬取HTML结构
    const retHtml = await this.getComposition()

    //2、获取数据
    const resData = await this.getTargetDate(retHtml)

    //把数据变成想要的格式
    const fileData = this.assemblyData(resData)

    //写入文件
    fs.writeFileSync(filePath, JSON.stringify(fileData))
  }
  constructor() {
    //调用方法
    this.crewProcess()
  }
}

const crawler = new Crawler()

项目运行

//在package.json 中的scripts定义命令
"scripts": {
        "dev": "ts-node ./src/index.ts",
        "serve": "ts-node ./src/index2.ts"
},

在项目的根目录下运行命令行输入: yarn dev 

码云地址:https://gitee.com/miss-smile/typescript-01.git

谢谢观看，如有不足，敬请指教