工具要求：教程中主要使用到了 1、神箭手雲爬蟲框架 這個是爬蟲的基礎，2、Chrome瀏覽器和Chrome的外掛XpathHelper 這個用來測試Xpath寫的是否正確
基礎知識：本教程中主要用到了一些基礎的js和xpath語法，如果對這兩種語言不熟悉，可以提前先學習下，都很簡單

教程正式開始，現在電商網站很多，牛逼哄哄的淘寶京東，新晉貴族唯品會聚美優品 海淘的美麗說higo網易惠惠等等，作為新手，上來打boss的結果必定是灰屏回家，所以 我們現在新手村附近找個小弟練練級吧。

找小弟也要有找小弟的辦法，我們就去it橘子上看看有沒有什麼新的電商公司試試，找了一圈，就相中了這個切糕王子，名字霸氣，內容簡單，非常適合我們這種新手練手，掌握一下基本技能。

那我們就正式開始，首先，我們開啟切糕王子的商品列表頁

http://www.qiegaowz.com/product/Default.html

12	http://www.qiegaowz.com/product/Default.html

只有5款商品，果然是網際網路思維，爆品邏輯。頓時讓我們有種用大炮大蚊子的趕腳，寫個爬蟲的時間，不如手動複製了。不過，誰讓我們是程式設計師呢？手動複製這麼low的事情說出去都丟不起這個人。

開始前先給大家普及一下爬蟲的基本步驟:

1.選定入口url，也叫種子url，就是讓爬蟲從哪個頁面開始爬
2.區分哪些是內容頁面，也就是我們需要抽取資料的頁面，哪些是中間頁，就是連線其他頁面，沒有我們需要的資料的頁面
3.對內容頁寫抽取規則
4.開始爬蟲

好了，那我們就開始了

第一步來：這個網站的入口url很簡單，就一個頁面

http://www.qiegaowz.com/product/Default.html

12	http://www.qiegaowz.com/product/Default.html

就是他了，也沒別人

第二步：內容頁面就是那5個商品的頁面

http://www.qiegaowz.com/product/5ee97997-1700-4d19-b93a-6bd7c930fefe.html http://www.qiegaowz.com/product/ccdf1d03-58da-48a9-bfd2-d9c403b56c98.html http://www.qiegaowz.com/product/1f44feec-751a-4656-9e42-ec1cb7d8dee6.html http://www.qiegaowz.com/product/83106246-d38e-42da-a0a4-2289f699b066.html http://www.qiegaowz.com/product/a723b3cc-91f0-495f-b7b8-792b4470a6e6.html

123456

http://www.qiegaowz.com/product/5ee97997-1700-4d19-b93a-6bd7c930fefe.htmlhttp://www.qiegaowz.com/product/ccdf1d03-58da-48a9-bfd2-d9c403b56c98.htmlhttp://www.qiegaowz.com/product/1f44feec-751a-4656-9e42-ec1cb7d8dee6.htmlhttp://www.qiegaowz.com/product/83106246-d38e-42da-a0a4-2289f699b066.htmlhttp://www.qiegaowz.com/product/a723b3cc-91f0-495f-b7b8-792b4470a6e6.html

神箭手框架裡是將內容頁用正則表示式來限制的，那沒這幾個頁面統一一個正則的話就是

Python http://www\\.qiegaowz\\.com/product/[0-9a-z]{8}-[0-9a-z]{4}-[0-9a-z]{4}-[0-9a-z]{4}-[0-9a-z]{12}\\.html

1	http://www\\.qiegaowz\\.com/product/[0-9a-z]{8}-[0-9a-z]{4}-[0-9a-z]{4}-[0-9a-z]{4}-[0-9a-z]{12}\\.html

什麼？有人覺得這個太難了，那我們可以再簡單一點：

http://www\\.qiegaowz\\.com/product/.{36}\\.html

12	http://www\\.qiegaowz\\.com/product/.{36}\\.html

特別提醒，在正則表示式中，”.”和”?”這個字元是需要轉義的，這些千萬不能寫錯了。

中間頁的話，就是http://www.qiegaowz.com/product/Default.html，轉換成正則的格式：

http://www\\.qiegaowz\\.com/product/Default\\.html

12	http://www\\.qiegaowz\\.com/product/Default\\.html

第三步：我們開啟其中一個商品的頁面

發現整個頁面沒啥內容，我們就勉強來分成三個部分吧，分別是 縮圖，商品名稱，內容

先看縮圖：我們用chrome開啟，並開啟開發者工具：

根據html的層級結構，主要找class和ID的節點，我們可以看到我們這個圖片的自己的標籤是img標籤，沒有什麼特別的屬性，那沒看他的父標籤，

是

我們來查一下發現這個showpic再整個頁面裡面出現了1次，那麼用這個showpic的class就可以直接定位到這個圖片，xpath的寫法就是：

//div[contains(@class,'showpic')]/img/@src

12	//div[contains(@class,'showpic')]/img/@src

簡單解釋下xpath，開始的兩個//代表著從根目錄開始不確定過了多少級，如果是單/則代表是一級層級關係，class屬性的選擇我們通常使用contains是為了防止一個標籤有多個class，最後因為我們要獲取的是圖片的地址，所以最終我們要選取到src屬性，好了 我們寫完之後 用xpathhelper檢測一下對不對

沒問題，另外兩個抽取項在這裡就不詳細解釋了，方式大同小異，直接放結果：

//div[contains(@class,'showpic')]/img/@src //div[contains(@class,'showproduct')]/h1 //div[contains(@class,'shownewdes')]

1234	//div[contains(@class,'showpic')]/img/@src//div[contains(@class,'showproduct')]/h1//div[contains(@class,'shownewdes')]

OK，那麼到這裡，我們爬蟲的準備工作已經做完了，根據神箭手框架的文件，我們將我們的準備好的程式碼組裝一下如下，

var configs = { domains: ["www.qiegaowz.com"], scanUrls: ["http://www.qiegaowz.com/product/Default.html"], contentUrlRegexes: ["http://www\\.qiegaowz\\.com/product/.{36}\\.html"], helpUrlRegexes:["http://www\\.qiegaowz\\.com/product/Default\\.html"], fields: [ { // 商品縮圖 name: "thumbnail", selector: "//div[contains(@class,'showpic')]/img/@src", }, { // 商品標題 name: "title", selector: "//div[contains(@class,'showproduct')]/h1", }, { // 商品內容 name: "content", selector: "//div[contains(@class,'shownewdes')]", } ] }; start(configs);

1234567891011121314151617181920212223242526

varconfigs={domains:["www.qiegaowz.com"],scanUrls:["http://www.qiegaowz.com/product/Default.html"],contentUrlRegexes:["http://www\\.qiegaowz\\.com/product/.{36}\\.html"],helpUrlRegexes:["http://www\\.qiegaowz\\.com/product/Default\\.html"],fields:[{// 商品縮圖  name:"thumbnail",selector:"//div[contains(@class,'showpic')]/img/@src",},{// 商品標題  name:"title",selector:"//div[contains(@class,'showproduct')]/h1",},{// 商品內容  name:"content",selector:"//div[contains(@class,'shownewdes')]",}]};start(configs);

到這裡就大功告成了，我們將程式碼複製神箭手後臺程式碼中，儲存並測試下，順利爬到資料。

不過還有一些遺留問題，如商品內容中有一些我們不需要的內容，如何去掉，這個我們可以在後面的教程中詳細解釋。