使用Node(1)

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

页面分析：

1. 进入http://wcatproject.com/charSearch/

2. 打开Chrome的“开发者工具”，选择“Network”标签。点亮“Record Network Log”按钮

3. 第一步页面操作：在页面中“星数”选择“4”，查询出所有4星角色，观察Network中记录的请求信息。可以看到一个名为“getData.php”的请求，如图所示：

alt=getData请求查看

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和角色名称的数组内容

alt=getData返回内容格式

4.6 在“开发者工具”中选择“Elements”标签，点击左上角的放大镜，将鼠标移到下方伙伴的头像部分点击鼠标左键，可以看到这块的HTML结构。可以看到每个角色的链接的规则为char/角色id

alt=角色链接查看

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({

// 请求的表单信息Form data

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 : [‘活動限定’,‘限定角色’,‘聖誕限定’,‘正月限定’,‘黑貓限定’,‘中川限定’,‘茶熊限定’,‘夏日限定’] })

// Http请求的Header信息

.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);

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
-1715827897444)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！