使用Node.js制作爬虫教程

目标分析

目标地址： http://wcatproject.com/charSearch/

抓取内容：抓取所有4星角色的数值数据。如果我们采用手工采集的步骤，需要先进入目标地址，然后选择4星角色的选项，页面下方出现所有4星角色的头像，依次点击每个4星角色头像后会出现角色的详细页面，记录下详细页面中数据。显然这样的做法如果角色一多，手工处理是非常吃力的，所以我们就需要一个自动的脚本去完成这样的动作。大家不妨先手工试试这样的访问步骤，有助于后面的分析和实践。

页面分析：

1. 进入 http://wcatproject.com/charSearch/
2. 打开Chrome的“开发者工具”，选择“Network”标签。点亮“Record Network Log”按钮
3. 第一步页面操作：在页面中“星数”选择“4”，查询出所有4星角色，观察Network中记录的请求信息。可以看到一个名为“getData.php”的请求，如图所示：
4. getData.php中的重要信息记录（通过nodejs发起请求时候需要）
   4.1 Request URL 我们需要调用的请求地址: http://wcatproject.com/charSearch/function/getData.php
   4.2 Request Method 该请求的类型:POST
   4.3 Request Header 请求的头信息
   4.4 Form Data 请求的表单信息
   4.5 Response 和 Preview 中可以看到返回的内容和格式化内容，可以看到返回的是一个角色ID和角色名称的数组内容
   4.6 在“开发者工具”中选择“Elements”标签，点击左上角的放大镜，将鼠标移到下方伙伴的头像部分点击鼠标左键，可以看到这块的HTML结构。可以看到每个角色的链接的规则为 char/角色id
5. 第二部页面操作：点击页面下面查询出的4星角色的头像，进入到角色详细页面，观察Network中记录的请求信息。可以找到一个名为“SS0441”的请求，如上步骤，记录下相关信息，由于这个请求的 Request Method 为GET，因此没有Form Data信息。

最后在理一下思路，我们的脚本过程如下：

1. 发起getData.php请求，获得所有4星角色的ID
2. 依次循环根据 char/角色id 规则访问各个角色的详细页面，并解析其中需要的数据并按我们想要的方式存储起来

准备工作

• Node.js环境搭建
• 一款具有代码高亮功能文本编辑器，如Sublime Text等
• 使用nvm工具将Node.js版本设置为5.0.0

创建工程

• 选择一个目录，新建一个准备存放工程内容的文件夹demo。
• 打开终端（windows机器打开CMD命令行），输入 npm init ，根据提示，逐步输入工程信息，具体示例如下

$ npm init This utility will walk you through creating a package.json file.   It only covers the most common items, and tries to guess sensible defaults.  See `npm help json` for definitive documentation on these fields   and exactly what they do.  Use `npm install <pkg> --save` afterwards to install a package and   save it as a dependency in the package.json file.  Press ^C at any time to quit.   name: (workspace) demo   version: (1.0.0)   description: 爬虫案例   entry point: (index.js)   test command:   git repository:   keywords:   author: 程序猿DD   license: (ISC)   About to write to /Users/diyongchao/Documents/workspace/package.json:  {   "name": "demo",   "version": "1.0.0",   "description": "爬虫案例",   "main": "index.js",   "scripts": {     "test": "echo /"Error: no test specified/" && exit 1"   },   "author": "程序猿DD",   "license": "ISC" }   Is this ok? (yes) yes   $ 

• 此时文件夹下生成了一个 package.json 文件，其中包含了工程的基本信息以及引用的框架等信息

框架引入

• superagent ：发起http请求
• cheerio ：解析http返回的html内容
• async ：多线程并发控制

安装命令 npm install --save PACKAGE_NAME ，执行以下三条命令后，工程目录下多了一个 node_modules 目录，该目录就是引入的框架内容。

$npm install --save superagent $npm install --save cheerio $npm install --save async 

编码过程

工程目录下，创建index.js

var superagent = require('superagent');   var cheerio = require('cheerio');   var async = require('async');  console.log('爬虫程序开始运行......');  // 第一步，发起getData请求，获取所有4星角色的列表 superagent       .post('http://wcatproject.com/charSearch/function/getData.php')     .send({ info: 'isempty', star : [0,0,0,1,0], job : [0,0,0,0,0,0,0,0],          type : [0,0,0,0,0,0,0], phase : [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],         cate : [0,0,0,0,0,0,0,0,0,0],          phases : ['初代', '第一期','第二期','第三期','第四期','第五期','第六期',             '第七期','第八期','第九期','第十期','第十一期','第十二期','第十三期','第十四期', '第十五期', '第十六期'],         cates : ['活動限定','限定角色','聖誕限定','正月限定','黑貓限定','中川限定','茶熊限定','夏日限定'] })        .set('Accept', 'application/json, text/javascript, */*; q=0.01')        .set('Content-Type','application/x-www-form-urlencoded; charset=UTF-8')     .end(function(err, res){            // 请求返回后的处理         // 将response中返回的结果转换成JSON对象            var heroes = JSON.parse(res.text);                // 并发遍历heroes对象         async.mapLimit(heroes, 1,              function (hero, callback) {             // 对每个角色对象的处理逻辑                 var heroId = hero[0];   // 获取角色数据第一位的数据，即：角色id                 fetchInfo(heroId, callback);             },              function (err, result) {                 console.log('抓取的角色数：' + heroes.length);             }         );      });   // 获取角色信息 var concurrencyCount = 0; // 当前并发数记录   var fetchInfo = function(heroId, callback){       concurrencyCount++;     // console.log("...正在抓取"+ heroId + "...当前并发数记录：" + concurrencyCount);      // 根据角色ID，进行详细页面的爬取和解析     superagent         .get('http://wcatproject.com/char/' + heroId)         .end(function(err, res){               // 获取爬到的角色详细页面内容             var $ = cheerio.load(res.text,{decodeEntities: false});                              // 对页面内容进行解析，以收集队长技能为例，此处可根据自己的需要进行写数据等操作来记录收集的信息             console.log(heroId + '/t' + $('.leader-skill span').last().text())              concurrencyCount--;             callback(null, heroId);         });  }; 

工程目录下执行命令， node index.js ，抓取程序开始执行

$ node index.js 爬虫程序开始运行...... SS0441    平衡型傷害增加 (20%)   NS1641    防禦型的移速增加 (20%)   SS1141    技術型的技能傷害增加 (20%)   SS1041    攻擊型的SP增加 (15%)   SS0941    攻擊型傷害增加 (20%)   SS0841    劍士減傷 (10%) / 技術型減傷 (15%)   LS0941    全員傷害增加 (15%)   LS1441    劍士傷害增加 (10%)  /  技術型傷害增加 (15%)   SS0741    劍士雷屬性傷害增加 (50%)   SS0641    攻擊型傷害增加 (20%)   NS1741    技能型的SP消費減少 (15%)   NS1141    全員傷害增加 (15%)   NS0031-A    獲得的魂增加 (20%)   SS0501    技術型傷害增加 (20%)   SS0141    劍士傷害增加 (20%)   SS0241    全員傷害增加 (15%)   

后记

如果觉得爬的慢，可以通过修改 async.mapLimit(heroes, 1, function (hero, callback) 中的1来调整并发数量，同时也可以去掉// console.log("...正在抓取"+ heroId + "...当前并发数记录：" + concurrencyCount);的注释，用来观察执行过程中并发数。

如果对示例有疑问，欢迎留言交流^_^