东莞找做网站的智能建站系统

1. 环境准备

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

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

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

2. 创建爬虫

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

scraper.js

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

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博客