2019独角兽企业重金招聘Python工程师标准>>> 
准备工作
- 首先当然是安装node，这一步忽略。
- 然后是各种模块，本实例用到了http、fs、url、cheerio、request、async、phantom，前三个是node自带的，无需install。
- 因为要服务器渲染，所以要用到phantomjs，这个需要自行安装一下，最后再配置一下全局环境。
模块解释
- cheerio模块用于解析DOM树，进行DOM操作， 具体用法跟JQuery类似，对熟悉JQ的人来说，学会使用也就是几分钟的事。
- request模块，http模块的高级封装版，便于操作。
- async模块，解决“恶魔金字塔”问题。
- phantom模块，在服务器端渲染整个界面，为的是能够爬取到页面上一些通过js等动态加载的内容。
具体实现
- 公用接口
exports.Strategy = {//js,css,images等文件的保存策略
"SAVE_IN_ROOT": 1,//保存在根目录下
"SAVE_IN_SUB_DIR": 2//保存在各级子目录下
};
exports.uniqueArray = function (arr) {//数组去重
var hash = {},
len = arr.length,
result = [];
for (var i = 0; i < len; i++){
if (!hash[arr[i]]){
hash[arr[i]] = true;
result.push(arr[i]);
}
}
return result;
};
exports.timer = function (date,msg) {//简易版计时器
console.log(msg + " : "+(new Date() - date) +"ms" );
};
- 配置
var config = {
url: "http://localhost:8081/dhay/",//目的网站
savePath: "J:/nodejs/open-source-spider",//保存路径
containOutLink: false, //是否爬取外部链接
totalNum: 10, //爬取页面上限，0为不限制
endWith: "html",//文件结尾
saveStrategy: publicAPI.Strategy.SAVE_IN_ROOT,
getOuterJs: false,//是否爬取远端js
getOuterCss: false,//是否爬取远端Css
getOuterImages: false//是否爬取远端图片
};
为了简化操作，判断是否为外部资源的方式简化为判断URL是否以http或https为开头，虽然不够严谨，但是能保证爬取下来的网页能根据URL获取到资源。
保存策略目前也只实现了SAVE_IN_ROOT而已，懒~
- 全局变量
var list = [config.url]; //所要爬取的网页链接队列
var count = 0; //当前爬取的网页数
var date = null;
var urlInfo = url.parse(config.url); //入口链接信息
- 获取服务器渲染之后的页面
phantom.create().then(function (ph) {
ph.createPage().then(function (page) {
page.open(url).then(function (status) {
if (status == 'success') {
page.property('content').then(function (html) {
console.log(html);
}
}
})
});
- 解析DOM树
var $ = cheerio.load(html);
var js, css , images;
//获取js列表
var scripts = $("script");
js = getJs(scripts);
console.log(js);
//获取css
var stylesheets = $("link[rel='stylesheet']");
css = getCss(stylesheets);
console.log(css);
//获取图片
var imgs = $("img");
images = getImages(imgs);
console.log(images);
//获取链接
if(!config.totalNum || count < config.totalNum){
var links = $("a");
getLink(links,url);
}
获取页面中所有的js、css和img，分别进行调用函数，返回所要爬取的文件的url数组。
- getJs()等函数
function getJs(scripts) {
var res = [];
scripts.each(function (i, script) {
var src = script.attribs.src;
if (!src)
return;
if (!config.getOuterJs) {
if (/^https?/.test(src))
return;
}
res.push(src);
});
return publicAPI.uniqueArray(res);
}
getJs()函数，遍历每一个元素，判断其src属性是否存在，不存在则跳过，再根据配置判断是否获取外部文件，满足各条件的加入到res数组中，最后去重后返回结果。
getCss、getImages和getLink方法与上述类似，不同的是getLink多了一些判断和URL格式化操作。
- 保存网页文本
var saveHtml = function (url, html, callback) {
url = url.match(/https?:\/\/((?:(?![\?])[\S])*)/)[1];//截取？以前的字符串
var endWith = /\/$/.test(url); //判断是否以反斜杠结尾
url = endWith ? url.match(/(\S*)\/$/)[1] : url; //去除反斜杠
var reg = new RegExp(/\.html|\.htm|\.asp|\.jsp$/); //判断是否以这些字符串结尾
var usePathAsName = reg.test(url);
var array = url.split("/"); //以反斜杠分割字符串
array[0] = urlInfo.hostname;
var length = usePathAsName ? array.length-1: array.length;
var currentPath = config.savePath;
for (var i = 0; i < length; i++) { //遍历数组，逐层判断当前路径是否存在指定文件夹，不存在则创建
(function (i) {
currentPath += "/" + array[i];
if (fs.existsSync(currentPath)) {
write(i, callback)
} else {
try {
fs.mkdirSync(currentPath);
write(i, callback)
}catch (err){
console.log(err);
}
}
})(i)
}
function write(index, callback) { // 若为最后一个元素，执行写入操作
if (index == length - 1) {
var fileName = endWith ? "index." + config.endWith : usePathAsName ? array[array.length-1] : array[array.length-1] + config.endWith; //根据情况选择文件名
fs.writeFile(currentPath + "/" + fileName, html, function (err) {
if (err) {
console.log(err, "appendFile");
} else {
callback();
}
});
}
}
};
- 保存js等资源
var saveJs = function (url, js, callback ,callback2) {
if(!js.length){
callback2(null);
return;
}
var length = js.length;
var count = 0;
var root = config.savePath + "/" + urlInfo.hostname;
if(config.saveStrategy == publicAPI.Strategy.SAVE_IN_ROOT){
if(fs.existsSync(root)){
write(callback,callback2)
}else{
fs.mkdirSync(root);
write(callback,callback2)
}
}
function write(callback,callback2) {
for(var i = 0;i 保存js等资源的方法比保存网页的更为复杂，主要是因为一个页面可能存在多个js、css等资源，这里有两种保存的策略，一是直接将所有文件保存在根目录下，如根目录如localhost，现有js文件链接为“localhost:8080//abc/js/main/js”，将该js文件保存在localhost/js/下，另一种是保存在对应目录下，即localhost/abc/js/下，但是第二种方法会导致出现很多重复的文件，就没有实现出来。
获取css、images的方法类似，不做赘述。
- 并行执行写入操作
async.parallel([
function (callback) {
saveHtml(url, html, function () {
console.log("Page:"+(count+1)+" Url:"+url+" success!\n");
callback(null);
});
},
function (callback) {
saveJs(url,js, function (x, js) {
console.log("Page:"+(count+1)+" Js"+(x+1)+" Src:"+js+" Success!\n");
},callback);
},
function (callback) {
saveCss(url, css, function (x, css) {
console.log("Page:"+(count+1)+" Css"+(x+1)+" Src:"+css+" Success!\n");
},callback);
},
function (callback) {
saveImage(url, images, function (x,img) {
console.log("Page:"+(count+1)+" Images"+(x+1)+" Src:"+img+" Success!\n");
},callback);
}
],function (err) {
page.close();
if(err){
console.log(err,"ERROR IN PARALLEL PAGE "+(count+1));
}else {
count++;
console.log("Page:"+(count)+" finished!");
var cur = list.shift(),next = list[0];
next = /^https?:/.test(next) ? next : cur+'/'+next;
if( count < config.totalNum)
requirePage(next);
}
})
使用async模块，并行处理写入操作，当所有写入操作结束后，从list队列获取下一跳地址，循环操作。
- 测试 爬取http://localhost:8081/ 结果如图：
总结
之前帮别人做网站的时候看到有些网站做得不错，就想复制下来参考参考，结果发现手动复制也是怪累的，现在团队准备搞搞node爬虫，借此机会就自己写了个爬虫来爬网站。写这鬼东西花了两三天，但是很多功能都没有实现，如第二种保存策略，很多可以优化的地方也懒得优化，如phantom的create可以独立出来，也有成堆的bug，如没有全部写入操作完成就进入下一环了，啊啊啊，没时间，懒得搞了，到此为止！
完整的代码放在github了：https://github.com/WillBean/os-spider.git