演示应用程序

我们在前面的章节中已经通过实践掌握了不同电影数据库 API 端点的使用。现在，我们将这些端点整合到一个示例应用中。

工作流程

1. 当运行应用程序时，首先看到的是首页。首页包含两个主要部分：导航栏和卡片组件，它们都使用了 API 端点。
2. 对于卡片组件，将鼠标悬停在上面可以查看电影或电视剧的基本信息。点击“查看详情”后，会跳转到该电影或电视剧的详情页面。
3. 页面左上角显示的各种选项说明如下：
   • “MovieTV” 或 “Home”：如果不在首页，则跳转至首页。
   • “Movies”：跳转到电影页面，可查看最新、热门、受欢迎、评分最高、即将上映以及正在上映的电影。
   • “TV Shows”：跳转到电视剧页面，可查看最新、热门、受欢迎、评分最高、今日播出及正在播出的电视剧。
   • “People”：跳转到人物页面，展示 TMDB 上所有受欢迎的人物。
4. 在页面右上角，需选择要搜索的对象类型（电影、电视剧或人物），然后在搜索框中输入查询内容，最后点击搜索按钮或按回车键，即可进入结果页面。

演示应用

点击“运行”以启动应用程序，即可与应用进行交互。

注意：以下小部件仅展示了用于说明电影数据库 API 的必要文件。此外，请注意我们创建并使用了一个自定义 Hook useFetch，用于从任意 API 端点获取数据。

代码解析

让我们深入代码，了解如何将 TMDB 的多个端点集成到我们的 React 应用中。

对于我们的 React 应用，index.js 文件将 App 组件（即 App.js）作为根组件进行渲染。

1. 首页组件 Home.js 在 第 8 行 使用了趋势端点。我们利用该端点在首页展示热门电影和电视剧。

2. 结果页面组件 Results.js 在 第 12 行 使用了搜索端点。该端点接收媒体类型（电影或电视剧）和用户输入的查询字符串，并返回搜索结果。我们设置了 include_adult=false，以过滤掉成人内容。

3. 电影页面组件 Movies.js 在 第 6 至 10 行 使用了多个端点，包括热门电影、受欢迎电影、高分电影、即将上映电影和正在上映电影，用于展示各类电影集合。

4. 电视剧页面组件 TVs.js 在 第 6 至 10 行 也使用了多个端点，包括热门电视剧、受欢迎电视剧、高分电视剧、今日播出电视剧和正在播出电视剧，用于展示各类电视剧集合。

5. 电影详情页面组件 MovieDetails.js 使用以下端点来展示所选电影的详细信息：

   • 第 10 行：使用主电影详情端点，获取并展示所请求电影的所有基本信息。
   • 第 11 行：使用推荐端点，获取并展示与该电影相关的推荐电影列表。
   • 第 12 行：使用演员与工作人员端点，获取并展示该电影的全部演职人员信息。
   • 第 13 行：使用视频端点，获取并展示该电影的所有视频内容。

6. 电视剧详情页面组件 TVDetails.js 使用以下端点来展示所选电视剧的详细信息：

   • 第 10 行：使用主电视剧详情端点，获取并展示所请求电视剧的所有基本信息。
   • 第 11 行：使用推荐端点，获取并展示与该电视剧相关的推荐电视剧列表。
   • 第 12 行：使用演员与工作人员端点，获取并展示该电视剧的全部演职人员信息。
   • 第 13 行：使用视频端点，获取并展示该电视剧的所有视频内容。

7. 季度详情页面组件 SeasonDetails.js 在 第 10 行 使用季度端点，展示指定电视剧某一季的详细信息。该端点需要提供电视剧的 id 和 season_number，以确定具体是哪一季。

8. 集数详情页面组件 EpisodeDetails.js 在 第 11 行 使用集数端点，展示指定电视剧某一集的详细信息。该端点需要提供电视剧的 id、season_number 和 episode_number，以确定具体是哪一集。

9. 人物详情页面组件 PeopleDetails.js 在 第 9 行 使用人物端点，展示所请求人物的详细信息。该端点以 person_id 为必需参数。我们还在 第 10 行 使用了 combined_credits 端点，同样以 person_id 作为必需参数。

10. 人物列表页面 People.js 在 第 6 行 使用热门人物端点，获取并展示所有受欢迎的人物信息。