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

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

)

　　我一直听说有爬行动物之类的东西。查了一下资料，好像也不是很复杂。

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

　　1. 这个爬虫的目标：

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

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

　　

　　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!

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

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

　　工程文件很多，为了简单的处理只修改了三个。(Index.ejs index.js style.css)

　　（1）直接修改路由中的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

　　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/start 访问

　　

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

　　

　　

　　...