Beginning

　　這次的博客，講的是使用python編寫一個爬蟲工具。為什么要寫這個爬蟲呢？原因是小喵在看完《極黑的布倫希爾特》這個動畫之后，又想看看漫畫，結(jié)果發(fā)現(xiàn)各大APP都沒有資源，最終好不容易找到一個網(wǎng)站可以看，但是由于網(wǎng)速太渣，看起來額外的費勁。這時候如果能提前下載下來就好了。

　　先上項目地址（github）：https://github.com/miaoerduo/cartoon-cat。歡迎大家隨時fork、star和指教。

　　原因就是這樣，作為技術(shù)喵，任何問題都不能阻礙一顆愛漫畫的心。所以問題就來了，挖掘機技修哪家強？

　　在bing上搜索Python、爬蟲框架。找到大家常用的框架。

　　Scrapy似乎是個很不錯的選擇。至于相對于其他框架的優(yōu)點，小喵沒有細(xì)查，至少這個框架是之前聽過的。但是在實現(xiàn)的時候發(fā)現(xiàn)有一些問題，scrapy不能直接抓取動態(tài)的頁面。小喵需要抓取的網(wǎng)站的漫畫都是使用Ajax生成的。需要自己分析各種數(shù)據(jù)，這個有點麻煩。

　　那么有沒有可以渲染頁面的工具呢？像瀏覽器一樣的？有。

　　這里介紹兩個工具：

　　PhantomJs，可以理解是一個瀏覽器。不過它沒有界面，我們可以通過js的代碼模擬用戶的行為。這就要求了解它的api并有js基礎(chǔ)了。

　　Selenium，這是個瀏覽器自動化測試框架。它依賴于瀏覽器（這個瀏覽器也可以是PhantomJs），通過Selenium可以模擬用戶的行為。而且有Python接口，所以相對簡單一些。

　　我們這個爬蟲使用selenium + phantomjs來實現(xiàn)。

　　喲，這個爬蟲軟件應(yīng)該有個響當(dāng)當(dāng)?shù)拿?。。。就叫漫畫喵吧，英文名Cartoon Cat。

　　下面我們一點點的介紹這個爬蟲的實現(xiàn)過程吧。

　　一、初生-環(huán)境搭建

　　小喵這里選用Python作為開發(fā)語言，框架是selenium。原因是python經(jīng)常用來寫爬蟲，selenium可以用來模擬用戶行為，PhantomJs是可選的，不過小喵最終會在一個服務(wù)器上運行，所以也是需要的。

　　為了不影響本機上的python，我們還需要使用virtualenv來創(chuàng)建一個獨立的python環(huán)境。具體步驟如下：

　　1. 安裝virtualenv

　　virtualenv是一個常用的用來創(chuàng)建python環(huán)境的工具。小喵用這個有兩個原因，一是為了不污染本機的環(huán)境，二是在本機直接安裝庫的時候出了一個權(quán)限的問題。

　　virtualenv的安裝十分簡單，使用pip工具就可以安裝。

　　pip install virtualenv

　　待程序執(zhí)行結(jié)束，你就會開心的發(fā)現(xiàn)自己已經(jīng)有了virtualenv這個工具了。

　　2. 創(chuàng)建python環(huán)境

　　virtualenv的使用非常的方便。

　　建立新的運行環(huán)境：virtualenv <env-name>

　　進(jìn)入相應(yīng)的獨立環(huán)境：source <env-path>/bin/activate

　　執(zhí)行完第一個指令后，就會創(chuàng)建成功一個python環(huán)境，執(zhí)行第二個指令后，就會發(fā)現(xiàn)命令行的起始位置有變化。這時候python、pip等工具就變成使用這個新環(huán)境的了，當(dāng)然也可以使用which python來查看。

　　3. 安裝selenium

　　進(jìn)入新環(huán)境后，pip安裝的依賴庫都會在新環(huán)境中安裝，不會影響主機自身的python。使用pip 安裝selenium：

　　pip install selenium

　　至此，我們的基本環(huán)境就搭建完了。

　　4. 安裝PhantomJs

　　這個只在從官網(wǎng)上下載就可以：https://phantomjs.org/download.html

　　小喵的本地實驗環(huán)境是Mac，所以下載了Mac版本。解壓之后就可以使用。

　　二、尋覓-搜資源

　　小喵想看的這個漫畫貌似各大網(wǎng)站都沒有資源，在費了九牛二虎之力后，終于找到了一個網(wǎng)站！https://www.tazhe.com/mh/9170/。

　　每個網(wǎng)站的結(jié)構(gòu)都不相同，因此都需要定制一套爬蟲程序。本文的爬蟲就只能針對這個漫畫網(wǎng)站使用，喵粉們需要爬其他網(wǎng)站的話，需要自己做相應(yīng)的修改。

　　三、分析-資源解析

　　這里需要解析兩個頁面，一個是漫畫的首頁，比如前面的：https://www.tazhe.com/mh/9170/

　　另一個就是具體章節(jié)的頁面。

　　1. 首頁

　　為了減小圖片的大小，小喵把窗口做了縮放。首頁大致是這個樣子。

圖1 漫畫首頁

　　各類信息十分的明了。我們關(guān)注的就是下面的漫畫列表。通過Chrome強大的審查元素的功能，我們立刻就能定位到章節(jié)的位置。（對著感興趣的位置->右鍵->審查就能找到）

圖2 章節(jié)的節(jié)點

　　可以看到，章節(jié)所在的區(qū)域的id是play_0，學(xué)過前端的童鞋都應(yīng)該知道，一個頁面中id通常唯一標(biāo)示一個節(jié)點。因此如果我們能夠獲取這個頁面的話，查找id為play_0的節(jié)點就能一下子縮小搜索范圍。

　　而每個章節(jié)的信息都是一個a標(biāo)簽，標(biāo)簽的href是對應(yīng)章節(jié)的具體網(wǎng)址，標(biāo)簽的文本部分是章節(jié)名。這樣相對關(guān)系就得出了：div#play_0 > ul > li > a。

　　首頁的分析就到此結(jié)束。

　　2. 章節(jié)頁面

　　我們隨意打開一個具體章節(jié)的頁面。比如：https://www.tazhe.com/mh/9170/1187086.html

　　引入眼簾的是一個很干凈的頁面（簡直是漫畫界的清流，好多漫畫網(wǎng)站上全部是廣告）。

　　我們把鼠標(biāo)放在圖片這個區(qū)域->右鍵->審查。

　　咦，我們的右鍵怎么按不了？

　　其實呢，這個現(xiàn)象在小說網(wǎng)站上遇到的機會會更多。當(dāng)我們看到比較優(yōu)美的文字或是炫酷的圖片，都會下意識的選中->右鍵->保存。而很多時候，這些資源都是有版權(quán)的。并不應(yīng)該隨意的傳播（狠狠的打了自己的臉/(ㄒoㄒ)/~~）。因此限制鼠標(biāo)右鍵會是一個很簡單卻有效的辦法。

　　那么我們?nèi)绾卫@過這個陷阱呢？

　　很簡單，我們不用右鍵即可。打開瀏覽器的開發(fā)者工具選項，找到elements這個選項。可以看到一個復(fù)雜的結(jié)構(gòu)（其實和上面審查元素之后的結(jié)果一樣）。之后不斷的選中標(biāo)簽，當(dāng)標(biāo)簽被選中時，左側(cè)頁面中對應(yīng)的位置會有藍(lán)色。多試幾次，最終就能找到對應(yīng)的位置。

圖3 漫畫圖片

　　這是一個img標(biāo)簽，對應(yīng)的id是qTcms_pic。這樣找到這個id，就能找到這個img標(biāo)簽，根據(jù)src就能找到圖片的具體URI地址。

　　接下來是找到下一張圖片的地址。這時候需要查看下一頁這個按鈕的內(nèi)容。用相同的方法，很容易定位成功。

圖4 下一頁

　　小喵本來是用scrapy來做爬蟲的，看到這里的時候就果斷放棄了。我們分析一下，選中的a標(biāo)簽的代碼如下：

　　<a class="3cc9-2a6f-9691-4e7f next" href="java:a_f_qTcms_Pic_nextUrl_Href();" title="下一頁"><span>下一頁</span></a>

　　比較簡單的網(wǎng)站，“下一頁”可以用真的a標(biāo)簽和href屬性來做。這樣的好處是實現(xiàn)比較簡單，壞處是一旦得到網(wǎng)頁源碼就能很容易的解析。而像scrapy這樣的爬蟲工具只能抓取靜態(tài)的代碼（動態(tài)的需要自己分析ajax，有點麻煩）。而顯然這里的頁面是動態(tài)的，使用了ajax來實現(xiàn)。所以光是得到網(wǎng)頁源碼并不能真的得到圖片，而是必須讓其中的js代碼運行才可以。所以我們才需要使用瀏覽器或者PhantomJs這樣的可以執(zhí)行js代碼的工具。

　　上面的a標(biāo)簽的代碼告訴了我們很多信息。首先是告訴了我們，這個節(jié)點的位置，通過next這個類名可以方便的找到該節(jié)點（其實有兩個類名為next的按鈕，另一個在下面，但是功能都一樣）。其次，當(dāng)這個按鈕被點擊時會調(diào)用：a_f_qTcms_Pic_nextUrl_Href()這個js函數(shù)。難道我們需要再研究這個函數(shù)？

　　不用。因為PhantomJs的角色就是一個瀏覽器。我們只需要向真正的用戶一樣點擊一下這個next按鈕，就會進(jìn)入下一個頁面。/* 感受到這個工具的強大了嗎？ */

　　3. 判斷章節(jié)的末尾

　　最后一個問題就是，如何判斷這個章節(jié)結(jié)束了？

　　我們跳到章節(jié)的最后一頁，然后再次點擊“下一頁”，這時候會出現(xiàn)一個彈窗。

圖5 最后一頁

　　多次試驗之后，我們會發(fā)現(xiàn)，只有在最后一頁的時候才會彈出這個彈窗，這樣的話，我們每抓取完一頁，點擊一次“下一頁”，判斷有無彈窗就知道是不是最后一頁了。在右側(cè)的開發(fā)者工具中我們能夠看到，這個彈窗是一個id為msgDiv的div（而且它的出現(xiàn)和消失是通過增減節(jié)點來實現(xiàn)的，另一種實現(xiàn)方法是將display設(shè)成none和block，這種情況可以根據(jù)display的屬性來判斷）。所以我們判斷這個節(jié)點存不存在就行了。

　　至此，兩種頁面的解析都完成了。下一步就開始我們的代碼實現(xiàn)吧。

　　四、逆襲——代碼實現(xiàn)1. selenium的簡單用法

　　from selenium import webdriver

　　browser = webdriver.Firefox()

　　# browser = webdriver.Safari()

　　# browser = webdriver.Chrome()

　　# browser = webdriver.Ie()

　　# browser = webdriver.PhantomJs()

　　browser.get('https://baidu.com')

　　print browser.title

　　# do anything you want

　　上面是一個簡單的例子，第一步import依賴的庫。

　　第二步，獲得一個瀏覽器實例。selenium支持多種瀏覽器。使用firefox之外的瀏覽器都需要下載驅(qū)動（selenium本身自帶了firefox的驅(qū)動）。驅(qū)動下載地址：https://pypi.python.org/pypi/selenium。驅(qū)動下載完之后將它的路徑加入到PATH里，確保驅(qū)動程序能夠被訪問到?；蛘唢@式的把驅(qū)動程序的地址當(dāng)參數(shù)傳入。像下面一樣調(diào)用：

　　browser = webdriver.PhantomJs('path/to/phantomjs')

　　第三步，用get的方式打開網(wǎng)頁。

　　最后，通過browser對象來解析和處理頁面。

　　2. 獲取章節(jié)的鏈接信息

　　在上面的解析頁面的時候，我們知道了章節(jié)信息的位置：div#play_0 > ul > li > a。這樣就可以解析出章節(jié)信息。browser支持一大堆的選擇器。大大簡化我們查找節(jié)點的工作。

　　from selenium import webdriver

　　if __name__ == "__main__":

　　driver = "path/to/driver" # 驅(qū)動地址

　　browser = webdriver.PhantomJS(driver) # 瀏覽器實例

　　main_page = "https://www.tazhe.com/mh/9170/"

　　browser.get(main_page) # 加載頁面

　　# 解析出章節(jié)的元素節(jié)點

　　chapter_elem_list = browser.find_elements_by_css_selector('#play_0 ul li a') # 通過css選擇器找出章節(jié)節(jié)點

　　chapter_elem_list.reverse() # 原本的章節(jié)是倒敘的

　　chapter_list = []

　　for chapter_elem in chapter_elem_list:

　　# 元素的text和href屬性分別就是章節(jié)的名稱和地址

　　chapter_list.append((chapter_elem.text, chapter_elem.get_attribute('href')))

　　# chapter_list 就是章節(jié)的信息

　　3. 給定一個章節(jié)的地址，章節(jié)中的圖片

　　這一步涉及到節(jié)點的獲取、模擬鼠標(biāo)的點擊以及資源的下載。selenium的點擊實現(xiàn)特別的人性化。只需要獲取節(jié)點然后調(diào)用click()方法就搞定。資源的下載網(wǎng)上有許多教程，主要有兩個方法，通過模擬右鍵另存為，和獲取url用其他工具下載。考慮到這里的右鍵不一定可用，而且操作有一點點復(fù)雜。小喵選用了第二種方案。

　　from selenium import webdriver

　　from selenium.common.exceptions import NoSuchElementException

　　import os

　　from os import path as osp

　　import urllib

　　# 一個簡單的下載器

　　download(url, save_path):

　　try:

　　with open(save_path, 'wb') as fp:

　　fp.write(urllib.urlopen(url).read())

　　except Exception, et:

　　print(et)

　　if __name__ == "__main__":

　　driver = "path/to/driver" # 驅(qū)動地址

　　browser = webdriver.PhantomJS(driver) # 瀏覽器實例

　　chapter_url = "https://www.tazhe.com/mh/9170/1187061.html"

　　save_folder = "./download"

　　if not osp.exists(save_folder):

　　os.mkdir(save_folder)

　　image_idx = 1

　　browser.get(chapter_url) # 加載第一個頁面

　　while True:

　　# 根據(jù)前文的分析，找到圖片的URI地址

　　image_url = browser.find_element_by_css_selector('#qTcms_pic').get_attribute('src')

　　save_image_name = osp.join(save_folder, ('%05d' % image_idx) + '.' + osp.basename(image_url).split('.')[-1])

　　download(image_url, save_image_name) # 下載圖片

　　# 通過模擬點擊加載下一頁，注意如果是最后一頁，會出現(xiàn)彈窗提示

　　browser.find_element_by_css_selector('a.next').click()

　　try:

　　# 找尋彈窗，如果彈窗存在，說明這個章節(jié)下載完畢，這個大循環(huán)也就結(jié)束了

　　browser.find_element_by_css_selector('#bgDiv')

　　break

　　except NoSuchElementException:

　　# 沒有結(jié)束彈窗，繼續(xù)下載

　　image_idx += 1

　　五、終焉-寫在后面

　　至此，漫畫喵的設(shè)計思路和主要的代碼實現(xiàn)都介紹完了。上面的代碼只是用來示意，小喵自己下載漫畫用的代碼是另一套。github的地址是：https://github.com/miaoerduo/cartoon-cat。項目只有100多行。不過也用了小喵不少的一段時間。

　　博客寫完了~小喵的漫畫也下完了~

圖6 下載好的漫畫

　　原文鏈接：https://www.miaoerduo.com/python/%E7%88%AC%E8%99%AB-%E6%BC%AB%E7%94%BB%E5%96%B5%E7%9A%84100%E8%A1%8C%E9%80%86%E8%A2%AD.html?utm_source=tuicool&utm_medium=referral

　　作者：MIAO

　　來源：喵耳朵