緣由

接觸前端(FontEnd)已一年多，但還是半桶水啊，可能半桶水都算不上，自己都擔(dān)心自己。噗呲
爬蟲(chóng)這個(gè)東西，我記得在很久之前我就聽(tīng)說(shuō)過(guò)他，但一直沒(méi)去了解過(guò)他，甚至概念都不太清晰，只知道他是一只網(wǎng)絡(luò)的蟲(chóng)子，爬取網(wǎng)站的信息。
那么，由于自己技能樹(shù)的不成熟，目前只在前端入門(mén)階段，╮(╯▽╰)╭。大概了解了一下爬蟲(chóng)可以用什么語(yǔ)言來(lái)寫(xiě)，其實(shí)是廢話，大神的話什么語(yǔ)言都可以寫(xiě)吧。
在結(jié)束考試之后，就開(kāi)始了nodejs學(xué)習(xí)之旅，對(duì)于node沒(méi)有任何了解，只知道他是一門(mén)服務(wù)器端的語(yǔ)言。（聽(tīng)說(shuō)賊強(qiáng)大）
說(shuō)了那么多廢話，一位強(qiáng)大的神秘人物給了小弟我一個(gè)小小的任務(wù)，爬蟲(chóng)他博客上的文章，并把數(shù)據(jù)存儲(chǔ)到本地，可以說(shuō)是一個(gè)練手任務(wù)吧（但對(duì)于渣渣的我來(lái)說(shuō)還是有難度的?。?/p>

目標(biāo)

<li>爬取x-cold的博客：http://blog.lxstart.net/ 的全站文章（約20-30篇）</li>

<li>結(jié)構(gòu)化爬取的文章，持久化到本地（數(shù)據(jù)庫(kù)、文件均可，暫時(shí)不考慮存儲(chǔ)優(yōu)化）</li>

<li>實(shí)現(xiàn)一個(gè)簡(jiǎn)單的HTTP服務(wù)器對(duì)抓取的結(jié)果進(jìn)行展示（文章列表+文章詳情）</li>

環(huán)境要求

• Nodejs v4.3.0 及以上

實(shí)踐

小白一只，開(kāi)始在網(wǎng)絡(luò)中尋求自己疑惑的答案，開(kāi)始了代碼之旅（呸）

工具

這里采用了幾個(gè)node模塊

• http模塊 = > 發(fā)起http請(qǐng)求
• https模塊 = > 發(fā)起https請(qǐng)求
• fs模塊 = > 將數(shù)據(jù)存儲(chǔ)到本地
• cheerio模塊 = > Dom操作 (使用方法相當(dāng)于jQuery)

其它

• 代碼檢驗(yàn)使用eslint
• 編寫(xiě)代碼使用ECMAScript5

分析網(wǎng)站

打開(kāi)http://blog.lxstart.net/這個(gè)網(wǎng)站，按下F12看了下，發(fā)現(xiàn)在每一篇文章的下面都有下一篇文章的鏈接，所以這里采用了一個(gè)簡(jiǎn)單的方法去爬取整站的文章，取到link后，用一個(gè)簡(jiǎn)單的判斷，逐步發(fā)起http請(qǐng)求，懶猴再拿到你想要的東西
代碼簡(jiǎn)單展示如下：

// 下一篇文章的鏈接
var nextLink = 'http://blog.lxstart.net' + $('nav#article-nav #article-nav-older').attr('href')
// 控制爬取文章的篇數(shù)
if (id <= 500) {
  fetchPage(nextLink)
}

說(shuō)說(shuō)遇到的問(wèn)題，本來(lái)簡(jiǎn)單嘗試成功后，就要將獲得的數(shù)據(jù)保存到本地，一開(kāi)始是想分析下網(wǎng)站的結(jié)構(gòu)，逐步獲取。但后來(lái)想想發(fā)現(xiàn)不行，還是直接整個(gè)取下來(lái)吧。在保存的時(shí)候，一開(kāi)始是保存為.txt文件的，但是之前沒(méi)發(fā)現(xiàn)在cheerio加載的時(shí)候忘記加上了一個(gè)東西（var $ = cheerio.load(html, { decodeEntities: false })），導(dǎo)致拿到的html代碼里面的中文是Unicode編碼的。

后來(lái)加上去之后發(fā)現(xiàn)用txt文件保存賊難看，嗯，那就改為html文件試試，(⊙o⊙)…勉強(qiáng)還能接受吧（暫時(shí)想不到其他方法）

接下來(lái)是存儲(chǔ)數(shù)據(jù)的問(wèn)題，(⊙v⊙)嗯，html內(nèi)容存儲(chǔ)沒(méi)啥問(wèn)題，主要是圖片存儲(chǔ)的問(wèn)題。
之前沒(méi)發(fā)現(xiàn)此站點(diǎn)存儲(chǔ)圖片里面有https，被坑了一波，一直報(bào)錯(cuò)，后來(lái)才發(fā)現(xiàn)，所以增加了一個(gè)https模塊。
存儲(chǔ)圖片也是采用http發(fā)情請(qǐng)求，然后用fs模塊保存到本地。這里有一個(gè)點(diǎn)，設(shè)置編碼格式為'binary'，即res.setEncoding('binary')。

結(jié)果展示

• http服務(wù)器對(duì)請(qǐng)求結(jié)果的簡(jiǎn)單展示

• 網(wǎng)頁(yè)內(nèi)容的存儲(chǔ)

• 圖片的存儲(chǔ)

總結(jié)

經(jīng)過(guò)此次實(shí)踐，對(duì)爬蟲(chóng)的概念有了一些初步的了解，也對(duì)node有了一些認(rèn)識(shí)，主要還是對(duì)網(wǎng)站結(jié)構(gòu)的分析，然后就是對(duì)node的運(yùn)用，小小想法?？偟膩?lái)說(shuō)，這次任務(wù)還是比較簡(jiǎn)單的，沒(méi)有什么大困難，其他什么的異步編程啊，各種模塊都沒(méi)用上，算是對(duì)node的一個(gè)開(kāi)端吧，希望自己接下來(lái)能夠堅(jiān)持?。ɑ槪?/p>

代碼

github地址：https://github.com/k-water/Crawler