房價在手，天下我有 –反手就擼一個爬蟲(始)

我母雞啊！發表於2019-03-04

爬蟲

最近身邊的朋友都在看房子，天天沉浸在各大房價網站中，看了幾天和我抱怨還是對杭州的整個房價高低沒有一個具體的概念。優秀且敏感的我聽到了彷彿聞到了一絲需求的味道，既然他們擁有了這麼優秀的我，怎麼能讓他們一直這麼看房！

完成效果如下：

憋說了！你們的房價由我來守護，是時候要拿出我的吃飯的傢伙了。

首先，看一下魔法裝備和任務

很好，我們基於nuxt把基本骨架搭建出來，然後新增我們需要的檔案，最終的整個專案結構如下：

萬事開頭難，我們首先要優化一下nuxt生成的server/index.js

我們要建立一個server類
提取中介軟體並且在server建立的過程中插入我們的中介軟體

程式碼如下：

 import Koa from `koa`;
import { Nuxt, Builder } from `nuxt`;
import R from `ramda`;
import { resolve } from `path`

// Import and Set Nuxt.js options
let config = require(`../nuxt.config.js`)
config.dev = !(process.env === `production`)
const host = process.env.HOST || `127.0.0.1`
const port = process.env.PORT || 4000
const MIDDLEWARES = [`database`,`crawler`,`router`]
const r = path =>resolve(__dirname,path)

class Server {
  constructor(){
    this.app = new Koa();
    this.useMiddleWares(this.app)(MIDDLEWARES)
  }
  useMiddleWares(app){
    //載入不同的中介軟體
    return R.map(R.compose(
        R.map( i =>i(app)),
        require,
        i => `${r(`./middlewares`)}/${i}`
    ))
  }

  async start () {
    // Instantiate nuxt.js
    const nuxt = new Nuxt(config)
    // Build in development
    if (config.dev) {
      const builder = new Builder(nuxt)
      await builder.build()
    } 
    this.app.use(async (ctx, next) => {
      await next()
      ctx.status = 200 // koa defaults to 404 when it sees that status is unset
      return new Promise((resolve, reject) => {
        ctx.res.on(`close`, resolve)
        ctx.res.on(`finish`, resolve)
        nuxt.render(ctx.req, ctx.res, promise => {
          promise.then(resolve).catch(reject)
        })
      })
    })
    this.app.listen(port, host)
    console.log(`Server listening on ` + host + `:` + port) // eslint-disable-line no-console
  }
}

const app = new Server();

app.start()
複製程式碼

這時候我們要在根目錄下新建start.js

專案裡用到了修飾器等es6的語法，要引入babel的解碼，這裡我偷懶了，就直接在start.js裡直接引用。
引入server下的index.js

程式碼如下：

const { resolve } = require(`path`)
const r = path => resolve(__dirname, path)

require(`babel-core/register`)({
    `presets`:[
        `stage-3`,
        [
            `latest-node`, {
                "target": "current"
            }
        ]
    ],
    `plugins`: [
        `transform-decorators-legacy`,
        [`module-alias`, [
          { `src`: r(`./server`), `expose`: `~`},
          { `src`: r(`./server/database`), `expose`: `database`}
        ]]
      ]
})

require(`babel-polyfill`)
require(`./server/index`)
複製程式碼

前面的鋪墊都準備好了，那我們就可以愉快的宰雞了~~~

我們來分析一下頁面

頁面地址
所要爬去的資訊

按照思路，我們現在開始開始動手爬了。

拿出我們的神器：

import cheerio from `cheerio` //node裡的jquery，幫助我們解析頁面
複製程式碼

我們先分析一下思路：

我們先去請求頁面地址，因為資料不止一頁，所以我們需要做一個迴圈，用頁面上的下一頁這個欄位來判讀，是否到了最後一頁。
我們通過class名取拿到頁面上想要的資料。
這裡，我做了一些處理篩選資料，一些資料不全的資料就直接捨去。
資料的細化處理，爬去下來的文字，裡面有很多空格和【】，這些我們都是不想要的。
sleep方法，其實就是一個定時器，我們在每一頁爬取後都休息1秒鐘，然後繼續。避免請求的次數太多，被禁掉ip。

下面舉出一個檔案的例子：

import cheerio from `cheerio`
import rp from `request-promise`
import R from `ramda`
import _ from `lodash`
import { writeFileSync } from `fs`
import { resolve } from `path`;

const sleep = time => new Promise(resolve => setTimeout(resolve,time)) //發動一次休息

let _house = [];
let _area = ``
let _areaDetail= [];
export const gethouse = async ( page = 1,area = ``) =>{
    const options={
        uri:`https://hz.fang.anjuke.com/loupan/${area}/p${page}/`,
        transform: body => cheerio.load(body),
    }
    console.log("正在爬"+options.uri);
    const $ = await rp(options)
    let house = [];
    
    $(".key-list .item-mod").each(function(){ //這裡不能用箭頭函式，會拿不到this
        const name = $(this).find(".infos .lp-name .items-name").text();
        const adress =  $(this).find(".address .list-map").text();
        const huxing = $(this).find(".huxing").text();
        const favorPos = $(this).find(".favor-pos .price-txt").text();
        const aroundPrice = $(this).find(".favor-pos .around-price").text();
        house.push({
            name,
            huxing,
            favorPos,
            aroundPrice,
            adress
        })
    })

    //細化處理
    const fn = R.compose(
        R.map((house) =>{
            const r1 = house.huxing.replace(/s+/g,""); //去掉空格
            const r2 = house.aroundPrice.replace(/s+/g,"");
            const index1 = r2.indexOf("價");
            const index2 = r2.lastIndexOf("/");
            const price = r2.slice(index1+1,index2-1)
            const reg = /[^[]*[(.*)][^]]*/;
            const r3 = house.adress.match(reg);
            const i = house.adress.lastIndexOf("]")+1;
            house.adress = house.adress.slice(i).replace(/s+/g,"");
            house.huxing = r1;
            house.aroundPrice = price;
            house.area = r3[1]

            return house
        }),
        R.filter(house => house.name && house.adress && house.huxing && house.favorPos && house.aroundPrice) //判斷資料是否齊全，欄位不全則省去
    )

        house = fn(house);
        _house = _.union(_house,house)
        
    
    if($(`.next-page`).attr(`href`)){
        //writeFileSync("./static/House.json",JSON.stringify(_house,null,2),`utf-8`)
        console.log(`${area}共有${_house.length}條資料`)
        await sleep(1000);  
        page++;
        await gethouse(page,_area)
    }else{
        console.log("爬完了！"+_house.length)

        return _house
    }

}

//拿到了地區的分割槽，現在去檢索每個分割槽下的房價
export const getAreaDetail = async () =>{
    const area = require(resolve(__dirname,`../database/json/AreaDetail.json`))
    for(let i = 0; i<area.length; i++){
        let areaDetail = area[i][`areaDetail`];
        _areaDetail = _.union(_areaDetail,areaDetail)
        for(let j = 0; j< areaDetail.length; j++){
            _house=[]
            console.log(`正在爬取${areaDetail[j].text}`)
            _area = areaDetail[j]._id
            console.log(_area)
            await gethouse(1,_area)
            if(_house.length >0){
                areaDetail[j][`house`] = _house
            }
        }
    }
    writeFileSync("./server/database/json/detailHouse.json",JSON.stringify(area,null,2),`utf-8`)  
}

複製程式碼

這時候middleware的檔案裡新增crawler.js

這裡引入crawler檔案下的爬蟲邏輯, 然後去執行裡面的方法

程式碼如下：

export const database = async app =>{
    /**
     * 一次引入需要爬取資料的方法
     */
    const area = require(`../crawler/area`)
    const house = require(`../crawler/house`)
    const areaHouse = require(`../crawler/areaHouse`)
    const detailhouse = require(`../crawler/detailHouse`)
    /**
     * 如果本地沒有json檔案，對應解開註釋進行資料的爬去
     */
    // await area.getarea()
    // await area.getAreaDetail()
    // await house.gethouse()
    // await areaHouse.getAreaDetail()
    // await detailhouse.getAreaDetail()
}
複製程式碼

這時候你就可以愉快的開到database/json下出現你爬到的資料啦～

這個時候我沒有急著去把資料入庫，而是把拿到的json先去用echart渲染了一遍
我對echart裡的api不是很熟悉，先拿json練練手，看需要的資料是哪一些
我在這裡把前端的程式碼完成了，對於後面就只需要把非同步請求寫好就行了，感覺這樣心裡有底一些
這裡還需要注意，nuxt裡引入第三發外掛的寫法，我是直接開了一個plugins檔案去管理第三方的外掛

程式碼如下：

根目錄nuxt.config.js

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: `starter`,
    meta: [
      { charset: `utf-8` },
      { name: `viewport`, content: `width=device-width, initial-scale=1` },
      { hid: `description`, name: `description`, content: `Nuxt.js project` }
    ],
    link: [
      { rel: `icon`, type: `image/x-icon`, href: `/favicon.ico` }
    ]
  },
  /*
  ** Global CSS
  */
  css: [`~static/css/main.css`],
  /*
  ** Customize the progress-bar color
  */
  loading: { color: `#3B8070` },
  /*
   ** Build configuration
   */
  build: {
    /*
     ** Run ESLINT on save
     */
    extend (config, ctx) {
      // if (ctx.isClient) {
      //   config.module.rules.push({
      //     enforce: `pre`,
      //     test: /.(js|vue)$/,
      //     loader: `eslint-loader`,
      //     exclude: /(node_modules)/
      //   })
      // }
    },
    vendor: [`~/plugins/echat`]
  },
  plugins: [`~/plugins/echat`]
}

複製程式碼

plugins/echart.js

import Vue from `vue`
import echarts from `echarts`
Vue.prototype.$echarts = echarts

複製程式碼

page／minHouse.vue

<template>
<div>
  <section class="container">
     <a @click="turnBack" class="back">返回</a>
    <div id="myChart" :style="{width: `auto`, height: `300px`}"></div>
  </section>
</div>
</template>

<script>
  import { mergeSort } from `../util/index`
  import Footer from `../components/layouts/Footer`
  import Header from `../components/layouts/Header`
  import {
    getAreaList,
    getAreaHouseList,
    getDetailList
  } from `../serverApi/area`

  export default {
    name: `hello`,
    data() {
      return {
        xAxis: [], //x軸的資料
        rate: [], //y軸的資料
        AreaHouse: [], //全部資料
        myChart:``, //chart
        _id:[],
        detail:[]
      }
    },
    created() {
    this.getAreaHouse()
    },
    mounted() {
    /**
    *基於準備好的dom，初始化echarts例項
    */
      this.myChart = this.$echarts.init(document.getElementById(`myChart`))
      this.clickBar()
    },
    methods: {
      /**
      * 返回邏輯
       */
      turnBack(){
        this.formateData(this.AreaHouse);
        this.drawLine()
      },
      /**
      * 點選bar的互動
       */
      clickBar(){
        let that = this
        this.myChart.on(`click`,function(params){
          ...
        })
      },
      /**
       *獲取小區域內房價
       */
      async getDetail({param}){
        await getDetailList(param).then((data)=>{
            if(data.code === 0){
            this.detail = data.area.areaDetail;
            this.formateData(this.detail);
            this.drawLine()
          }
        })
        
      },
      /**
       *獲取大區域的房價
       */
      async getAreaHouse(){
        await getAreaHouseList().then((data)=>{
          if(data.code === 0){
            this.AreaHouse = data.areaHouse;
            this.formateData(this.AreaHouse);
            this.drawLine()
          }
        })
        
      },
      /**
      * 資料處理，對資料裡的價格排序
       */
      formateData(data) {
        let textAry = [],_id=[],rate=[];
        for (let i = 0; i < data.length; i++) {
          textAry.push(data[i][`text`])
          _id.push(data[i][`_id`])
          let sortAry = mergeSort(data[i][`house`])
          data[i][`house`] = sortAry
          rate.push(sortAry[0][`aroundPrice`])
        }
        this.xAxis = textAry
        this._id = _id
        this.rate = rate
      },
      drawLine() {
      /** 
      * 繪製圖表
      */
        ...
    },
    components:{
       `my-footer`: Footer,
       `my-header`: Header
     }
  }
</script>


複製程式碼

到這裡，我們這個專案完成一半了，剩下就是路由的提取，介面的定義和json的資料入庫。
休息一下，優秀的你看到(做到)這裡，簡直要為你鼓掌。不如。。。

啊哈哈哈哈哈哈哈哈哈哈哈哈～

房價在手，天下我有 --反手就擼一個爬蟲(始)
2018-07-30
爬蟲
房價在手，天下我有 --反手就擼一個爬蟲(終)
2018-07-30
爬蟲
【Flutter高階玩法-shape】Path在手，天下我有
2020-03-06
Flutter
擼個爬蟲，爬取電影種子
2019-05-11
爬蟲
跳錶在手天下我有之ConcurrentSkipListMap
2018-01-05
學透著13個爬蟲，這天下將沒有你爬不到的資料！
2019-01-12
爬蟲
我的第一個 scrapy 爬蟲
2019-02-16
爬蟲
從零開始寫一個node爬蟲(一)
2019-04-09
爬蟲
爬蟲——爬取貴陽房價（Python實現）
2022-02-09
爬蟲Python
我的第一篇部落格（從爬蟲開始）
2020-09-29
爬蟲
擼個有成就感的爬蟲看電影
2018-07-26
爬蟲
我的第一個Python爬蟲——談心得
2018-03-30
Python爬蟲
每天一個爬蟲-learnku我的部落格列表
2021-06-17
爬蟲
[爬蟲手記] 我是如何在3分鐘內開發完一個爬蟲的
2019-05-27
爬蟲
動態IP代理軟體有話說：天下爬蟲框架皆出Scrapy
2018-12-24
爬蟲框架
從零開始，如何用puppeteer寫一個爬蟲指令碼
2018-08-17
爬蟲指令碼
精通Scrapy網路爬蟲【一】第一個爬蟲專案
2021-06-19
爬蟲
【從零開始擼一個App】PKCE
2020-08-28
APP
從零開始的爬蟲專案（一）
2020-04-23
爬蟲
我的爬蟲史
2015-12-07
爬蟲
快速上手——我用scrapy寫爬蟲（一）
2019-02-16
爬蟲
Python爬蟲詳解（一看就懂）
2022-07-15
Python爬蟲
每天一個爬蟲-learnku
2021-06-16
爬蟲
手把手教你用node擼一個簡易的headless爬蟲cli工具
2018-10-17
爬蟲
爬蟲基本功就這？早知道幹爬蟲了
2020-11-21
爬蟲
【從零開始擼一個App】Kotlin
2020-10-10
APPKotlin
python爬蟲初探--第一個python爬蟲專案
2018-05-18
Python爬蟲
爬蟲學習之一個簡單的網路爬蟲
2016-07-11
爬蟲
從零開始寫一個node爬蟲（上）—— 資料採集篇
2021-09-09
爬蟲
爬蟲學習日記（六）完成第一個爬蟲任務
2019-01-10
爬蟲
[爬蟲架構] 如何設計一個分散式爬蟲架構
2018-05-01
爬蟲架構分散式
一個很垃圾的整站爬取--Java爬蟲
2019-01-07
Java爬蟲
分享一個簡易淘寶爬蟲
2017-11-29
爬蟲
從零開始擼一個Fresco之總結
2018-02-02
我去！爬蟲遇到字型反爬，哭了
2021-06-07
爬蟲
Python爬蟲與Java爬蟲有何區別？
2022-06-01
Python爬蟲Java
網路爬蟲——爬蟲實戰（一）
2022-01-29
爬蟲
我爬取了爬蟲崗位薪資，分析後發現爬蟲真香
2020-12-09
爬蟲

房價在手，天下我有 –反手就擼一個爬蟲(始)

首先，看一下魔法裝備和任務

這時候我們要在根目錄下新建start.js

我們來分析一下頁面

我們先分析一下思路：

這時候middleware的檔案裡新增crawler.js

這時候你就可以愉快的開到database/json下出現你爬到的資料啦～

相關文章