【node】快收下爬虫，我们不再为数据发愁

蔚落 2023-02-17 14:57 2阅读 0赞

### 目标 ###

> 明白什么是爬虫  
> 知道爬虫的意义  
> 会写简单的爬虫（爬取csdn文章标题、爬取新闻、爬图片并下载）

## 1. 什么是爬虫 ##

可以把互联网看做是一张大网，爬虫就是在这张大网上不断爬取信息的程序（**爬虫是请求网站并提取数据的自动化程序**）

##### 1.1 爬虫的基本工作流程 #####

1.  向指定的URL发送http请求
2.  获取响应（HTML、XML、JSON、二进制等数据）
3.  处理数据（解析JSON、DOM等）
4.  将处理好的数据进行存储

## 2. 爬虫的意义 ##

##### 2.1 爬虫的作用 #####

1.  爬虫是一种探测程序，它基本功能就是模拟人的行为去各个网站转悠，点按钮，找数据，或把看到的信息背回来，就行虫子在大网中不知疲倦的爬来爬去
2.  其实各大搜索引擎就是个爬虫（google，firefox，IE），每天放出去无数爬虫到各个网站，把他们的信息爬回来，存到数据库中等用户来检索

##### 2.2 爬虫的影子 #####

1.  对于如今的数据大爆发时代，几乎各个网站都有被爬虫骚扰的可能
2.  道高一尺魔高一丈，许多网站也会做出一些反爬策略（验证码等），可以根据反爬策略对爬虫进行相应调整

## 3. 爬虫基础 ##

##### 3.1 分析网站数据 #####

1.  如果我们想要爬取数据，就得对网站进行分析。每个网站样式不一，爬虫的写法也不一致
2.  目前网页的数据渲染方式一般分为：后端渲染（服务器渲染）、前端渲染（Ajax请求渲染）
3.  对于后端渲染，需要请求页面（然后对页面数据进行爬取）；对于前端渲染，需要请求Ajax请求的API（然后对数据进行处理）

##### 3.2 发送http请求（获取整个网页内容） #####

此处可参考node官网api，[https://nodejs.org/dist/latest-v12.x/docs/api/][https_nodejs.org_dist_latest-v12.x_docs_api]。只要可以发送请求并获取数据的方式都可用来发送请求（axios、ajax、http、https）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70]

##### 3.3 下载cheerio库（对网页内容进行分析） #####

cheerio是可以在服务器上用这个库来解析HTML代码，并且可以直接使用和jquery一样的api

cheerio库npm地址[https://www.npmjs.com/package/cheerio][https_www.npmjs.com_package_cheerio]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 1]

##### 3.4 获取想要操作的标签（进行数据爬取） #####

## 4. 简单爬虫的实现 ##

##### 4.1 爬取csdn文章标题 #####

1.  预览

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 2]

1.  代码（注释清晰）

const https = require('https') //引入http模块
    const cheerio = require('cheerio') //引入cheerio库
    
    // 此处也可用axios请求页面，更加简洁
    /* const axios = require('axios') axios.get('https://blog.csdn.net/cwq521o/article/list') .then(res => console.log(typeof res.data)) //注意此处余姚（.data）拿到页面字符串 */
    
    // 创建请求对象，此时还未发送请求
    const req = https.request('https://blog.csdn.net/cwq521o/article/list', res => { 
        const chunks = []
        res.on('data', c => chunks.push(c)) //监听data事件，获取接收过来的二进制数据片段并拼接
        res.on('end', () => {  //监听end事件，读取数据完成时触发
            const htmlStr = Buffer.concat(chunks).toString('utf-8') //拼接所有的chunks并转换成字符串
            const $ = cheerio.load(htmlStr); //把页面传给cheerio库
            let blogNames = [];
            // 对选中的标题进行遍历（用正则去除多余部分），最后追加到数组
            $('.article-list .article-item-box h4>a').each(function(index, item) { 
                blogNames.push($(item).text().replace(/\s|原力计划|原创/g, ''))
            })
            console.log(blogNames)
        })
    })
    //发送请求
    req.end()

**注意**：此处是爬取的标题，当然可以根据自己所需进行爬取

##### 4.2 爬取传智新闻 #####

此处爬取时需要注意，此新闻为前端渲染，当爬取到页面时，并不存在想要的数据。此时打开控制台，找到`netWork`，找到获取新闻的Ajax请求，我们向这个api发送请求（拿数据）。

1.  预览

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 3]

1.  代码

const http = require('http')
    const url = 'http://www.itcast.cn/news/json/f1f5ccee-1158-49a6-b7c4-f0bf40d5161a.json';
    // 如果有些请求与请求结果不一致，那么就要考虑是否是请求头问题，可以伪造请求头
    const req = http.request(url, { 
        headers: { 
            "Host": "www.itcast.cn"
        }
    }, res => { 
        let news = []
        res.on('data', c => news.push(c))
        res.on('end', () => { 
            let result = Buffer.concat(news).toString('utf-8')
            console.log(JSON.parse(result).data)
        })
    })
    
    req.end()

**注意**：此处的请求也可换做ajax来直接请求接口获取数据。当然用爬虫的话，我们需要根据情况伪造header

##### 4.3 爬图片并下载 #####

此处爬图片并下载分为：爬取图片路径，用`download`库进行图片批量下载

download库npm地址：[https://www.npmjs.com/package/download][https_www.npmjs.com_package_download]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 4]  
预览（略）  
代码（注释清晰）：

const http = require('http') //! 引入http模块
    const cheerio = require('cheerio') //! 引入cheerio库
    const download = require('download') //! 引入download（下载）模块
    
    //! 创建请求对象，此时未发送请求
    const HOST = 'http://www.itheima.com/'
    let req = http.request(HOST + 'teacher.html', res => { 
        let chunks = []
            //! 监听data事件，获取传递过来的数据片段
            //! 拼接数据片段
        res.on('data', c => chunks.push(c))
            //! 监听end事件，读取数据完毕时触发
        res.on('end', () => { 
            //! 拼接所有的chunk，并转化成字符串
            // console.log(Buffer.concat(chunks).toString('utf-8'))
            let htmlStr = Buffer.concat(chunks).toString('utf-8')
            let $ = cheerio.load(htmlStr); //把页面传cheerio库
            // console.log($('.tea_con .tea_txt .li_img>img'))
            // console.log($('.tea_con .tea_txt .li_img>img').length) //测试打印照片数量（得到的数维数组，与jquery选择元素一样）
            let imgs = Array.prototype.map.call($('.tea_con .tea_txt .li_img>img'), item => HOST + encodeURI($(item).attr('src'))) //遍历每个图片并加上域名最后存入数组。（用encodeURI方法进行汉字转换成base64格式）
            Promise.all(imgs.map(url => download(url, 'dist'))) //对图片进行批量下载，自动生成存储图片的文件夹dist
        })
    })
    
    //! 将请求发送
    req.end()

### 总结 ###

1.  不难发现上面的爬虫都有相同的部分（发送请求，获取响应），我们可对其进行封装，降低代码冗余度
2.  网页千变万化，爬虫也各有不同，我们需不断调整，当然靠简单的爬虫是解决不了问题的，了解更高级的爬虫：[全自动爬取][Link 1]

[https_nodejs.org_dist_latest-v12.x_docs_api]: https://nodejs.org/dist/latest-v12.x/docs/api/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200617191135539.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[https_www.npmjs.com_package_cheerio]: https://www.npmjs.com/package/cheerio
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200617191713871.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200617192647958.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200617194004467.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[https_www.npmjs.com_package_download]: https://www.npmjs.com/package/download
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200617201231292.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[Link 1]: https://editor.csdn.net/md/?articleId=106817973