• • • • 前言
      • 準備工作
      • 建立工程
      • 後記

前言

昨天實現了草榴的爬取 nodejs 做一個簡單的爬蟲爬草榴，今天對程式碼做了一部分修改，增加了可以指定開始頁和結束頁，並且給所有檔案都單獨建立了資料夾。那麼問題來了，說好的爬 街拍圖片 呢？畢竟爬完草榴的東西並不適合展示，所以，今天又嘗試了一下爬今日頭條的街拍圖片。Talk is cheap，show me the code，廢話不多說，直接進入正題。

準備工作

看過昨天的文章的話可以跳過準備工作和建立工程，直接進入今日頭條街拍圖片程式碼。
依舊是下載nodejs，真的覺得自己什麼都說了，就差配置環境變量了。不過現在應該下載完直接新增環境變量了吧，或者自己到網上搜一下，一大堆。

建立工程

1. 首先，在你想要放資源的地方建立資料夾，比如我在 E 盤裡面建立了一個 myStudyNodejs 的資料夾。
2. 在 DOS 裡面進入你建立的資料夾 如圖
   
   • 進入 e 盤：E：
   • 進入資料夾：cd myStudyNodejs（你建立的資料夾的名字）
     注意全是英文符號
3. 初始化專案，在你建立的資料夾下面執行 npm init 初始化專案。一路回車，最後輸個 yes 就行。
4. 執行完以後，會在資料夾裡面生成一個 package.json 的檔案，裡面包含了專案的一些基本資訊。
5. 安裝所需要的包
   npm install request -save 注意因為頭條是動態網頁，所以無法用 cheerio 來分析網頁，所以只需要這一個包就足夠了
6. 建立檔案
   
   • 建立一個 image 資料夾用於儲存圖片資料。
   • 建立一個 js 檔案用來寫程式。比如 study.js。（建立一個記事本檔案將 .txt 改為 .js）

說明 –save 的目的是將專案對該包的依賴寫入到 package.json 檔案中。

今日頭條爬蟲程式碼

爬取今日頭條過程中遇到的最大問題就是今日頭條介面是動態生成的，圖片連結儲存在 script 標籤中，所以不能用 cheerio 模組來解析，只能通過正則表示式進行匹配。
首先在今日頭條介面搜尋街拍，因為文章和圖集裡面的連結區別比較大，所以我們點選圖集，只爬圖片。
按 F12 開啟開發者工具，在 network 裡面找到 XHR（需要重新重新整理才會出現資源）。

 x.url='https://www.'+x.url.substring(7,19)+'a'+x.url.substring(25);

接下來就是發起請求，獲取介面資料。我們所需要的圖片路徑如下。

分析幾個頁面圖片的路徑得出我們需要使用的正則表示式

let reg=/http\:\\\/\\\/p\d\.pstatp\.com\\\/origin(\\\/pgc\-image)?\\\/[A-Za-z0-9]+/g;

這個正則表示式不難，但是應該是我寫過的最長的了，其中 \\/pgc-image 這一段有的圖片路徑沒有，所以用 ？ 來匹配 0 次或 1 次。注意不要匹配最後的 \，不然無法正確獲取路徑。 接下來就是把獲取的檔案儲存下來。匹配下來的 URL 是 http：/\/\ 這種模式，需要自己重新設定。

var img_src = 'http://'+item.substring(9);

接下來，就是把圖片下載到本地。

下面是完整原始碼

/*
* @Author: user
* @Date:   2018-04-30 12:25:50
* @Last Modified by:   user
* @Last Modified time: 2018-04-30 22:02:59
*/
var https =require('https');
var http = require('http');
var fs = require('fs');
var request = require('request');
let startPage=0;//從哪一頁開始爬
let page=startPage;
let endPage=1;//爬到哪一頁
//初始請求地址
var url='https://www.toutiao.com/search_content/?offset='+startPage*20+'&format=json&keyword=%E8%A1%97%E6%8B%8D&autoload=true&count=20&cur_tab=3&from=gallery'
var i = 0;
//用來判斷儲存還是訪問
var temp=0;
//儲存首頁url
urlList=[];
//封裝了一層函式
function fetchPage(x) { 
  setTimeout(function(){  
    startRequest(x); },2000)
}
//首先儲存要訪問介面的url
function getUrl(x){
  temp++;
  https.get(x,function(res){
    var html = ''; 
    res.setEncoding('binary');
    res.on('data', function (chunk) {   
      html += chunk;
    });
    res.on('end', function () {
      html = JSON.parse(html);//由於獲取到的資料是JSON格式的，所以需要JSON.parse方法淺解析  
      for(let i of html.data){
        var obj1={title:i.title,url:i.article_url};
        urlList.push(obj1)
      }
      page++;
      if(page<=endPage){
        let tempUrl='https://www.toutiao.com/search_content/?offset='+page*20+'&format=json&keyword=%E8%A1%97%E6%8B%8D&autoload=true&count=20&cur_tab=3&from=gallery';
        getUrl(tempUrl);
      }
      else{
        fetchPage(urlList.shift());       
      }

  })

  }).on('error', function (err) {
    console.log(err);
  });

}


function startRequest(x) {
  if(temp===0){
    getUrl(x);     
  }   
  else{
    //採用http模組向伺服器發起一次get請求,擷取的字串為文章連結地址   
    x.url='https://www.'+x.url.substring(7,19)+'a'+x.url.substring(25);
    setTimeout(function(){
      https.get(x.url, function (res) {    
        var html = '';        //用來儲存請求網頁的整個html內容
        res.setEncoding('binary');     
        //監聽data事件，每次取一塊資料
        res.on('data', function (chunk) {   
          html += chunk;
        });
        //監聽end事件，如果整個網頁內容的html都獲取完畢，就執行回撥函式
        res.on('end', function () {
            var news_item = {
            //獲取文章的標題
            title: x.title,
            //i是用來判斷獲取了多少篇文章
            i: i = i + 1,     
          };
          console.log(news_item);     //列印資訊
          //用來匹配script中的圖片連結
          let reg=/http\:\\\/\\\/p\d\.pstatp\.com\\\/origin(\\\/pgc\-image)?\\\/[A-Za-z0-9]+/g;

          let imageList=[];

          imageList=html.match(reg);

          savedImg(imageList,x.title);
          //如果沒訪問完繼續訪問
          if (urlList.length!=0 ) {
            fetchPage(urlList.shift());
          }

        });

    }).on('error', function (err) {
      console.log(err);
    });},2000)
}
}
function savedImg(imageList,title){
  fs.mkdir('./image/'+title, function (err) {
    if(err){console.log(err)}
  });
  imageList.forEach(function(item,index){
    var img_title = index;//給每張圖片附加一個編號
    var img_filename = img_title + '.jpg';
    //圖片的url需要轉換一下
    var img_src = 'http://'+item.substring(9); //獲取圖片的url
    //採用request模組，向伺服器發起一次請求，獲取圖片資源
    request({uri: img_src,encoding: 'binary'}, function (error, response, body) {
      if (!error && response.statusCode == 200) {
        fs.writeFile('./image/'+title+'/' + img_filename, body, 'binary', function (err) {
          if(err){console.log(err)}
        });
      }
    })
  })
}
fetchPage(url);      //主程式開始執行

接下來在建立的資料夾下面執行

node study.js

OK，大功告成

下面是成果展示，這次不用打碼了

後記

今天在網上找了一天該怎麼爬動態介面也沒找到類似的，最後只能用正則表示式來匹配，哪位大佬知道更好的方法望不吝賜教。這兩天對基本的爬蟲已經瞭解了，現在爬動態和靜態網頁大概知道從哪下手，對開發者工具的理解也稍微深了一點，下面準備嘗試一下非同步和併發爬取，改善一下程式碼，因為自己也沒做過非同步併發的東西，順便也加深一下自己對這方面的概念。