利用ts写一个简单爬虫

第一步，分析项目

//首先需要有一个大类，包裹住所有内容，然后new一下这个大类就可以实例化这个类（就是把constructor方法执行一遍）
claa 大类{
	//类里面需要有属性：
	url(爬的位置)
	data(存放爬过来的数据)
	//需要有方法：
	init：(初始化，运行项目所有的方法)
	getHtml：(获取url里面数据的方法)
	getJsonInfo：(获取到的数据放到json对象中)
	getNewContent：(把对象存到目录里，先判断有没有，有就存没有就创建)
	writeFile：(把内容写到最后文件里)
	constructor(){
		this.int();
	}
}

第二步，创建项目

//首先创建一个package.json
npm init -y
//然后创建tsconfig.json
tsc --init
//然后再本文件夹创建ts
npm install typescript -D
//然后再创建src/index.ts文件
//然后改一下运行方式
//然后创建大类
class Reptile{
  constructor (){
    console.log('运行成功');
  }

}

new Reptile()

第三步，请求url抓取到内容

import superagent from 'superagent'

class Reptile{
  private url = 'http://learning.sohu.com/?spm=smpc.news-home.header.7.1580904485627XJyFma3';

  //请求到url里面的内容
  async getHtml(){
    //发送请求使用superagent，需要安装一下
    //npm install superagent -D
    const res = await superagent.get(this.url)
    return res.text
  }
  //初始化
  async init(){
     const html = await this.getHtml()
     console.log(html);
     
  }
  constructor (){
    this.init()
  }

}

//new一下就是实例化，就会执行类里面的constraintor方法
new Reptile()

第五步，把数据弄成自己设置的json数据格式并保存

//首先设计好json格式
{
time:'',
data:[{title:''}]
}
//然后把数据设计成数据结构这样，然后输出

然后实现：

import superagent from 'superagent'
import cheerio from 'cheerio'

//定义titleArr里面对象数据的类型
interface titleArr{                                       //第六步，设计interface，里面就一个title属性
  title:string
}

class Reptile{
  private url = 'http://learning.sohu.com/?spm=smpc.news-home.header.7.1580904485627XJyFma3';


  //请求到url里面的内容
  async getHtml(){
    //发送请求使用superagent，需要安装一下
    //npm install superagent -D
    const res = await superagent.get(this.url)
    return res.text                                       //第一步，首先把获取到的数据返回出来
  }
  getJsonInfo(html:string){
    const $ = cheerio.load(html)                          //第三步，安装cheerio
    //拿到所要拿的数据的class
    const item = $('.z-c-block-list-item');               //第四步，拿到存放数据的class
    //定义一个数组，存放数据
    const titleArr:titleArr[] = []                        //第五步，设计好数据类型，里面有对象类型
    //拿里面的数据
    item.map((index,ele) =>{                              //第七步，遍历拿到的class
      //find方法是找到符合内容的节点
      const childs = $(ele).find('a');					  //第八步，通过find方法拿到a标签
      const title = childs.text();						  //第九步，拿到a标签里面的内容

      //根据设计的数据结构做数据整合
      titleArr.push({                                     //第十步，把a标签里面的内容，存放到数组对象里面
        title  
      })

    })
    return {                                              //第十一步，再设计数据结构，并且返回需要的样子
      time: new Date().getTime(),
      data:titleArr
    }
  }

  //初始化
  async init(){
     const html = await this.getHtml()
     const jsonInso =  this.getJsonInfo(html)       //第二步，把传出来的数据，放到另一个方法里设计数据结构
  }
  constructor (){
    this.init()
  }
}

//new一下就是实例化，就会执行类里面的constraintor方法
new Reptile()

第六步，把数据存到json文件里面

//首先设定存到文件里的格式是这样
时间数字戳 ： 保存的数据

import superagent from 'superagent'
import cheerio from 'cheerio'
import path from 'path'														   //第六步，导入path路径和fs对文件读写api
import fs from 'fs'

//定义titleArr里面对象数据的类型
interface titleArr{
  title:string
}
//定义jsonInfo里面的数据类型
interface jsonInfo{                                                            //第三步，设定数据类型
  time:number,
  data:titleArr[]
}
//Content数据类型
interface Content {															  //第十步，定义存放数据数据类型
  [propName:number]:titleArr[]
}

class Reptile{
  private url = 'http://learning.sohu.com/?spm=smpc.news-home.header.7.1580904485627XJyFma3';
  //存取目录的文件
  private filePath = path.resolve(__dirname,'../src/date/date.json');         //第七步，定义保存数据的路径


  //请求到url里面的内容
  async getHtml(){
    //发送请求使用superagent，需要安装一下
    //npm install superagent -D
    const res = await superagent.get(this.url)
    return res.text
  }
  //拿到具体数据并设计数据的数据结构
  getJsonInfo(html:string){
    const $ = cheerio.load(html)
    //拿到所要拿的数据的class
    const item = $('.z-c-block-list-item');
    //定义一个数组，存放数据
    const titleArr:titleArr[] = []
    //拿里面的数据
    item.map((index,ele) =>{
      //find方法是找到符合内容的节点
      const childs = $(ele).find('a');
      const title = childs.text();

      //根据设计的数据结构做数据整合
      titleArr.push({
        title
      })

    })
    return {
      time: new Date().getTime(),
      data:titleArr
    }
  }
  //把数据存到本地某个文件
  getNewContent(jsonInfo:jsonInfo){                                        //第二步，接收数据，并且设定数据类型
    let fileContent:Content = {}									       //第四步，定义保存写到文件的数据，第十步
    if (fs.existsSync(this.filePath)) {									   //第五步，检测存数据的文件是否存在
      fileContent = JSON.parse( fs.readFileSync(this.filePath,'utf-8') );  //第八步，设置保存数据的编码
    }
    fileContent[jsonInfo.time] = jsonInfo.data;                            //第九步，设置数据结构
    return fileContent
  } 
  //把数据写入filePath
  writeFile(fileInfo:string){
    fs.writeFileSync(this.filePath,fileInfo)                               //第十二步，把内容写进去
  }
  //初始化
  async init(){
     const html = await this.getHtml()
     const jsonInfo =  this.getJsonInfo(html)             
     const fileInfo = this.getNewContent(jsonInfo)                          //第一步，把前面写好的数据拿出来用
     this.writeFile(JSON.stringify(fileInfo))                               //第十一步，设定方法把数据写进文件，并且先把数据转换json
  }
  constructor (){
    this.init()
  }
}

//new一下就是实例化，就会执行类里面的constraintor方法
new Reptile()

第七步，项目打包

首先执行

  "scripts": {
    "dev": "ts-node ./src/index.ts",
    "build":"tsc"
  },

npm run build

这时候就会把ts文件编译成js文件
然后打包，在tsconfig.json
找到 “outDir”: “./build”, 把注释去掉就可以了，然后就会产生打包文件夹build

...
// "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
// "declaration": true,                   /* Generates corresponding '.d.ts' file. */
// "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
// "sourceMap": true,                     /* Generates corresponding '.map' file. */
// "outFile": "./",                       /* Concatenate and emit output to single file. */
 "outDir": "./build",                        /* Redirect output structure to the directory. */
// "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
// "composite": true,                     /* Enable project compilation */
// "tsBuildInfoFile": ".
...