使用electorn开发爬虫

2020-03-06 19:31:53

参考地址  使用electorn开发google爬虫

最近接触到 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开发环境。

# 安装vue-cli 并初始化模板 npm install -g vue-cli # 初始化项目的时候我没选 eslint,暂时跟我的vscode兼容没设置好 vue init simulatedgreg/electron-vue ele-crawler


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


devDependencies:{    "electron": "^2.0.2" } // 修改为 devDependencies:{    "electron": "2.0.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

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

electron与nightmare开发


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


界面修改


/src/renderer/components/LandingPage.vue


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


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


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

主进程编写爬虫代码


我们需要做到2点


  • 其一,是在主进程中接收渲染进程发送过来的'google'事件,接收事件之后
    做对应的操作(开始爬页面)

  • 其二,需要将nightmare的代码进行封装,因为nightmare相当于一个实例化的对象,nightmare进程未结束之前不能对他做其他的操作,我们需要对他进行对象化,方便多个nightmare的控制(比如可以进行多个爬虫同时进行)
    以下均在 /src/main 目录下进行


新建 ipc.js


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


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


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

测试


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



google爬虫


  • 2018-12-04 15:30:01

    如何在Mac OS X上安装 Ruby运行环境

    ​ 对于新入门的开发者,如何安装 Ruby和Ruby Gems 的运行环境可能会是个问题,本页主要介绍如何用一条靠谱的路子快速安装 Ruby 开发环境。 此安装方法同样适用于产品环境!

  • 2018-12-04 15:31:15

    iOS--Pod install && Pod update

    许多人在最初接触CocoaPods时认为pod install只是在第一次为项目设置CocoaPods时使用,之后都应该使用pod update.看起来是这样,但也不是(But that's not the case at all.)。 这篇文章的目的就是教你啥时候用pod install,啥时候用pod update

  • 2018-12-04 15:33:19

    CocoaPods安装和使用教程

    当你开发iOS应用时,会经常使用到很多第三方开源类库,比如JSONKit,AFNetWorking等等。可能某个类库又用到其他类库,所以要使用它,必须得另外下载其他类库,而其他类库又用到其他类库,“子子孙孙无穷尽也”,这也许是比较特殊的情况。总之小编的意思就是,手动一个个去下载所需类库十分麻烦。另外一种常见情况是,你项目中用到的类库有更新,你必须得重新下载新版本,重新加入到项目中,十分麻烦。如果能有什么工具能解决这些恼人的问题,那将“善莫大焉”。所以,你需要 CocoaPods。

  • 2018-12-04 23:37:37

    pod install 和 pod update

    当我们新建一个Podfile文件运行后,会自动生成一个Podfile.lock文件,Podfile.lock文件里存储着我们已经安装的依赖库(pods)的版本。 当我们第一次运行Podfile时,如果对依赖库不指定版本的话,cocoapods会安装最新的版本,同时将pods的版本记录在Podfile.lock文件中。这个文件会保持对每个pod已安装版本的跟踪,并且锁定这些版本。

  • 2018-12-04 23:40:26

    pod删除已导入的第三方库和移除项目中的cocoapods

    CocoaPods是一个负责管理iOS项目中第三方开源库的工具。CocoaPods的项目源码在Github上管理。在我们有了CocoaPods这个工具之后,只需要将用到的第三方开源库放到一个名为Podfile的文件中,然后在命令行执行$ pod install命令。CocoaPods就会自动将这些第三方开源库的源码下载下来,并且为我的工程设置好相应的系统依赖和编译参数. 但是如果我们导入的某个第三方不适用,或者我们又不想使用该第三方,那我们又该如何将这些相关的东西从我们的项目中清理出去呢?

  • 2018-12-04 23:41:47

    制作自己的Pod库(公有/私有)

    目的:1.管理自己常用的类;2.组件化开发步骤:1.想一个比较酷的名字,在桌面简历文件夹。2.打开terminal,cd到这个文件夹下面,执行pod lib create  xxx(这里我们以JJCategoryKit为例子,下同)命令,如下图。这个过程会问几个问题,根据实际情况输入回答即可。这里我们选择添加demo,结束的时候会自动Lanuch这个app. 作者:深水日月 链接:https://www.jianshu.com/p/ece0b5721461 來源:简书 简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

  • 2018-12-05 06:08:26

    CocoaPods建立私有仓库 spec repo

    好多项目里都有公共的组件,copy来,copy去很容易出错,而且不容易维护,所以就想到用用cocoapods 建自己的私有库,Carthage用法虽然相对简单,但是它是把公共组件都放在framework里不容易单步调试,所以我还是选择用Cocoapods 来建立私有仓库 参考使用Cocoapods创建私有podspec

  • 2018-12-05 15:11:18

    为什么 Objective-C非常难

    作为一个Objective-C的coder,我总能听到一部 分人在这门语言上抱怨有很多问题。他们总在想快速学习这门语言来写一个App出来,但他们也总是联想到Objective-C看上去实在太难了或者在想这 些语法符号都是神马玩意?不错,他们问得非常好,所以本人也解释一下为什么很多程序员相比较学习Ruby或者Java很容易,但在决定开发iOS或者OS X应用时会那么犹豫。

  • 2018-12-05 15:22:23

    十分钟让你明白Objective-C的语法(和Java、C++的对比)

    很多想开发iOS,或者正在开发iOS的程序员以前都做过Java或者C++,当第一次看到Objective-C的代码时都会头疼,Objective-C的代码在语法上和Java, C++有着很大的区别,有的同学会感觉像是看天书一样。不过,语言都是相通的,有很多共性。下面列出Objective-C语言的语法和Java,C++的对比,这样你就会很容易Objective-C的语法是怎么回事了。

  • 2018-12-05 15:33:33

    一篇文章看懂有关iOS开发语言的一切!

    OS开发语言有哪些?OS开发语言主要包括什么?iOS开发语言具体怎么学习?今天重点介绍一下: iOS开发语言主要包括:C语言基础、Obiective-C编程、Swift、UIKit框架详解这几大块,在这里项目阶段就不详细的介绍了。 C语言基础 C语言是开发语言的基础,是最常用的一门程序设计语言,最常用于编写计算机程序。