js 爬虫抓取网页数据(1.岗位列表的第一页(图)代码分析(组图) )

　　js 爬虫抓取网页数据(1.岗位列表的第一页(图)代码分析(组图)

)

　　爬虫之类的东西我之前一直都听说过，不过稍微看了一下资料，好像也不算太复杂。

　　只知道node.js，然后基于它做一个简单的爬虫。

　　1.这个爬虫目标：

　　从钩子招聘网站中找出“前端开发”职位的信息，分析对应页面，提取职位名称、职位薪资、职位所属公司等具体部分，发布日期等。并显示捕获的信息。

　　初始hook网站的接口信息如下：

　　

　　2.设计方案：

　　爬虫实际上是通过相应的技术来爬取页面上的具体信息。

　　在这里，我们主要抓取上图所示职位列表部分相关的具体职位信息。

　　首先，要爬取，首先要有地址url：

　　%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91?kd=%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F% 91&spc=1&pl=&gj=&xl=&yx=&gx=&st=&labelWords=label&lc=&workAddress=&city=%E5%85%A8%E5%9B%BD&requestId=&pn=1

　　此链接是职位列表首页的网址。

　　通过分析地址的参数部分，我们忽略了选择的其他参数，只看最后一个参数值：pn=1

　　我们的目的是逐页抓取，所以设置为 pn = page;

　　

　　其次，要获取特定信息，爬虫需要特定代表的标识符。

　　这里对页面代码的tag值、class值、id值进行分析。

　　通过 Firebug 审查这个小子集的元素

　　

　　

　　确定将获得什么信息的分析需要处理特定的标识符。

　　3.代码编写：

　　按照预定的计划，考虑到node.js的使用，通过其内置的http模块获取页面信息，通过cheerio.js模块分析DOM，然后转换成json格式的数据，直接从控制台输出或者将json数据再次发送回浏览器显示。

　　（cheerio.js的使用很简单，可以自行搜索详情。最重要的是下面的代码，其余的和jQuery的使用类似。

　　就是先加载页面的数据，形成特定的数据格式，然后通过类似jq的语法解析数据）

　　var cheerio = require('cheerio'),

$ = cheerio.load('Hello world');

$('h2.title').text('Hello there!');

$('h2').addClass('welcome');

$.html();

//=> Hello there!

　　采用快速模块化开发，项目建立后按要求。进入项目目录，执行 npm install 安装所需的依赖。不知道快递的可以看这里

　　爬虫需要cheerio.js，所以另外需要进来，所以另外npm installcheerio

　　有很多项目文件。为简单起见，仅对其中三个进行了修改。(index.ejs index.js style.css)

　　(1）直接修改routes路由中的index.js文件，也是核心部分。

　　看代码吧，注释已经够多了

　　 1 var express = require('express');

2 var router = express.Router();

3 var http = require('http');

4 var cheerio = require('cheerio');

5

6 /* GET home page. */

7 router.get('/', function(req, res, next) {

8 res.render('index', { title: '简单nodejs爬虫' });

9 });

10 router.get('/getJobs', function(req, res, next) { // 浏览器端发来get请求

11 var page = req.param('page'); //获取get请求中的参数 page

12 console.log("page: "+page);

13 var Res = res; //保存，防止下边的修改

14 //url 获取信息的页面部分地址

15 var url = 'http://www.lagou.com/jobs/list_%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91?kd=%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91&spc=1&pl=&gj=&xl=&yx=&gx=&st=&labelWords=label&lc=&workAddress=&city=%E5%85%A8%E5%9B%BD&requestId=&pn=';

16

17 http.get(url+page,function(res){ //通过get方法获取对应地址中的页面信息

18 var chunks = [];

19 var size = 0;

20 res.on('data',function(chunk){ //*敏*感*词*事件 传输

21 chunks.push(chunk);

22 size += chunk.length;

23 });

24 res.on('end',function(){ //数据传输完

25 var data = Buffer.concat(chunks,size);

26 var html = data.toString();

27 // console.log(html);

28 var $ = cheerio.load(html); //cheerio模块开始处理 DOM处理

29 var jobs = [];

30

31 var jobs_list = $(".hot_pos li");

32 $(".hot_pos>li").each(function(){ //对页面岗位栏信息进行处理 每个岗位对应一个 li ,各标识符到页面进行分析得出

33 var job = {};

34 job.company = $(this).find(".hot_pos_r div").eq(1).find("a").html(); //公司名

35 job.period = $(this).find(".hot_pos_r span").eq(1).html(); //阶段

36 job.scale = $(this).find(".hot_pos_r span").eq(2).html(); //规模

37

38 job.name = $(this).find(".hot_pos_l a").attr("title"); //岗位名

39 job.src = $(this).find(".hot_pos_l a").attr("href"); //岗位链接

40 job.city = $(this).find(".hot_pos_l .c9").html(); //岗位所在城市

41 job.salary = $(this).find(".hot_pos_l span").eq(1).html(); //薪资

42 job.exp = $(this).find(".hot_pos_l span").eq(2).html(); //岗位所需经验

43 job.time = $(this).find(".hot_pos_l span").eq(5).html(); //发布时间

44

45 console.log(job.name); //控制台输出岗位名

46 jobs.push(job);

47 });

48 Res.json({ //返回json格式数据给浏览器端

49 jobs:jobs

50 });

51 });

52 });

53

54 });

55

56 module.exports = router;

　　（2）node.js捕获的核心代码就是上面的部分。

　　下一步是展示抓取的数据，所以需要另外一个页面来修改views中的index.ejs模板

　　 1 DOCTYPE html>

2

3

4

5

6

7

8 【nodejs爬虫】 获取拉勾网招聘岗位--前端开发

9 初始化完成 ...

10 点击开始抓取第一页

11

12

13

14

15 数据抓取中 ... 请稍后

16 抓取上一页

17 抓取下一页

18

19

20

21 function getData(str){ //获取到的数据有杂乱..需要把前面部分去掉,只需要data（...... data)

22 if(str){

23 return str.slice(str.lastIndexOf(">")+1);

24 }

25 }

26

27 document.getElementById("btn1").style.visibility = "hidden";

28 document.getElementById("btn2").style.visibility = "hidden";

29 var currentPage = 0; //page初始0

30

31 function cheerFetch(_page){ //抓取数据处理函数

32 if(_page == 1){

33 currentPage = 1; //开始抓取则更改page

34 }

35 $(document).ajaxSend(function(event, xhr, settings) { //抓取中...

36 $(".fetching").css("display","block");

37 });

38 $(document).ajaxSuccess(function(event, xhr, settings) { //抓取成功

39 $(".fetching").css("display","none");

40 });

41 $.ajax({ //开始发送ajax请求至路径 /getJobs 进而作页面抓取处理

42 data:{page:_page}, //参数 page = _page

43 dataType: "json",

44 type: "get",

45 url: "/getJobs",

46 success: function(data){ //收到返回的json数据

47 console.log(data);

48 var html = "";

49 $(".container").empty();

50 if(data.jobs.length == 0){

51 alert("Error2: 未找到数据..");

52 return;

53 }

54 for(var i=0;i 1){

73 document.getElementById("btn1").style.visibility = "visible";

74 document.getElementById("btn2").style.visibility = "visible";

75 }

76 },

77 error: function(){

78 alert("Error1: 未找到数据..");

79 }

80 });

81 }

82

83

84

85

　　（3）当然，对public文件下的style.css进行简单的修改也是style部分不可缺少的

　　body {

padding: 20px 50px;

font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;

}

a {

color: #00B7FF;

cursor: pointer;

}

.container{position: relative;width: 1100px;overflow: hidden;zoom:1;}

.jobs{margin: 30px; float: left;}

.jobs span{ color: green; font-weight: bold;}

.btn{cursor: pointer;}

.fetching{display: none;color: red;}

.footer{clear: both;}

　　基本的变化就是这三个文件。

　　因此，如果要进行测试，可以在新建项目后直接修改对应的三个文件。

　　修改成功后，就可以测试了。

　　3.测试结果

　　1） 先在控制台执行 npm start

　　

　　2) 接下来在浏览器中输入：3000/开始访问

　　

　　3) 点击开始爬取（这里每次抓取15个项目，即原创URL对应15个项目）

　　

　　

　　...