作为前端，如何帮帝都的朋友租到合适的房子@慕课网原创_慕课网

在帝都打拼的小伙伴都知道，要租个合适的房子真心不易。中介要收一个月的房租作为中介费。而且很多黑中介打着租房的旗号各种坑蒙拐骗。要想在茫茫帖子中找到真正的房东，宛如大海捞针，同时需要和各路黑中介斗智斗勇。接下来就讲讲我浴血奋战的故事。

那么，How to start? 我们先选一块阵地。58赶集这样的网站，可以说中介占了大多数，地势险峻，易守难攻，果断放弃。闲鱼呢，资源又太少，攻下来的意义也不大，所以也放弃。我把目标放在了豆瓣上。在帝都的童鞋大部分都知道，豆瓣小组里面有很多租房小组，年轻人居多，很多都是转租，但很大一部分是和房东签的合同，省掉了中介费。我大致翻了一下，基本上一天内的更新量能刷到90页，每页25条数据，当然有一些是旧的被顶上来的。这个数据量已经不少了，虽然里面也混杂着大量的中介，但是相对来说比其他地方好很多。

郑重声明：各位在爬取数据的时候一定要控制频率，不要影响网站的正常访问！而且频率过高会被豆瓣干掉，且爬且珍惜！
另外，请详细阅读注释中的内容！

我们先分析一下要抓取页面的结构。以大名鼎鼎的北京租房小组举例。

首先我们点击下方的更多小组讨论切换到列表页面，这样就可以分析页面的分页逻辑了。前后翻几页我们不难发现，豆瓣是利用url后面的参数来实现分页的。比如第一页的url为https://www.douban.com/group/beijingzufang/discussion?start=0,第二页为https://www.douban.com/group/beijingzufang/discussion?start=25,每页25条数据，很清晰明了了吧？

这时候，我们只需要分别获取到每页的数据，然后再做一些过滤，就可以极大减少筛选的时间了。我们选择前二十个页面来作为爬取对象，一方面不会对网站造成影响，另一方面也保证数据尽可能使最新。

好的，重点来了，作为一个前端，我使用node来做抓取，先引入一些必要的依赖。

import fs from 'fs'    // node的文件模块，用于将筛选后的数据输出为html
import path from 'path' // node的路径模块，用于处理文件的路径

//  以下模块非node.js自带模块，需要使用npm安装

// 客户端请求代理模块
import superagent from "superagent"   
// node端操作dom的利器，可以理解成node版jQuery，语法与jQuery几乎一样
import cheerio from "cheerio"   
// 通过事件来决定执行顺序的工具，下面用到时作详解
import eventproxy from 'eventproxy' 
//  async是一个第三方node模块，mapLimit用于控制访问频率
import mapLimit from "async/mapLimit"

然后就可以把我们要抓取的页面整理到一个数组里面了

let ep = new eventproxy()  //  实例化eventproxy

let baseUrl = 'https://www.douban.com/group/beijingzufang/discussion?start=';  
let pageUrls = []  // 要抓取的页面数组

let page = 20  // 抓取页面数量
let perPageQuantity = 25   //  每页数据条数

for (let i = 0; i < page; i++) {
  pageUrls.push({
    url: baseUrl + i * perPageQuantity
  });
}

简单分析下页面的dom结构。页面中的有效数据全在table中，第一个tr是标题，接下来每个tr对应一条数据。然后每个tr下有4个td。分别存放着标题，作者，回应数和最后修改时间。

我们先写个入口函数，访问所有要抓取的页面并保存我们需要的数据。话说，好久不写jQuery都有点手生了。

function start() {
  //  遍历爬取页面
  const getPageInfo = (pageItem, callback) => {
    //  设置访问间隔
    let delay = parseInt((Math.random() * 30000000) % 1000, 10)
    pageUrls.forEach(pageUrl => {
      superagent.get(pageUrl.url)
        // 模拟浏览器
        .set('User-Agent', 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36') 
        //  如果你不乖乖少量爬数据的话，很可能被豆瓣kill掉，这时候需要模拟登录状态才能访问
        // .set('Cookie','')  
        .end((err, pres) => {
          let $ = cheerio.load(pres.text) // 将页面数据用cheerio处理，生成一个类jQuery对象

          let itemList = $('.olt tbody').children().slice(1, 26) // 取出table中的每行数据，并过滤掉表格标题

          // 遍历页面中的每条数据
          for (let i = 0; i < itemList.length; i++) {
            let item = itemList.eq(i).children()

            let title = item.eq(0).children('a').text() || '' // 获取标题
            let url = item.eq(0).children('a').attr('href') || '' // 获取详情页链接
            // let author = item.eq(1).children('a').attr('href').replace('https://www.douban.com/people', '').replace(/\//g, '') || ''  // 获取作者id
            let author = item.eq(1).children('a').text() || '' // 这里改为使用作者昵称而不是id的原因是发现有些中介注册了好多账号，打一枪换个地方。虽然同名也有，但是这么小的数据量下，概率低到忽略不计
            let markSum = item.eq(2).text() // 获取回应数量
            let lastModify = item.eq(3).text() // 获取最后修改时间

            let data = {
              title,
              url,
              author,
              markSum,
              lastModify
            }
            // ep.emit('事件名称', 数据内容)
            ep.emit('preparePage', data) // 每处理完一条数据，便把这条数据通过preparePage事件发送出去，这里主要是起计数的作用
          }
          setTimeout(() => {
            callback(null, pageItem.url);
          }, delay);
        })
    })
  }
}

我们通过mapLimit来控制访问频率，mapLimit的细节参照官方文档。传送门

  mapLimit(pageUrls, 2, function (item, callback) {
    getPageInfo(item, callback);
  }, function (err) {
    if (err) {
      console.log(err)
    }
    console.log('抓取完毕')
  });

简单说一下过滤的策略吧，首先在标题里，过滤掉不合适的地点，以及中介最常用的话术。也可以自己添加想要的关键词，有针对性的进行筛选。然后统计每个作者的发帖数，这里的判断条件是如果每个人发帖数在抓取的页面中出现超过5次以上，则被认为是中介。如果某个帖子的回复量巨大，要么是个旧帖子被顶上来了，要么很可能是有人在不停的刷排名，我这里设置的阈值是100。试想一个正常的房东不会这么丧心病狂的刷存在感，因为好房根本不愁租不出去，很可能是中介每天在刷旧帖子。即便是因为房子比较好所以大家都在围观，那其实你租到的概率已经很小了，所以直接过滤掉。

//  我们设置三个全局变量来保存一些数据
let result = []   //  存放最终筛选结果
let authorMap = {} // 我们以对象属性的方式，来统计每个的发帖数
let intermediary = [] // 中介id列表，你也可以把这部分数据保存起来，以后抓取的时候直接过滤掉！

// 还记得之前的ep.emit()吗，它的每次emit都被这里捕获。ep.after('事件名称',数量,事件达到指定数量后的callback())。
// 也就是说，总共有20*25（页面数*每页数据量）个事件都被捕获到以后，才会执行这里的回调函数
ep.after('preparePage', pageUrls.length * page, function (data) {
    // 这里我们传入不想要出现的关键词，用'|'隔开 。比如排除一些位置，排除中介常用短语
    let filterWords = /押一付一|短租|月付|蛋壳|有房出租|6号线|六号线/ 
    // 这里我们传入需要筛选的关键词，如没有，可设置为空格
    let keyWords = /西二旗/

    // 我们先统计每个人的发帖数，并以对象的属性保存。这里利用对象属性名不能重复的特性实现计数。
    data.forEach(item => {
      authorMap[item.author] = authorMap[item.author] ? ++authorMap[item.author] : 1
      if (authorMap[item.author] > 4) {
        intermediary.push(item.author) // 如果发现某个人的发帖数超过5条，直接打入冷宫。
      }
    })
    // 数组去重，Set去重了解一下，可以查阅Set这种数据结构
    intermediary = [...new Set(intermediary)]
    // 再次遍历抓取到的数据
    data.forEach(item => {
    //  这里if的顺序可是有讲究的，合理的排序可以提升程序的效率
      if (item.markSum > 100) {
        console.log('评论过多，丢弃')
        return
      }
      if (filterWords.test(item.title)) {
        console.log('标题带有不希望出现的词语')
        return
      }
      if(intermediary.includes(item.author)){
        console.log('发帖数过多，丢弃')
        return
      }
      //  只有通过了上面的层层检测，才会来到最后一步，这里如果你没有设期望的关键词，筛选结果会被统统加到结果列表中
      if (keyWords.test(item.title)) {
        result.push(item)
      }
    })

    // .......
});

到此为止,我们已经拿到了期望的结果列表，但是直接打印出来，并不那么的好用，所以我们把它生成一个html。我们只需简单的进行html的拼装即可

//  设置html模板
let top = '<!DOCTYPE html>' +
      '<html lang="en">' +
      '<head>' +
      '<meta charset="UTF-8">' +
      '<style>' +
      '.listItem{ display:block;margin-top:10px;text-decoration:none;}' +
      '.markSum{ color:red;}' +
      '.lastModify{ color:"#aaaaaa"}' +
      '</style>' +
      '<title>筛选结果</title>' +
      '</head>' +
      '<body>' +
      '<div>'
let bottom = '</div> </body> </html>'

// 拼装有效数据html
let content = ''

result.forEach(function (item) {
  content += `<a class="listItem" href="${item.url}" target="_blank">${item.title}_____<span class="markSum">${item.markSum}</span>____<span class="lastModify">${item.lastModify}</span>`
})

let final = top + content + bottom

//   最后把生成的html输出到指定的文件目录下
fs.writeFile(path.join(__dirname, '../tmp/result.html'), final, function (err) {
  if (err) {
    return console.error(err);
  }
  console.log('success')
});

最后，我们只需把入口函数暴露出去即可

export default {
  start
}

由于我们是使用ES6的语法写的，所以在使用的时候，需要借助babel-node。首先安装babel-cli,你可以选择全局安装或者局部安装， npm i babel-cli -g。同时别忘了文章开头三个依赖的安装。

最终我们在index.js文件中引入上面的脚本，并执行babel-node index.js。我们看到了激动人心的success。

// index.js
import douban from './src/douban.js'
douban.start()

最后我们打开HTML看一看效果吧，标红的是回复数量，点击标题可以直接跳转到豆瓣对应的页面。同时，利用a标签点击过后变色的效果，我们可以方便的判断是否已经看过这条数据。

我简单设置了一些过滤条件，数据由500条直线下降到138条，极大的缩短了我们的筛选时间。如果我加一些指定的筛选关键词，搜索结果还会更精准！

好了，时候不早了，今天的分享就到此为止。如果大家觉得找房子比较费劲，还是要去找链家，我爱我家等这样的大中介，比较靠谱省心。最后祝大家找到暖心的小窝！

作为前端，如何帮帝都的朋友租到合适的房子原创