最近在在学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结构:

爬取被JavaScript脚本保护的图片 js爬取网页_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();`