Vue.js拖拽排序后用Axios保存到MongoDB更新失败如何解决？

核心问题定位 #

1. MongoDB模型中没有存储排序顺序的字段，就算提交了新顺序，数据库也没有地方保存，查询数据时默认按插入时间/_id排序，自然不会更新顺序
2. 你当前调用的/api/ropesPOST接口大概率是原有新增单条绳索数据的接口，不支持接收批量数组格式的参数，服务器无法处理请求导致无响应，刷新时未完成的请求被中断就会报request aborted错误
3. 提交数据时没有带上每条数据的_id，后端无法定位需要更新的对应记录

具体修改步骤 #

1. 调整MongoDB Schema，新增排序字段 #

在原有Schema中增加sortOrder字段用于存储排序权重：

const ropeSchema = new mongoose.Schema({
    title: {
        type: String,
        required: true,
    },
    description: {
        type: String,
        required: true,
    },
    image: {
        type: String,
        required: false,
    },
    price: {
        type: Number,
        required: true,
    },
    cartQuantity: {
        type: Number,
        required: true,
    },
    sortOrder: { // 新增排序字段
        type: Number,
        required: true
    },
    date: {
        type: Date,
        default: Date.now
    }
})

同时修改你查询绳索列表的后端接口，查询时加上排序规则：.sort({ sortOrder: 1 })，保证拉取到前端的数据是按之前保存的顺序返回的。

2. 修改前端提交逻辑 #

调整saveNewSequence方法，提交时带上_id和排序值：

saveNewSequence() {
  this.ropes.forEach((rope, key)=>{
    console.log('Key' + key +' '+ rope._id)
  })

  let postData = {}
  postData.ropes = this.ropes.map((rope, index)=>{
    return{
      _id: rope._id, // 必须携带_id用于后端定位数据
      title: rope.title,
      description:rope.description,
      image: rope.image,
      price: rope.price,
      cartQuantity: rope.cartQuantity,
      sortOrder: index // 用拖拽后的数组下标作为新排序值
    }
  })
  // 注意这里的接口地址需要换成下面新增的批量更新接口地址
  axios.post('https://zokadb.herokuapp.com/api/ropes/updateBatchSort', postData)
      .then((res) => {
        console.log('排序更新成功', res)
      }).catch(error => {
    console.log('更新失败', error)
  })
}

3. 后端新增批量更新排序的接口 #

在你的后端路由中新增专门处理批量更新排序的接口，示例代码如下：

router.post('/ropes/updateBatchSort', async (req, res) => {
  try {
    // 构造批量更新操作数组
    const updateOperations = req.body.ropes.map(rope => ({
      updateOne: {
        filter: { _id: rope._id },
        update: { $set: { sortOrder: rope.sortOrder } }
      }
    }))
    // 执行批量更新
    await Rope.bulkWrite(updateOperations)
    res.status(200).json({ message: '排序更新成功' })
  } catch (err) {
    res.status(500).json({ error: err.message })
  }
})

内容的提问来源于stack exchange，提问作者Josip Marić