Python复现Google Books搜索及DOM操作实现方案咨询

你之前写的是浏览器端运行的JavaScript代码，依赖浏览器原生DOM API实现页面交互，Python默认运行环境没有内置DOM对象，不需要硬套JS的DOM操作思路，可以根据你的使用场景选择更适配的实现：

可选实现路径 #

• 如果你需要做可在浏览器访问的在线搜索工具，推荐用Python Web框架（比如轻量的Flask）实现后端逻辑，前端可以直接复用你现有的HTML/CSS/JS代码，Python只需要负责处理搜索请求、调用Google Books接口返回数据即可，完全不需要操作DOM。
• 如果你需要做本地桌面端搜索工具，直接用Python GUI库实现界面即可，不需要写HTML相关代码：
  • 轻量需求用Python内置的Tkinter库，不用额外安装依赖，直接用Label组件展示封面图片、文本信息
  • 复杂度高的需求可以用PyQt6/PySide6，组件更丰富，界面自定义程度更高
• 如果你确实需要用Python操作HTML DOM结构，可选用以下工具：
  • BeautifulSoup：适合后端生成、修改HTML片段，可通过API实现创建节点、追加节点、查找节点等类似DOM的操作
  • PyScript：可以直接在HTML中嵌入Python代码，运行在浏览器端，支持直接调用浏览器原生DOM API，可以1:1复现你原来的JS逻辑

示例代码（Flask 简单实现） #

后端代码 app.py #

from flask import Flask, render_template, request, jsonify
import requests

app = Flask(__name__)

@app.route('/')
def index():
    # 直接渲染你写好的HTML页面，把原来的JS接口调用地址改成后端路由即可
    return render_template('index.html')

@app.route('/search')
def search_books():
    keyword = request.args.get('q', '')
    resp = requests.get(f'https://www.googleapis.com/books/v1/volumes?q={keyword}')
    return jsonify(resp.json())

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

模板文件 templates/index.html #

直接复用你原来的HTML/CSS/JS代码，只需要把原来的JSONP请求改成调用后端接口即可：

<section id="Adicionar">
  <form>
    <input type="text" id="search" placeholder="Pesquise por título, autor, editora, lançamento, ISBN..." />
    <button type="submit">Buscar</button>
  </form>
  <div id="result"></div>
</section>
<style>
/* 你原来的CSS代码直接复制过来 */
#Adicionar form {
  width: 100%;
}
#Adicionar form input {
  overflow: visible;
  outline: 0;
  width: 70%;
  padding: 10px;
  border-radius: 18px;
  background-color: #dee3e6;
  background-clip: padding-box;
  border: 0.5px solid #D1D9E6;
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #ffffff;
}
#result {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
#result figure {
  width: 10em;
}
</style>
<script>
var result = document.getElementById("result");
var cover, title, author;

function handleResponse(response) {
  for (var i = 0; i < response.items.length; i++) {
    var item = response.items[i];
    figure = document.createElement("figure");
    img = document.createElement("img");
    figcap = document.createElement("figcaption");
    try {
      cover = item.volumeInfo.imageLinks.thumbnail;
      title = item.volumeInfo.title;
      author = item.volumeInfo.authors;
    } catch (error) {
      continue;
    } finally {
      result.appendChild(figure);
      img.src = cover;
      figure.appendChild(img);
      figcap.innerHTML += `${title}<br>${author}`;
      figure.appendChild(figcap);
    }
  }
}
document.querySelector("form").addEventListener("submit", function(e) {
  result.innerHTML = "";
  search = document.getElementById("search").value;
  // 改成调用后端Python接口
  fetch(`/search?q=${search}`).then(res=>res.json()).then(handleResponse);
  e.preventDefault();
});
</script>

运行app.py后访问本地对应端口即可使用和原来功能完全一致的搜索服务。

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