Nodejs爬蟲實戰項目之鏈家

noONE 發布于2019-08-22 17:10 / 1040人閱讀

摘要：很基礎，不喜勿噴轉載注明出處爬蟲實戰項目之鏈家效果圖思路爬蟲究竟是怎么實現的通過訪問要爬取的網站地址，獲得該頁面的文檔內容，找到我們需要保存的數據，進一步查看數據所在的元素節點，他們在某方面一定是有規律的，遵循規律，操作，保存數據。

說明

作為一個前端界的小學生，一直想著自己做一些項目向全棧努力。
愁人的是沒有后臺，搜羅之后且學會了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

云服務器 GPU云服務器 nodejs實戰爬蟲實戰網絡爬蟲實戰項目實戰

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94926.html

Nodejs爬蟲實戰項目之鏈家

摘要：很基礎，不喜勿噴轉載注明出處爬蟲實戰項目之鏈家效果圖思路爬蟲究竟是怎么實現的通過訪問要爬取的網站地址，獲得該頁面的文檔內容，找到我們需要保存的數據，進一步查看數據所在的元素節點，他們在某方面一定是有規律的，遵循規律，操作，保存數據。說明作為一個前端界的小學生，一直想著自己做一些項目向全棧努力。愁人的是沒有后臺，搜羅之后且學會了nodejs和express寫成本地的接口給前端頁面調用...

MartinDai 2019-06-26 17:39 評論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
nodejs爬蟲項目實戰

摘要：四爬蟲功能制作是來使用的庫，它的使用方法與差不多，我們通過它發起請求，在回調函數中輸出結果。第一步得到一個的實例第二步定義監聽事件的回調函數。這篇文章主要介紹了NodeJS制作爬蟲的全過程，包括項目建立，目標網站分析、使用superagent獲取源數據、使用cheerio解析、使用eventproxy來并發抓取每個主題的內容等方面，有需要的小伙伴參考下吧。showImg(http:/...

xcold 2019-08-19 18:32 評論0 收藏0