前言

本文介紹一個 koa 的爬蟲項目，受眾對象為初學前端不久的小伙伴，通過這個項目能對 node 爬蟲有一個簡單的認識，也能自己動手寫一些簡單的爬蟲。項目地址：

Fe-Icy/firm-spider?github.com

啟動 koa 服務

Koa (koajs) -- 基于 Node.js 平臺的下一代 web 開發框架?koa.bootcss.com

koa 是基于 nodejs 平臺的新一代 web 開發框架，使用 koa 啟動 node 服務也非常簡單，三行代碼就能啟動一個 http 服務

const Koa = require('koa') const app = new Koa() app.listen(8080)

怎么樣，是不是看一眼就會，關于 koa 的更多內容可以學習[官方文檔](Koa (koajs) -- 基于 Node.js 平臺的下一代 web 開發框架)，只要你能靈活運用 nodejs，koa 也能分分鐘上手。

爬蟲分析

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

全局配置

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

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') }

為了統一管理，我把所有要抓取的頁面地址寫到一個配置文件中：

// 所有目標 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'}}},// 圖片網站pixabay: {url: 'https://pixabay.com'} }

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

通用類庫

分析靜態頁面我采用了 cheerio 庫

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 errPromiseconst {headers} = optionslet postPromise if(method === 'GET') {postPromise = superagent.get(url)if(mode === 'static') {// 抓取的靜態頁面需要根據編碼模式解碼postPromise = postPromise.charset(unicode)}}if(method === 'POST') {const {json} = options // post 請求要求發送一個 jsonpostPromise = 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

以掘金社區為例，需要分析并模擬請求

之前的圖片發上來違規，感興趣的可以圍觀github

掘金社區的文章的 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 } = targetslet 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}} = juejinFrontconst 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.pageInfoif(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 = 1const 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 nulllet magneto = []let score = 0const 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.paramsconst 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}} = ctxif(!url || isEmpty(originData)) {return resolve({data: [],paging: {}})}const {data, paging} = JSON.parse(originData)const query = getQuery(url)const limit = parseInt(query.limit) || 10const offset = parseInt(query.offset) || 0const isEnd = offset + limit >= data.lengthconst 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)}) }

方便的話大家可以把數據寫入數據庫，這樣就能實現爬蟲-后端-前端一條龍了哈哈

運行 npm run start 啟動 web 服務可以就看到接口啦

???

當然，關于爬蟲能展開講的東西太多了，有些站點做了爬蟲限制，需要構建 ip 池不定時換 ip，有些需要模擬登錄，要學習的東西還有很多，喜歡的小伙伴可以提一些 issue 一起交流一起學習

Fe-Icy/firm-spider

總結

以上是生活随笔為你收集整理的node工程默认url_node 爬虫入门实例，简单易懂的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。