参考地址 使用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浏览器,默认代理就是使用的你的电脑设置的代理。
项目结构初始化
初始化项目
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窗口。
安装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爬虫