介绍

在本教程中，我们将使用 react 创建一个 lyrics finder web 应用程序。该项目非常适合那些想要练习集成 api、管理状态和显示动态内容的人。

项目概况

歌词查找器允许用户通过输入歌曲标题和艺术家姓名来搜索歌词。它从公共 api 获取歌词并将其显示在屏幕上。用户可以快速找到并阅读自己喜欢的歌曲的歌词。

特征

• 搜索功能：用户可以按歌曲标题和艺术家姓名搜索歌词。
• api 集成：从公共歌词 api 中获取歌词。
• 动态内容：根据用户输入动态显示歌词。
• 用户友好的界面：干净且易于使用的界面，用于搜索和查看歌词。

使用的技术

• react：用于构建用户界面和管理组件状态。
• css：用于设计应用程序的样式。
• javascript：用于处理 api 请求和应用程序逻辑。

项目结构

项目组织如下：

├── public
├── src
│   ├── components
│   │   ├── lyricsfinder.jsx
│   │   ├── searchform.jsx
│   ├── app.jsx
│   ├── app.css
│   ├── index.js
│   └── index.css
├── package.json
└── readme.md

关键部件

• lyricsfinder.jsx：管理搜索逻辑并显示获取的歌词。
• searchform.jsx：提供一个表单供用户输入歌曲标题和艺术家姓名。
• app.jsx：渲染主布局和 lyricsfinder 组件。

代码说明

lyricsfinder 组件

lyricsfinder 组件处理 api 集成并管理搜索结果。

import { usestate } from "react";
import searchform from "./searchform";

const lyricsfinder = () => {
  const [lyrics, setlyrics] = usestate("");
  const [loading, setloading] = usestate(false);
  const [error, seterror] = usestate("");

  const fetchlyrics = async (song, artist) => {
    setloading(true);
    seterror("");
    try {
      const response = await fetch(`https://api.lyrics.ovh/v1/${artist}/${song}`);
      if (!response.ok) {
        throw new error("lyrics not found");
      }
      const data = await response.json();
      setlyrics(data.lyrics);
    } catch (err) {
      seterror(err.message);
    } finally {
      setloading(false);
    }
  };

  return (
    <div classname="lyrics-finder">
      <searchform onsearch="{fetchlyrics}"></searchform>
      {loading && <p>loading...</p>}
      {error && <p classname="error">{error}</p>}
      {lyrics && <pre class="brush:php;toolbar:false;" classname="lyrics">{lyrics}

}