在Electron中爬取CSDN首页的文章信息

背景

之前分享了Electron入门的相关文章:https://gitee.com/ruirui-study/electron-demo

后来,我就想在里面多做一些演示给大家看,集成了以下功能及演示:

  • 窗口管理、各种方法封装
  • 托盘管理
  • 菜单管理
  • 获取屏幕演示
  • 多窗口及通信演示
  • 等等......

然后,我就想着把之前的nodejs爬虫也集成进来演示,在Electron中做一些结合。先上效果图,这是爬取CSDN首页的数据。

选框架

nodejs的爬虫框架主要有2个

Puppeteer

  • 简介:Puppeteer 是由 Google 开发的 Node.js 库,它提供了一个高级 API 来控制 Chrome 或 Chromium 浏览器。通过 Puppeteer,你可以模拟用户在浏览器中的各种操作,如点击、滚动、输入等,从而可以处理动态渲染的页面。
  • 优点:能处理复杂的动态网页,支持截图、生成 PDF 等功能。
  • 适用场景:适用于需要处理动态内容、模拟用户交互的场景,例如爬取需要登录才能访问的页面、处理包含大量 JavaScript 渲染的页面。

Cheerio

  • 简介:Cheerio 本身并非完整的爬虫框架,但它是处理 HTML 和 XML 数据的强大工具,常与其他 HTTP 请求库搭配使用来构建爬虫。它仿照 jQuery 的 API 设计,使得开发者可以像在浏览器中操作 DOM 一样方便地解析和操作抓取到的 HTML 内容。
  • 优点:轻量级,学习成本低,对 DOM 操作支持友好。
  • 适用场景:适用于需要从 HTML 页面中提取特定数据的场景,例如提取网页中的标题、链接、图片等信息。

开始

由于不涉及复杂的场景,所以本实例选择轻量型的Cheerio框架,主要代码如下:

javascript 复制代码
import axios from "axios";
import * as cheerio from "cheerio";

// 目标网页的URL,这里使用 CSDN网站 作为测试,爬取主要文章标题等内容
const targetUrl = "https://www.csdn.net";

// 请求目标网页,获取HTML内容
const getHtml = async () => {
  const response = await axios.get(targetUrl);

  if (response.status !== 200) {
    throw new Error("请求失败");
  }
  return response.data;
};

// 解析HTML内容,获取菜品的标题和图片链接
const getData = async (html) => {
  const $ = cheerio.load(html);
  const list = [];
  $(".article-item").each((i, item) => {
    // 标题
    const title = $(item).find(".article-title").text().trim();
    // 简介
    const desc = $(item).find(".article-desc").text().trim();
    // 作者
    const author = $(item).find(".user-info").text().trim();
    // 阅读量、点赞量、收藏量
    const read_num = $(item).find(".article-bottom > div:nth-child(1) .num").text().replace('阅读 ', '');
    const zan_num = $(item).find(".article-bottom > div:nth-child(2) .num").text().replace('赞', '');
    const collect_num = $(item).find(".article-bottom > div:nth-child(3) .num").text().replace('收藏 ', '');

    // 文章链接
    const link  = $(item).find(".article-title").attr("href");

    // 封面图片
    const imgStyle = $(item).find(".back-img-banner").attr("style");
    const img = imgStyle
      ? imgStyle.replace(/\s+/g, '').match(/url\(["']?(.*?)["']?\)/i)?.[1]
      : ''; // 可设置默认图片

    list.push({
      title,
      desc,
      author,
      read_num,
      zan_num,
      collect_num,
      link,
      img
    });
  });
  return list;
};

启动方式

直接启动

如果你想直接启动,如执行node test.js,可以在末尾加下面的代码:

javascript 复制代码
(async () => {
  const html = await getHtml();
  const list = await getData(html);
  console.log("执行完毕", list);
  return list;
})();
暴露给主进程

你可以把爬取的结果返回给主进程,主进程再把结果发送给渲染进程,这样就能直接展示在前端界面了:

javascript 复制代码
// 暴露方法给外部使用,简单高效
export async function crawlCSDN() {
  try {
    const html = await getHtml();
    const list = await getData(html);
    return list;
  } catch (error) {
    throw new Error(`爬取失败: ${error.message}`);
  }
}

然后,你可以在主进程暴露方法给渲染进程,示例如下:

javascript 复制代码
import { crawlCSDN } from '@main/nodejs/crawler.mjs'

// CSDN爬虫
ipcMain.handle('crawler-csdn', async () => {
  try {
    const data = await crawlCSDN();
    return { status: 'success', data };
  } catch (error) {
    return { status: 'error', message: error.message };
  }
});

这样,你就可以直接在渲染进程中使用了:

javascript 复制代码
const crawlerCDN = async () => {
  try {
    const result = await window.electron.ipcRenderer.invoke('crawler-csdn');
    console.log('crawler-csdn - result', result)
    crawlerInfo.value = result;
  } catch (error) {
    console.error('Error crawler-csdn:', error);
  }
};
相关推荐
拾光拾趣录2 分钟前
前端面试真题深度解析:闭包、数组操作与 Promise 机制
前端·面试
小小小小宇6 分钟前
react中 baseQueue 和 baseUpdate所起的作用
前端
随笔记10 分钟前
uniapp蓝牙连接设备并发送接收信息
javascript·uni-app·app
脑袋大大的17 分钟前
从“PPT动画”到“丝滑如德芙”——uni-app x 动画性能的“终极奥义”
前端·javascript·nginx·uni-app·uniapp·app开发·混合开发
coding随想21 分钟前
深入浅出HTML5 CSS类扩展:getElementsByClassName和classList属性
前端·css·html5
程序视点24 分钟前
电脑硬件检测必备!图吧工具箱11年免费良心软件!100+免费工具合集
前端·windows·后端
随笔记35 分钟前
uniapp开发的app原生操作手机系统文件
前端·javascript·uni-app
陈随易1 小时前
国产之光,把AI融入到语言级别的编程语言-MoonBit
前端·后端·程序员
鹏程十八少1 小时前
9. Android 精通Android高级UI总结:自定义View与动画开发终极实战指南
前端
上单带刀不带妹1 小时前
ES6中import与export的用法详解
开发语言·javascript·es6·import·export