node爬蟲入門教程，靜態和動態抓取整合，簡單易懂

時間  2019-11-24
標籤 node 爬蟲 入門 教程 靜態 動態 抓取 整合 簡單 易懂 欄目 網絡爬蟲 简体版
原文   原文鏈接

前言

本文介紹一個 nodejs 的爬蟲項目，受衆對象爲初學爬蟲不久的小夥伴，經過這個項目能對 node 爬蟲有一個簡單的認識，也能本身動手寫一些簡單的爬蟲。javascript

項目地址：css

githubhtml

啓動 koa 服務

🐯最終的數據但願能用於 web 開發，所以我在這裏啓了一個 web 服務，也是基於 koa。koa 是基於 nodejs 平臺的新一代 web 開發框架，使用 koa 啓動 node 服務也很是簡單，三行代碼就能啓動一個 http 服務前端

const Koa = require('koa')
const app = new Koa()

app.listen(8080)
複製代碼

怎麼樣，是否是看一眼就會，關於 koa 的更多內容能夠學習官方文檔，只要你能靈活運用 nodejs，koa 也能分分鐘上手。java

爬蟲分析

🕷️爬蟲的目的是什麼？其實爬蟲的目的很簡單，就是須要在一個站點中抓取到咱們想要的數據。無論用什麼方式，用什麼語言，只要能把數據抓回來，就達到咱們的目的了。可是經過分析站點咱們發現，有些網站是靜態的，前端沒法查看網站中的 api 請求，因此只能經過分析頁面去提取數據，這種叫靜態抓取。有的頁面是前端請求接口渲染數據的，這種咱們能夠直接拿到 api 地址，而在爬蟲中去模擬請求，這種叫動態抓取，基於此，我簡單設計了一個通用的爬蟲。node

全局配置

爲了方便，我在全局配置了一些參數方法jquery

const path = require('path')
const base = require('app-root-dir')

// 全局的 require 方式
global.r = (p = base.get(), m = '') => require(path.join(p, m))

// 全局的路徑配置
global.APP = {
  R: base.get(),
  C: path.resolve(base.get(), 'config.js'),
  P: path.resolve(base.get(), 'package.json'),
  A: path.resolve(base.get(), 'apis'),
  L: path.resolve(base.get(), 'lib'),
  S: path.resolve(base.get(), 'src'),
  D: path.resolve(base.get(), 'data'),
  M: path.resolve(base.get(), 'model')
}
複製代碼

爲了統一管理，我把全部要抓取的頁面地址寫到一個配置文件中：git

// 全部抓取目標
const targets = {
  // 掘金前端相關的文章
  juejinFront: {
    url: 'https://web-api.juejin.im/query',
    method: 'POST',
    options: {
      headers: {
        'X-Agent': 'Juejin/Web',
        'X-Legacy-Device-Id': '1559199715822',
        'X-Legacy-Token': 'eyJhY2Nlc3NfdG9rZW4iOiJoZ01va0dVNnhLV1U0VGtqIiwicmVmcmVzaF90b2tlbiI6IkczSk81TU9QRjd3WFozY2IiLCJ0b2tlbl90eXBlIjoibWFjIiwiZXhwaXJlX2luIjoyNTkyMDAwfQ==',
        'X-Legacy-Uid': '5c9449c15188252d9179ce68'
      }
    }
  },
  // 電影天堂的所全部類型的電影
  movie: {
    url: 'https://www.dy2018.com'
  },
  // pixabay 圖片網站
  pixabay:  {
    url: 'https://pixabay.com'
  },
  // 豆瓣高分電影
  douban: {
    url: 'https://movie.douban.com/j/search_subjects?type=movie&tag=%E8%B1%86%E7%93%A3%E9%AB%98%E5%88%86&sort=recommend&page_limit=20&page_start=0'
  }
}
複製代碼

如上所示，有的抓取靜態頁面，有的抓取動態 api，而模擬後者請求的時候，須要設置額外的請求頭，post 請求還須要傳遞 json，都在這裏統一配置。github

通用類庫

分析靜態頁面我採用了 cheerio 庫web

cheerio 相似於 node 環境中的 jquery，它能解析頁面並提取頁面中的相關信息，它暴露出的 api 與 jquery 大同小異，能夠理解爲 服務端的 jq，以下進行了簡單的封裝

const cheerio = require('cheerio')

const $ = html => cheerio.load(html, {
  ignoreWhitespace: true,
  xmlMode: true
})

const $select = (html, selector) => $(html)(selector)

// 節點屬性
const $attr = (html, attr) => $(html).attr(attr)


module.exports = {
  $,
  $select,
  $attr
}
複製代碼

superagent 是一個功能完善的 服務端 http 庫，它能夠把靜態頁面抓回來提供給 cheerio 來分析，也能抓取動態 api 返回數據，基於此我進行了簡單的封裝

// 封裝 superagent 庫
const superagent = require('superagent')
const { isEmpty } = require('lodash')

// 頁面須要轉碼 例如 utf-8
const charset = require('superagent-charset')
const debug = require('debug')('superAgent')

charset(superagent)

const allowMethods = ['GET', 'POST']

const errPromise = new Promise((resolve, reject) => {
  return reject('no url or method is not supported')
}).catch(err => err)


 /* * options 包含 post 數據 和 headers, 如 * { * json: { a: 1 }, * headers: { accept: 'json' } * } */

// mode 區分動態仍是靜態抓取， unicode 爲頁面編碼方式，靜態頁面中使用
const superAgent = (url, {method = 'GET', options = {}} = {}, mode = 'dynamic', unicode = 'gbk') => {
  if(!url || !allowMethods.includes(method)) return errPromise
  const {headers} = options

  let postPromise 

  if(method === 'GET') {
    postPromise = superagent.get(url)
    if(mode === 'static') {
      // 抓取的靜態頁面須要根據編碼模式解碼
      postPromise = postPromise.charset(unicode)
    }
  }

  if(method === 'POST') {
    const {json} = options
// post 請求要求發送一個 json
    postPromise = superagent.post(url).send(json)
  }

// 須要請求頭的話這裏設置請求頭
  if(headers && !isEmpty(headers)) {
    postPromise = postPromise.set(headers)
  }

  return new Promise(resolve => {
    return postPromise
      .end((err, res) => {
        if(err) {
          console.log('err', err)
          // 不拋錯
          return resolve(`There is a ${err.status} error has not been resolved`)
        }
        // 靜態頁面，返回 text 頁面內容
        if(mode === 'static') {
          debug('output html in static mode')
          return resolve(res.text)
        }
        // api 返回 body 的內容
        return resolve(res.body)
      })
  })
}

module.exports = superAgent

複製代碼

另外抓回來的數據咱們須要讀寫:

const fs = require('fs')
const path = require('path')
const debug = require('debug')('readFile')

// 默認讀取 data 文件夾下的文件
module.exports = (filename, filepath = APP.D) => {
  const file = path.join(filepath, filename)
  if(fs.existsSync(file)) {
    return fs.readFileSync(file, 'utf8')
  } else {
    debug(`Error: the file is not exist`)
  }
}
複製代碼
const fs = require('fs')
const path = require('path')
const debug = require('debug')('writeFile')

// 默認都寫入 data 文件夾下的對應文件
module.exports = (filename, data, filepath) => {
  const writeData = JSON.stringify(data, '', '\t')
  const lastPath = path.join(filepath || APP.D, filename)
  if(!fs.existsSync(path.join(filepath || APP.D))) {
    fs.mkdirSync(path.join(filepath || APP.D))
  }
  fs.writeFileSync(lastPath, writeData, function(err) {
    if(err) {
      debug(`Error: some error occured, the status is ${err.status}`)
    }
  })
}
複製代碼

一切準備就緒以後開始抓取頁面

抓取動態 api

以掘金爲例，須要分析並模擬請求

掘金文章的 feed 流是這樣實現的，上一頁的返回數據中有一個標記after，請求下一頁時須要把這個 after 值放在 post 的 json 中，其餘的參數是一些靜態的，抓取的時候能夠先寫死

const { get } = require('lodash')
const superAgent = r(APP.L, 'superagent')
const { targets } = r(APP.C)
const writeFile = r(APP.L, 'writeFile')
const { juejinFront } = targets

let totalPage = 10 // 只抓取十頁

const getPostJson = ({after = ''}) => {
  return {
    extensions: {query: {id: '653b587c5c7c8a00ddf67fc66f989d42'}},
    operationName: '',
    query: '',
    variables: {limit: 10, category: '5562b415e4b00c57d9b94ac8', after, order: 'POPULAR', first: 20}
  }
}

// 保存全部文章數據
let data = []
let paging = {}

const fetchData = async (params = {}) => {
  const {method, options: {headers}} = juejinFront
  const options = {method, options: {headers, json: getPostJson(params)}}
  // 發起請求
  const res = await superAgent(juejinFront.url, options)
  const resItems = get(res, 'data.articleFeed.items', {})
  data = data.concat(resItems.edges)
  paging = {
    total: data.length,
    ...resItems.pageInfo
  }
  pageInfo = resItems.pageInfo
  if(resItems.pageInfo.hasNextPage && totalPage > 1) {
    fetchData({after: resItems.pageInfo.endCursor})
    totalPage--
  } else {
  // 請求玩以後寫入 data 文件夾
    writeFile('juejinFront.json', {paging, data})
  }
}

module.exports = fetchData

複製代碼

抓取靜態 html

以電影天堂爲例

分析電影天堂的頁面，有列表頁和詳情頁，要想拿到磁力連接須要進入詳情頁，而詳情頁的連接要從列表頁進入，所以咱們先請求列表頁，拿到詳情頁 url 以後進入詳情頁解析頁面拿到磁力連接。

能夠看到列表頁中的 url 能夠解析 .co_content8 ul table 下的 a 標籤，經過 cheerio 拿到的 dom 節點是一個類數組，它的 each() api 至關於 數組的 forEach 方法，咱們經過這種方式來抓取連接。進入詳情頁以後抓取磁力連接和這個相似。這裏面涉及到 es7 的 async await 語法，是異步獲取數據的一種有效方式。

const path = require('path')
const debug = require('debug')('fetchMovie')
const superAgent = r(APP.L, 'superagent')
const { targets } = r(APP.C)
const writeFile = r(APP.L, 'writeFile')
const {$, $select} = r(APP.L, 'cheerio')

const { movie } = targets

// 各類電影類型，分析網站獲得的
const movieTypes = {
  0: 'drama', 
  1: 'comedy', 
  2: 'action', 
  3: 'love', 
  4: 'sciFi', 
  5: 'cartoon', 
  7: 'thriller',
  8: 'horror', 
  14: 'war',
  15: 'crime',
}

const typeIndex = Object.keys(movieTypes)

// 分析頁面，獲得頁面節點選擇器，'.co_content8 ul table'
const fetchMovieList = async (type = 0) => {
  debug(`fetch ${movieTypes[type]} movie`)
  // 存電影數據，title，磁力連接
  let data = []
  let paging = {}
  let currentPage = 1
  const totalPage = 30 // 抓取頁
  while(currentPage <= totalPage) {
    const url = movie.url + `/${type}/index${currentPage > 1 ? '_' + currentPage : ''}.html`
    const res = await superAgent(url, {}, 'static')
    // 拿到一個節點的數組
    const $ele = $select(res, '.co_content8 ul table')
    // 遍歷
    $ele.each((index, ele) => {
      const li = $(ele).html()
      $select(li, 'td b .ulink').last().each(async (idx, e) => {
        const link = movie.url + e.attribs.href
        // 這裏去請求詳情頁
        const { magneto, score } = await fetchMoreInfo(link)
        const info = {title: $(e).text(), link, magneto, score}
        data.push(info)
        // 按評分倒序
        data.sort((a, b) => b.score - a.score)
        paging = { total: data.length }
      })
    })
    writeFile(`${movieTypes[type]}Movie.json`, { paging, data }, path.join(APP.D, `movie`))
    currentPage++
  }
}

// 獲取磁力連接 '.bd2 #Zoom table a'
const fetchMoreInfo = async link => {
  if(!link) return null
  let magneto = []
  let score = 0
  const res = await superAgent(link, {}, 'static')
  $select(res, '.bd2 #Zoom table a').each((index, ele) => {
    // 不作這個限制了，有些電影沒有 magnet 連接
    // if(/^magnet/.test(ele.attribs.href)) {}
    magneto.push(ele.attribs.href)
  })
  $select(res, '.position .rank').each((index, ele) => {
    score = Math.min(Number($(ele).text()), 10).toFixed(1)
  })
  return { magneto, score }
}

// 獲取全部類型電影，併發
const fetchAllMovies = () => {
  typeIndex.map(index => {
    fetchMovieList(index)
  })
}

module.exports = fetchAllMovies
複製代碼

數據處理

抓取回來的數據能夠存數據庫，我目前寫在本地，本地的數據也能夠做爲 api 的數據源，例如電影天堂的數據我能夠寫一個本地的 api 做爲本地開發的 server 來用

const path = require('path')
const router = require('koa-router')()
const readFile = r(APP.L, 'readFile')
const formatPaging = r(APP.M, 'formatPaging')

// router.prefix('/api');
router.get('/movie/:type', async ctx => {
  const {type} = ctx.params
  const totalData = readFile(`${type}Movie.json`, path.join(APP.D, 'movie'))
  const formatData = await formatPaging(ctx, totalData)
  ctx.body = formatData
})

module.exports = router.routes()
複製代碼

其中我手動維護了一個分頁列表，方便數據給到前端時也實現 feed 流：

// 手動生成分頁數據
const {getQuery, addQuery} = r(APP.L, 'url')
const {isEmpty} = require('lodash')

module.exports = (ctx, originData) => {
  return new Promise((resolve) => {
    const {url, header: {host}} = ctx
    if(!url || isEmpty(originData)) {
      return resolve({
        data: [],
        paging: {}
      })
    }
    const {data, paging} = JSON.parse(originData)
    const query = getQuery(url)
    const limit = parseInt(query.limit) || 10
    const offset = parseInt(query.offset) || 0
    const isEnd = offset + limit >= data.length
    const prev = addQuery(`http://${host}${url}`, {limit, offset: Math.max(offset - limit, 0)})
    const next = addQuery(`http://${host}${url}`, {limit, offset: Math.max(offset + limit, 0)})
    const formatData = {
      data: data.slice(offset, offset + limit),
      paging: Object.assign({}, paging, {prev, next, isEnd})
    }
    return resolve(formatData)
  })
}

複製代碼

方便的話你們能夠把數據寫入數據庫，這樣就能實現爬蟲-後端-前端一條龍了哈哈

最後的 api，分頁由 limit 和 offset 參數控制，能夠自定義，請求 next 便可請求下一頁實現 feed 流

✨✨✨

固然，關於爬蟲能展開講的東西太多了，有些站點作了爬蟲限制，須要構建 ip 池不定時換 ip，有些須要模擬登陸，要學習的東西還有不少，喜歡的小夥伴能夠提一些 issue 一塊兒交流一塊兒學習

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程