如何在Flask中通过HTML按钮传ID到routes.py删除数据库对象

背景 #

我在Flask项目中实现了购物列表功能，用户可在页面输入商品信息并存储到数据库。现需实现点击列表中每条数据的删除图标，将对应对象的ID传递到routes.py，进而删除该数据库对象。

现有代码 #

routes.py #

from page import app
from flask import render_template, redirect, url_for,request,flash
from page.models import Shoppinglist
from page.forms import Form_Shoppinglist
from page import db

@app.route('/shoppinglist', methods=['GET','POST'])
def Shoppinglist_Page():
    form = Form_Shoppinglist()
    
    if form.validate_on_submit():
        add_item =  Shoppinglist(product_name=form.product_name.data,
                                 category=form.category.data,
                                 purchased_quantity=form.purchased_quantity.data) 
        db.session.add(add_item)
        db.session.commit()
        return redirect(url_for('Shoppinglist_Page'))
    
    #delete
    #item = Shoppinglist.query.filter_by(id=????).first()
    #db.session.delete(item)
    #db.session.commit()
    
    if form.errors != {}: #无验证错误时执行
        for err_msg in form.errors.values():
            flash(f'Fehler bei der Eingabe: {err_msg}', category='danger')
    
    items = Shoppinglist.query.all()
    return render_template('shoppinglist.html',form=form,items=items)

shoppinglist.html #

{% extends  'base.html'%}

{% block ActivShopping%}
    active
{% endblock %}

{% block css %}
    <link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/style.css')}}"/>
{% endblock %}



{% block title %}
    Einkaufsliste
{% endblock %}

{% block content %}
    <div class="container">
        <h1 class="setting-page">Einkaufsliste</h1>
        <!--Email Adresse-->
        <div class="row ">  
            <div class="col-sm-12">
                <div class="d-flex justify-content-start align-items-center" style="height: 8vh;"> 
                  
                    <form  method="POST" class="form-register flex-fill d-flex" >
                        <!--CSRF防护-->
                        {{ form.hidden_tag() }}
                        {{ form.product_name(class="form-control", placeholder="Produktname") }}
                        {{ form.category(class="form-control", placeholder="Kategorie") }} 
                        {{ form.purchased_quantity(class="form-control", placeholder="Einkaufsmenge") }}
                        {{ form.submit_shoppinglist(class="btn btn-md btn-block btn-primary", style="background-color: #6941c6; border:none; color: #f9f5ff; margin-left: 1vw;")}}
                    </form>
                    
                </div>
                <hr class="divider">
            </div>  
        </div>

        <div class="row ">  
            <div class="col-sm-12">
                <table class="table table-hover ">
                    <thead>
                        <tr>
                            
                            <th scope="col">ID</th>
                            <th scope="col">Produktname</th>
                            <th scope="col">Kategorie</th>
                            <th scope="col">Lagermenge</th>
                            <th scope="col">Einkaufsmenge</th>
                            <th scope="col"></th>
                        </tr>
                    </thead>
                    <tbody>
     
                        {% for item in items %}
                        <tr>
                            <td>{{ item.id }}</td>
                            <td>{{ item.product_name }}</td>
                            <td>{{ item.category }}</td>
                            <td>{{ item.inventory_quantity }}</td>
                            <td>{{ item.purchased_quantity }}</td>
                            <td>
                                <button class="btn btn-md btn-block">
                                    <i class="fa fa-trash" ></i>
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>  
            </div>  
        </div>    

    </div>
{% endblock %}

问题 #

点击列表中某行的删除按钮时，如何将对应对象的ID传递到routes.py，从而根据ID删除该数据库对象？

解决方案 #

修改shoppinglist.html的删除按钮部分 #

将原删除按钮包裹在表单中，通过按钮的value属性传递对应商品ID：

<form action="/delete" method="post">
    <button class="btn btn-md btn-block" name="button_delete" type="submit" value="{{item.id}}">
        <i class="fa fa-trash"></i>
    </button>
</form>

在routes.py中新增删除路由 #

添加专门处理删除请求的路由，接收表单传递的ID并执行数据库删除操作：

@app.route('/delete',methods=['POST'])
def delete_item():
    item_id = request.form['button_delete']
    item = Shoppinglist.query.filter_by(id=item_id).first()
    db.session.delete(item)
    db.session.commit()

    return redirect(url_for('Shoppinglist_Page'))

（注：将原函数名Test改为语义化的delete_item，提升代码可读性与维护性）

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