如何在 Flask Kanban 应用中通过拖放操作实时更新数据库状态-html教程-PHP中文网

如何在 Flask Kanban 应用中通过拖放操作实时更新数据库状态

本文详解如何在 flask + jinja2 构建的看板应用中，正确结合 html5 drag and drop api 与 fetch api 实现任务跨列拖放并持久化状态变更，解决事件不触发、服务端函数误渲染、子元素干扰等常见陷阱。

本文详解如何在 flask + jinja2 构建的看板应用中，正确结合 html5 drag and drop api 与 fetch api 实现任务跨列拖放并持久化状态变更，解决事件不触发、服务端函数误渲染、子元素干扰等常见陷阱。

在 Flask 看板（Kanban）应用中，仅靠前端拖放无法直接调用 Python 后端函数——Jinja2 模板中的 {{ dropped(...) }} 是服务端渲染时一次性执行的表达式，而非运行时 JavaScript 可调用的函数。因此，原代码中将 dropped() 直接嵌入 <script> 标签内会导致：页面加载时即执行（输出空响应或报错），而拖放动作发生时完全无响应。</script>

要实现真正的“拖到某列 → 更新数据库 → 刷新视图”，必须采用前后端分离式交互：前端通过 fetch() 发送异步请求，后端提供可接收 JSON 的 POST 接口，并在成功后主动刷新页面。

✅ 正确实现步骤

1. 前端：使用 fetch() 提交拖放数据

将 drop(event) 改为 async 函数，明确传入当前 dropzone 元素（this），避免事件冒泡到子节点：

<ol class="kanban To-do" id="todo" ondrop="drop(event, this)" ondragover="dragOver(event, this)" ondragenter="dragEnter(event, this)" ondragleave="dragLeave(event, this)">
<h2>To-Do</h2>
  {% for (depth, task) in tasks_by_status[1] %}
    <li class="dd-item indent{{ depth }}" id="{{ task.id }}" draggable="true" ondragstart="dragStart(event)" ondragend="dragEnd(event)">
      <h3 class="title dd-handle">
        <button name="task" value="{{ task.id }}">{{ task.title }}</button>
      </h3>
      <div class="text" contenteditable="true">{{ task.description }}</div>
    </li>
  {% endfor %}
</ol>

对应 JavaScript（含防子元素干扰的 enter/leave 计数器）：

Decktopus AI

Decktopus AI是一款面向商务演示和轮播内容的 AI 演示文稿生成工具。

下载

<script>
  let dragCounter = 0;

  function allowDrop(ev) {
    ev.preventDefault();
  }

  function dragStart(ev) {
    ev.dataTransfer.setData("task_id", ev.target.id);
  }

  function dragEnter(ev, el) {
    ev.preventDefault();
    ev.stopPropagation();
    dragCounter++;
    el.style.opacity = "1.0";
    el.style.transform = "scale(1.02)";
  }

  function dragLeave(ev, el) {
    ev.preventDefault();
    ev.stopPropagation();
    dragCounter--;
    if (dragCounter === 0) {
      el.style.opacity = "0.7";
      el.style.transform = "scale(1)";
    }
  }

  const kanbanUrl = "{{ url_for('main.kanban', project_id=project.id) }}";

  async function drop(ev, el) {
    ev.preventDefault();
    ev.stopPropagation();

    const taskId = ev.dataTransfer.getData("task_id");
    const targetState = el.id; // 如 "todo", "inprogress", "done"

    try {
      const response = await fetch(kanbanUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ task_id: taskId, target_state: targetState })
      });

      if (response.ok) {
        window.location.reload(); // 成功后强制刷新，确保 UI 同步
      } else {
        console.error("Drag-drop update failed:", await response.text());
      }
    } catch (err) {
      console.error("Network error:", err);
    }
  }
</script>

? 关键点：ev.stopPropagation() 阻止事件向父级冒泡；dragCounter 精确控制高亮状态，避免因 hover 子元素导致闪烁。

2. 后端：新增 POST 处理逻辑

修改 /kanban 路由，支持接收 JSON 请求并更新任务状态：

from flask import request, jsonify, redirect, url_for
from werkzeug.exceptions import NotFound

@main.route("/<project_id>/kanban", methods=["GET", "POST"])
def kanban(project_id):
    project = Project.query.get(project_id)
    if not project:
        return render_template("404.html"), 404

    try:
        session = sessions_by_project[project_id]
    except KeyError:
        return render_template("404.html"), 404

    # 构建任务分组（按 status）
    tasks_by_status = defaultdict(list)
    for depth, task in walk_list(session.query(Task).all()):
        tasks_by_status[task.status.value].append((depth, task))

    # 处理表单提交（如点击任务按钮）
    if request.method == "POST" and "task" in request.form:
        return redirect(url_for("main.task", project_id=project_id, id=int(request.form["task"])))

    # ✅ 处理拖放 POST 请求（JSON 格式）
    if request.method == "POST" and request.is_json:
        data = request.get_json()
        if "task_id" not in data or "target_state" not in data:
            return jsonify({"error": "Missing task_id or target_state"}), 400

        task_id = int(data["task_id"])
        target_state = data["target_state"]

        task = session.query(Task).get(task_id)
        if not task:
            return jsonify({"error": "Task not found"}), 404

        try:
            task.change_status(str2status(target_state))
            session.commit()
            return jsonify({"success": True, "message": f"Task {task_id} moved to {target_state}"})
        except ValueError as e:
            session.rollback()
            return jsonify({"error": str(e)}), 400

    return render_template("kanban.html", tasks_by_status=tasks_by_status, project=project)</project_id>

⚠️ 注意事项：

禁止在模板中传递 Python 函数（如 dropped=dropped）用于前端调用；

request.is_json 和 request.get_json() 是安全解析 JSON 的标准方式；

必须显式 session.commit() 并处理异常回滚；

前端 fetch 后建议 window.location.reload()（或更优方案：用 fetch 获取新数据并局部更新 DOM，但需额外实现）。