最近刚学typescript，想着能用来做点什么，顺便也练练手，加之最近也有个想法，前提是需要解决数据来源的问题，所以尝试一下能不能用ts来写一个爬虫，然后存到数据库里面为我所用，下面就是我的实践过程

配置开发环境

全局安装typescript

npm install -g typescript

创建项目文件夹

mkdir ts-spider

进入该文件夹以后初始化项目

npm init -y

下面要安装一下项目中用到的模块

axios （网络请求）
cheerio （提供jQuery Selector的解析能力）
mysql （数据库交互）

npm i --save axios cheerio mysql

相应的，要安装一下对应的类型声明模块

npm i -s @types/axios --save  
npm i -s @types/cheerio --save 
npm i -s @types/mysql --save

其实axios已经自带类型声明，所以不安装也是可以的

下面安装一下项目内的typescript(必须走这一步)

npm i --save typescript

用vscode打开项目，在根目录下新建一个tsconfig.json文件，加入一下配置项

{ 
    "compilerOptions": { 
        "target": "ES6", 
        "module": "commonjs", 
        "noEmitOnError": true, 
        "noImplicitAny": true, 
        "experimentalDecorators": true, 
        "sourceMap": false, 
     // "sourceRoot": "./", 
        "outDir": "./out" 
    }, 
    "exclude": [ 
        "node_modules" 
    ] 
}

到这里我们的环境搭建算基本完成了，下面我们来测试下

开发环境测试

在项目根目录下创建一个api.ts文件，写入以下代码

import axios from 'axios'
 
/**网络请求 */
export const remote_get = function(url: string) { 
  const promise = new Promise(function (resolve, reject) { 
    axios.get(url).then((res: any) => {
        resolve(res.data);
    }, (err: any) => {
        reject(err);
    });
  });
  return promise;
}

创建一个app.ts文件，写入以下代码

import { remote_get } from './api'

const go = async () => { 
    let res = await remote_get('http://www.baidu.com/'); 
    console.log(`获取到的数据为： ${res}`);
} 
go();

执行一下命令

tsc

我们发现项目根目录想多了一个/out文件夹，里面是转换后的js文件

我们执行一下

node out/app

输出类似这样，就代表我们的爬虫已经爬到了这个网页，环境测试已经通过了！接下来我们尝试一下抓取其中的数据

分析网页并抓取数据

我们将app.ts重构一下，引入cheerio，开始抓取我们需要的数据，当然了，这次我们换一下目标，我们抓取一下豆瓣上面的的数据

前面也提到了cheerio提供了jQuery Selector的解析能力，关于它的具体用法，可以点击这里查看

import { remote_get } from './api'
import * as cheerio from 'cheerio'

const go = async () => { 
  const res: any = await remote_get('https://www.douban.com/group/szsh/discussion?start=0');
  // 加载网页
  const $ = cheerio.load(res);
  let urls: string[] = [];
  let titles: string[] = [];
  // 获取网页中的数据，分别写到两个数组里面
  $('.olt').find('tr').find('.title').find('a').each((index, element) => { 
      titles.push($(element).attr('title').trim()); 
      urls.push($(element).attr('href').trim()); 
  })
  // 打印数组
  console.log(titles, urls);
} 
go();

这段代码是获取豆瓣上小组话题和对应的链接，然后写入数组里面，分别打印出来。我们跑一下代码，看看输出

可以看到已经获取到我们想要的数据了。接下来我们尝试把这些数据写入到数据库里面

将数据写入数据库

开始的时候其实是想把数据写到MongoDB里面，但是考虑到自己对这个还不太熟，和自己手头的体验版服务器那一点点可怜的空间，最后还是放弃了，还是决定先尝试写到mysql数据库里面

我们先本地安装一个mysql数据库，安装过程就不详细说了，安装完后在本地数据库中新建一个表

在项目根目录下添加util.ts文件，写入一下代码

import * as mysql from 'mysql'

/* 延时函数 */
export function sleep(msec: number) {
  return new Promise<void>(resolve => setTimeout(resolve, msec));
}

/**
 * 封装一个数据库连接的方法
 * @param {string} sql SQL语句
 * @param arg SQL语句插入语句的数据
 * @param callback SQL语句的回调
 */
export function db(sql: string, arg: any, callback?: any) {
  // 1.创建连接
  const config = mysql.createConnection({
      host: 'localhost', // 数据库地址
      user: 'root', // 数据库名
      password: '', // 数据库密码
      port: 3306, // 端口号
      database: 'zhufang' // 使用数据库名字
  });
  // 2.开始连接数据库
  config.connect();
  // 3.封装对数据库的增删改查操作
  config.query(sql, arg, (err:any, data:any) => {
      callback(err, data);
  });
  // 4.关闭数据库
  config.end();
}

以上我们已经封装好了一个数据库连接的方法，其中包含了数据库的配置信息，下面我们修改app.ts文件，引入我们封装好的db模块，并写入数据的操作代码

import { remote_get } from './api'
import * as cheerio from 'cheerio'
import { sleep, db } from './util'

const go = async () => { 
  const res: any = await remote_get('https://www.douban.com/group/szsh/discussion?start=0');
  // 加载网页
  const $ = cheerio.load(res);
  let urls: string[] = [];
  let titles: string[] = [];
  // 获取网页中的数据，分别写到两个数组里面
  $('.olt').find('tr').find('.title').find('a').each((index, element) => { 
      titles.push($(element).attr('title').trim()); 
      urls.push($(element).attr('href').trim()); 
  })
  // 打印数组
  console.log(titles, urls);
  // 往数据库里面写入数据
  titles.map((item, index) => {
    db('insert into info_list(title,url) values(?,?)', [item, urls[index]], (err: any, data: any) => {
        if(data){
          console.log('提交数据成功！！')
        }
        if (err) {
            console.log('提交数据失败')
        }
    })
  })
} 
go();

这里我们往数据库中插入title数组和urls数组的数据。跑一下代码，看了输出没有问题，我们看下数据库

数据已经写入了！到这里我们的这次实践就告一段落

下面考虑的是爬取数据过快的延时机制，和如何分页获取数据，如何获取爬到的链接对应的详细信息，功能模块化等等，这里就不细说了

参考文档

https://cloud.tencent.com/info/d0dd52a4a2b1f90055afe4fac4dcd76b.html https://hpdell.github.io/%E7%88%AC%E8%99%AB/crawler-cheerio-ts/