話說現在基本上大家都在網上買東西，國家經濟數據已經可以在網絡購物的數據中略微窺見一二，再加上目前B2B行業的持續火爆，大有把所有交易搬到網上來的趨勢，這個系列教程就來講講如果爬取這些大量的電商交易的數據。
工具要求：教程中主要使用到了 1、神箭手雲爬蟲框架 這個是爬蟲的基礎，2、Chrome瀏覽器和Chrome的插件XpathHelper 這個用來測試Xpath寫的是否正確
基礎知識：本教程中主要用到了一些基礎的js和xpath語法，如果對這兩種語言不熟悉，可以提前先學習下，都很簡單
教程正式開始，現在電商網站很多，牛逼哄哄的淘寶京東，新晉貴族唯品會聚美優品 海淘的美麗說higo網易惠惠等等，作爲新手，上來打boss的結果必定是灰屏回家，所以 我們現在新手村附近找個小弟練練級吧。
找小弟也要有找小弟的辦法，我們就去it橘子上看看有沒有什麼新的電商公司試試，找了一圈，就相中了這個切糕王子，名字霸氣，內容簡單，非常適合我們這種新手練手，掌握一下基本技能。
那我們就正式開始，首先，我們打開切糕王子的商品列表頁
http://www.qiegaowz.com/product/Default.html
只有5款商品，果然是互聯網思維，爆品邏輯。頓時讓我們有種用大炮大蚊子的趕腳，寫個爬蟲的時間，不如手動複製了。不過，誰讓我們是程序員呢？手動複製這麼low的事情說出去都丟不起這個人。
開始前先給大家普及一下爬蟲的基本步驟
1.選定入口url，也叫種子url，就是讓爬蟲從哪個頁面開始爬
2.區分哪些是內容頁面，也就是我們需要抽取數據的頁面，哪些是中間頁，就是連接其他頁面，沒有我們需要的數據的頁面
3.對內容頁寫抽取規則
4.開始爬蟲
好了，那我們就開始了
第一步來：這個網站的入口url很簡單，就一個頁面
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
神箭手框架裏是將內容頁用正則表達式來限制的，那沒這幾個頁面統一一個正則的話就是
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
特別提醒，在正則表達式中，"."和"?"這個字符是需要轉義的，這些千萬不能寫錯了。
中間頁的話，就是http://www.qiegaowz.com/product/Default.html，轉換成正則的格式
http://www\\.qiegaowz\\.com/product/Default\\.html
第三步：我們打開其中一個商品的頁面
發現整個頁面沒啥內容，我們就勉強來分成三個部分吧，分別是 縮略圖，商品名稱，內容
先看縮略圖：我們用chrome打開，並打開開發者工具：
根據html的層級結構，主要找class和ID的節點，我們可以看到我們這個圖片的自己的標籤是img標籤，沒有什麼特別的屬性，那沒看他的父標籤，
是<div class="showpic"> 我們來查一下發現這個showpic再整個頁面裏面出現了1次，那麼用這個showpic的class就可以直接定位到這個圖片，xpath的寫法就是：
//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')]
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);到這裏就大功告成了，我們將代碼複製神箭手後臺代碼中，保存並測試下，順利爬到數據。
不過還有一些遺留問題，如商品內容中有一些我們不需要的內容，如何去掉，這個我們可以在後面的教程中詳細解釋。
對爬蟲感興趣的童鞋可以加qq羣討論：342953471。