前言
本来想一开始直接介绍puppeteer怎么去爬取一些无法直接用简单request请求返回获取内容的。但是转念一想还是从开始的零开始吧，这样子会更好些？那么我们就准备开始爬取吧。
开发环境
- 操作系统: macos
- 基本依赖库: yarn lodash cheerio request-promise iconv-lite
- 源码地址: https://github.com/zhaoleipeng/spider.git
- 一些说明:简单入门的放在仓储simple文件夹下，后续会继续完善README
目标
此处模拟爬取网易公开课的国际名校公开课。地址https://open.163.com/ocw
结果是获取以json格式存取的内容,下面简单的展示单个的例子。
ps:下方id号的编写是为了方便后续下载方便。
{
"id": 9,
"name": "坎卡基社区学院公开课：联邦党人文集",
"description": "(缺3,6,7集) 翻译完 欢迎学习课程介绍讲述联邦党人文集。",
"content": [
{
"title": "",
"desc": "[第1集] 联邦党人文集1-11篇",
"translate": true,
"href": "http://open.163.com/movie/2017/7/I/E/MCOK19JQ2_MCOP73RIE.html",
"id": 10
},
{
"title": "",
"desc": "[第2集] 联邦党人文集12-22篇",
"translate": true,
"href": "http://open.163.com/movie/2017/7/F/7/MCOK19JQ2_MCOP774F7.html",
"id": 11
},
{
"title": "",
"desc": "[第4集] 联邦党人文集37 - 44篇",
"translate": true,
"href": "http://open.163.com/movie/2017/7/7/P/MCOK19JQ2_MCOPGNU7P.html",
"id": 12
},
{
"title": "",
"desc": "[第5集] 联邦党人文集45-56",
"translate": true,
"href": "http://open.163.com/movie/2017/7/G/S/MCOK19JQ2_MCOPGRHGS.html",
"id": 13
},
{
"title": "",
"desc": "[第8集] 联邦党人文集77-85篇",
"translate": true,
"href": "http://open.163.com/movie/2017/7/3/U/MCOK19JQ2_MCOPGV13U.html",
"id": 14
}
]
}
开始
创建一个名为spider的文件夹，当前目录为/Users/admin/spider
$ yarn init
$ yarn add cheerio request request-promise iconv-lite eslint
$ mkdir simple
准备开始
此时已经有simple文件夹了，创建一个index.js。
目录结构如下
spider
└───simple
| -- index.js ---主文件
|-- README.md ---说明
|-- package.json
|-- .eslintignore
|-- .eslintrc.yml ---eslint规则
|-- yarn.lock
开始分析
我们先打开https://open.163.com/ocw
直接在浏览器上观察其html代码。我们比较容易发现，整个大的名称会在class名称f-c3的里面，而对应的详细路径则在u-cover下面的href标签中。
分析.png
那么我们很容易就可以写出如下代码，获取所有的title还有对应的address。
'use strict';
const _ = require('lodash');
const cheerio = require('cheerio');
const iconv = require('iconv-lite');
const fs = require('fs');
// 编解码方式根据实际情况来。gbk是该网站的编码方式
const encoding = 'gbk';
// 此处将request函数包装一下，方便处理得到的数据
const request = require('request-promise').defaults({
encoding: null,
transform: function (body) {
if (Buffer.isBuffer(body)) {
body = iconv.decode(body, encoding);
}
return cheerio.load(body, { decodeEntities: false });
},
});
async function main() {
const $ = await request('https://open.163.com/ocw');
const hrefResult = $('.g-cell1').get().map(val => ({
href: $(val).find('.u-cover').attr('href'),
title: $(val).find('.f-c3').text(),
})).filter(val => val.href);
}
main().catch(err => {
console.error(err.stack);
});
我们运行
$ node simple
就能看到
result.png
那么后面我们就要对于这个代码进行添加，因为我们还需要得到每个title里面的所有标题的名称还有地址。
正式代码
'use strict';
const _ = require('lodash');
const cheerio = require('cheerio');
const iconv = require('iconv-lite');
const fs = require('fs');
// 编解码方式根据实际情况来。gbk是该网站的编码方式
const encoding = 'gbk';
let index = 0;
let contentIndex = 0;
// 此处将request函数包装一下，方便处理得到的数据
const request = require('request-promise').defaults({
encoding: null,
transform: function (body) {
if (Buffer.isBuffer(body)) {
body = iconv.decode(body, encoding);
}
return cheerio.load(body, { decodeEntities: false });
},
});
main().catch(err => {
console.error(err.stack);
});
async function main() {
let result = [];
let wrong = [];
const $ = await request('https://open.163.com/ocw');
const hrefResult = $('.g-cell1').get().map(val => ({
href: $(val).find('.u-cover').attr('href'),
title: $(val).find('.f-c3').text(),
})).filter(val => val.href);
// 此处获取href，然后开始请求并处理数据
for (const { href, title } of hrefResult) {
try {
console.log(`${href}[${title}]` + '开始');
const $ = await request(href);
const name = $('.m-cdes h2').text() + $('.m-cdes p').text();
let content = $('.u-ctitle').get().map(val => ({
title: $(val).find('.downbtn').attr('data-name') || '',
desc: $(val).text().trim().replace(/\s+/g, ' '),
translate: $(val).find('.isyy').attr('src') ? true : false,
href: $(val).find('a').attr('href'),
}));
// 因为页面内容问题会有重复的结果，此处根据href去重一下
content = _.uniqBy(content, 'href');
for (const item of content) {
item.id = ++contentIndex;
}
result.push({ id: ++index, name, content });
console.log(`${href}[${title}]` + '添加完毕');
} catch (err) {
wrong.push({ href, title });
}
fs.writeFileSync('./simple/success.json', JSON.stringify(result, 0, 2), 'utf8');
fs.writeFileSync('./simple/wrong.json', JSON.stringify(wrong, 0, 2), 'utf8');
}
}
再次运行
$ node simple
就会开始自动爬取所有的内容。
最终.png
后记
那么我们简单版的前置爬取就完成了。下一节我们就把生成出来的success.json文件作为所有课程的目录，根据其相应的href地址抓取所有的视频。
但是一切会这么如愿以偿的爬取么。包含flash的内容只有当flash播放器加载后才能获取其相应的下载地址，字幕地址等等。单单用request已经无法满足我们的需求。所以后面我们将引入puppeteer。
使用puppeteer后会遇到chromium浏览器还会发现一个问题，那就是默认flash开关是关闭的，那么如何默认打开呢。
千千万万的坑坑，还等着你来。