最近身邊的朋友都在看房子，天天沉浸在各大房價網站中，看了幾天和我抱怨還是對杭州的整個房價高低沒有一個具體的概念。優秀且敏感的我聽到了彷彿聞到了一絲需求的味道，既然他們擁有了這麼優秀的我，怎麼能讓他們一直這麼看房！
完成效果如下：
憋說了！你們的房價由我來守護，是時候要拿出我的吃飯的傢伙了。
首先，看一下魔法裝備和任務
很好，我們基於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的資料入庫。 休息一下，優秀的你看到(做到)這裡，簡直要為你鼓掌。不如。。。
啊哈哈哈哈哈哈哈哈哈哈哈哈～