介绍
在本教程中，我们将使用 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 全局选择器滥用会导致什么问题_样式污染风险解析
css 想让按钮水平排列且间距一致怎么办_float left 与 margin 调整
css grid项目默认拉伸是为什么_通过alignstretch规则解释
css 想让表格列宽随屏幕调整怎么办_使用自动宽度和媒体查询实现列自适应
css伪类:target配合滚动导航高亮不生效_通过锚点和位置属性调整
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
更多
