介绍
在本教程中，我们将使用 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 (
loading...
}
{error && {error}
}
{lyrics && {lyrics}}
);
};
export default lyricsfinder;
该组件管理歌词、加载和错误消息的状态。它从 api 获取歌词并显示它们。
搜索表单组件
searchform 组件提供了一个表单供用户输入歌曲标题和艺术家姓名。
import { usestate } from "react";
const searchform = ({ onsearch }) => {
const [song, setsong] = usestate("");
const [artist, setartist] = usestate("");
const handlesubmit = (e) => {
e.preventdefault();
onsearch(song, artist);
};
return (
);
};
export default searchform;
该组件接受用户输入的歌曲标题和艺术家并触发搜索功能。
应用程序组件
app 组件管理布局并渲染 lyricsfinder 组件。
import lyricsfinder from './components/lyricsfinder'
import "./app.css"
const app = () => {
return (
lyrics finder
made with ❤️ by abhishek gurjar
ECTouch移动商城系统
ECTouch是上海商创网络科技有限公司推出的一套基于 PHP 和 MySQL 数据库构建的开源且易于使用的移动商城网店系统！应用于各种服务器平台的高效、快速和易于管理的网店解决方案，采用稳定的MVC框架开发，完美对接ecshop系统与模板堂众多模板，为中小企业提供最佳的移动电商解决方案。ECTouch程序源代码完全无加密。安装时只需将已集成的文件夹放进指定位置，通过浏览器访问一键安装，无需对已有
下载
)
}
export default app
该组件提供标题并在中心呈现 lyricsfinder 组件。
css 样式
css 设计应用程序以确保界面干净且用户友好。
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.app {
width: 100%;
height: 100vh;
background-image: url(./assets/images/bg.jpg);
background-size: cover;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.heading {
width: 200px;
height: 40px;
display: flex;
align-items: center;
margin-bottom: 20px;
justify-content: center;
background-color: #eab229;
color: black;
border: 2px solid white;
border-radius: 20px;
text-align: center;
}
.heading h1 {
font-size: 18px;
}
.lyrics-container {
margin-top: 10px;
color: white;
display: flex;
align-items: center;
flex-direction: column;
}
.input-container {
display: flex;
align-items: center;
flex-direction: column;
}
.track-input-box {
margin: 7px;
width: 500px;
height: 30px;
background-color: #363636;
border: 1.5px solid white;
border-radius: 7px;
overflow: hidden;
}
.track-input-box input {
width: 480px;
height: 30px;
background-color: #363636;
color: white;
margin-left: 10px;
outline: none;
border: none;
}
.input-search {
display: flex;
align-items: center;
justify-content: center;
}
.artist-input-box {
margin: 7px;
width: 400px;
height: 30px;
background-color: #363636;
border: 1.5px solid white;
border-radius: 7px;
overflow: hidden;
}
.artist-input-box input {
width: 380px;
height: 30px;
margin-left: 10px;
background-color: #363636;
color: white;
border: none;
outline: none;
}
.search-btn {
width: 100px;
padding: 6px;
border-radius: 7px;
border: 1.5px solid white;
background-color: #0e74ad;
color: white;
font-size: 16px;
}
.search-btn:hover {
background-color: #15557a;
}
.output-container {
background-color: black;
width: 600px;
height: 300px;
border: 1.5px solid white;
border-radius: 7px;
overflow-y: scroll;
margin-block: 40px;
}
.output-container::-webkit-scrollbar {
display: none;
}
.output-container p {
margin: 30px;
text-align: center;
font-size: 16px;
}
.footer {
font-size: 14px;
color: white;
}
样式确保布局简洁，具有用户友好的视觉效果和响应式设计。
安装与使用
要开始此项目，请克隆存储库并安装依赖项：
git clone https://github.com/abhishekgurjar-in/lyrics-finder.git
cd lyrics-finder
npm install
npm start
这将启动开发服务器，并且应用程序将在 http://localhost:3000 上运行。
现场演示
在此处查看歌词查找器的现场演示。
结论
lyrics finder 项目是练习集成 api 和在 react 中处理动态内容的绝佳方法。它提供了一个使用干净且交互式的用户界面构建有用的应用程序的实际示例。
制作人员
-
灵感：该项目的灵感来自于在听音乐时快速访问歌词的需求。
作者
abhishek gurjar 是一位 web 开发人员，热衷于构建交互式且引人入胜的 web 应用程序。您可以在 github 上关注他的工作。
相关文章
css 想给表格行奇偶项添加不同背景怎么办_使用 :nth-child(odd/even) 设置样式
css flexbox 布局调试困难怎么排查_通过主轴交叉轴逐项检查解释
html 文件中引入 css 的正确位置在哪_标准 css 引入位置说明
css 想制作响应式图片网格怎么办_css grid auto-fit auto-fill 配合
css 想让图片在鼠标经过时平滑放大动画怎么办_使用 transform scale keyframes 定义放大
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
更多
