nodejs爬取博客園的博文

 

其實寫這篇文章，我是很忐忑的，因為爬取的內容就是博客園的，萬一哪個頑皮的小伙伴拿去干壞事，我豈不成共犯了？

 

好了，進入主題。

 

首先，爬蟲需要用到的模塊有：

express

ejs

superagent （nodejs里一個非常方便的客戶端請求代理模塊）

cheerio （nodejs版的jQuery）

 

前台布局使用bootstrap

分頁插件使用 twbsPagination.js 

 

完整的爬蟲代碼，在我的github中可以下載。主要的邏輯代碼在 router.js 中。

 

1. 爬取某個欄目第1頁的數據

分析過程：

打開博客園的主頁： http://www.cnblogs.com/

左側導航欄里顯示了所有欄目的分類信息，可以在開發者工具中獲取查看這些信息.

 

每個欄目的URL也很有規律，都是 www.cnblogs.com/cate/欄目名稱。 根據這個URL就可以爬取某個欄目第1頁的博文了~

 

下面貼出代碼：

app.js (入口文件)

// 載入模塊
var express = require('express');
var app = express();
var router = require('./router/router');

// 設置模板引擎
app.set('view engine', 'ejs');

// 靜態資源中間件
app.use(express.static('./public'));

// 博客園
app.get('/cnblogs', router.cnblogs);
// 欄目
app.get('/cnblogs/cate/:cate/', router.cnblogs_cate);


app.listen(1314, function(err){
    if(err) console.log('1314端口被占用');
});

 

router.js 

var request = require('superagent');
var cheerio = require('cheerio');

// 欄目
var cate = [
    'java', 'cpp', 'php', 'delphi', 'python', 'ruby',
    'web', 'javascript', 'jquery', 'html5'
];

// 顯示頁面
exports.cnblogs = function(req, res){
    res.render('cnblogs', {
        cate: cate
    });
};

// 爬取欄目數據
exports.cnblogs_cate = function(req, res){

    // 欄目
    var cate = req.params['cate'];

    request
    .get('http://www.cnblogs.com/cate/' + cate)
    .end(function(err, sres){

        var $ = cheerio.load(sres.text);
        var article = [];
        $('.titlelnk').each(function(index, ele){
            var ele = $(ele);
            var href = ele.attr('href'); // 博客鏈接
            var title = ele.text();      // 博客內容
            article.push({
                href: href,
                title: title
            });            
        });
        res.json({
            title: cate,
            cnblogs: article
        });
    });
};

 

cnblogs.ejs 

只貼出核心代碼

<div class="col-lg-6">
          <select class="form-control" id="cate">
            <option value="0">請選擇分類</option>
            <% for(var i=0; i<cate.length; i++){ %>
              <option value="<%= cate[i]%>"><%= cate[i]%></option>
            <% } %>
          </select>
</div>

JS模板

    <script type="text/template" id="cnblogs">
      <ul class="list-group">
          <li class="list-group-item">
            <a href="{{= href}}" target="_blank">{{= title}}</a>
      </ul>
    </script>

Ajax請求

$('#cate').on('change', function(){
 var cate = $(this).val();
 if(cate == 0) return;
 $('.artic').html('');
 $.ajax({
   url: '/cnblogs/cate/' + cate,
   type: 'GET',
   dataType: 'json',
   success: function(data){
     var cnblogs = data.cnblogs;
     for(var i=0; i<cnblogs.length; i++){
       var compiled = _.template($('#cnblogs').html());
       var art = compiled(cnblogs[i]);
       $('.artic').append(art);
     }
   }
 });
});

 

輸入: http://localhost:1314/cnblogs/  ，可以看到， 成功獲取javascript下第1頁數據。

 

2. 分頁功能

以 http://www.cnblogs.com/cate/javascript/ 為例：

首先，分頁的數據是Ajax調用后端接口返回的。

 

chrome的開發者工具中，可以看到，分頁時，會向服務器發送兩個請求，

 PostList.aspx 請求具體某頁的數據.

 load.aspx 返回分頁字符串.

 

我們重點分析 PostList.aspx 這個接口：

 

可以發現 請求方式是POST。

問題的重點是POST請求的數據是如何組裝的？

分析源碼，發現每個分頁字符串都綁定了一個事件 -- aggSite.loadCategoryPostList()

 

查看頁面源碼，發現這個函數定義在 aggsite.js 文件里.

 

也就是下面這個函數.

 

重點是這行代碼， 使用Ajax向后端發送請求.

this.loadPostList("/mvc/AggSite/" + aggSiteModel.ItemListActionName + ".aspx").

分析loadPostList 函數，可以發現POST的數據是變量aggSiteModel的值.

 

而 aggSiteModel 在頁面中的定義：

至此前端的分析告一段落。 我們要做的，就是使用nodejs，模擬瀏覽器發送請求。

 

router.js

exports.cate_page = function(req, res){

    var cate = req.query.cate;
    var page = req.query.page;

    var url = 'http://www.cnblogs.com/cate/' + cate;

    request
    .get(url)
    .end(function(err, sres){

        // 構造POST請求的參數
        var $ = cheerio.load(sres.text);
        var post_data_str = $('#pager_bottom').prev().html().trim();
        var post_data_obj = JSON.parse(post_data_str.slice(post_data_str.indexOf('=')+2, -1));    

        // 分頁接口
        var page_url = 'http://www.cnblogs.com/mvc/AggSite/PostList.aspx';
        // 修改當前頁
        post_data_obj.PageIndex = page; 

        request
        .post(page_url)
        .set('origin', 'http://www.cnblogs.com') // 偽造來源
        .set('referer', 'http://www.cnblogs.com/cate/'+cate+'/') // 偽造referer
        .send(post_data_obj) // POST數據
        .end(function(err, ssres){
            var article = [];
            var $$ = cheerio.load(ssres.text);
            $$('.titlelnk').each(function(index, ele){
                var ele = $$(ele);
                var href = ele.attr('href');
                var title = ele.text();
                article.push({
                    href: href,
                    title: title
                });            
            });
            res.json({
                title: cate,
                cnblogs: article
            });
        });    
    });
};

 

cate.ejs 分頁代碼

$('.pagination').twbsPagination({
  totalPages: 20, // 默認顯示20頁
  startPage: 1,
  visiblePages: 5,
  initiateStartPageClick: false,
  first: '首頁',
  prev: '上一頁',
  next: '下一頁',
  last: '尾頁',
  onPageClick: function(evt, page){
    $.ajax({
      url: '/cnblogs/cate_page?cate=' + cate + '&page=' + page,
      type: 'GET',
      dataType: 'json',
      success: function(data){
        $('.artic').html('');
        var cnblogs = data.cnblogs;
         for(var i=0; i<cnblogs.length; i++){
           var compiled = _.template($('#cnblogs').html());
           var art = compiled(cnblogs[i]);
           $('.artic').append(art);
         }
      }
    });
  }
});

 

輸入：http://localhost:1314/cnblogs/cate，可以看到：

javascript欄目第1頁數據

第2頁數據

 

后話

至此，一個簡單的爬蟲就完成了。  其實爬蟲本身並不難，難點在於分析頁面結構，和一些業務邏輯的處理。

完整的代碼，我已經放在github上，歡迎starn(☆▽☆)。

由於是第一次寫技術類的博客，文筆有限，才學疏淺，若有不正確的地方，歡迎廣大博友指正。

 

參考資料：

《SuperAgent中文使用文檔》

《通讀cheerio API》