Nodejs爬虫实战项目之链家

MartinDai 发布于2019-06-26 17:39 / 3134人阅读

摘要：很基础，不喜勿喷转载注明出处爬虫实战项目之链家效果图思路爬虫究竟是怎么实现的通过访问要爬取的网站地址，获得该页面的文档内容，找到我们需要保存的数据，进一步查看数据所在的元素节点，他们在某方面一定是有规律的，遵循规律，操作，保存数据。

说明

作为一个前端界的小学生，一直想着自己做一些项目向全栈努力。
愁人的是没有后台，搜罗之后且学会了nodejs和express写成本地的接口给前端页面调用。
可是可是，数据从哪里来？
有人说，“ mockjs去生成！”
ok，引入了mock，循环生成一些random数据，
列表成型了，也可以loading more了，Table行数据填满了，也可以增删改查了，曲线的绘制也从原来的一条平行线变得跌宕起伏了。
但是，那毕竟是假数据。
要想拿到真实数据，还是得上“蜘蛛网”，用实战小小的体验一把。
很基础，不喜勿喷...
转载注明出处：Nodejs爬虫实战项目之链家

效果图

思路

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

首先，看到这样一个列表，我们需要的数据无非就是楼盘的
图片，链接地址，名称，位置，房型，建筑面积，特色，类型，售价...

接下来，按F12看一看这些数据都在哪里

可以看到他们都存放在一个一个的li里，
再找一找图片的位置

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

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

在原有路径的基础上，循环加入/pg{i}/不就OK了嘛？

技术栈

后台：Nodejs+express+mongodb(mongoose)+superagent+cherrio

前端：React+React-Router(v4)+Ant-design+百度地图+Echarts(后续添加)

交互：express API+socket.io

步骤

一、新建项目

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

二、后台部分

1.安装依赖包

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

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

三、前端部分
1.安装依赖包

npm install --save react-router antd

2.配置环境
Create-react-app+Antd+Less配置

3.路由和组件
整体布局就是头部导航栏 + 内容 + 底部
头尾是公共的，内容部分通过两个路由指向两个组件。

//路由导出
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}
            
          
      )
    })}

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

5.百度地图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原始的字符串拼接，要细心，还挺复杂的。

6.数据分析部分有空会用Echarts完善。

总结

很基础的爬虫入门示例，但能把基础的事情做好不容易。
说明的过程中并没提及多少代码，主要着重一些思路和如何实现，代码可以去github上down一下，互相学习交流。
办法总比问题多，虽然有解决不完的BUG，但也有对应的法则。

源码

Github

私有云专线服务 nodejs实战爬虫实战网络爬虫实战项目实战

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/19249.html

Nodejs爬虫实战项目之链家

摘要：很基础，不喜勿喷转载注明出处爬虫实战项目之链家效果图思路爬虫究竟是怎么实现的通过访问要爬取的网站地址，获得该页面的文档内容，找到我们需要保存的数据，进一步查看数据所在的元素节点，他们在某方面一定是有规律的，遵循规律，操作，保存数据。说明作为一个前端界的小学生，一直想着自己做一些项目向全栈努力。愁人的是没有后台，搜罗之后且学会了nodejs和express写成本地的接口给前端页面调用...

noONE 2019-08-22 17:10 评论0 收藏0
23个Python爬虫开源项目代码，包含微信、淘宝、豆瓣、知乎、微博等

摘要：今天为大家整理了个爬虫项目。地址新浪微博爬虫主要爬取新浪微博用户的个人信息微博信息粉丝和关注。代码获取新浪微博进行登录，可通过多账号登录来防止新浪的反扒。涵盖链家爬虫一文的全部代码，包括链家模拟登录代码。支持微博知乎豆瓣。 showImg(https://segmentfault.com/img/remote/1460000018452185?w=1000&h=667); 今天为大家整...

jlanglang 2019-07-31 10:09 评论0 收藏0
入门Python数据分析最好的实战项目（一）

摘要：入门数据分析最好的实战项目二数据初探首先导入要使用的科学计算包可视化以及机器学习包。检查缺失值情况发现了数据集一共有条数据，其中特征有明显的缺失值。作者：xiaoyu 微信公众号：Python数据科学知乎：python数据分析师目的：本篇给大家介绍一个数据分析的初级项目，目的是通过项目了解如何使用Python进行简单的数据分析。数据源：博主通过爬虫采集的链家全网北京二手房数据（...

gitmilk 2019-07-30 16:56 评论0 收藏0
入门Python数据分析最好的实战项目（一）

摘要：入门数据分析最好的实战项目二数据初探首先导入要使用的科学计算包可视化以及机器学习包。检查缺失值情况发现了数据集一共有条数据，其中特征有明显的缺失值。作者：xiaoyu 微信公众号：Python数据科学知乎：python数据分析师目的：本篇给大家介绍一个数据分析的初级项目，目的是通过项目了解如何使用Python进行简单的数据分析。数据源：博主通过爬虫采集的链家全网北京二手房数据（...

Cruise_Chan 2019-06-26 18:29 评论0 收藏0
利用PHP实现《剑指 offer》之链表（数据结构与算法实战）

摘要：一定要认真看分析注释题目要求题目描述输入一个链表，从尾到头打印链表每个节点的值。分析因为链表只有知道当前结点才能知道下一结点，所以不可能直接从后往前打印。一定要认真看分析 | 注释 | 题目要求 Question 1 题目描述：输入一个链表，从尾到头打印链表每个节点的值。分析：因为链表只有知道当前结点才能知道下一结点，所以不可能直接从后往前打印。这种逆序的算法（策略）我们常用栈这...

hiYoHoo 2019-06-28 18:48 评论0 收藏0