使用electorn开发google爬虫

发表于 | 分类于 | 阅读次数:

electron介绍

最近接触到 electron 的开发，elctron基于NodeJs以及Chromium(可以看作是一个完整的chrome浏览器)，这样就可以在nodejs环境下，开发html界面，并且通过electron提供的api使用本地计算机的资源，最后打包成一个应用程序，包括windows、linux、macos，三个平台兼容的应用程序，因为都是基于nodejs和Chromium，而他们包括electron的兼容都已经帮你做好了，直接用js写代码跑起来即可，最简单就是将一个网页（包含业务操作）打包成软件包。

爬虫工具nightmare介绍

nightmare 是基于electron开源出来的一个代码测试工具，也就是说模拟浏览器操作来测试你的代码，既然nightmare可以模拟浏览器操作，就突然想到是否能用它来模拟浏览器正常的浏览爬取数据，并且不需要研究协议、headers、cookie、ip等等，这些都不需要了，因为现在这就是一个普通的浏览器，当然频率过高还是会有一定的限制，经过一番搜索，nightmare本身并部支持在electron下再运行，但是！
有人fork了nightmare的源码，改出了一个可以在electron下运行的nightmare——eramthgin ，也就是说我们可以用js开发出一个带界面操作的爬虫软件！
理论上你能正常通过浏览器浏览的网站，他的内容你都可以通过nightmare进行获取，比如google，只要你的电脑可以正常访问就没有问题，electron默认就是chrome浏览器，默认代理就是使用的你的电脑设置的代理。

项目结构初始化

  1. 初始化项目
    electron项目基于electron-vue 的vue模板进行初始化，基本上帮你配好了熟悉的vue开发环境。
    1
    2
    3
    4
    # 安装vue-cli 并初始化模板
    npm install -g vue-cli
    # 初始化项目的时候我没选 eslint，暂时跟我的vscode兼容没设置好
    vue init simulatedgreg/electron-vue ele-crawler

package.json 修改，因为taobao没有2.0.10的镜像

1
2
3
4
5
6
7
devDependencies:{
    "electron": "^2.0.2"
}
// 修改为
devDependencies:{
    "electron": "2.0.9"
}

1
2
3
4
5
6
7
8
9
# 安装依赖运行
cd ele-crawler
# yarn安装比npm更快，设置淘宝镜像
yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass
yarn config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron
yarn config set registry https://registry.npm.taobao.org
# 安装如果报错的话，删掉node_modules文件夹，执行上面操作再安装，可解决99%的安装依赖报错问题
yarn
yarn run dev

现在electron-vue项目就跑起来了，系统会自动打开浏览器demo窗口。

  1. 安装nightmare
    1
    2
    3
    # 单独安装 nightmare,注意：包名不是nightmare，而是eramthgin
    # 或者你也可以在package.json先手动增加 "eramthgin": "^2.9.3"
    yarn add eramthgin

electron与nightmare开发

我们的目标是开发一个界面化的爬虫软件，那么就先做界面，做个最简单的。

界面修改

/src/renderer/components/LandingPage.vue

1
2
3
4
5
6
7
// 该vue文件的template里边的内容全部删除，只保留最外层的<div></div>
// 再在里边添加一个最简单的button
<template>
  <div id="wrapper">
    <button class="alt" @click="openbaidu">google爬虫</button>
  </div>
</template>

electron-vue项目默认已引用了electron的ipc通讯组件，我们直接引用即可
那么在methods里添加一个openbaidu方法

1
2
3
4
5
6
7
methods: {
      openbaidu(){
        // this.$electron.ipcRenderer可直接用来进行与主进程的ipc通信
        // 以下为向主进程发送一个google事件，在主进程里直接接受即可
        this.$electron.ipcRenderer.send('google')
      }
    }

主进程编写爬虫代码

我们需要做到2点

  • 其一，是在主进程中接收渲染进程发送过来的’google’事件，接收事件之后
    做对应的操作(开始爬页面)
  • 其二，需要将nightmare的代码进行封装，因为nightmare相当于一个实例化的对象，nightmare进程未结束之前不能对他做其他的操作，我们需要对他进行对象化，方便多个nightmare的控制(比如可以进行多个爬虫同时进行)
    以下均在 /src/main 目录下进行

新建 ipc.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import {ipcMain} from 'electron'
import crawler from './crawler'

// 异步爬google
async function getGoogleList(webGoogle){
    try {
        // 以power bank关键字，并指定在www.amazon.com搜索
        let googleRes = await webGoogle.crawlerWeb('power bank','www.amazon.com')
        return googleRes
    } catch (e) {
        console.log("错误:" + JSON.stringify(e))
        await webGoogle.closeWeb()
    }
}
// google网站翻页
async function nexaPage(webGoogle){
    await webGoogle.nightmare
    .evaluate(()=>{
        return document.querySelector('#pnnext')
    })
    .wait(1000)
    .click('#pnnext')
}

ipcMain.on('google', (event) => {
    // 初始化nightmare对象
    const cra = new crawler()
    getGoogleList(cra)
    .then(async ()=>{
        // 模拟翻页，根据实际情况编写代码
        for (let index = 0; index < 1; index++) {
            try {
                await nexaPage(cra)
            } catch (error) {
                console.log(error)
                await cra.closeWeb()
            }
            console.log(`已完成第${index +1}页`)
        }
        // 完成之后关闭nighmare进程，否则下次无法重新运行
        await cra.closeWeb()
    })
})

新建 crawler.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import Nightmare from 'eramthgin'

export default class crawler{
    constructor(show = true){
        // 初始化一个nightmare对象
        this.nightmare = Nightmare({
            show: show, //是否显示爬虫窗口
            gotoTimeout: 10000
        })
    }
    // nightmare调用，设置为async方法
    async crawlerWeb(typeContent="power bank",site="",url= "https://www.google.com",typeSelector="body",clickSelector=".jhp input[name='btnK']",wait=1000){
        let queryText = this.getQueryText(typeContent,site)
        return this.nightmare
        .goto(url)
        .type(typeSelector, queryText)
        .wait(wait)
        // 模拟enter键
        .type('body','\u000d')
        .wait(wait)
        .evaluate(()=> {
            let data = document.querySelector('#ires').innerHTML
            return data
        })
    }
    // 获取查询关键字，是否在指定网站搜索(site: www.amazon.com)
    getQueryText(typeContent,site){
        let queryText = ""
        if(site == ""){
            queryText = typeContent
        }else{
            queryText = `${typeContent} site:${site}`
        }
        return queryText
    }
    // 关闭当前渲染进程
    async closeWeb(){
        await this.nightmare.end()
    }
}

index.js

1
2
3
// 在任意地方引用ipc.js，建议与文件的import放在一起，方便管理
import { app, BrowserWindow } from 'electron'
require('./ipc.js')

测试

eletron-vue项目在dev环境开启了热更新，在修改完代码之后，界面上只有一个测试按钮，
点击按钮，会再自动弹出一个窗口，自动输入google的域名，自动输入关键字，自动点击查询，并且自动翻页。