【2024羊城杯】初赛WEB-Lyrics For You解题分享
在2024年的羊城杯初赛中，有一道关于“WEB-Lyrics For You”的题目吸引了许多参赛者的注意。这道题目要求利用Web开发技术，设计并实现一个歌词搜索平台，通过用户输入的歌曲名称，可以查询并展示相关歌曲的歌词。本文将分享创建这个项目的思路、流程以及部分代码示例。
题目理解
在理解题目后，我们需要明确以下几个需求：
- 用户输入：用户能够输入歌曲名称或歌手名称进行查询。
- 数据获取：系统能够从某个平台获取相关歌曲的歌词。
- 结果展示：将获取到的歌词结果以友好的方式展示给用户。
技术选型
为了实现上述需求，我们可以选用以下技术栈：
- 前端：HTML、CSS、JavaScript（可考虑使用 React.js）。
- 后端：Node.js + Express.js 。
- 数据源：可使用公开API，如Musixmatch、Genius等，获取歌词信息。
开发步骤
1. 环境搭建
首先，我们需要搭建一个简单的Node.js服务器。目录结构可以如下：
/web-lyric-search
├── /public
│ ├── index.html
│ ├── styles.css
│ └── script.js
├── app.js
├── package.json
在项目根目录下初始化一个Node.js项目：
npm init -y
安装所需要的依赖：
npm install express axios cors
2. 创建服务器
在app.js中，我们创建一个简单的Express服务器，并设置跨域资源共享（CORS），以允许前端访问后端接口。
const express = require('express');
const axios = require('axios');
const cors = require('cors');
const app = express();
const PORT = 3000;
app.use(cors());
app.use(express.json());
app.use(express.static('public'));
// 歌词搜索接口
app.get('/api/lyric', async (req, res) => {
const { songName } = req.query;
try {
// 使用Genius API获取歌词（需替换为你自己的API KEY）
const response = await axios.get(`https://api.genius.com/search?q=${encodeURIComponent(songName)}`, {
headers: {
'Authorization': `Bearer YOUR_ACCESS_TOKEN`
}
});
const data = response.data.response.hits;
res.json(data);
} catch (error) {
res.status(500).send('Error fetching lyrics');
}
});
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
3. 前端页面
在/public/index.html中，构建一个简单的搜索框：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>歌曲歌词搜索</title>
</head>
<body>
<div class="container">
<h1>歌词搜索平台</h1>
<input type="text" id="songName" placeholder="输入歌曲名称">
<button onclick="searchLyric()">搜索</button>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>
在/public/script.js中，编写搜索功能：
async function searchLyric() {
const songName = document.getElementById('songName').value;
const response = await fetch(`http://localhost:3000/api/lyric?songName=${encodeURIComponent(songName)}`);
const data = await response.json();
displayResults(data);
}
function displayResults(data) {
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = '';
data.forEach(hit => {
const songTitle = hit.result.title;
const songUrl = hit.result.url;
resultDiv.innerHTML += `<div><a href="${songUrl}" target="_blank">${songTitle}</a></div>`;
});
}
4. 样式美化
在/public/styles.css中，增加一些基本的样式，使页面更加美观。
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
#result {
margin-top: 20px;
}
总结
通过本文的分享，我们简单介绍了如何利用Node.js和前端技术创建一个歌词搜索平台。整个过程包括环境搭建、服务器搭建、前端页面创建及样式美化。希望对参加2024羊城杯的选手们能有所帮助，在比赛中取得好成绩。如果需要进一步优化，可以考虑增加更多的功能，如歌词翻译、用户评论等。
