爬取动态数据，爬取持久化数据

1. 动态内容与静态内容的区别

动态内容通常指通过 JavaScript 渲染或异步加载的数据。静态内容则是页面加载时直接可见的内容，通常通过 HTML 直接获取。很多现代网站都使用 JavaScript 动态渲染页面内容（例如 AJAX 请求）。

头条网站的热榜内容是动态加载的，页面最初只展示一个固定的热榜，而点击“换一换”按钮后，新的热榜内容会通过 JavaScript 异步加载。爬虫需要等待页面加载或等待某个元素（例如热榜内容）出现，才能获取这些数据。

2. 实现步骤

我们将按照以下步骤完成爬取任务：

• 打开今日头条网站并定位到热榜区域。
• 等待并抓取初始热榜内容。
• 点击“换一换”按钮，刷新热榜内容。
• 等待新内容加载并输出新的热榜数据。

3. 代码实现

3.1 步骤 1：创建 `Playwright` 脚本

首先，确保你已安装 Playwright：

npm install playwright

然后，创建一个 crawler.js 文件，并将以下代码添加到该文件中：

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: true });  // 启动浏览器
  const page = await browser.newPage();  // 新建一个页面

  // 打开今日头条网站
  await page.goto('https://toutiao.com');  

  // 等待热榜区域加载完成
  await page.waitForSelector('.home-hotboard');  // 热榜区域的容器（CSS 选择器）

  // 获取初始的热榜内容
  let hotList = await page.$$eval('.home-hotboard .news-title', items =>
    items.map(item => item.textContent.trim())  // 获取每个热榜项的文本内容
  );

  console.log('初始热榜内容：');
  console.log(hotList);

  // 点击“换一换”按钮
  const changeButton = await page.$('.refresh');  // 找到“换一换”按钮
  if (changeButton) {
    await changeButton.click();  // 点击按钮刷新热榜
  }

  // 等待新的热榜内容加载完成
  await page.waitForSelector('.home-hotboard');  // 等待热榜区域重新加载

  // 获取刷新后的热榜内容
  hotList = await page.$$eval('.home-hotboard .news-title', items =>
    items.map(item => item.textContent.trim())  // 获取新热榜项的文本内容
  );

  console.log('刷新后的热榜内容：');
  console.log(hotList);

  await browser.close();  // 关闭浏览器
})();

3.2 步骤 2：代码解析

启动浏览器和打开页面

const browser = await chromium.launch({ headless: true });  // 启动浏览器
const page = await browser.newPage();  // 新建一个页面
await page.goto('https://toutiao.com');  // 打开今日头条网站

这里我们启动了一个无头模式的 Chromium 浏览器并访问了头条网站。

等待热榜加载完成

await page.waitForSelector('.home-hotboard');  // 等待热榜区域加载完成

我们使用 waitForSelector 等待页面中的热榜区域（通过 CSS 选择器 .home-hotboard）加载完成。

获取初始热榜内容

  hotList = await page.$$eval('.home-hotboard .news-title', items =>
  items.map(item => item.textContent.trim())  // 获取每个热榜项的文本内容
);
console.log('初始热榜内容：');
console.log(hotList);

使用 $$eval 方法，我们选择了热榜区域内的所有 .news-title 元素，并输出它们的文本内容（即热榜的标题）。

点击“换一换”按钮并等待新内容加载

const changeButton = await page.$('.refresh');  // 找到“换一换”按钮
if (changeButton) {
  await changeButton.click();  // 点击按钮刷新热榜
}

await page.waitForSelector('.home-hotboard');  // 等待热榜区域重新加载

获取刷新后的热榜内容

  hotList = await page.$$eval('.home-hotboard .news-title', items =>
  items.map(item => item.textContent.trim())  // 获取新热榜项的文本内容
);
console.log('刷新后的热榜内容：');
console.log(hotList);

再次使用 $$eval 方法获取刷新后的热榜项内容，并将其输出到控制台。

关闭浏览器

await browser.close();  // 关闭浏览器

3.3 步骤 3：代码运行

在终端中运行以下命令来执行脚本：

node crawler.js

运行后，脚本会打印出初始热榜内容和刷新后的热榜内容。

梳理

通过本教程，你学会了如何使用 Playwright 爬取动态加载的内容。在实际项目中，很多网站的数据都依赖于 JavaScript 动态渲染和异步加载，掌握如何处理这些动态内容，对于编写有效的爬虫非常重要。

4. 数据存储的需求

在爬取数据后，通常会有以下几种存储方式：

• JSON 格式：适合存储结构化的数据，并且便于与其他系统交换。
• CSV 格式：适用于存储表格数据，常用于数据分析和处理。
• SQLite 数据库：适用于需要长期存储、查询的数据，适合小型的本地数据库需求。
我们将依次展示如何将爬取的数据保存为 JSON、CSV 文件，并将其插入 SQLite 数据库中。

5. 完整代码实现

5.1 环境准备

首先，我们从头条热榜爬取数据，并将其分别保存为 JSON、CSV 和 SQLite。首先确保你已经安装了 Playwright：

npm install playwright

并且安装了 json2csv 的 Node.js 库：

npm install json2csv

并且安装了 SQLite 的 Node.js 库：

npm install sqlite3

还可以通过以下命令确认是否正确按照

npm list json2csv

5.2 完整代码

const { chromium } = require('playwright');
const fs = require('fs');
const { Parser } = require('json2csv');
const sqlite3 = require('sqlite3').verbose();

// 设置最大循环次数，避免无限点击
const MAX_CLICKS = 5;

(async () => {
  const browser = await chromium.launch({ headless: false });  // 启动浏览器
  const page = await browser.newPage();  // 新建一个页面

  // 打开今日头条网站
  await page.goto('https://toutiao.com');  

  // 等待热榜区域加载完成
  await page.waitForSelector('.home-hotboard');  // 热榜区域的容器（CSS 选择器）

  // 用来记录已经爬取的热榜内容，避免重复
  let allHotList = new Set();

  // 点击“换一换”按钮并获取新的热榜内容
  for (let i = 0; i < MAX_CLICKS; i++) {
    // 获取热榜内容
    let hotList = await page.$$eval('.home-hotboard .news-title', items =>
      items.map(item => item.textContent.trim())  // 获取每个热榜项的文本内容
    );

    console.log(`第 ${i + 1} 次刷新后的热榜内容：`);
    console.log(hotList);

    // 去重：将本次内容添加到 Set 中，自动去重
    hotList.forEach(item => allHotList.add(item));

    // 点击“换一换”按钮
    const changeButton = await page.$('.refresh');  // 找到“换一换”按钮
    if (changeButton) {
      await changeButton.click();  // 点击按钮刷新热榜
    }

    // 等待新的热榜内容加载完成
    await page.waitForSelector('.home-hotboard');  // 等待热榜区域重新加载
  }

  // 将去重后的热榜内容转为数组
  allHotList = Array.from(allHotList);

  // 保存到 JSON 文件
  saveToJson(allHotList);

  // 保存到 CSV 文件
  saveToCsv(allHotList);

  // 保存到 SQLite 数据库
  saveToSQLite(allHotList);

  await browser.close();  // 关闭浏览器

})();

// 保存为 JSON 文件
function saveToJson(data) {
  const filePath = './hotlist.json';
  fs.writeFileSync(filePath, JSON.stringify(data, null, 2), 'utf-8');
  console.log(`数据已保存到 ${filePath}`);
}

// 保存为 CSV 文件
function saveToCsv(data) {
  if (data.length === 0) {
    console.log('数据为空，无法保存为 CSV 文件');
    return;
  }

  const filePath = './hotlist.csv';

  // 定义 CSV 文件的字段（列名）
  const fields = ['title'];  // 这里只需要定义一个字段名称，假设每个项是字符串

  const csvParser = new Parser({ fields });

  // 转换数据为 CSV 格式
  const csv = csvParser.parse(data.map(item => ({ title: item })));  // 将数据转换为对象数组

  // 保存为 CSV 文件
  fs.writeFileSync(filePath, csv, 'utf-8');
  console.log(`数据已保存到 ${filePath}`);
}

// 保存到 SQLite 数据库
function saveToSQLite(data) {
  const db = new sqlite3.Database('./hotlist.db', sqlite3.OPEN_READWRITE | sqlite3.OPEN_CREATE, (err) => {
    if (err) {
      console.error('数据库打开失败', err);
    } else {
      console.log('数据库打开成功');
    }
  });

  // 创建热榜表（如果不存在的话）
  db.run(`CREATE TABLE IF NOT EXISTS hotlist (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    title TEXT UNIQUE,
    timestamp DATETIME DEFAULT CURRENT_TIMESTAMP
  )`, (err) => {
    if (err) {
      console.error('创建表失败', err);
    } else {
      console.log('热榜表已创建或已存在');
    }
  });

  // 插入数据，确保不重复
  const stmt = db.prepare('INSERT OR IGNORE INTO hotlist (title, timestamp) VALUES (?, ?)');
  const currentTimestamp = new Date().toISOString(); // 获取当前时间戳，ISO 格式

  data.forEach((item) => {
    stmt.run(item, currentTimestamp, (err) => {
      if (err) {
        console.error('插入数据失败', err);
      } else {
        console.log('插入数据成功', item);
      }
    });
  });
  stmt.finalize();  // 完成插入操作

  // 查询并打印保存的内容
  db.all('SELECT * FROM hotlist', (err, rows) => {
    if (err) {
      console.error('查询出错:', err);
    } else {
      console.log('从数据库查询到的热榜数据：');
      rows.forEach(row => {
        console.log(`${row.id}: ${row.title} (时间: ${row.timestamp})`);
      });
    }
  });

  // 关闭数据库连接
  db.close((err) => {
    if (err) {
      console.error('关闭数据库失败', err);
    } else {
      console.log('数据库连接已关闭');
    }
  });
}