前言
在这篇文章中，我将分享一个简单的爬虫示例，使用 Puppeteer 爬取蘑菇街上的商品图片。Puppeteer 是一个 Node.js 库，它提供了一个高级 API 来控制无头 Chrome 浏览器。通过这个爬虫，我们可以自动化地获取商城商品的图片信息并保存到本地。

项目准备
首先，我们需要安装 Puppeteer 和其他必要的 Node.js 模块。确保你已经安装了 Node.js，然后在项目目录下运行以下命令：

npm install puppeteer fs request

爬虫代码
以下是完整的爬虫代码实现：

const puppeteer = require('puppeteer');
const fs = require('fs');
const request = require('request');
const path = require('path');

// 爬取蘑菇街童装图片数据
(async () => {
  let browser = await puppeteer.launch();
  let page = await browser.newPage();
  await page.goto('https://list.mogu.com/search/goods?q=裙子');

  let items = await page.$$eval('a.pin-box', el => el.map(x => x.getAttribute("href")));   // 获取列表 a 链接 href
  // 堆代码 duidaima.com
  // 轮训获取详情
  for (let item of items) {
    await page.goto(item);
    let title = await page.$('span.title');
    let name = await (await title.getProperty('innerText')).jsonValue(); // 获取商品名称
    let images = await page.$$eval('li.img>img', el => el.map(x => x.getAttribute('src')));  // 展示图片
    let detailImg = await page.$$eval('img.lazy', el => el.map(x => x.getAttribute('data-original')));  // 详情图片
    mkdirSync(`./product/${name}/images/`);        // 存放目录
    mkdirSync(`./product/${name}/detailImg/`);     // 存放目录
    for (i of images) {
      let src = i.replace(/_100x100.jpg/, '');
      await downloadImg(src, './product/' + name + '/images/' + new Date().getTime() + '.jpg');
    }
    for (m of detailImg) {
      await downloadImg(m, './product/' + name + '/detailImg/' + new Date().getTime() + '.jpg');
    }
  }
  // 关闭
  await browser.close();
})();

// 同步创建目录
function mkdirSync(dirname) {
  if (fs.existsSync(dirname)) {
    return true;
  } else {
    if (mkdirSync(path.dirname(dirname))) {
      fs.mkdirSync(dirname);
      return true;
    }
  }
  return false
}

// 下载文件 保存图片
async function downloadImg(src, path) {
  return new Promise(async function (resolve, reject) {
    let writeStream = fs.createWriteStream(path);
    let readStream = await request(src);
    await readStream.pipe(writeStream);
    readStream.on('end', function () {
      console.log('文件下载成功');
    });
    readStream.on('error', function () {
      console.log("错误信息:" + err)
    })
    writeStream.on("finish", function () {
      console.log("文件写入成功");
      writeStream.end();
      resolve();
    });
  })
}

代码解析
初始化 Puppeteer：我们启动一个无头浏览器实例，并打开一个新页面。
访问目标网站：通过 page.goto() 方法访问蘑菇街的商品列表页面。
获取商品链接：使用 page.$$eval() 方法提取所有商品的链接。
遍历商品详情：逐个访问商品详情页，获取商品名称、展示图片和详情图片。
创建目录并保存图片：为每个商品创建对应的目录，并下载图片到本地。
关闭浏览器：完成所有操作后，关闭浏览器实例。
总结
通过这个简单的爬虫示例，我们可以轻松地从蘑菇街上获取商品的图片信息。Puppeteer 提供了强大的功能来自动化浏览器操作，使得数据采集变得更加高效和便捷。希望这篇文章对你有所帮助！如果有任何问题或建议，欢迎留言讨论。