使用 ToolJet 和 Scraper API 构建一个高级 Web 数据抓取工具！🚀 🛠️ 简介步骤 3：显示抓取的数据

2025-06-10

使用 ToolJet 和 Scraper API 构建高级网页爬虫工具！🚀 🛠️

介绍

步骤3：显示抓取的数据

介绍

数据抓取可能非常繁琐，尤其是在处理动态内容时。但是，如果您能够在 UI 中即时预览抓取的数据，就会方便得多。ToolJet 与Scraper API结合，就能实现这一点。本教程将介绍如何设置脚本，使用 ToolJet 抓取数据并实时显示结果。

如果您曾经使用Google Colab或Selenium等工具进行过网页抓取，那么您一定了解其中的挑战。在这里，我们将采用一种不同的方法，使用 JavaScript 进行网页抓取，并利用 ToolJet 的可视化应用构建器来管理数据流。

先决条件

  • ToolJet ( https://github.com/ToolJet/ToolJet )：一个开源、低代码平台，旨在快速构建和部署内部工具。点击 此处注册免费的 ToolJet 云帐户。
  • JavaScript的基础知识。

首先创建一个名为TJ Web Scraper 的应用程序。

步骤 1：设计 UI 来显示抓取的数据

让我们使用 ToolJet 的可视化应用程序构建器来快速设计 UI。

  • 将容器 组件拖放到画布上。
  • 在容器内部，在左侧放置一个Icon组件作为徽标。
  • 在其旁边放置一个文本组件，并在其数据属性下输入“TJ Web Scraper”。
  • 在右侧放置另一个文本组件以显示抓取产品的总数。

图片描述

我们使用蓝色（十六进制代码：）#075ab9作为此应用程序的主要颜色；相应地更改所有组件的配色方案。

  • 在标题下方添加一个表格组件，在画布右下方添加一个按钮组件。

图片描述

这样，我们的 UI 只需几分钟就可以准备好。

步骤2：编写JavaScript代码来抓取数据

在此步骤中，我们将利用 Scraper API 从示例电商网站抓取数据。以下是该网站的预览：

图片描述

该网站包含一些产品，并附有图片、标题和价格。此外，它还有一个“加载更多”按钮，可以动态加载更多内容。

  • 首先，展开底部的查询面板，然后单击“添加”按钮创建一个新的“运行 JavaScript 代码”查询。将查询重命名为scrapeData。

  • 设置主要的抓取功能：创建runMainScript()协调抓取产品所需的所有逻辑的功能。

function runMainScript() {
    const API_KEY = 'SCRAPER_API_KEY'; 

    // Main logic goes here
    // .....
}
Enter fullscreen mode Exit fullscreen mode
  • 创建请求助手：使用 axios 构建辅助函数makeRequest()来处理 API 请求、管理响应并有效地处理错误。
async function makeRequest(url) {
    try {
        const response = await axios.get('https://api.scraperapi.com/', {
            params: {
                api_key: API_KEY,
                url: url
            }
        });
        return response.data;
    } catch (error) {
        if (error.response && error.response.status === 404) {
            throw new Error('404NotFound');
        }
        console.error(`Error making request to ${url}: ${error}`);
        return null;
    }
}
Enter fullscreen mode Exit fullscreen mode
  • 提取产品详情：定义parseProducts()函数，从 HTML 内容中收集相关信息（例如标题、价格和图片），并过滤掉不完整的数据。此函数使用针对目标网站定制的 HTML 选择器。
function parseProducts(html) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    const items = doc.querySelectorAll('.product-item');
    return Array.from(items).map(item => ({
        title: item.querySelector('.product-name')?.textContent.trim() || '',
        price: item.querySelector('.product-price')?.textContent.trim() || '',
        image: item.querySelector('img')?.src || 'N/A',
        url: item.querySelector('a')?.href || null
    })).filter(item => item.title && item.price);
}
Enter fullscreen mode Exit fullscreen mode
  • 处理动态加载：fetchProducts() 函数负责管理初始页面加载以及任何其他 AJAX 请求，收集所有可用产品。它将总数保存在 ToolJet变量中。
async function fetchProducts(pageUrl, ajaxUrl) {
    let products = [];
    let offset = 0;
    const initialPageHtml = await makeRequest(pageUrl);

    if (!initialPageHtml) return products;
    products = products.concat(parseProducts(initialPageHtml));

    while (true) {
        const ajaxHtml = await makeRequest(`${ajaxUrl}?offset=${offset}`);
        if (!ajaxHtml) break;
        const newProducts = parseProducts(ajaxHtml);
        if (newProducts.length === 0) break;
        products = products.concat(newProducts);
        offset += 12;
        console.log(`Scraped ${products.length} products so far...`);
        // Save the length of the total products fetched in a ToolJet variable
        actions.setVariable('totalProductsScraped', products.length);
    }
    return products;
}
Enter fullscreen mode Exit fullscreen mode
  • 启动抓取过程：实现scrapeProducts()触发抓取的功能并输出最终收集到的产品数量。
async function scrapeProducts() {
    const pageUrl = "https://www.scrapingcourse.com/button-click";
    const ajaxUrl = "https://www.scrapingcourse.com/ajax/products";
    let products = await fetchProducts(pageUrl, ajaxUrl);
    console.log(`\nTotal products scraped: ${products.length}`);
    return products;
}
Enter fullscreen mode Exit fullscreen mode
  • 运行脚本并处理结果：执行抓取过程，保存数据，并记录产品样本以供审查，并通过设置错误变量来处理潜在错误。
scrapeProducts().then(products => {
    // Save all the products fetched from the eCommerce website
    actions.setVariable('scrapedProducts', products);
    console.log("\nScraped products stored in 'scrapedProducts' variable.");
    console.log(`Total products: ${products.length}`);
    console.log("\nSample of scraped products:");
    products.slice(0, 5).forEach(product => {
        console.log(`Title: ${product.title}`);
        console.log(`Price: ${product.price}`);
        console.log(`Image: ${product.image}`);
        console.log(`URL: ${product.url}`);
        console.log("---");
    });
}).catch(error => {
    actions.setVariable('scrapingError', error.message);
    console.error("An error occurred:", error);
});
Enter fullscreen mode Exit fullscreen mode
  • 是时候查看代码的运行了：调用runMainScript()函数来启动整个过程。
function runMainScript() {
    // Main logic
    // .....
}

runMainScript();
Enter fullscreen mode Exit fullscreen mode

数据抓取代码已完成。上述网页抓取代码需要根据每个目标网站进行调整。

单击查询面板上的运行按钮，并检查将出现在浏览器控制台中的所有日志。

图片描述

步骤3：显示抓取的数据

设置好 UI 和代码后，我们现在可以专注于在 Table 组件上显示数据并根据按钮单击触发代码。

  • 选择按钮组件，导航到其属性并创建一个新的事件处理程序。
  • 选择“单击时”作为事件、“运行查询”作为操作以及“scrapeData”作为查询。

图片描述

  • 选择表格组件，然后在其数据属性下输入{{variables.scrapedProducts}}。
  • 选择标题中创建的用于显示已抓取产品总数的Text{{"Total Products Scraped: " + variables.totalProductsScraped || 0 }}组件。在其 Data 属性下输入代码。

我们已经成功将组件与查询关联起来。现在，只需单击按钮组件，即可看到数据被抓取并显示在表格组件中。

图片描述

结论

有效地抓取数据需要克服诸如动态内容和分页等挑战，尤其是在处理 AJAX 加载的页面时。使用 ToolJet 结合 Scraper API，您可以简化此过程，并能够通过简洁的用户界面即时预览和管理抓取的数据。

与 Selenium 网页抓取或使用 Google Colab 等传统方法不同，此方法将 JavaScript 网页抓取无缝集成到您的工作流程中，并可实时查看数据。在此基础上，您可以扩展该工具以处理更复杂的抓取需求，同时保持直观的界面。

要了解更多信息，请查看ToolJet 的官方文档或通过Slack咨询任何问题。💡

链接：https://dev.to/tooljet/build-an-advanced-web-scraping-tool-using-tooljet-and-scraper-api-fp7
Devto 翻译
PREV
使用 Gemini API 和 ToolJet 在 10 分钟内构建 AI 内容生成器🛠️
NEXT
从头构建 100kB Docker 镜像