如何为HTML图书目录网站连接数据库？新手求助

阶段1：先让搜索框“动”起来（纯前端静态模拟，零后端） #

你现在的HTML里搜索框只是个空架子，先让它能过滤页面上的图书，先熟悉最基础的前端逻辑，不碰数据库：

1. 给搜索框加个id，方便JS定位：

   <input type="search" id="bookSearch" placeholder="Find anything">
   

2. 给图书标题加个专属类，方便后续JS读取内容：

   <h2 class="book-title">Computer Systems: A Programmer's Perspective (3rd Edition)</h2>
   

3. 在HTML末尾加一段简单的JS（直接写在页面里，不用单独文件）：

   <script>
     const searchInput = document.getElementById('bookSearch');
     const bookCards = document.querySelectorAll('.book-card');
   
     searchInput.addEventListener('input', function() {
       const searchTerm = this.value.toLowerCase();
       bookCards.forEach(card => {
         const title = card.querySelector('.book-title').textContent.toLowerCase();
         const isbn = card.querySelector('p').textContent.toLowerCase();
         // 标题或ISBN包含搜索词就显示，否则隐藏
         card.style.display = (title.includes(searchTerm) || isbn.includes(searchTerm)) ? 'block' : 'none';
       });
     });
   </script>
   

   这样输入关键词就能实时过滤图书，完全不破坏原有页面的样式和导航功能，先建立做开发的信心。

阶段2：用轻量后端+JSON存数据（过渡到动态数据） #

如果需要添加更多图书，不想把数据写死在HTML里，用Python Flask（对新手最友好的后端框架）：

1. 打开命令行安装Flask：pip install flask
2. 新建app.py文件：

   from flask import Flask, render_template, request, jsonify
   
   app = Flask(__name__)
   
   # 用JSON格式存图书数据，相当于简易数据库
   books = [
     {
       "title": "Computer Systems: A Programmer's Perspective (3rd Edition)",
       "isbn": "013409266X",
       "cover": "https://covers.openlibrary.org/b/isbn/013409266X-L.jpg"
     },
     # 可以在这里添加更多图书数据
   ]
   
   # 渲染你的HTML页面（把HTML文件放到新建的`templates`文件夹里）
   @app.route('/')
   def home():
       return render_template('MyLibrary.html')
   
   # 处理搜索请求的接口
   @app.route('/search')
   def search():
       query = request.args.get('q', '').lower()
       results = [book for book in books if query in book['title'].lower() or query in book['isbn'].lower()]
       return jsonify(results)
   
   if __name__ == '__main__':
       app.run(debug=True)
   

3. 修改HTML里的JS，改成请求后端接口获取数据：

   <script>
     const searchInput = document.getElementById('bookSearch');
     const bookGrid = document.querySelector('.book-grid');
   
     // 搜索时请求后端
     searchInput.addEventListener('input', async function() {
       const searchTerm = this.value.trim();
       const response = await fetch(`/search?q=${encodeURIComponent(searchTerm)}`);
       const books = await response.json();
       // 生成图书卡片HTML
       bookGrid.innerHTML = books.map(book => `
         <article class="book-card">
           <img src="${book.cover}" alt="Cover of ${book.title}">
           <h2 class="book-title">${book.title}</h2>
           <p>ISBN-10: ${book.isbn}</p>
         </article>
       `).join('');
     });
   
     // 页面加载时显示所有图书
     async function loadAllBooks() {
       const response = await fetch('/search?q=');
       const books = await response.json();
       bookGrid.innerHTML = books.map(book => `
         <article class="book-card">
           <img src="${book.cover}" alt="Cover of ${book.title}">
           <h2 class="book-title">${book.title}</h2>
           <p>ISBN-10: ${book.isbn}</p>
         </article>
       `).join('');
     }
   
     window.onload = loadAllBooks;
   </script>
   

   这样图书数据存在后端的JSON里，前端只负责显示，原有页面的样式、导航完全不受影响。

阶段3：接入SQLite数据库（真正的持久化存储） #

如果需要支持用户添加/删除图书，用SQLite（文件型数据库，不用装额外服务，新手友好）：

1. 修改app.py连接SQLite：

   from flask import Flask, render_template, request, jsonify
   import sqlite3
   
   app = Flask(__name__)
   
   # 初始化数据库
   def init_db():
       conn = sqlite3.connect('library.db')
       c = conn.cursor()
       # 创建图书表
       c.execute('''CREATE TABLE IF NOT EXISTS books
                   (id INTEGER PRIMARY KEY AUTOINCREMENT,
                    title TEXT NOT NULL,
                    isbn TEXT NOT NULL,
                    cover TEXT)''')
       # 插入初始图书数据
       c.execute("INSERT OR IGNORE INTO books (title, isbn, cover) VALUES (?, ?, ?)",
                 ("Computer Systems: A Programmer's Perspective (3rd Edition)", "013409266X", "https://covers.openlibrary.org/b/isbn/013409266X-L.jpg"))
       conn.commit()
       conn.close()
   
   init_db()
   
   # 从数据库获取图书
   def get_books(query=''):
       conn = sqlite3.connect('library.db')
       c = conn.cursor()
       if query:
           c.execute("SELECT * FROM books WHERE LOWER(title) LIKE ? OR LOWER(isbn) LIKE ?",
                     (f'%{query.lower()}%', f'%{query.lower()}%'))
       else:
           c.execute("SELECT * FROM books")
       books = c.fetchall()
       conn.close()
       # 转换成前端能识别的字典格式
       return [{"id": b[0], "title": b[1], "isbn": b[2], "cover": b[3]} for b in books]
   
   @app.route('/')
   def home():
       return render_template('MyLibrary.html')
   
   @app.route('/search')
   def search():
       query = request.args.get('q', '')
       books = get_books(query)
       return jsonify(books)
   
   if __name__ == '__main__':
       app.run(debug=True)
   

2. 前端JS不用改，还是用阶段2的代码，这样就实现了真正的数据库检索，原有HTML功能完全不受影响。

新手避坑提醒 #

• 先从阶段1开始，一步一步来，别一开始就碰数据库，先把前端逻辑搞明白
• 修改代码前一定要备份原有HTML，避免搞坏了回不去
• Flask的debug=True模式下，修改代码会自动重启服务器，方便调试

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