用Electron写个带界面的nodejs爬虫

本文主要是介绍用Electron写个带界面的nodejs爬虫，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

什么是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下来
文件目录

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

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

yarn https://yarn.bootcss.com/

cd 到目录下

cnpm install yarn
yarn

等待依赖安装完成。

npm run start

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

这里写图片描述

界面编写

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

这里就不累赘了。
后台有多个小号要登录，就写个登录页面。
编辑一下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=