教你輕鬆爬取Air-Level網站的城市地區數據

本篇文章同步發於微信公眾號：giscafer

這兩天定的一個學習目標，計劃開發的一個應用

臨時取名為《基於React的地圖信息查詢展示》

設計參考網站：

高德交通--中國主要城市交通分析報告 （效果交互展示參考）

全國空氣質量指數查詢 - PM2.5實時地圖、空氣污染排名 - 空氣知音 （數據參考）

通過爬蟲獲取最新數據存儲本地。 實現功能：

1、全國房價地圖

2、全國空氣質量指數查詢

3、全國天氣查詢

4、全國地區人口查詢

5、全國地區GDP查詢

6、全國地區平均工資查詢

7、全國地區千億企業查詢

實現技術：

Web端 React+Redux+nodejs+MongoDB

WebApp端 React Native

本應用純粹為了學習React以及Native開發App，目前還沒開始，只是計劃。

網站在設計好頁面後， 需要有數據，包括地圖數據、上邊各個專題的數據。還有的是政區城市數據。當然獲取這些數據最方便的方式可能就是爬蟲獲取了。

下邊介紹一下如何通過 node.js 爬蟲獲取網站 http://air-level.com 城市地區

1、airlevel.js

爬蟲核心代碼

use strictnnconst cheerio = require(cheerio);nconst request = require(superagent);nconst URL = http://www.air-level.com/;nnfunction fetchInfo(url) {n return new Promise((resolve, reject) => {n request.get(url).end((err, res) => {n if (err) {n reject(err);n } else {n const $ = cheerio.load(res.text);n const itemProps = $("a[href^=/air/]");nn const result = [];n itemProps.each((index, item) => {n tvar info={};n const $item = $(item);n const href = $item.prop(href);n const text = $item.text();nn info[pinyin] = href.replace(/air/, ).replace(/, );n info[name] = text;n result.push(info);n });n resolve(result);n }n });n });n}nnfunction test(url) {n if (!url){n turl=URL;n }n fetchInfo(url).then((result)=>{n tconsole.log(result)n }).catch(e=>{n tconsole.log(e)n });n}n// test();nmodule.exports = { fetchInfo };n

2、寫入本地文件

/*n * @Discription: n * @Author: giscafern * @Date: 2017-01-16 12:32:40n * @Last Modified by: giscafern * @Last Modified time: 2017-01-16 12:40:53n */nnuse strict;nnconst airlevel = require(./airlevel);nconst path = require(path)nconst fs = require(fs)nnnconst CONTENTS_FILE = path.join(__dirname + /data/, city.json);nnconst CRAWER_URL=http://www.air-level.com/nn//爬取城市數據nairlevel.fetchInfo(CRAWER_URL).then((result) => {ntwrite(result);n // console.log(result);n}).catch(e => {n console.log(e)n});nnfunction write(contents) {n //寫入文件n fs.writeFile(CONTENTS_FILE, JSON.stringify(contents, null, 4), function(err) {n if (err) {n console.error(err);n process.exit(1);n }else{n tconsole.log(保存數據成功！)n }n });n}n

最後結果數據city.json為

[n {n "pinyin": "beijing",n "name": "北京"n },n {n "pinyin": "shanghai",n "name": "上海"n },n {n "pinyin": "tianjin",n "name": "天津"n },n {n "pinyin": "chongqing",n "name": "重慶"n },n {n "pinyin": "guangzhou",n "name": "廣州"n },n {n "pinyin": "nanjing",n "name": "南京"n },n {n "pinyin": "hangzhou",n "name": "杭州"n },n {n "pinyin": "anshan",n "name": "鞍山"n },n {n "pinyin": "anqing",n "name": "安慶"n }n//……n]n

見文件：https://github.com/giscafer/airlevel-crawler/blob/master/data/city.json

總體代碼量很少，這demo可以作為是爬蟲數據的模板，其他專題的數據找准網站，修改調整一下代碼就OK

demo源碼和使用方式見github：

giscafer/airlevel-crawler

得到城市數據後開發demo

實現過程見博文：React 與 Redux 實踐 —— 城市篩選面板