如何在Flask+MySQL中结合SweetAlert实现带确认的行删除功能？

问题描述 #

我按照教程开发用户管理系统，在删除用户时尝试用SweetAlert实现确认弹窗，但无法正常工作。需求是点击删除按钮时先获取用户ID，通过SweetAlert确认后再跳转执行删除操作。

原代码问题分析 #

1. 前端HTML的a标签href指向错误页面，且未便捷存储用户ID
2. JavaScript中尝试在客户端解析URL获取ID，同时错误混用Flask模板变量（模板渲染时arguments未定义，导致跳转URL无效）
3. 未阻止a标签的默认跳转行为，弹窗还没确认就直接跳转了

修复步骤 #

1. 修改前端HTML代码

将a标签的href设为#阻止默认跳转，通过data-userid属性存储用户ID，方便JS直接读取：

<td><a id="delete" data-userid="{{ user.userid }}" href="#" class="btn btn-primary">删除</a></td>

2. 修正JavaScript代码

直接从data属性获取用户ID，阻止默认跳转，确认后再跳转到删除接口：

<script>
$('a#delete').click(function (e) {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    // 从data属性读取用户ID
    const userId = $(this).data('userid');
    
    Swal.fire({
        title: 'آیا مطمئن هستید؟',
        text: "کاربر پاک شده غیر قابل بازگشت است",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'بله پاک کن',
        cancelButtonText: 'انصراف'
    }).then((result) => {
        if (result.isConfirmed) {
            // 确认后跳转到删除接口，拼接用户ID参数
            location.href = `/pythonlogin/delete?userid=${userId}`;
        }
        // 取消操作时无需跳转，保持当前页面即可
    });
});
</script>

3. 后端代码优化（可选）

增加参数校验和数据库资源关闭逻辑，提升稳定性：

@app.route('/pythonlogin/delete', methods=['GET'])
def delete():
    # 未登录用户直接跳转登录页
    if 'loggedin' not in session:
        return redirect(url_for('login'))
    
    deleteuser = request.args.get('userid')
    # 无用户ID时返回用户管理页
    if not deleteuser:
        return redirect(url_for('User_management'))
    
    conn = mysql.connect()
    try:
        cur = conn.cursor(pymysql.cursors.DictCursor)
        cur.execute('DELETE FROM accounts WHERE userid = %s', (deleteuser,))
        conn.commit()
    finally:
        # 确保关闭数据库连接，避免资源泄漏
        cur.close()
        conn.close()
    
    return redirect(url_for('User_management'))

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