如何将CSV歌曲数据展示到HTML指定DIV并实现点击入队功能

一、纯前端实现方案（无需后端依赖） #

直接用JavaScript读取CSV文件并完成功能，步骤如下：

1. 准备CSV文件 #

假设你的CSV文件（命名为songs.csv）格式如下：

歌曲名称,歌手
晴天,周杰伦
告白气球,周杰伦
稻香,周杰伦

2. 修改HTML代码 #

替换原HTML为以下内容，包含CSV读取、歌曲渲染和队列添加逻辑：

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link href="style.css" rel="stylesheet">
    <title>Music Player</title>
</head>
<body>
    <div class="float-container">
        <div class="float-child">
          <p>Queue</p>
          <div class="playlist" id="queueList">
          </div>
        </div>
        
        <div class="float-child">
          <p>Music Player</p>
          <p><button id="recommendBtn">Recommend</button></p>
          <div class="Songs" id="songsContainer">
          </div>
        </div>
    </div>

    <script>
        // 读取并解析CSV文件
        async function loadSongs() {
            try {
                const res = await fetch('songs.csv');
                const csvText = await res.text();
                const rows = csvText.split('\n').filter(row => row.trim());
                const songs = [];

                // 跳过表头，处理每一行数据
                for (let i = 1; i < rows.length; i++) {
                    const [name, artist] = rows[i].split(',');
                    songs.push({ name: name.trim(), artist: artist.trim() });
                }
                return songs;
            } catch (err) {
                console.error('读取CSV失败:', err);
                return [];
            }
        }

        // 把歌曲渲染为按钮
        function renderSongs(songs) {
            const container = document.getElementById('songsContainer');
            container.innerHTML = '';
            
            songs.forEach(song => {
                const btn = document.createElement('button');
                btn.className = 'btn btn-primary m-1';
                btn.textContent = `${song.name} - ${song.artist}`;
                btn.addEventListener('click', () => addToQueue(song));
                container.appendChild(btn);
            });
        }

        // 添加歌曲到队列
        function addToQueue(song) {
            const queue = document.getElementById('queueList');
            const item = document.createElement('div');
            item.className = 'p-2 border-bottom';
            item.textContent = `${song.name} - ${song.artist}`;
            queue.appendChild(item);
        }

        // 绑定Recommend按钮点击事件
        document.getElementById('recommendBtn').addEventListener('click', async () => {
            const songs = await loadSongs();
            renderSongs(songs);
        });
    </script>
</body>
</html>

3. 注意事项 #

• 将songs.csv和HTML文件放在同一目录下
• 本地打开HTML时可能因跨域限制无法读取CSV，建议用本地服务器运行（比如执行python -m http.server）

二、Django后端修正方案 #

针对你之前用Django展示CSV失败的问题，按以下步骤调整：

1. 后端视图处理CSV #

在Django的views.py中添加读取CSV的逻辑：

import csv
from django.shortcuts import render

def music_player(request):
    songs = []
    # 假设CSV文件放在项目static目录下
    with open('static/songs.csv', 'r', encoding='utf-8') as f:
        reader = csv.DictReader(f)
        for row in reader:
            songs.append({'name': row['歌曲名称'], 'artist': row['歌手']})
    return render(request, 'music_player.html', {'songs': songs})

2. 修改模板HTML #

更新模板文件，添加Django模板渲染和队列添加逻辑：

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link href="{% static 'style.css' %}" rel="stylesheet">
    <title>Music Player</title>
</head>
<body>
    <div class="float-container">
        <div class="float-child">
          <p>Queue</p>
          <div class="playlist" id="queueList">
          </div>
        </div>
        
        <div class="float-child">
          <p>Music Player</p>
          <p><button id="recommendBtn">Recommend</button></p>
          <div class="Songs" id="songsContainer" style="display: none;">
              <!-- Django模板渲染歌曲按钮 -->
              {% for song in songs %}
              <button class="btn btn-primary m-1" onclick="addToQueue('{{ song.name }}', '{{ song.artist }}')">
                  {{ song.name }} - {{ song.artist }}
              </button>
              {% endfor %}
          </div>
        </div>
    </div>

    <script>
        function addToQueue(songName, artist) {
            const queue = document.getElementById('queueList');
            const item = document.createElement('div');
            item.className = 'p-2 border-bottom';
            item.textContent = `${songName} - ${artist}`;
            queue.appendChild(item);
        }

        // 点击Recommend按钮显示歌曲列表
        document.getElementById('recommendBtn').addEventListener('click', () => {
            document.getElementById('songsContainer').style.display = 'block';
        });
    </script>
</body>
</html>

3. 配置路由和静态文件 #

• 在urls.py中添加路由：path('music-player/', views.music_player, name='music_player')
• 确保CSV文件放在static目录下，Django已正确配置静态文件访问

内容的提问来源于stack exchange，提问作者Saravana Kumar V