怎么通過CSS選擇器采集網頁數據

做了個數據采集插件准備拿博客園練練手。想一下要采集什么數據，就從首頁文章列表采集起到第10頁就結束采集，然后在點擊進去采集文章內容。

視頻演示地址：https://www.bilibili.com/video/BV1HP4y157rR

數據采集工具

九頭蟲網頁數據采集插件 大家如果也想試下，那么可以點擊進去下載。
九頭蟲網頁數據采集插件 幫助文檔

采集內容

首頁：文章標題、文章介紹、作者、作者頭像、點贊數、評論數、發布時間
內容頁：正文內容

編寫首頁列表采集規則

按F12打開開發者工具里面看到文章列表HTML代碼結構：

文章標題可以通過CSS選擇器.post-item-title獲取到；
文章地址可以通過CSS選擇器.post-item-title獲取到；
文章介紹可以通過CSS選擇器.post-item-summary獲取到;
作者可以通過CSS選擇器.post-item-author獲取到；
用戶頭像可以通過CSS選擇器img.avatar獲取到；
點贊數可以通過CSS選擇器.post-item-foot a.post-meta-item獲取到;
評論數可以通過CSS選擇器.post-item-foot a[class*=post-meta-item]:nth-of-type(3)獲取到;
瀏覽數可以通過CSS選擇器.post-item-foot a[class*=post-meta-item]:nth-of-type(4) span獲取到;

那么現在開始編寫采集規則,采集規則保存之后，進入頁面檢驗當前是否采集到數據了。

{
    "title": "博客園首頁文章列表",
    "match": "https://www.cnblogs.com/*",
    "demo": "https://www.cnblogs.com/#p2",
    "delay": 2,
    "rules": [
        {
            "root": "#post_list .post-item",
            "multi": true,
            "desc": "文章列表",
            "fetches": [
                {
                    "name": "文章標題",
                    "selector": ".post-item-title"
                },
                {
                    "name": "文章地址",
                    "selector": ".post-item-title",
                    "type": "attr",
                    "attr": "href"
                },
                {
                    "name": "文章介紹",
                    "selector": ".post-item-summary"
                },
                {
                    "name": "作者",
                    "selector": ".post-item-author"
                },
                {
                    "name": "頭像",
                    "selector": "img.avatar",
                    "type": "attr",
                    "attr": "src"
                },
                {
                    "name": "點贊數",
                    "selector": ".post-item-foot a.post-meta-item"
                },
                {
                    "name": "評論數",
                    "selector": ".post-item-foot a[class*=post-meta-item]:nth-of-type(3)"
                },
                {
                    "name": "瀏覽數",
                    "selector": ".post-item-foot a[class*=post-meta-item]:nth-of-type(4)"
                }
            ]
        }
    ]
}

編寫內容頁采集規則

編寫方式與上面的一樣，這里就直接貼出代碼了。

{
    "title": "博客園文章內容",
    "match": "https://www.cnblogs.com/*/p/*.html",
    "demo": "https://www.cnblogs.com/bianchengyouliao/p/15541078.html",
    "delay": 2,
    "rules": [
        {
            "multi": false,
            "desc": "文章內容",
            "fetches": [
                {
                    "name": "文章標題",
                    "selector": "#cb_post_title_url"
                },
                {
                    "name": "正文內容",
                    "selector": "#cnblogs_post_body",
                    "type": "html"
                }
            ]
        }
    ]
}

添加計划任務（實現批量采集、翻頁采集）

生成URL采集地址 幫助文檔

在計划任務中，通過動態URL采集地址獲取要采集的文章頁面地址，獲取完成之后插件就會自動去打開對應頁面。只要打開頁面，插件就會去匹配采集規則然后采集數據。

https://www.cnblogs.com/
[a.post-item-title,href]:https://www.cnblogs.com/#p[2,10,1]

預覽數據