成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Nodejs爬蟲實戰(zhàn)項目之鏈家

noONE / 1060人閱讀

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

說明

作為一個前端界的小學生，一直想著自己做一些項目向全棧努力。
愁人的是沒有后臺，搜羅之后且學會了nodejs和express寫成本地的接口給前端頁面調(diào)用。
可是可是，數(shù)據(jù)從哪里來？
有人說，“ mockjs去生成！”
ok，引入了mock，循環(huán)生成一些random數(shù)據(jù)，
列表成型了，也可以loading more了，Table行數(shù)據(jù)填滿了，也可以增刪改查了，曲線的繪制也從原來的一條平行線變得跌宕起伏了。
但是，那畢竟是假數(shù)據(jù)。
要想拿到真實數(shù)據(jù)，還是得上“蜘蛛網(wǎng)”，用實戰(zhàn)小小的體驗一把。
很基礎(chǔ)，不喜勿噴...
轉(zhuǎn)載注明出處：Nodejs爬蟲實戰(zhàn)項目之鏈家

效果圖

思路

1.爬蟲究竟是怎么實現(xiàn)的？
通過訪問要爬取的網(wǎng)站地址，獲得該頁面的html文檔內(nèi)容，找到我們需要保存的數(shù)據(jù)，進一步查看數(shù)據(jù)所在的元素節(jié)點，他們在某方面一定是有規(guī)律的，遵循規(guī)律，操作DOM，保存數(shù)據(jù)。例如：訪問鏈家新房樓盤

首先，看到這樣一個列表，我們需要的數(shù)據(jù)無非就是樓盤的
圖片，鏈接地址，名稱，位置，房型，建筑面積，特色，類型，售價...

接下來，按F12看一看這些數(shù)據(jù)都在哪里

可以看到他們都存放在一個一個的li里，
再找一找圖片的位置

對于這樣一頁的十個li，每一個圖片我們都可以通過".house-lst .pic-panel img"找到，所以我們在代碼就按這個方式找到圖片元素，而且一次能找到十個，遍歷存放。
其他就不找了，如果找不到可以通過源碼聯(lián)系著想一想為什么這么做？

2.怎么爬取所有頁的全部數(shù)據(jù)呢？
按照剛才的方法，我們完全可以爬到第一頁的數(shù)據(jù)保存下來，但是要想爬到所有頁的數(shù)據(jù)，我們還需要找到頁碼之間的規(guī)律，下面我試著訪問第二頁，看看有什么幺蛾子？



在原有路徑的基礎(chǔ)上，循環(huán)加入/pg{i}/不就OK了嘛？

技術(shù)棧

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

前端：React+React-Router(v4)+Ant-design+百度地圖+Echarts(后續(xù)添加)

交互：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編寫后臺服務(wù)
看了效果就會知道，爬取過程是一頁一頁的爬，而且是爬完這一頁才會爬下一頁。如果不這么做，他會忽略爬取的時間，直接顯示所有頁的爬取提示并說明爬取完成，其實接下來的時間他還在繼續(xù)爬，這樣我們并不知道什么時候結(jié)束，怎么通知前端去顯示爬取的進度呢？所以這里要使用ES7的 async/await。
傳送門：體驗異步的終極解決方案-ES7的Async/Await

三、 前端部分
1.安裝依賴包

npm install --save react-router antd

2.配置環(huán)境
Create-react-app+Antd+Less配置

3.路由和組件
整體布局就是頭部導航欄 + 內(nèi)容 + 底部
頭尾是公共的，內(nèi)容部分通過兩個路由指向兩個組件。

//路由導出
import Map from "../components/Map";
import Chart from "../components/Chart";

export default [
    {
        path: "/",
        name: "地圖",
        component: Map
    },
    {
        path: "/page/Chart",
        name: "數(shù)據(jù)分析",
        component: Chart
    }
]
//路由渲染

      
            {routers.map((route, i) => {
                  return 
            })}
      

//路由導航

  {routers.map(function (route, i) {
      return (
          
            
              {route.name}
            
          
      )
    })}

4.socket.io通信
實時通信方式，用于監(jiān)測后臺抓取進度。

        //點擊抓一下，通知后臺要抓數(shù)據(jù)了
        socket.emit("request", "收到抓取請求...");
        //監(jiān)聽后臺的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使用問題
百度地圖對開發(fā)者免費開放接口，首先要申請秘鑰
然后然后使用傳送技能
傳送門：當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.數(shù)據(jù)分析部分有空會用Echarts完善。

總結(jié)

很基礎(chǔ)的爬蟲入門示例，但能把基礎(chǔ)的事情做好不容易。
說明的過程中并沒提及多少代碼，主要著重一些思路和如何實現(xiàn)，代碼可以去github上down一下，互相學習交流。
辦法總比問題多，雖然有解決不完的BUG，但也有對應(yīng)的法則。

源碼

Github

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94926.html

相關(guān)文章

  • Nodejs爬蟲實戰(zhàn)項目之鏈家

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

    MartinDai 評論0 收藏0

  • 23個Python爬蟲開源項目代碼，包含微信、淘寶、豆瓣、知乎、微博等

    摘要：今天為大家整理了個爬蟲項目。地址新浪微博爬蟲主要爬取新浪微博用戶的個人信息微博信息粉絲和關(guān)注。代碼獲取新浪微博進行登錄，可通過多賬號登錄來防止新浪的反扒。涵蓋鏈家爬蟲一文的全部代碼，包括鏈家模擬登錄代碼。支持微博知乎豆瓣。 showImg(https://segmentfault.com/img/remote/1460000018452185?w=1000&h=667); 今天為大家整...

    jlanglang 評論0 收藏0

  • 入門Python數(shù)據(jù)分析最好的實戰(zhàn)項目（一）

    摘要：入門數(shù)據(jù)分析最好的實戰(zhàn)項目二數(shù)據(jù)初探首先導入要使用的科學計算包可視化以及機器學習包。檢查缺失值情況發(fā)現(xiàn)了數(shù)據(jù)集一共有條數(shù)據(jù)，其中特征有明顯的缺失值。 作者：xiaoyu 微信公眾號：Python數(shù)據(jù)科學 知乎：python數(shù)據(jù)分析師 目的：本篇給大家介紹一個數(shù)據(jù)分析的初級項目，目的是通過項目了解如何使用Python進行簡單的數(shù)據(jù)分析。數(shù)據(jù)源：博主通過爬蟲采集的鏈家全網(wǎng)北京二手房數(shù)據(jù)（...

    gitmilk 評論0 收藏0

  • 入門Python數(shù)據(jù)分析最好的實戰(zhàn)項目（一）

    摘要：入門數(shù)據(jù)分析最好的實戰(zhàn)項目二數(shù)據(jù)初探首先導入要使用的科學計算包可視化以及機器學習包。檢查缺失值情況發(fā)現(xiàn)了數(shù)據(jù)集一共有條數(shù)據(jù)，其中特征有明顯的缺失值。 作者：xiaoyu 微信公眾號：Python數(shù)據(jù)科學 知乎：python數(shù)據(jù)分析師 目的：本篇給大家介紹一個數(shù)據(jù)分析的初級項目，目的是通過項目了解如何使用Python進行簡單的數(shù)據(jù)分析。數(shù)據(jù)源：博主通過爬蟲采集的鏈家全網(wǎng)北京二手房數(shù)據(jù)（...

    Cruise_Chan 評論0 收藏0

  • nodejs爬蟲項目實戰(zhàn)

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

    xcold 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<