用Electron写个带界面的nodejs爬虫

最新推荐文章于 2024-08-02 21:33:58 发布

Skylrk

最新推荐文章于 2024-08-02 21:33:58 发布

阅读量1.5w

点赞数 7

分类专栏： electron 文章标签： electron superagent

本文链接：https://blog.csdn.net/u011510678/article/details/80007028

版权

本文介绍了如何使用Electron框架创建一个带有界面的Node.js爬虫应用，包括设置环境、编写简单界面、下载验证码、模拟登录、数据抓取以及将数据导出为xlsx表格等步骤。

摘要由CSDN通过智能技术生成

什么是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="请输入登录密码">
          </div>
        </div&