利用node.js爬取指定排名網(wǎng)站的JS引用庫詳解
前言
本文給大家介紹的爬蟲將從網(wǎng)站爬取排名前幾的網(wǎng)站,具體前幾名可以具體設(shè)置,并分別爬取他們的主頁,檢查是否引用特定庫。下面話不多說了,來一起看看詳細的介紹:
所用到的node主要模塊
- express 不用多說
- request http模塊
- cheerio 運行在服務(wù)器端的jQuery
- node-inspector node調(diào)試模塊
- node-dev 修改文件后自動重啟app
關(guān)于調(diào)試Node
在任意一個文件夾,執(zhí)行node-inspector,通過打開特定頁面,在頁面上進行調(diào)試,然后運行app,使用node-dev app.js來自動重啟應(yīng)用。
所碰到的問題
1. request請求多個頁面
由于請求是異步執(zhí)行的,和分別返回3個頁面的數(shù)據(jù),這里只爬取了50個網(wǎng)站,一個頁面有20個,所以有3頁,通過循環(huán)里套request請求,來實現(xiàn)。
通過添加請求頭可以實現(xiàn)基本的反爬蟲
處理數(shù)據(jù)的方法都寫在analyData()里面,造成后面的數(shù)據(jù)重復(fù)存儲了,想了很久,才想到一個解決方法,后面會寫到是怎么解決的。
for (var i = 1; i < len+1; i++) {
(function(i){
var options = {
url: 'http://www.alexa.cn/siterank/' + i,
headers: {
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36'
}
};
request(options, function (err, response, body) {
analyData(body,rank);
})
})(i)
}
2. 多層回調(diào)
仔細觀察代碼,你會發(fā)現(xiàn),處理數(shù)據(jù)的方法使用了如下的多層回調(diào),也可以不使用回調(diào),寫在一個函數(shù)內(nèi)部;因為,每層都要使用上一層的數(shù)據(jù),造成了這樣的寫法。
function f1(data1){
f2(data1);
}
function f2(data2){
f3(data2);
}
function f3(data3){
f4(data4);
}
3. 正則獲取JS庫
由于獲取頁面庫,首先需要獲取到script的src屬性,然后通過正則來實現(xiàn)字符串匹配。
<script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1.10.2_d88366fd.js"></script>
獲取到的script可能是上面這樣的,由于庫名的命名真是各種各樣,后來想了一下,因為文件名是用.js結(jié)尾的,所以就以點號為結(jié)尾,然后把點號之前的字符截取下來,這樣獲得了庫名,代碼如下。
var reg = /[^\/\\]+$/g;
var libName = jsLink.match(reg).join('');
var libFilter = libName.slice(0,libName.indexOf('.'));
4.cheerio模塊獲取JS引用鏈接
這部分也花了一點時間,才搞定,cheerio獲取DOM的方法和jQuery是一樣的,需要對返回的DOM對象進行查看,就可以看到對象里隱藏好深的href屬性,方法大同小異,你也可以使用其他選擇器,選擇到script標簽
var $ = cheerio.load(body);
var scriptFile = $('script').toArray();
scriptFile.forEach(function(item,index){
if (item.attribs.src != null) {
obtainLibName(item.attribs.src,index);
}
5.存儲數(shù)據(jù)到數(shù)據(jù)庫
存儲數(shù)據(jù)的邏輯是先獲取所有的script信息,然后push到一個緩存數(shù)組,由于push后面,緊跟著存儲到數(shù)據(jù)庫的方法,這兩個方法都寫在循環(huán)里面的,例如爬取5個網(wǎng)站,每個網(wǎng)站存儲一次,后面也會跟著存儲,造成數(shù)據(jù)重復(fù)存儲。解決方法是存儲數(shù)據(jù)的一般邏輯是先查,再存,這個查比較重要,查詢的方法也有多種,這里主要是根據(jù)庫名來查找唯一的數(shù)據(jù)對象,使用findOne方法。注意,由于node.js是異步執(zhí)行的,這里的閉包,每次只傳一個i值進去,執(zhí)行存儲的操作。
// 將緩存數(shù)據(jù)存儲到數(shù)據(jù)庫
function store2db(libObj){
console.log(libObj);
for (var i = 0; i < libObj.length; i++) {
(function(i){
var jsLib = new JsLib({
name: libObj[i].lib,
libsNum: libObj[i].num
});
JsLib.findOne({'name': libObj[i].lib},function(err,libDoc){
if(err) console.log(err);
// console.log(libDoc)
if (!libDoc){
jsLib.save(function(err,result){
if(err) console.log('保存數(shù)據(jù)出錯' + err);
});
}
})
})(i)
}
console.log('一共存儲' + libObj.length + '條數(shù)據(jù)到數(shù)據(jù)庫');
}
6.分頁插件
本爬蟲前端使用了bootstrap.paginator插件,主要是前臺分頁,返回數(shù)據(jù),根據(jù)點擊的頁數(shù),來顯示對應(yīng)的數(shù)據(jù),后期考慮使用AJAX請求的方式來實現(xiàn)翻頁的效果,這里的注意項,主要是最后一頁的顯示,最好前面做個判斷,因為返回的數(shù)據(jù),不一定剛好是頁數(shù)的整數(shù)倍
function _paging(libObj) {
var ele = $('#page');
var pages = Math.ceil(libObj.length/20);
console.log('總頁數(shù)' + pages);
ele.bootstrapPaginator({
currentPage: 1,
totalPages: pages,
size:"normal",
bootstrapMajorVersion: 3,
alignment:"left",
numberOfPages:pages,
itemTexts: function (type, page, current) {
switch (type) {
case "first": return "首頁";
case "prev": return "上一頁";
case "next": return "下一頁";
case "last": return "末頁";
case "page": return page;
}
},
onPageClicked: function(event, originalEvent, type, page){
// console.log('當(dāng)前選中第:' + page + '頁');
var pHtml = '';
var endPage;
var startPage = (page-1) * 20;
if (page < pages) {
endPage = page * 20;
}else{
endPage = libObj.length;
}
for (var i = startPage; i < endPage; i++) {
pHtml += '<tr><td>';
pHtml += (i+1) + '</td><td>';
pHtml += libObj[i].name + '</td><td>';
pHtml += libObj[i].libsNum + '</td></tr>';
}
libShow.html(pHtml);
}
})
}
完整代碼
1. 前端
$(function () {
var query = $('.query'),
rank = $('.rank'),
show = $('.show'),
queryLib = $('.queryLib'),
libShow = $('#libShow'),
libName = $('.libName'),
displayResult = $('.displayResult');
var checkLib = (function(){
function _query(){
query.click(function(){
$.post(
'/query',
{
rank: rank.val(),
},
function(data){
console.log(data);
}
)
});
queryLib.click(function(){
var inputLibName = libName.val();
if (inputLibName.length == 0) {
alert('請輸入庫名~');
return;
}
$.post(
'/queryLib',
{
libName: inputLibName,
},
function(data){
if(data.length == 0){
alert('沒有查詢到名為' + inputLibName + '的庫');
libName.val('');
libName.focus();
libShow.html('')
return;
}
var libHtml = '';
for (var i = 0; i < data.length; i++) {
libHtml += '<tr><td>';
libHtml += (i+1) + '</td><td>';
libHtml += data[i].name + '</td><td>';
libHtml += data[i].libsNum + '</td></tr>';
}
libShow.html(libHtml);
}
)
});
}
function _showLibs(){
show.click(function(){
$.get(
'/getLibs',
{
rank: rank.val(),
},
function(data){
console.log('一共返回'+ data.length + '條數(shù)據(jù)');
console.log(data)
var libHtml = '';
for (var i = 0; i < 20; i++) {
libHtml += '<tr><td>';
libHtml += (i+1) + '</td><td>';
libHtml += data[i].name + '</td><td>';
libHtml += data[i].libsNum + '</td></tr>';
}
displayResult.show();
libShow.html(libHtml);// 點擊顯示按鈕,顯示前20項數(shù)據(jù)
_paging(data);
}
)
});
}
//翻頁器
function _paging(libObj) {
var ele = $('#page');
var pages = Math.ceil(libObj.length/20);
console.log('總頁數(shù)' + pages);
ele.bootstrapPaginator({
currentPage: 1,
totalPages: pages,
size:"normal",
bootstrapMajorVersion: 3,
alignment:"left",
numberOfPages:pages,
itemTexts: function (type, page, current) {
switch (type) {
case "first": return "首頁";
case "prev": return "上一頁";
case "next": return "下一頁";
case "last": return "末頁";
case "page": return page;
}
},
onPageClicked: function(event, originalEvent, type, page){
// console.log('當(dāng)前選中第:' + page + '頁');
var pHtml = '';
var endPage;
var startPage = (page-1) * 20;
if (page < pages) {
endPage = page * 20;
}else{
endPage = libObj.length;
}
for (var i = startPage; i < endPage; i++) {
pHtml += '<tr><td>';
pHtml += (i+1) + '</td><td>';
pHtml += libObj[i].name + '</td><td>';
pHtml += libObj[i].libsNum + '</td></tr>';
}
libShow.html(pHtml);
}
})
}
function init() {
_query();
_showLibs();
}
return {
init: init
}
})();
checkLib.init();
})
2.后端路由
var express = require('express');
var mongoose = require('mongoose');
var request = require('request');
var cheerio =require('cheerio');
var router = express.Router();
var JsLib = require('../model/jsLib')
/* 顯示主頁 */
router.get('/', function(req, res, next) {
res.render('index');
});
// 顯示庫
router.get('/getLibs',function(req,res,next){
JsLib.find({})
.sort({'libsNum': -1})
.exec(function(err,data){
res.json(data);
})
})
// 庫的查詢
router.post('/queryLib',function(req,res,next){
var libName = req.body.libName;
JsLib.find({
name: libName
}).exec(function(err,data){
if (err) console.log('查詢出現(xiàn)錯誤' + err);
res.json(data);
})
})
router.post('/query',function(req,res,next) {
var rank = req.body.rank;
var len = Math.round(rank/20);
for (var i = 1; i < len+1; i++) {
(function(i){
var options = {
url: 'http://www.alexa.cn/siterank/' + i,
headers: {
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36'
}
};
request(options, function (err, response, body) {
analyData(body,rank);
})
})(i)
}
res.json('保存成功')
})
var sites = [];
var flag = 0;
function analyData(data,rank) {
if(data.indexOf('html') == -1) return false;
var $ = cheerio.load(data);// 傳遞 HTML
var sitesArr = $('.info-wrap .domain-link a').toArray();//將所有a鏈接存為數(shù)組
console.log('網(wǎng)站爬取中``')
for (var i = 0; i < 10; i++) { // ***這里后面要改,默認爬取前10名
var url = sitesArr[i].attribs.href;
sites.push(url);//保存網(wǎng)址,添加wwww前綴
}
console.log(sites);
console.log('一共爬取' + sites.length +'個網(wǎng)站');
console.log('存儲數(shù)據(jù)中...')
getScript(sites);
}
// 獲取JS庫文件地址
function getScript(urls) {
var scriptArr = [];
var src = [];
var jsSrc = [];
for (var j = 0; j < urls.length; j++) {
(function(i,callback){
var options = {
url: urls[i],
headers: {
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36'
}
}
request(options, function (err, res, body) {
if(err) console.log('出現(xiàn)錯誤: '+err);
var $ = cheerio.load(body);
var scriptFile = $('script').toArray();
callback(scriptFile,options.url);
})
})(j,storeLib)
};
function storeLib(scriptFile,url){
flag++;// 是否存儲數(shù)據(jù)的標志
scriptFile.forEach(function(item,index){
if (item.attribs.src != null) {
obtainLibName(item.attribs.src,index);
}
})
function obtainLibName(jsLink,i){
var reg = /[^\/\\]+$/g;
var libName = jsLink.match(reg).join('');
var libFilter = libName.slice(0,libName.indexOf('.'));
src.push(libFilter);
}
// console.log(src.length);
// console.log(calcNum(src).length)
(function(len,urlLength,src){
// console.log('length is '+ len)
if (len == 10 ) {// len長度為url的長度才向src和數(shù)據(jù)庫里存儲數(shù)據(jù),防止重復(fù)儲存
// calcNum(src);//存儲數(shù)據(jù)到數(shù)據(jù)庫 // ***這里后面要改,默認爬取前10名
var libSrc = calcNum(src);
store2db(libSrc);
}
})(flag,urls.length,src)
}
}// getScript END
// 將緩存數(shù)據(jù)存儲到數(shù)據(jù)庫
function store2db(libObj){
console.log(libObj);
for (var i = 0; i < libObj.length; i++) {
(function(i){
var jsLib = new JsLib({
name: libObj[i].lib,
libsNum: libObj[i].num
});
JsLib.findOne({'name': libObj[i].lib},function(err,libDoc){
if(err) console.log(err);
// console.log(libDoc)
if (!libDoc){
jsLib.save(function(err,result){
if(err) console.log('保存數(shù)據(jù)出錯' + err);
});
}
})
})(i)
}
console.log('一共存儲' + libObj.length + '條數(shù)據(jù)到數(shù)據(jù)庫');
}
// JS庫排序算法
function calcNum(arr){
var libObj = {};
var result = [];
for (var i = 0, len = arr.length; i < len; i++) {
if (libObj[arr[i]]) {
libObj[arr[i]] ++;
} else {
libObj[arr[i]] = 1;
}
}
for(var o in libObj){
result.push({
lib: o,
num: libObj[o]
})
}
result.sort(function(a,b){
return b.num - a.num;
});
return result;
}
module.exports = router;
源碼下載
后記
通過這個小爬蟲,學(xué)習(xí)到很多知識,例如爬蟲的反爬蟲有哪些策越,意識到node.js的異步執(zhí)行特性,前后端是怎么進行交互的。同時,也意識到有一些方面的不足,后面還需要繼續(xù)改進,歡迎大家的相互交流。
好了,以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
Node.js入門教程:在windows和Linux上安裝配置Node.js圖文教程
這篇文章主要介紹了Node.js入門教程:在windows和Linux上安裝配置Node.js的方法,本文圖文并茂,步驟明細,是學(xué)習(xí)安裝node.js的絕佳教程,需要的朋友可以參考下2014-08-08
基于NodeJS的前后端分離的思考與實踐(一)全棧式開發(fā)
這個話題最近被討論得比較多,阿里有些BU也在進行一些嘗試。討論了很久之后,我們團隊決定探索一套基于NodeJS的前后端分離方案,過程中有一些不斷變化的認識以及思考,記錄在這里,也希望看到的同學(xué)參與討論,幫我們完善。2014-09-09
用C/C++來實現(xiàn) Node.js 的模塊(二)
上篇文章的主要內(nèi)容講訴了用C/C++來實現(xiàn) Node.js 的模塊,本文更深一步繼續(xù)探討這個問題,有需要的朋友可以參考下2014-09-09
nodejs+axios爬取html出現(xiàn)中文亂碼并解決示例
這篇文章主要為大家介紹了nodejs+axios爬取html出現(xiàn)中文亂碼示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-06-06
nodejs更新package.json中的dependencies依賴到最新版本的方法
今天小編就為大家分享一篇nodejs更新package.json中的dependencies依賴到最新版本的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
Windows系統(tǒng)下使用Sublime搭建nodejs環(huán)境
最近在研究Nodejs開發(fā),俗話說,工欲善其事,必先利其器,當(dāng)然要找到一款用著順手的編輯器作為開始。這里我們選擇的是Sublime Text 3,除了漂亮的用戶界面,最吸引我的就是它的插件擴展功能以及跨平臺特性。2015-04-04
深入理解Node.js中通用基礎(chǔ)設(shè)計模式
大家在談到設(shè)計模式時最先想到的就是 singletons, observers(觀察者) 或 factories(工廠方法)。本文重點給大家介紹Node.JS一些基礎(chǔ)模式的實現(xiàn)方法,感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2017-09-09
node.js中的fs.appendFileSync方法使用說明
這篇文章主要介紹了node.js中的fs.appendFileSync方法使用說明,本文介紹了fs.appendFileSync方法說明、語法、接收參數(shù)、使用實例和實現(xiàn)源碼,需要的朋友可以參考下2014-12-12

