最近在在学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();`