用Electron写个带界面的nodejs爬虫

最新推荐文章于 2024-06-03 09:41:11 发布
最新推荐文章于 2024-06-03 09:41:11 发布
阅读量1.5w 收藏 31
点赞数 7
分类专栏： electron 文章标签： electron superagent 
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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&
最低0.47元/天 解锁文章
Skylrk
关注
  • 7
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
用Electron写个带界面的nodejs爬虫的实现方法
10-17
主要介绍了用Electron写个带界面的nodejs爬虫的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
第五章 Electron|Node 使用cheerio 爬虫
Etc.End的博客
06-02 2444
Cheerio是一个快速、灵活且精益的jQuery核心实现，用于在Node.js环境中解析HTML文档。它可以帮助您在服务器端轻松地从HTML文档中提取数据，比如从网页中提取文章标题、内容、图片等信息。
探索未来桌面应用的创新融合：Electron + Next.js 开源项目深度剖析与推荐
最新发布
gitblog_00028的博客
06-03 427
探索未来桌面应用的创新融合：Electron + Next.js 开源项目深度剖析与推荐 项目地址:https://gitcode.com/leo/electron-next-skeleton 项目介绍 在当今的技术大潮中，跨平台应用开发已成为开发者不可或缺的技能之一。结合 Electron 的强大跨平台能力和 Next.js 精益的前端框架，一个名为“Electron + Next.js”的开源...
基于 Electron 的爬虫框架 Nightmare
weixin_34364071的博客
09-12 780
作者：William 本文为原创文章，转载请注明作者及出处 Electron 可以让你使用纯 JavaScript 调用 Chrome 丰富的原生的接口来创造桌面应用。你可以把它看作一个专注于桌面应用的 Node.js 的变体，而不是 Web 服务器。其基于浏览器的应用方式可以极方便的做各种响应式的交互，接下来介绍下关于 Electron 上衍生出的框架 Nightmare。 Nightmar...
使用Electron实现一个爬虫工具
qq_35090060的博客
07-25 1267
Electron实现爬虫应用
electron爬虫：定制专属CSDN应用
微小冷的学习笔记
05-08 2175
electron定制CSDN iframe也好，webview也罢，都是直接嵌入网页，几乎不存在对网页定制的可能，而且很多网站是禁止被插入别人的网页的。 所以，若想重新规划某个网站的网页，并写在自己的App中，那就只能用爬虫了。 node爬虫 爬虫操作需要两个额外的包：request和cheerio，前者请求目标链接，后者分析dom元素。 npm install request --save npm install cheerio --save 如今node做得越来越智能了，其命令行提供的补全功能可以减少
第八章 Electron 实现音乐播放器之爬虫播放音乐
Etc.End的博客
06-15 2079
我在第五章已经有一篇Electron爬虫的文章，主要写的爬取图片资源的案例。这篇开始讲解如何到一个音乐网站爬取音乐资源，并且进行在线播放，下载等等。那么什么是爬虫呢。百度百科上爬虫既是网络爬虫（又称为网页蜘蛛，网络机器人，在社区中间，更经常的称为网页追逐者），是一种按照一定的规则，自动地抓取信息的程序或者脚本。我个人的理解就是，爬虫是一种自动化程序，它可以模拟人类浏览网页的行为，从互联网上爬取数据并进行处理。
opencv-electron：将opencv4nodejs与电子结合使用的示例
02-04
"electron-rebuild": "electron-rebuild -w opencv4nodejs" 纯js 此示例说明如何在没有任何捆绑程序的情况下将opencv4nodejs与电子和纯HTML + Javascript一起使用。 运行此示例： 设置opencv4nodejs，电子并为电子...
electron-serialport.zip_electron 读串口_electron串口_nodejs_nodejs串口编
07-13
在描述中提到的“nodeJs串口通信”和“nodejs串口编程”就是指使用这个模块进行串行通信的过程。 3. **SerialPort模块**： `serialport`是Node.js的一个核心第三方库，它为Node.js提供了对串口的低级访问。开发者...
Electron:从零开始写一个记事本app
02-24
本文的目的是通过使用Electron开发一个完整但简单的小应用：记事本，来体验一下这个神器的开发过程。本文犹如HelloWorld一样的存在，是个入门级笔记，但如果你之前从未接触过Electron，而又对它有兴趣，某想信这会是...
weiboPicDownloader:一个使用Electron-Vue编写的免登录下载微博图片的桌面爬虫应用
03-12
微博图片下载器 一个使用Electron-Vue + ElementUI构建的免登录下载微博图片的桌面爬虫应用； 安装方法 ①压缩包方式安装 下载右侧对应平台的发行包，解压缩即可； ②源码编译 克隆本项目： git clone git@github.com:JasonkayZK/weiboPicDownloader.git 使用yarn或npm安装依赖： npm install 或 yarn install 编译本项目： # 编译对应平台： npm run build 也可以修改package.json中的配置，如在scripts中添加一条： { " scripts " : { " build " : " node .electron-vue/build.js && electron-builder " , " build:win " : " node .el
ZSpider:基于Electron爬虫程序, 可以切换到主分支查看原来代码
05-28
治电爬虫程序 功能 夜间模式 创建/修改应用 导入/导出应用 数据采集 数据发布 (MySQL), 可导出Excel, JSON文件 本地应用上传, 远程应用获取 客户端与服务端通信 新增代码应用 插入代码片段功能 开发与打包 # install dependencies npm install # serve with hot reload at localhost:9080 npm run serve # build electron application for production npm run build # lint all JS/Vue component files in `src/` npm run lint 相关问题 1.导入示例应用 a.文件夹名称: example b.应用: house365应用.zpk 代码测试应用.zpk c.导入 在主页面点击导入应用,
MagentSearch:electron做的简易磁力搜索（node.js爬虫）
05-02
MagentSearch electron做的简易磁力搜索（node.js爬虫） electron version:1.4.3 os: deepin15.5 如何运行测试？ 第一步：安装electron 第二步：进入package.json所在的目录 第三步：打开终端输入 “electron .”，回车运行
electron爬虫：定制CSDN App
05-08
electron爬虫：定制CSDN App 博客地址：https://tinycool.blog.csdn.net/article/details/124655279
electron-with-nextjs:将Next.js与自定义Express Server和Material UI结合使用的Electron应用程序
05-10
注意：这是一项工作，进展Swift 与下一个电子 一个从Electron产生Next.JS应用程序并使用它提供内容的项目。 应用主界面： 抽屉： 服务器日志： 地位 菜单在全屏模式下坏了，我不知道为什么。 也许对Material UI 1.x的更新将解决此问题。 建筑学 （去做...） 只是关于pages/index.js的真实快速注释...真是一团糟，很快就会修复。 怎么跑 （我稍后会对此进行修改，但想尽快获得一些信息。） 这是源布局的样子（请注意，是Node.exe和Node.lib的简化版本。这将用于生成Next.JS应用程序） 源文件夹布局： 运行'electron-with-nextjs'的指令几乎与我的其他项目完全相同。 不同之处在于，对于生产版本，您需要运行“下一个版本”，并将package.json的“ node”部分中的“ production”键更改为t
Nodejs爬虫Electron的安装缓慢问题（未解决，最终等待直到成功）
gwdfff的博客
04-07 355
最终成功。画面(2020-4-7 0:08:42)。 爬虫也执行成功。 各种尝试无法解决下载缓慢问题。无效。 原来这是一个微型的浏览器。 进行下一步的学习。
如何解决网站源码（加密混淆）没有信息也能正确的抓取信息？如何利用electron抓取网站信息？爬虫
guiplan
07-08 1177
如何解决网站源码（加密混淆）没有信息也能正确的抓取信息？如何利用electron抓取网站信息？爬虫首先我们来安装electron,本节课暂不演示electron的安装了，有兴趣的同学可以自己试一试。下载electron-quick-start启动项目修改index.html页面6．创建test.js并修改修改main.js附带几张效果截图 传统的爬虫技术大部分都是通过源代码来获取页面内容，但现在随着社会的发展很多html代码都是动态渲染，渲染逻辑都是在js里处理了。前端的打包编译混淆之后，源码基本连自己都看
使用Electron开发基于Node.js的桌面应用：开发环境的搭建（一）
dm569263708的专栏
07-26 793
概念 Electron可以使用JavaScript, HTML 和 CSS 构建跨平台的桌面应用，对于前段的工程师来说为他们进入PC应用打开一扇大门。 一、开发环境搭建： 进入Node官网，下载指定版本的安装包：https://nodejs.org/zh-cn/download/releases/。我安装的版本是node-v8.10.0-x64.msi，安装包默认自带npm。 安装完毕后...
用electron写一个微信样式的聊天界面代码
05-11
由于微信属于第三方应用程序，需要使用微信提供的公共API接口进行开发，不过我们可以用 Electron 来构建一个基本的聊天界面。下面是一个简单的示例代码： 1. 安装 Electron： ``` npm install electron --save ``` 2. 创建一个 index.html 文件： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>微信聊天界面</title> </head> <body> <div id="container"></div> <script src="./renderer.js"></script> </body> </html> ``` 3. 创建一个 renderer.js 文件： ``` const { ipcRenderer } = require('electron'); const container = document.getElementById('container'); // 发送消息 const sendMessage = (message) => { ipcRenderer.send('message', message); }; // 接收消息 ipcRenderer.on('message', (event, message) => { container.innerHTML += `<div class="message">${message}</div>`; }); // 输入框 const input = document.createElement('input'); input.type = 'text'; input.placeholder = '请输入消息...'; input.addEventListener('keydown', (event) => { if (event.key === 'Enter' && input.value) { sendMessage(input.value); input.value = ''; } }); // 发送按钮 const button = document.createElement('button'); button.textContent = '发送'; button.addEventListener('click', () => { if (input.value) { sendMessage(input.value); input.value = ''; } }); // 添加到页面 container.appendChild(input); container.appendChild(button); ``` 4. 创建一个 main.js 文件： ``` const { app, BrowserWindow, ipcMain } = require('electron'); let mainWindow; function createWindow() { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }); mainWindow.loadFile('index.html'); mainWindow.on('closed', function () { mainWindow = null; }); } app.on('ready', createWindow); app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit(); }); app.on('activate', function () { if (mainWindow === null) createWindow(); }); // 监听消息 ipcMain.on('message', (event, message) => { mainWindow.webContents.send('message', message); }); ``` 以上代码创建了一个基本的聊天界面，可以在输入框中输入消息并发送到主进程，主进程接收到消息后再将其发送到渲染进程显示在界面上。 注意：以上示例代码只是一个简单的示例，实际开发中需要根据具体需求进行修改和完善。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值