最近突然得知之後的工作有很多數據采集的任務，有朋友推薦webmagic這個項目，就上手玩了下。發現這個爬蟲項目還是挺好用，爬取靜態網站幾乎不用自己寫什麽代碼（當然是小型爬蟲了~~|）。好了，廢話少說，以此隨筆記錄一下渲染網頁的爬取過程首先找到一個js渲染的網站，這裏直接拿了學習文檔裏面給的一個網址，http://angularjs.cn/

打開網頁是這樣的

查看源碼是這樣的

源碼這麽少，不用說肯定是渲染出來的了，隨便搜了一條記錄，果然源碼裏面找不到結果

那就開始解析網址了，從瀏覽器開發者工具裏面發現了這麽些請求記錄

就直接從得到的數據量最大的請求開始查看，如上紅線標記的。從xhr看出這是個ajax請求來的數據，打開請求的數據是這樣的

從網頁上找一條源碼裏面找不到的記錄，放在這個json數據裏面搜索一下，運氣還是不錯的，搜索到了

那不用說，就是它了！！接下來直接解析這個json就能拿到所有渲染後的鏈接了。

從網頁直接點擊一個鏈接進入，發現鏈接是這樣的：

然後回到json文件，找到這個標題

找到一個很了不起的東西！就是那個id，它就是鏈接後面帶的。大膽推測，所有鏈接都是這個尿性！！（事實上我多點了幾個鏈接看才敢確認這個尿性）

接下來就好辦了，寫代碼解析這個json數據，然後拼湊出所有鏈接加入爬取隊列爬取就行了。

結果發現通過首頁鏈接點進去的下級鏈接，還是js渲染的。。。

沒辦法，拿著鏈接請求繼續分析

得到這麽些請求數據：

直接看到xhr欄，也就是ajax請求的數據

依舊從大到小查看json數據，和頁面的內容匹配，直到第三個才找到正確的。++|

然後得到了最終數據的請求鏈接：http://angularjs.cn/api/article/A2KW

接下來就可以寫代碼了：

 1 public class SpiderTest implements PageProcessor {
 2     // 抓取網站的相關配置，包括編碼、抓取間隔、重試次數等
 3     private Site site = Site.me().setRetryTimes(3).setSleepTime(100);    
 4
 
     // 先從瀏覽器中分析出隱藏請求可得出以下匹配規則
 5     private static final String URLRULE = "http://angularjs\\.cn/api/article/latest.*";
 6     private static String firstUrl = "http://angularjs.cn/api/article/";
 7     
 8     @Override
 9     public Site getSite() {
10         // TODO Auto-generated method stub
11         return site;
12     }
13 
14     @Override
15     public void process(Page page) {
16         // TODO Auto-generated method stub
17         /**
18          * 篩選出所有符合條件的url，手動添加到爬取隊列。
19          */
20         if (page.getUrl().regex(URLRULE).match()) {
21             //通過jsonpath得到json數據中的id內容，之後再拼湊待爬取鏈接
22             List<String> endUrls = new JsonPathSelector("$.data[*]._id").selectList(page.getRawText());
23             if (CollectionUtils.isNotEmpty(endUrls)) {
24                 for (String endUrl : endUrls) {
25                     page.addTargetRequest(firstUrl + endUrl);
26                 }
27             }
28         } else {
29             //通過jsonpath從爬取到的json數據中提取出id和content內容
30             page.putField("title", new JsonPathSelector("$.data.title").select(page.getRawText()));
31             page.putField("content", new JsonPathSelector("$.data.content").select(page.getRawText()));
32         }
33         
34     }
35     
36     @Test
37     public void test(){        
38         Spider.create(new SpiderTest()).addUrl("http://angularjs.cn/api/article/latest?s=20").run();
39     }
40 }

至此一個渲染的網頁就爬取下來了。over

webmagic爬取渲染網站