Podcast目录

等级：中级

在GitHub状态中，您学习了如何使用Request包从网页抓取信息。Podcast目录继续这一过程，并向您介绍另一个网络抓取包-Puppeteer。

尽管Request是一个有用的包，但它并不是专门为网络抓取而构建的，就像Puppeteer一样。随着您的网络抓取经验增加，您会发现有些网站和应用通过使用像Puppeteer这样的工具会更容易进行网络抓取，后者是专门为抓取而构建的。

重要的是要注意，虽然网络抓取有其用途，但使用API或数据源（如文件或数据库）通常比从页面抓取信息更好。原因是即使对页面样式进行微小更改，也可能使您的网络抓取器无法正常工作。例如，您的抓取逻辑所依赖的CSS类名发生更改。

Podcast目录应用程序的目标是从Podbean获取最新的Javascript Jabber和Techpoint Charlie播客，并创建一个新页面，该页面按广播日期对集数进行排序，创建一个合并的集数列表。

用户故事

[ ] 用户可以看到一个播客集数的表格
[ ] 用户可以在表格中看到一行显示可点击的集数图标、集数标题和最初播放日期。
[ ] 用户可以滚动列表
[ ] 用户可以点击集数图标在Podbean网站上显示该集数的页面。

额外功能

[ ] 用户可以看到集数表格中的行交替背景颜色。
[ ] 用户可以看到集数表上方的一个摘要，显示每个播客的集数数量。
[ ] 用户可以看到集数表上方摘要中每个播客名称旁边的可点击复选框。
[ ] 用户可以点击播客名称旁边的单选按钮，将该播客的集数包含在集数表中。

有用链接和资源

Puppeteer
使用无头浏览器进行网络抓取：Puppeteer教程
querySelectorAll
提示！您可以使用以下代码帮助您开始这个项目。您可以使用命令行命令node puptest执行此操作。

// puptest.js
const puppeteer = require('puppeteer');

const run = async () => {
  return new Promise(async (resolve, reject) => {
    try {
      const browser = await puppeteer.launch();
      const page = await browser.newPage();
      await page.goto("https://www.podbean.com/podcast-detail/d4un8-57595/JavaScript-Jabber-Podcast");
      let episodeLinks = await page.evaluate(() => {
        return Array.from(document.querySelectorAll('a.title')).map((item) => ({
            url:  item.getAttribute('href'),
            text: item.innerText
          })
        );
      });
      browser.close();
      return resolve(episodeLinks);
    } catch (e) {
      return reject(e);
    }
  })
}

run()
.then(console.log)
.catch(console.error);

完成此项目后，请查看高级项目MyPodcast Library

示例项目

不适用