第一彈：puppeteer爬蟲小demo —— 網易雲音樂

上一篇文章主要介紹了一些puppeteer爬蟲api，本文是實戰篇第一彈，爬取網易雲音樂某個頁面板塊。

出發點

1. 首先我不是要爬歌詞，我只是想結合上一篇文章寫一個練手小demo，內容隨意。
2. 這個demo最好能夠涉及多媒體保存。
3. 儘量簡單，不涉及數據庫操做、刪除文件操做。
4. 限定網站是傳統異步獲取分頁數據，沒有分頁參數在地址欄url上。

解決點

1. 圖片下載

   以前寫項目的時候習慣用axios，本文也是使用axios。axios(url, {responseType: "stream"})這樣初始化axios就能夠下載圖片了。

2. 圖片位置

   新建一個image文件夾來存儲下載的圖片 fs.mkdirSync("image");

3. 分析網站結構

   

   • 網易雲音樂的主體由一個iframe包裹，iframe有name和id，用iframe.name()和Array.find能夠匹配單個Frame對象。
   • 每一行都是由一個tr組成
   • 獲取新數據能夠模擬點擊下一頁實現

---

下面直接放代碼

const fs = require("fs");
const puppeteer = require("puppeteer");
const axios = require("axios");
console.time("ssr"); //開始計時
if (!fs.existsSync("image")) {
//新建image文件夾
  fs.mkdirSync("image");
}

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    devtools: true
  });
  const page = (await browser.pages())[0];
  await page.setViewport({
    width: 1280,
    height: 800
  });
  //爲了簡化，我直接跳到想爬的地址了。固然你也能夠打開網易雲一步一步操做，注意規律就行了。
  await page.goto(
    "http://music.163.com/#/search/m/?id=9605&s=%E5%8D%AB%E5%85%B0&type=1000"
  );
  //Frame對象有一個獲取name的方法
  let iframe = await page.frames().find(f => f.name() === "contentFrame");
  //這裏我只獲取前五頁的數據，固然你也能夠獲取下一頁的前一個元素的innerText來確認總數
  for (let i = 1; i <= 5; i++) {
    fs.mkdirSync(`image/${i}`); //頁碼做爲文件夾名
    // await iframe.waitFor(".m-table td .s-fc3");
    // 等待分頁數據。原本想經過上面的方式來等待的，可是貌似是由於上一個頁面".m-table td .s-fc3"的節點已經加載
    //按下一頁的時候這個選擇器的節點還在，致使這個方式失效？請大佬解惑
    await iframe.waitFor(2000) //ps：少於2s，有時會出現圖片重複，緣由是dom仍未更新致使
    const te = await iframe.$$eval(".m-table tbody tr", list => {
    //請注意已經進入瀏覽器環境了
      return new Promise(resolve => {
        let arr = [];
        list.map((item, index) => {
          let temp = {};
          const str = item.querySelector(".w7 img").src;
          temp.img = str.slice(0, str.lastIndexOf("?")); //獲取最大尺寸的圖片
          temp.title = item.querySelector(".txt").innerText;
          temp.author = item.querySelector(".w4 a.s-fc3").title;
          temp.count = item.querySelector(".w6.s-fc4").innerText;
          //由於這是瀏覽器的環境，我在node依賴的axios是沒法在這裏下載文件的，只能先保存數據再回到node中下載
          // axios(temp.img,{responseType:'stream'}).then(response => response.data.pipe(fs.createWriteStream(`./image/${temp.author.jpg}`)))
          arr.push(temp);
        });
        resolve(arr);
      });
    });
    //回到node的環境，能夠放心下載了。
    te.map(async (item, index) => {
      const result = await axios(item.img, {
        responseType: "stream"
      });
      result.data.pipe(fs.createWriteStream(`./image/${i}/${item.author}.jpg`)); //管道真好使
    });
    // 下載完圖片進入下一頁，若是有頁碼直接用goto跳轉
    iframe.click('.u-page a:last-child')
  }

  console.timeEnd("ssr"); //計時結束
  })();
複製代碼

本文內容很少，把傳統異步分頁的爬取流程以代碼形式寫了一遍。小弟不才，第一次接觸爬蟲，並不瞭解其餘工具是怎樣爬取，若有錯但願你們指正。

另外想問個問題，爲何<div tabindex="0"></div>這樣寫，點擊div的時候:focus會生效。

原由：在一個div上，藉助f12調試勾選:focus，:focus會生效，用鼠標點擊就沒效果。But在div加上tabindex="0"後，鼠標點擊:focus生效

---

小弟不才，17年軟件工程畢業生，熟悉vue寫過兩個公司項目。目前已離職，座標廣州，求大佬們收留。