JS实现图片爬虫

最近在在学node.JS，尝试着跟着网上的教程学着写一个JS爬虫,来爬取网上的图片文件，在此记录过程

获取网站的html结构

首先我们引入node.js的http核心模块，初始化并将目标网站地址作为url参数，接受一个回调函数，在这个回调函数里我们可以通过res.on方法对返回值进行监听，当有数据流入时，我们将他放进我们提前准备好的数组中，当数据结束流入时，我们将数组中的所有数据连接起来并以流的形式输出，存入一个变量中，打印这个变量，控制台就会出现整个页面的html结构。

```javascript
`const http = require('http');
let req = http.request('http://www.itheima.com/teacher.html#ajavaee', res => {
let chunks = [];
res.on('data', chunk => {
    chunks.push(chunk);
})
let img = [];
res.on('end', () => {
    // console.log(Buffer.concat(chunks).toString('utf-8'))
    let htmlstr = Buffer.concat(chunks).toString('utf-8')
	})
req.end();`

页面原本的HTML结构：

获取图片src

虽然我们这时已经获取到了整个页面的HTML结构，但这时整个结构是在控制台呈现的，我们并没有解析这个结构的能力，所幸我们可以通过一个插件来完成这个工作，我们可以下载cherrio这个插件对这个结构进行解析，这个插件支持我们用jQuery的语法对解析出来的html结构进行操作。首先我们要下载并引入这个插件

下载

`npm install cheerio`

引入

`const cherrio = require('cheerio')`

然后，我们要对这个解析出的html进行挂载，将它们整体挂在在$上，然后用jqury的语法进行调用

`  let $ = cherrio.load(htmlstr);`

然后，我们要点目标网站，打开控制台对整个HTML文件结构进行分析，然后用jQuery的语法对我们要提取的图片的DOM进行选择$(’.tea_box4 .maincon .clears > li .main_pic >img’)，这时我们可以用attr来选中目标img的src，但这个方法只能选中一个，我们需要所有的src就必须对他进行遍历，注意由于这个插件是jQuery的语法，因此我们需要使用each方法进行遍历，这个方法的第一个参数是索引，第二个才是每一项。同时注意，使用每一个item也要用jQuery的语法进行

`   $('.tea_box4 .maincon .clears > li .main_pic >img').each((index, item) => {
        img.push($(item).attr('src'))
    })`

这里的img是我们提前定义好的一个空数组，用来保存这些图片地址。我们在控制台打印img已经可以看到地址了，但我们会发现这些地址都打不开，这是因为这些图片的位置是相对地址，我们在这些地址前需要补上网站的Baseurl,我们可以将网站的baseurl作为一个常量，在每次遍历时添加

`设置常量
const HOST = 'http://www.itheima.com/'`
	each遍历部分：
  img.push(HOST + ($(item).attr('src')))

批量下载

现在，我们已经可以打印出这些可以打开的地址了，现在我们要做的是将他们批量下载下来，这时我们可以使用download这个插件对这些图片地址进行批量下载

下载

`npm install download`

引入

`const download = require('download')`

调用的方式非常简单，只要用一个Proimse即可

`  Promise.all(img.map(x => download(x, 'dist'))).then(console.log('图片下载完成'))`

这个函数中，x是img这个包含了所有要下载的url中的每一项，dist是下载的文件夹，不指定路径则为同级文件夹，then()来指定下载完成后的回调函数。

注意这里还有一个细节，由于这个下载的连接中不能包含中文，所以我们要对图片url中的中文处理为base64，我们使用node.js中自带的encodeURL即可。

```javascript
   ` $('.tea_box4 .maincon .clears > li .main_pic >img').each((index, item) => {
            img.push(HOST + encodeURI($(item).attr('src')))
        })`

运行程序，即可成功。

注意，用vscode打开单个JS文件可能导致显示下载成功但没有文件，只要打开爬虫JS文件所在的文件夹姐会成功了

全部代码：

```javascript
  `const http = require('http');
	const cherrio = require('cheerio')
	const download = require('download')
	const HOST = 'http://www.itheima.com/'

	let req = http.request('http://www.itheima.com/teacher.html#ajavaee', res => {
    let chunks = [];
    res.on('data', chunk => {
        chunks.push(chunk);
    })
    let img = [];
    res.on('end', () => {
        // console.log(Buffer.concat(chunks).toString('utf-8'))
        let htmlstr = Buffer.concat(chunks).toString('utf-8')
        let $ = cherrio.load(htmlstr);
        $('.tea_box4 .maincon .clears > li .main_pic >img').each((index, item) => {
            img.push(HOST + encodeURI($(item).attr('src')))
        })
        Promise.all(img.map(x => download(x, 'dist'))).then(console.log('图片下载完成'))
    })

	})
	req.end();`