Nodejs爬虫实战项目之链家 Nodejs爬虫实战项目之链家

效果图开始爬.gif
文章图片
爬完.gif 查询数据库.gif 百度地图标记.gif 思路

爬虫究竟是怎么实现的？
通过访问要爬取的网站地址，获得该页面的html文档内容，找到我们需要保存的数据，进一步查看数据所在的元素节点，他们在某方面一定是有规律的，遵循规律，操作DOM，保存数据。例如：访问链家新房楼盘

文章图片
链家新房楼盘.png 首先，看到这样一个列表，我们需要的数据无非就是楼盘的
图片，链接地址，名称，位置，房型，建筑面积，特色，类型，售价...
接下来，按F12看一看这些数据都在哪里

文章图片
检查元素.png 可以看到他们都存放在一个一个的li里，
再找一找图片的位置

文章图片
找图片.png 对于这样一页的十个li，每一个图片我们都可以通过'.house-lst .pic-panel img'找到，所以我们在代码就按这个方式找到图片元素，而且一次能找到十个，遍历存放。
其他就不找了，如果找不到可以通过源码联系着想一想为什么这么做？

怎么爬取所有页的全部数据呢？
按照刚才的方法，我们完全可以爬到第一页的数据保存下来，但是要想爬到所有页的数据，我们还需要找到页码之间的规律，下面我试着访问第二页，看看有什么幺蛾子？

文章图片
pg2.png

文章图片
pg3.png

文章图片
pg37.png
在原有路径的基础上，循环加入/pg{i}/不就OK了嘛？

技术栈

后台：Nodejs+express+mongodb(mongoose)+superagent+cherrio
前端：React+React-Router(v4)+Ant-design+百度地图
交互：express API+socket.io

步骤一、新建项目

npm install -g create-react-app
create-react-app nodejs-spider
cd nodejs-spider

二、后台部分

安装依赖包

npm install --save express mongodb mongoose superagent cherrio socket.io body-parser

新建server.js编写后台服务
看了效果就会知道，爬取过程是一页一页的爬，而且是爬完这一页才会爬下一页。如果不这么做，他会忽略爬取的时间，直接显示所有页的爬取提示并说明爬取完成，其实接下来的时间他还在继续爬，这样我们并不知道什么时候结束，怎么通知前端去显示爬取的进度呢？所以这里要使用ES7的 async/await。
传送门：体验异步的终极解决方案-ES7的Async/Await

三、前端部分

安装依赖包

npm install --save react-router antd

配置环境
Create-react-app+Antd+Less配置
路由和组件
整体布局就是头部导航栏 + 内容 + 底部
头尾是公共的，内容部分通过两个路由指向两个组件。

//路由导出 import Map from '../components/Map'; import Chart from '../components/Chart'; export default [ { path: '/', name: '地图', component: Map }, { path: '/page/Chart', name: '数据分析', component: Chart } ]

//路由渲染 {routers.map((route, i) => { return })}

//路由导航 {routers.map(function (route, i) { return ( {route.name} ) })}

socket.io通信
实时通信方式，用于监测后台抓取进度。

//点击抓一下，通知后台要抓数据了 socket.emit('request', '收到抓取请求...'); //监听后台的progress信息，实时刷新进度 socket.on('progress', function (data) { // console.log(data); this.setState({ progress: data.progress, loading: true, }); if(data.progress==='抓取完成！'){ this.setState({ loading: false, }); } }.bind(this));

百度地图api使用问题
百度地图对开发者免费开放接口，首先要申请秘钥
然后然后使用传送技能
传送门：当react框架遇上百度地图，百度地图api示例
注意：
VM10127:1 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
错误的意思是百度地图api中 this.openInfoWindow(infoWindow) 要求的信息窗口对象为appendChild可识别的真实DOM的Node类型，而不是React这种虚拟DOM组件。所以这里只能使用jq原始的字符串拼接，要细心，还挺复杂的。

源码 【Nodejs爬虫实战项目之链家】Github