如何将Guitar Tabs存储到MySQL数据库并实现浏览器端展示？

一、数据库设计与数据导入 #

1. 数据库表结构 #

针对5-10首歌的小体量需求，单表即可满足存储需求，无需复杂设计：

• id：自增主键，唯一标识歌曲
• title：歌曲名称（必填）
• tab_content：完整吉他谱文本（必填）

推荐用SQLite作为数据库，轻量无需额外服务，适配小数据量场景。

2. 批量导入脚本 #

写个简单的Python脚本，自动从本地.txt文件导入数据到数据库：

import sqlite3
import os

# 连接数据库
conn = sqlite3.connect('guitar_tabs.db')
cursor = conn.cursor()

# 创建表（不存在则创建）
cursor.execute('''
CREATE TABLE IF NOT EXISTS songs (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    title TEXT NOT NULL,
    tab_content TEXT NOT NULL
)
''')

# 遍历指定目录下的txt文件
tabs_dir = './guitar_tabs'  # 替换为你的谱子文件目录
for filename in os.listdir(tabs_dir):
    if filename.endswith('.txt'):
        # 提取文件名作为歌曲名（可手动修改为更规范的名称）
        song_title = os.path.splitext(filename)[0]
        # 读取谱子内容
        with open(os.path.join(tabs_dir, filename), 'r', encoding='utf-8') as f:
            tab_content = f.read()
        # 插入数据库
        cursor.execute('INSERT INTO songs (title, tab_content) VALUES (?, ?)', (song_title, tab_content))

# 提交并关闭连接
conn.commit()
conn.close()

二、前端展示与交互实现 #

1. 后端接口（以Flask为例） #

搭建极简后端提供两个核心接口：获取歌曲列表、获取指定歌曲谱子：

from flask import Flask, jsonify, render_template
import sqlite3

app = Flask(__name__)

def get_db_conn():
    conn = sqlite3.connect('guitar_tabs.db')
    conn.row_factory = sqlite3.Row
    return conn

# 首页路由
@app.route('/')
def index():
    return render_template('index.html')

# 获取所有歌曲列表
@app.route('/api/songs')
def get_songs():
    conn = get_db_conn()
    songs = conn.execute('SELECT id, title FROM songs').fetchall()
    conn.close()
    return jsonify([dict(song) for song in songs])

# 获取指定歌曲的谱子
@app.route('/api/tabs/<int:song_id>')
def get_tab(song_id):
    conn = get_db_conn()
    tab = conn.execute('SELECT tab_content FROM songs WHERE id = ?', (song_id,)).fetchone()
    conn.close()
    if tab:
        return jsonify({'content': tab['tab_content']})
    return jsonify({'error': '谱子未找到'}), 404

if __name__ == '__main__':
    app.run(debug=True)

2. 前端页面实现 #

核心用<pre>标签保留谱子固定格式，搭配等宽字体保证排版对齐：

<!DOCTYPE html>
<html>
<head>
    <title>吉他谱查看器</title>
    <style>
        body {
            max-width: 1000px;
            margin: 2rem auto;
            padding: 0 1rem;
            font-family: sans-serif;
        }
        #song-select {
            padding: 0.5rem;
            font-size: 1rem;
            margin-bottom: 1.5rem;
            min-width: 200px;
        }
        .tab-wrap {
            background: #f8f8f8;
            padding: 1rem;
            border-radius: 6px;
            overflow-x: auto;
        }
        .tab-content {
            font-family: 'Courier New', Courier, monospace;
            white-space: pre-wrap;
            font-size: 0.9rem;
            line-height: 1.4;
        }
    </style>
</head>
<body>
    <h1>吉他谱查看器</h1>
    <select id="song-select">
        <option value="">选择一首歌曲...</option>
    </select>
    <div class="tab-wrap" id="tab-wrap" style="display: none;">
        <pre class="tab-content" id="tab-content"></pre>
    </div>

    <script>
        // 加载歌曲列表
        fetch('/api/songs')
            .then(res => res.json())
            .then(songs => {
                const select = document.getElementById('song-select');
                songs.forEach(song => {
                    const opt = document.createElement('option');
                    opt.value = song.id;
                    opt.textContent = song.title;
                    select.appendChild(opt);
                });
            });

        // 切换歌曲加载谱子
        document.getElementById('song-select').addEventListener('change', function() {
            const songId = this.value;
            if (!songId) {
                document.getElementById('tab-wrap').style.display = 'none';
                return;
            }
            fetch(`/api/tabs/${songId}`)
                .then(res => res.json())
                .then(data => {
                    if (data.content) {
                        document.getElementById('tab-content').textContent = data.content;
                        document.getElementById('tab-wrap').style.display = 'block';
                    }
                });
        });
    </script>
</body>
</html>

三、常见瓶颈解决 #

1. 谱子对齐错乱：必须使用等宽字体（如Courier New），<pre>标签会保留原始文本的空格和换行，是展示固定格式文本的最优选择。
2. 文本编码乱码：导入时确保.txt文件采用UTF-8编码，脚本读取时指定encoding='utf-8'，避免特殊字符或中文乱码。
3. 数据存储冗余：直接存储完整谱文本即可，无需拆分弦或品丝，除非后续需要品丝搜索等高级功能，否则拆分反而增加复杂度。

四、优化建议 #

• 视觉增强：给品丝数字添加高亮样式，比如用JavaScript把数字包裹在<span style="color: #e74c3c;">中，或给不同吉他弦设置差异化颜色，提升可读性。
• 搜索功能：添加搜索框，后端通过SELECT * FROM songs WHERE title LIKE ?实现歌曲名模糊搜索。
• 移动端适配：优化样式确保横向滚动流畅，根据屏幕尺寸自动调整字体大小，提升移动端体验。
• 离线缓存：使用Service Worker缓存静态资源和已加载谱子，实现离线查看功能。
• 谱子预处理：导入时自动清理多余空行、统一每行长度，保证所有谱子格式一致。
• 收藏功能：用localStorage存储用户收藏的歌曲ID，前端展示时标记收藏状态，方便快速访问常用谱子。

内容的提问来源于stack exchange，提问作者Radostina Zhelyazova