用Electron写个带界面的nodejs爬虫

刺骨的言语ヽ痛彻心扉 2022-05-27 13:23 380阅读 0赞

## 什么是Electron ##

使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用
    [官网](https://electronjs.org/)

实质就是一个精简的Webkit浏览器显示html页面，通过electron做中间层可以和系统交流。给web项目套上一个node环境的壳。

--------------------

## 前言 ##

公司买的推广居然没有后台的api，没有api又不想死板手动操作。那就做个爬虫吧。但是又是给小白用的，自然最好带个界面，本来用C\#拖出来就好了，看到vs那么大，下载都要半天。干脆就用Electron做一个，顺便学习一下Electron。

## 准备工作 ##

安装nodejs
    npm安装electron（最好换成cnpm，不然可能失败）

## hello world ##

官方提供了快速开始的手脚架，怎么方便怎么来。

https://github.com/atom/electron-quick-start

clone下来  
![文件目录][70]

git那些不是我们需要的，就删掉。

安装相关的依赖，推荐用yarn。

yarn https://yarn.bootcss.com/

cd 到 目录下

cnpm install yarn
    yarn

等待依赖安装完成。

npm run start

顺利的话就可以看到程序启动。

![这里写图片描述][70 1]

--------------------

## 界面编写 ##

准备完毕，开始进入正题。  
用vscode打开文件夹，顺带一提，vscode也是基于electron。vscode不愧是巨硬出品，越来越好用了。  
整理一下  
![这里写图片描述][70 2]

这里就不累赘了。  
后台有多个小号要登录，就写个登录页面。  
编辑一下index.html

<html>
    <head>
      <meta charset="utf-8">
      <link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
      <div class="panel panel-default" style="margin: 10px">
        <div class="panel-body">
          <div class="form-horizontal" role="form">
            <div class="form-group">
              <label for="input_name" class="col-sm-2 control-label">登录帐号</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="input_name" placeholder="请输入用户名">
              </div>
            </div>
            <div class="form-group">
              <label for="input_pass" class="col-sm-2 control-label">登录密码</label>
              <div class="col-sm-10">
                <input type="password" class="form-control" id="input_pass" placeholder="请输入登录密码">
              </div>
            </div>
            <div class="form-group">
              <label for="input_check" class="col-sm-2 control-label">验证码：</label>
              <div class="col-sm-6">
                <input type="text" class="form-control" id="input_check" placeholder="请输入验证码">
              </div>
              <div class="col-sm-2">
                <img id="img_code" src="code.png" />
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-2">
                <button id="btn_submit" class="btn btn-default">登录</button>
              </div>
              <div class="col-sm-2">
                <button id="btn_refresh" class="btn btn-default">刷新验证码</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <script>
        require('./index.js');
      </script>
    </body>
    </html>

都是些 很简单的html代码，为了好看的就用了bootstrap

electron可以调用bootstap、jquery ，方便开发。调用jq有个小小的坑，注意一下。  
不过我这里不需要什么效果，就简单点。  
在vscode 快捷键 Ctrl + \` 调出 CMD 运行一下

npm run start

就可以看到我们刚刚写的网页了  
![这里写图片描述][70 3]

## 下载验证码 ##

登录是需要验证码的，我们把验证码下载下来。  
流程是 请求验证码网站，下载验证码保存到本地显示，验证码的cookie保存下来，后面登录时候需要用到cookie

安装需要的依赖 superagent ， fs-extra

编辑 main.js

说一下安装的依赖

fs-extra  fs-extra模块是系统fs模块的扩展，提供了更多便利的 API，并继承了fs模块的 API。
    
     主角就是 superagent https://www.npmjs.com/package/superagent

运行一下  
![这里写图片描述][70 4]

![这里写图片描述][70 5]

很好，我们要的验证码和cookie 都有了。

## 分析登录流程 ##

用 Fiddler 抓包工具和浏览器的调试控制台分析一下后台的登录。  
这里不是重点就略过了。

## Electron 通信 ##

渲染进程（就是网页） 登录 需要 主进程保存的codeCookie ，这就要两者进行通信。  
Electron之间的通信是用ipc  
主进程的是 ipcMain 也可以用 mainWindow.webContents来发送  
渲染进程的是 ipcRenderer  
这里演示一下 主进程发送cookie 给 渲染进程

main.js 文件

const ipcMain = electron.ipcMain;
    ipcMain.on('notice', (e, msg) => { switch (msg) { case 'getcodeCookie': mainWindow.webContents.send('codeCookie',codeCookie) break default: break } })

打开调试控制台 可以看到输出

index.js

const electron = require('electron');
    const ipcRenderer = electron.ipcRenderer;
    // 获取控件
    let btn_submit = document.getElementById("btn_submit");
    btn_submit.addEventListener('click', (e) => { ipcRenderer.send('notice', 'getcodeCookie'); }); // 监听 codeCookie ipcRenderer.on('codeCookie', (e, msg) => { codeCookie = msg; console.log('接受主进程发送的codeCookie: '+codeCookie); });

运行一下， 点击登录按钮  
就可以在调试控制台看到 codeCookie  
![这里写图片描述][70 6]

## 模拟登录 ##

我们需要登录后台，获取登录后cookie这样才方便我们操作。  
编辑index.js

这里只是演示一下代码怎么写，具体不一定那么顺利的拿到tokenCookie。具体情况具体分析。  
关键是请求要带上cookie

## 数据抓取 ##

成功进入到后台了，就要抓取需要的数据了。这里就需要 cheerio 工具了

cheerio https://cheerio.js.org/

可以理解是node上jq ， 操作基本跟jq是一样的。  
操作还是很简单的。  
要注意的是nodejs是异步的，就连for也是异步的。  
有时候要等待请求完成的话，就要用上 async 了。

## 导出xlsx表格 ##

爬虫基本完成了，怎么导出数据就随意了。  
如果是要生成xls表格，一般是用excel-export 简单够用  
我这里推荐 另一个 better-xlsx 。  
这里演示一下 ， 怎么调用系统的保存对话框，保存文件。  
编辑 index.js

运行一下，点击刷新验证码按钮就可以看到熟悉的系统对话框

[70]: /images/20220527/a29d234a80aa472d9ff73af65e2a52d0.png
[70 1]: /images/20220527/bbfa053af07f402fa48ddd32b7f9058d.png
[70 2]: /images/20220527/26529578d3ed481da0421fb29e37d2cf.png
[70 3]: /images/20220527/d409ed2e82b643c2a8ccb406a840d872.png
[70 4]: /images/20220527/c34221301fa349369381eb42c855cb83.png
[70 5]: /images/20220527/6bf211d82b964f329a44dd495446e980.png
[70 6]: /images/20220527/49a4b00cbdad41968d0e24d428474ade.png