基于Node.js的Web爬虫: 使用Axios和Cheerio抓取网页数据

1. 环境准备

在开始之前，请确保计算机上已安装Node.js

javascript 复制代码

mkdir webScraper
cd webScraper
npm init -y
npm install axios cheerio express

axios: 用于发送HTTP请求。
cheerio: 用于解析和操作HTML。
express: 用于创建Web服务器。

2. 创建爬虫

在文件夹中创建一个新的文件 scraper.js，并将以下代码粘贴到文件中：

scraper.js

javascript 复制代码

const axios = require('axios');          // HTTP客户端库，用于发送请求
const cheerio = require('cheerio');      // HTML解析库，类似jQuery语法
const url = require('url');               // URL处理模块，用于解析相对路径

// 导出数据抓取函数
module.exports = { scrapeData };

/**
 * 网页数据抓取主函数
 * @param {string} baseUrl - 要抓取的目标网页URL
 * @returns {Promise<Array>} 抓取结果数组
 */
async function scrapeData(baseUrl) {
    try {
        // 发送HTTP GET请求获取网页内容
        const { data } = await axios.get(baseUrl);
        // 加载HTML内容到cheerio实例
        const $ = cheerio.load(data);

        const results = [];
        // 遍历所有符合要求的<a>标签
        $('a.mm-pic-box').each((index, element) => {
            // 提取元素属性
            const relativeHref = $(element).attr('href');
            const imgElement = $(element).find('img');
            const pElement = $(element).find('p');

            // 构建结果对象
            results.push({
                title: $(element).attr('title') || '',    // 链接标题属性
                href: url.resolve(baseUrl, relativeHref), // 转换为绝对路径的链接
                paragraph: pElement.first()              // 第一个<p>标签内容
                    .text()                               // 提取文本
                    .replace(/[\t\n]/g, ''),              // 清理空白字符
                image: imgElement.length ? {              // 图片信息处理
                    src: url.resolve(baseUrl, imgElement.attr('src')),
                } : null
            });
        });

        return results;
    } catch (error) {
        console.error(`Error fetching data: ${error}`);
    }
}

// 模块测试代码
scrapeData('http://example/news/').then(data => {
    console.log(data);
});

在scraper.js中，使用了axios获取网页内容，用cheerio解析HTML，并导出了scrapeData函数。函数内部遍历特定类名的a标签，提取标题、链接、段落和图片信息。需要在这些关键部分添加注释，说明每个步骤的作用。

3.创建Express服务器

在文件夹中创建一个新文件 server.js，作为一个简单的Express服务器来展示我们抓取的数据。

server.js

javascript 复制代码

const express = require('express');
const { scrapeData } = require('./scraper');
const cors = require('cors');  // 跨域资源共享中间件

// 创建Express应用实例
const app = express();
// 设置服务端口（环境变量优先，默认3000）
const PORT = process.env.PORT || 3000;

// 配置CORS中间件
app.use(cors({
    origin: 'http://localhost:5173', // 允许访问的前端域名
    methods: ['GET']                // 允许的HTTP方法
}));


  // 在app.get('/scrape')路由前添加根路由
  // app.get('/', (req, res) => {
  //     res.send('Scraper API is running');
  // });

app.get('/scrape', async (req, res) => {
    // 从查询参数获取目标网址
    const baseUrl = req.query.baseUrl;
    
    // 参数校验
    if (!baseUrl) {
        return res.status(400).send('URL is required');
    }

    try {
        // 调用抓取函数并返回JSON结果
        const data = await scrapeData(baseUrl);
        res.json(data);
    } catch (error) {
        // 错误处理
        res.status(500).send('Server error');
    }
});

// 启动HTTP服务
app.listen(PORT, '0.0.0.0', () => {  // 监听所有网络接口
    console.log(`Server is running on http://localhost:${PORT}`);
});

对于server.js，使用Express搭建了服务器，配置了CORS，并定义了/scrape和根路由。需要注释说明中间件的作用、路由的功能以及监听的配置。

在server.js中，CORS配置、路由处理、错误响应和服务器启动部分需要注释。特别是根路由和/scrape路由的区别，以及监听的网络接口设置。

参考：基于Node.js的Web爬虫: 使用Axios和Cheerio抓取网页数据并展示_node axios cheerio-CSDN博客