Flask+MySQL环境下自动补全显示商品名称而非ID的问题求助

后端代码调整 #

你需要新增支持商品名模糊搜索的接口，调整后的完整代码如下：

from flask import Flask, request, jsonify
# 你的其他初始化代码，比如app = Flask(__name__)、obtenir_connexion函数定义保持不变

@app.route('/items')
def obtenir_items():
    connexion = obtenir_connexion()
    cur = connexion.cursor()
    cur.execute("SELECT * FROM item")
    resultat = cur.fetchall()
    liste = []
    for rangee in resultat:
        liste.append({"id": rangee[0], "nom": rangee[1], "prix": rangee[2], "unite": rangee[3]})
    return jsonify(liste)


@app.route('/items/<id>')
def obtenir_item(id):
    connexion = obtenir_connexion()
    cur = connexion.cursor()
    cur.execute("SELECT * FROM item where id = %s", (id,))
    resultat = cur.fetchall()
    liste = []
    for rangee in resultat:
        liste.append({"id": rangee[0], "nom": rangee[1], "prix": rangee[2], "unite": rangee[3]})
    return jsonify(liste)

# 新增按商品名模糊搜索接口
@app.route('/items/search')
def search_items():
    # 获取前端传递的搜索关键词，默认空字符串
    keyword = request.args.get('keyword', '', type=str)
    connexion = obtenir_connexion()
    cur = connexion.cursor()
    # 模糊匹配商品名，使用参数化查询避免SQL注入，默认最多返回10条匹配结果
    cur.execute("SELECT * FROM item WHERE nom LIKE %s LIMIT 10", (f"%{keyword}%",))
    resultat = cur.fetchall()
    liste = []
    for rangee in resultat:
        liste.append({"id": rangee[0], "nom": rangee[1], "prix": rangee[2], "unite": rangee[3]})
    return jsonify(liste)


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

前后端交互逻辑 #

• 前端输入框绑定输入事件，用户输入内容时将当前输入值作为keyword参数请求/items/search接口
• 接口返回匹配的商品列表后，前端仅展示列表中的nom字段作为自动补全下拉选项，隐藏ID字段
• 用户选中某条补全选项时，前端可记录该选项对应的id值用于后续业务提交，用户全程仅看到商品名称

性能优化建议 #

• 执行SQL语句ALTER TABLE item ADD INDEX idx_nom(nom);给商品名字段加索引，大幅提升模糊搜索效率
• 前端添加防抖逻辑，用户停止输入300ms后再发起请求，避免短时间内发起大量无效请求
• 若商品数据量超过10万，建议改用专业搜索组件替代MySQL模糊查询

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