前言

熟悉我的朋友可能會知道，我一向是不寫熱點的。為什么不寫呢？是因為我不關(guān)注熱點嗎？其實也不是。有些事件我還是很關(guān)注的，也確實有不少想法和觀點。但我一直奉行一個原則，就是：要做有生命力的內(nèi)容。CkD28資訊網(wǎng)——每日最新資訊28at.com

本文介紹的內(nèi)容來自于筆者之前負責(zé)研發(fā)的爬蟲管理平臺, 專門抽象出了一個相對獨立的功能模塊為大家講解如何使用nodejs開發(fā)專屬于自己的爬蟲平臺.文章涵蓋的知識點比較多,包含nodejs, 爬蟲框架, 父子進程及其通信, react和umi等知識, 筆者會以盡可能簡單的語言向大家一一介紹。CkD28資訊網(wǎng)——每日最新資訊28at.com

你將收獲

• Apify框架介紹和基本使用
• 如何創(chuàng)建父子進程以及父子進程通信
• 使用javascript手動實現(xiàn)控制爬蟲最大并發(fā)數(shù)
• 截取整個網(wǎng)頁圖片的實現(xiàn)方案
• nodejs第三方庫和模塊的使用
• 使用umi3 + antd4.0搭建爬蟲前臺界面

平臺預(yù)覽

爬蟲代碼的其他部分因為不是核心重點,這里不一一舉例, 我已經(jīng)放到github上,大家可以交流研究.CkD28資訊網(wǎng)——每日最新資訊28at.com

有關(guān)如何提取網(wǎng)頁文本, 也有現(xiàn)成的api可以調(diào)用, 大家可以選擇適合自己業(yè)務(wù)的api去應(yīng)用,筆者這里拿puppeteer的page.$eval來舉例:CkD28資訊網(wǎng)——每日最新資訊28at.com

const txt = await page.$eval('body', el => {    // el即為dom節(jié)點, 可以對body的子節(jié)點進行提取,分析    return {...}})復(fù)制代碼

nodejs第三方庫和模塊的使用

為了搭建完整的node服務(wù)平臺,筆者采用了CkD28資訊網(wǎng)——每日最新資訊28at.com

• koa 一款輕量級可擴展node框架
• glob 使用強大的正則匹配模式遍歷文件
• koa2-cors 處理訪問跨域問題
• koa-static 創(chuàng)建靜態(tài)服務(wù)目錄
• koa-body 獲取請求體數(shù)據(jù) 有關(guān)如何使用這些模塊實現(xiàn)一個完整的服務(wù)端應(yīng)用, 筆者在代碼里做了詳細的說明, 這里就不一一討論了. 具體代碼如下:

const Koa  = require('koa');const { resolve } = require('path');const staticServer = require('koa-static');const koaBody = require('koa-body');const cors = require('koa2-cors');const logger = require('koa-logger');const glob = require('glob');const { fork } = require('child_process');const app = new Koa();// 創(chuàng)建靜態(tài)目錄app.use(staticServer(resolve(__dirname, './static')));app.use(staticServer(resolve(__dirname, './db')));app.use(koaBody());app.use(logger());const config = {  imgPath: resolve('./', 'static'),  txtPath: resolve('./', 'db')}// 設(shè)置跨域app.use(cors({  origin: function (ctx) {      if (ctx.url.indexOf('fetch') > -1) {        return '*'; // 允許來自所有域名請求      }      return ''; // 這樣就能只允許 http://localhost 這個域名的請求了  },  exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],  maxAge: 5,  //  該字段可選，用來指定本次預(yù)檢請求的有效期，單位為秒  credentials: true,  allowMethods: ['GET', 'POST', 'PUT', 'DELETE'],  allowHeaders: ['Content-Type', 'Authorization', 'Accept', 'x-requested-with'],}))// 創(chuàng)建異步線程function createPromisefork(childUrl, data) {  const res = fork(childUrl)    data && res.send(data)    return new Promise(reslove => {      res.on('message', f => {        reslove(f)      })    })}app.use(async (ctx, next) => {  if(ctx.url === '/fetch') {    const data = ctx.request.body;    const res = await createPromisefork('./child.js', data)    // 獲取文件路徑    const txtUrls = [];    let reg = /.*?(/d+)/./w*$/;    glob.sync(`${config.txtPath}/*.*`).forEach(item => {      if(reg.test(item)) {        txtUrls.push(item.replace(reg, '$1'))      }    })    ctx.body = {      state: res,      data: txtUrls,      msg: res ? '抓取完成' : '抓取失敗,原因可能是非法的url或者請求超時或者服務(wù)器內(nèi)部錯誤'    }  }  await next()})app.listen(80)復(fù)制代碼

使用umi3 + antd4.0搭建爬蟲前臺界面

該爬蟲平臺的前端界面筆者采用umi3+antd4.0開發(fā), 因為antd4.0相比之前版本確實體積和性能都提高了不少, 對于組件來說也做了更合理的拆分. 因為前端頁面實現(xiàn)比較簡單,整個前端代碼使用hooks寫不到200行,這里就不一一介紹了.大家可以在筆者的github上學(xué)習(xí)研究.CkD28資訊網(wǎng)——每日最新資訊28at.com

• github項目地址: 基于Apify+node+react搭建的有點意思的爬蟲平臺

界面如下:CkD28資訊網(wǎng)——每日最新資訊28at.com

CkD28資訊網(wǎng)——每日最新資訊28at.com

大家可以自己克隆本地運行, 也可以基于此開發(fā)屬于自己的爬蟲應(yīng)用.CkD28資訊網(wǎng)——每日最新資訊28at.com

項目使用的技術(shù)文檔地址

• apify 一款用于JavaScript的可伸縮的web爬蟲庫
• Puppeteer
• koa -- 基于nodejs平臺的下一代web開發(fā)框架

本文鏈接：http://www.www897cc.com/showinfo-26-102776-0.html基于Apify+node+react/vue搭建一個有點意思的爬蟲平臺

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 2024年新的原生嵌套CSS特性：絕對改變游戲規(guī)則

下一篇： 代碼水平暴增!掌握這五個JavaScript神技,讓你成為團隊最靚的仔