nodejs爬取博客园的博文

hudeya

　　其实写这篇文章，我是很忐忑的，因为爬取的内容就是博客园的，万一哪个顽皮的小伙伴拿去干坏事，我岂不成共犯了？
　　
　　好了，进入主题。
　　首先，爬虫需要用到的模块有：
　　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%>"><%= cate%></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);
$('.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);
            $('.artic').append(art);
          }
       }
     });
   }
});
　　输入：http://localhost:1314/cnblogs/cate，可以看到：
　　javascript栏目第1页数据

　　第2页数据

后话
　　至此，一个简单的爬虫就完成了。  其实爬虫本身并不难，难点在于分析页面结构，和一些业务逻辑的处理。
　　完整的代码，我已经放在github上，欢迎starn(☆▽☆)。
　　由于是第一次写技术类的博客，文笔有限，才学疏浅，若有不正确的地方，欢迎广大博友指正。
　　参考资料：
　　《SuperAgent中文使用文档》
　　《通读cheerio API》