如何实现点击Jinja模板按钮时执行Python代码删除指定帖子

Jinja是服务端渲染引擎，前端页面的按钮无法直接调用后端Python代码，需要通过HTTP请求匹配对应后端路由执行删除逻辑。删除操作强制使用POST方法避免误删，且后端必须做权限校验，不能仅依赖前端的显示控制。

第一步：编写后端删除接口 #

在你的Flask应用中新增专门处理删除请求的路由，注意几个核心要求：

• 仅允许POST方法访问
• 后端必须二次校验当前用户是否为版主，防止普通用户构造请求越权删帖
• 执行删除语句后必须提交数据库会话，否则删除操作不会持久化到数据库
• 操作完成后跳转回帖子列表页

from flask import request, redirect, url_for, abort
# 假设你已经完成db（SQLAlchemy实例）、current_user（登录用户实例）的初始化

@app.route('/delete-post/<post_name>', methods=['POST'])
def delete_post(post_name):
    # 权限校验，非版主直接返回403禁止访问
    if not current_user.is_moderator:
        abort(403)
    # 执行你需要的删除逻辑
    Image.query.filter_by(post_name=post_name).delete()
    # 提交数据库事务
    db.session.commit()
    # 删除完成后跳回帖子列表页，把post_list替换成你自己渲染帖子列表的路由端点
    return redirect(url_for('post_list'))

第二步：修改Jinja模板 #

你原有模板存在两个逻辑问题需要先修正：

1. loop.changed(current_post)用法错误，首次循环时current_post未定义会直接报错，且Jinja中{% set %}在循环内的作用域不稳定，完全不需要额外定义current_post变量，直接取循环内当前post对象的post_name属性即可
2. 原生button默认是提交按钮，但没有包裹表单的话无法发送POST请求，需要把删除按钮放在POST表单中，还可以加提交确认避免误操作

修改后的模板核心代码如下：

<html>
    <head>

    </head>
    <body>
        {% for post in posts %}
            {# 修正原loop.changed的错误逻辑，直接对比当前项和上一项的post_name，实现同名post只渲染一次 #}
            {% if loop.first or post.post_name != posts[loop.index0 - 1].post_name %}
            <div>
                <a href="{{ url_for('read', post_name=post.post_name) }}">
                  <img src="{{ url_for('static', filename='images/'+post.title) }}" alt="">
                </a>
              </div>
              {% if current_user.is_moderator %}
                <div>
                  {# 表单提交POST请求到删除接口，加onsubmit做二次确认 #}
                  <form 
                    action="{{ url_for('delete_post', post_name=post.post_name) }}" 
                    method="POST"
                    onsubmit="return confirm('确定要删除该帖子吗？删除后无法恢复')"
                  >
                    {# 如果你开启了Flask-WTF的CSRF保护，请解开下面这行注释 #}
                    {# <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"> #}
                    <button type="submit">DELETE POST</button>
                  </form>
                </div>
              {% endif %}
            {% else %}
                <div></div>
            {% endif %}
        {% endfor %}
    </body>
</html>

避坑提醒 #

• 绝对不要用GET请求实现删除：如果把路由改为允许GET方法访问，浏览器预加载、搜索引擎爬虫爬取链接都会直接触发删帖，造成数据损失
• 权限校验必须在后端实现：前端的{% if current_user.is_moderator %}只是控制按钮是否显示，恶意用户完全可以绕过前端直接构造请求，不做后端校验会有严重的越权漏洞
• 你当前模板中图片路径直接拼接post.title的写法有隐患，如果title包含空格、特殊符号、中文，会导致图片路径404，建议给Image模型单独加封面路径字段存储，不要用title拼接
• 如果你的应用开启了CSRF防护，必须在表单中加入CSRF令牌隐藏域，否则请求会被400拦截

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