演示应用程序
学习如何将 Deezer API 集成到实际应用中。
我们在前面的章节中已经实际操作了 Deezer API 的各个端点。现在让我们回顾一下我们这个功能应用的工作流程。
工作流程
-
当我们运行应用程序时，首先看到的是首页。首页包含两个主要部分：
- 导航栏：包含搜索框、收藏按钮、播放列表按钮和登录按钮。
- 卡片组件：展示热门歌曲、专辑、艺术家、播放列表和播客的不同卡片。
-
每张卡片都可以点击，点击后会跳转到显示更多详细信息的页面。
-
通过页头的搜索框，可以搜索任意歌曲、专辑和艺术家。
-
登录按钮会将你重定向到 Deezer 登录页面，在那里你需要登录你的 Deezer 账户，并授权该应用，以便查看你的播放列表和收藏内容。
-
如果点击导航栏中的心形按钮，会进入收藏页面，展示已添加为收藏的歌曲。
-
播放列表按钮会显示你创建的所有播放列表。
下方的代码窗口包含了我们应用程序的代码。点击“运行”按钮，即可查看 React 应用的实际效果：
No configuration found for ID: c61b23c2625ac6328d8692c55aa020bf08ae928a22e1e5ff475b186753f20eb5
代码说明
让我们来看一下代码，了解我们是如何将 API 集成到应用中的。我们将从应用的后端服务器开始。
backend-server/index.js是 Node 服务器文件，它使用callApiAndSendResponseToClient和makeApiCall函数从不同的 Deezer API 端点获取响应，并将结果发送给前端应用。
我们的前端 React 应用包含多个组件，每个组件负责特定的功能，具体如下：
-
Home组件用于渲染应用的首页。 -
Navbar组件负责在页面顶部显示导航栏。 -
Footer组件用于显示应用的页脚。 -
SignIn组件负责将授权码发送到服务器，并重定向回首页。 -
Track组件展示歌曲的详细信息及其预览。 -
Album组件渲染专辑详情，包括其中的歌曲及歌曲预览。 -
Artist组件展示艺术家的信息以及每位艺术家的热门歌曲。 -
Playlist组件负责显示播放列表的详情，包括其中的歌曲及其预览。 -
Podcast组件渲染播客的详细信息。 -
Favorite组件展示被标记为收藏的歌曲及其预览。 -
UserPlaylist组件在点击导航栏中的播放列表按钮时，展示用户创建的播放列表。 -
Search组件用于渲染符合搜索条件的结果。