hudeya 发表于 2017-2-23 07:50:59

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%>"><%= 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》
页: [1]
查看完整版本: nodejs爬取博客园的博文