Express+MongoDB拖拽更新条目status属性问题求助

1. 给DOM元素添加必要标识 #

要实现状态同步，首先需要让前端能获取到拖拽条目的ID以及目标列对应的status值，给容器和拖拽元素添加数据属性：

修改HTML的列容器和条目节点：

<!-- 第一列容器，对应status=1 -->
<div class="container__entries" data-status="1">
   <% for(let entry of entries) { %> 
      <%- partial('partials/edit', { entry }) %>
      <% if(entry.status == 1) { %>
         <!-- 给拖拽条目添加ID标识 -->
         <div class="draggable" draggable="true" data-entry-id="<%= entry._id %>">
            <%- partial('partials/entrySmall', { entry }) %>
            <%- partial('partials/entryBig', { entry }) %>
         </div>
      <% } %>
   <% } %>
</div>

<!-- 第二列容器，对应status=2 -->
<div class="container__entries" data-status="2">
   <!-- 对应status=2的条目渲染逻辑 -->
</div>

<!-- 第三列容器，对应status=3 -->
<div class="container__entries" data-status="3">
   <!-- 对应status=3的条目渲染逻辑 -->
</div>

2. 修改前端拖拽逻辑，发送更新请求 #

在dragend事件触发时，获取目标列的status和条目ID，通过fetch发送请求到后端接口：

const draggables = document.querySelectorAll(".draggable");
const containers = document.querySelectorAll(".container__entries");

function getDrapAfterElement(container, y) {
    const draggableElements = [...container.querySelectorAll(".draggable:not(.dragging)")];
    return draggableElements.reduce((closest, child) => {
        const box = child.getBoundingClientRect();
        const offset = y - box.top - box.height / 2;
        if(offset < 0 && offset > closest.offset) {
            return { offset: offset, element: child };
        } else {
            return closest;
        };
    }, { offset: Number.NEGATIVE_INFINITY }).element;
};

draggables.forEach(draggable => {
    draggable.addEventListener("dragstart", () => {
        draggable.classList.add("dragging");
    });

    draggable.addEventListener("dragend", async () => {
        draggable.classList.remove("dragging");
        
        // 获取条目所在的目标容器
        const targetContainer = draggable.closest(".container__entries");
        if (!targetContainer) return;
        
        // 提取目标status和条目ID
        const newStatus = targetContainer.dataset.status;
        const entryId = draggable.dataset.entryId;
        
        if (!newStatus || !entryId) return;
        
        try {
            // 发送PUT请求更新数据库
            const response = await fetch(`/api/entries/${entryId}/status`, {
                method: "PUT",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({ status: parseInt(newStatus) })
            });
            
            if (!response.ok) throw new Error("更新失败");
            console.log("状态更新成功");
        } catch (error) {
            console.error("更新出错:", error);
            // 可选：更新失败时将条目放回原列，优化用户体验
        }
    });
});

containers.forEach(container => {
    container.addEventListener("dragover", e => {
        e.preventDefault();
        const afterElement = getDrapAfterElement(container, e.clientY);
        const draggable = document.querySelector(".dragging");
        if (afterElement == null) {
            container.appendChild(draggable);
        } else {
            container.insertBefore(draggable, afterElement);
        };
    });
});

3. 后端实现更新status的API接口 #

首先定义Entry模型（基于Mongoose） #

// models/Entry.js
const mongoose = require('mongoose');

const entrySchema = new mongoose.Schema({
    // 其他字段
    status: {
        type: Number,
        required: true,
        enum: [1, 2, 3] // 限制status只能是1、2、3
    }
});

module.exports = mongoose.model('Entry', entrySchema);

添加路由接口 #

// routes/api/entries.js
const express = require('express');
const router = express.Router();
const Entry = require('../../models/Entry');

// 更新条目的status
router.put('/:id/status', async (req, res) => {
    try {
        const { id } = req.params;
        const { status } = req.body;
        
        // 验证status合法性
        if (![1, 2, 3].includes(status)) {
            return res.status(400).json({ message: "无效的status值" });
        }
        
        const updatedEntry = await Entry.findByIdAndUpdate(
            id,
            { status },
            { new: true, runValidators: true } // 返回更新后的文档并运行验证规则
        );
        
        if (!updatedEntry) {
            return res.status(404).json({ message: "条目不存在" });
        }
        
        res.json({ message: "状态更新成功", entry: updatedEntry });
    } catch (error) {
        console.error(error);
        res.status(500).json({ message: "服务器内部错误" });
    }
});

module.exports = router;

在主app.js中挂载路由 #

const entriesApiRouter = require('./routes/api/entries');
app.use('/api/entries', entriesApiRouter);

4. 额外优化建议 #

• 错误回滚：后端更新失败时，前端可以将条目恢复到拖拽前的列，避免界面与数据库状态不一致
• 加载状态：请求发送过程中给拖拽元素添加加载样式，提示用户正在处理
• CSRF保护：如果应用启用了CSRF防护，需在fetch请求中携带CSRF令牌，避免请求被拦截

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