国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

Nodejs爬蟲(chóng)實(shí)戰(zhàn)項(xiàng)目之鏈家

noONE / 1042人閱讀

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

說(shuō)明

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

效果圖

思路

1.爬蟲(chóng)究竟是怎么實(shí)現(xiàn)的？
通過(guò)訪問(wèn)要爬取的網(wǎng)站地址，獲得該頁(yè)面的html文檔內(nèi)容，找到我們需要保存的數(shù)據(jù)，進(jìn)一步查看數(shù)據(jù)所在的元素節(jié)點(diǎn)，他們?cè)谀撤矫嬉欢ㄊ怯幸?guī)律的，遵循規(guī)律，操作DOM，保存數(shù)據(jù)。例如：訪問(wèn)鏈家新房樓盤(pán)

首先，看到這樣一個(gè)列表，我們需要的數(shù)據(jù)無(wú)非就是樓盤(pán)的
圖片，鏈接地址，名稱(chēng)，位置，房型，建筑面積，特色，類(lèi)型，售價(jià)...

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

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

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

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



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

技術(shù)棧

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

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

交互：express API+socket.io

步驟

一、新建項(xiàng)目

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

二、后臺(tái)部分

1.安裝依賴(lài)包

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

2.新建server.js編寫(xiě)后臺(tái)服務(wù)
看了效果就會(huì)知道，爬取過(guò)程是一頁(yè)一頁(yè)的爬，而且是爬完這一頁(yè)才會(huì)爬下一頁(yè)。如果不這么做，他會(huì)忽略爬取的時(shí)間，直接顯示所有頁(yè)的爬取提示并說(shuō)明爬取完成，其實(shí)接下來(lái)的時(shí)間他還在繼續(xù)爬，這樣我們并不知道什么時(shí)候結(jié)束，怎么通知前端去顯示爬取的進(jìn)度呢？所以這里要使用ES7的 async/await。
傳送門(mén)：體驗(yàn)異步的終極解決方案-ES7的Async/Await

三、 前端部分
1.安裝依賴(lài)包

npm install --save react-router antd

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

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

//路由導(dǎo)出
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 
            })}
      

//路由導(dǎo)航

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

4.socket.io通信
實(shí)時(shí)通信方式，用于監(jiān)測(cè)后臺(tái)抓取進(jìn)度。

        //點(diǎn)擊抓一下，通知后臺(tái)要抓數(shù)據(jù)了
        socket.emit("request", "收到抓取請(qǐng)求...");
        //監(jiān)聽(tīng)后臺(tái)的progress信息，實(shí)時(shí)刷新進(jìn)度
        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使用問(wèn)題
百度地圖對(duì)開(kāi)發(fā)者免費(fèi)開(kāi)放接口，首先要申請(qǐng)秘鑰
然后然后使用傳送技能
傳送門(mén)：當(dāng)react框架遇上百度地圖 ，百度地圖api示例
注意：
VM10127:1 Uncaught TypeError: Failed to execute "appendChild" on "Node": parameter 1 is not of type "Node".
錯(cuò)誤的意思是 百度地圖api中 this.openInfoWindow(infoWindow) 要求的信息窗口對(duì)象為appendChild可識(shí)別的真實(shí)DOM的Node類(lèi)型，而不是React這種虛擬DOM組件。所以這里只能使用jq原始的字符串拼接，要細(xì)心，還挺復(fù)雜的。

6.數(shù)據(jù)分析部分有空會(huì)用Echarts完善。

總結(jié)

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

源碼

Github

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/94926.html

相關(guān)文章

  • Nodejs爬蟲(chóng)實(shí)戰(zhàn)項(xiàng)目之鏈家

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

    MartinDai 評(píng)論0 收藏0

  • 23個(gè)Python爬蟲(chóng)開(kāi)源項(xiàng)目代碼，包含微信、淘寶、豆瓣、知乎、微博等

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

    jlanglang 評(píng)論0 收藏0

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

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

    gitmilk 評(píng)論0 收藏0

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

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

    Cruise_Chan 評(píng)論0 收藏0

  • nodejs爬蟲(chóng)項(xiàng)目實(shí)戰(zhàn)

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

    xcold 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<