如何在MongoDB集合中上下移动文档？React+Node.js+Mongoose实现疑问

问题背景 #

开发的简易笔记应用已实现添加、删除单条笔记及修改重要性功能，但无法实现单条笔记的上下移动（调整笔记顺序）。计划通过重新排序当前笔记数组后更新到MongoDB集合，但未找到合适实现方法。技术栈为React、Node.js及基于Mongoose的MongoDB。

现有代码 #

后端index.js #

app.post('/api/notes', (request, response) => {
  const body = request.body;
  if (body.content === undefined) {
    return response.status(400).json({
      error: 'content missing',
    });
  }
  const note = new Note({
    content: body.content,
    important: body.important || false,
    date: new Date(),
  });
  note.save().then((savedNote) => {
    response.json(savedNote);
  });
});

app.get('/api/notes/', (request, response) => {
  Note.find({}).then((notes) => {
    response.json(notes);
  });
});

app.get('/api/notes/:id', (request, response, next) => {
  Note.findById(request.params.id)
    .then((note) => {
      if (note) {
        response.json(note);
      } else {
        response.status(404).end();
      }
    })
    .catch((error) => next(error));
});

app.delete('/api/notes/:id', (request, response, next) => {
  Note.findByIdAndRemove(request.params.id)
    .then((result) => {
      response.status(204).end();
    })
    .catch((error) => next(error));
});

app.put('/api/notes/:id', (request, response, next) => {
  const body = request.body;
    const note = {
    content: body.content,
    important: body.important,
  };
  
  Note.findByIdAndUpdate(request.params.id, note, { new: true })
    .then((updatedNote) => {
      response.json(updatedNote);
    })
    .catch((error) => next(error));
});

前端App组件片段 #

const App = () => {
  const [notes, setNotes] = useState([]);
  const [newNote, setNewNote] = useState('');
  const [showAll, setShowAll] = useState(true);
  const [errorMessage, setErrorMessage] = useState(null);

  useEffect(() => {
    noteService.getAll().then((initialNotes) => {
      setNotes(initialNotes);
    });
  }, []);

  const addNote = (event) => {
    event.preventDefault();
    const noteObject = {
      content: newNote,
      date: new Date().toISOString(),
      important: Math.random() > 0.5,
      id: notes.length + 1,
    };

    noteService.create(noteObject).then((returnedNote) => {
      setNotes(notes.concat(returnedNote));
      setNewNote('');
    });
  };

  const handleNoteChange = (event) => {
    setNewNote(event.target.value);
  };

  const toggleImportanceOf = (id) => {
    const note = notes.find((n) => n.id === id);
    const changedNote = { ...note, important: !note.important };
    console.log('Changed');
    noteService
      .update(id, changedNote)
      .then((returnedNote) => {
        console.log(returnedNote);
        setNotes(notes.map((note) => (note.id !== id ? note : returnedNote)));
      })
      .catch((error) => {
        setErrorMessage(
          `Note '${note.content}' was already removed from server`
        );
        setTimeout(() => {
          setErrorMessage(null);
        }, 5000);
        setNotes(notes.filter((n) => n.id !== id));
      });
  };
  const delNote = (id) => {
    window.confirm(`Delete this note?`);
    noteService.del(id);
    noteService.getAll().then((initialNotes) => {
      setNotes(initialNotes);
    });
  };

  const moveUp = (id) => {
     const idN = notes.findIndex((n) => n.id === id);
    console.log(idN);

//that's where I reorder my current notes(moving up)
    let updated = [...notes];
    updated.splice(
      idN === 0 ? updated.length - 1 : idN - 1,
      0,
      updated.splice(idN, 1)[0]
    );
      
  };

  const notesToShow = showAll ? notes : notes.filter((note) => note.important);

noteService代码 #

const getAll = () => {
  let request = axios.get(baseUrl);
  return request.then((res) => res.data);
};

const create = (newObject) => {
  const request = axios.post(baseUrl, newObject);
  return request.then((res) => res.data);
};

const update = (id, newObject) => {
  const request = axios.put(`${baseUrl}/${id}`, newObject);
  return request.then((res) => res.data);
};
const del = (id) => {
  axios.delete(`${baseUrl}/${id}`);
};

实现方案 #

1. 给Mongoose模型添加排序字段 #

在Note模型中新增order字段，用于记录每条笔记的排序优先级，同时添加静态方法获取当前最大排序值：

// models/note.js
const noteSchema = new mongoose.Schema({
  content: String,
  important: Boolean,
  date: Date,
  order: { type: Number, default: 0 } // 新增排序字段
});

// 获取当前最大order值，用于新增笔记时设置默认排序
noteSchema.statics.getMaxOrder = async function() {
  const maxNote = await this.findOne().sort({ order: -1 });
  return maxNote ? maxNote.order + 1 : 0;
};

const Note = mongoose.model('Note', noteSchema);
module.exports = Note;

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

添加接口接收前端传来的排序后笔记ID数组，批量更新每条笔记的order值，同时修改现有接口确保按排序字段返回数据：

// index.js 新增批量排序接口
app.put('/api/notes/reorder', async (request, response, next) => {
  try {
    const orderedIds = request.body;
    // 批量更新每条笔记的order为其在数组中的索引
    const updateTasks = orderedIds.map((id, index) => 
      Note.findByIdAndUpdate(id, { order: index }, { new: true })
    );
    await Promise.all(updateTasks);
    // 返回更新后按order排序的笔记列表
    const sortedNotes = await Note.find({}).sort({ order: 1 });
    response.json(sortedNotes);
  } catch (error) {
    next(error);
  }
});

// 修改获取笔记接口，默认按order排序
app.get('/api/notes/', (request, response) => {
  Note.find({}).sort({ order: 1 }).then((notes) => {
    response.json(notes);
  });
});

// 修改新增笔记接口，设置正确的初始order值
app.post('/api/notes', async (request, response) => {
  const body = request.body;
  if (body.content === undefined) {
    return response.status(400).json({ error: 'content missing' });
  }
  const maxOrder = await Note.getMaxOrder();
  const note = new Note({
    content: body.content,
    important: body.important || false,
    date: new Date(),
    order: maxOrder
  });
  note.save().then((savedNote) => {
    response.json(savedNote);
  });
});

3. 完善前端排序逻辑 #

修改moveUp函数并新增moveDown函数，完成本地数组排序后调用后端接口更新数据库：

// App组件中更新moveUp函数
const moveUp = (id) => {
  const index = notes.findIndex(n => n.id === id);
  if (index === 0) return; // 第一条笔记无法上移
  // 交换当前笔记与前一条的位置
  const updatedNotes = [...notes];
  [updatedNotes[index], updatedNotes[index - 1]] = [updatedNotes[index - 1], updatedNotes[index]];
  
  // 提取排序后的ID数组
  const orderedIds = updatedNotes.map(n => n.id);
  // 调用后端接口更新排序
  noteService.reorder(orderedIds)
    .then(savedNotes => {
      setNotes(savedNotes);
    })
    .catch(err => console.error('排序更新失败:', err));
};

// 新增moveDown函数
const moveDown = (id) => {
  const index = notes.findIndex(n => n.id === id);
  if (index === notes.length - 1) return; // 最后一条笔记无法下移
  const updatedNotes = [...notes];
  [updatedNotes[index], updatedNotes[index + 1]] = [updatedNotes[index + 1], updatedNotes[index]];
  
  const orderedIds = updatedNotes.map(n => n.id);
  noteService.reorder(orderedIds)
    .then(savedNotes => {
      setNotes(savedNotes);
    })
    .catch(err => console.error('排序更新失败:', err));
};

4. 更新noteService添加reorder方法 #

// noteService中新增reorder方法
const reorder = (orderedIds) => {
  const request = axios.put(`${baseUrl}/reorder`, orderedIds);
  return request.then(res => res.data);
};

// 导出新增方法
export default { getAll, create, update, del, reorder };

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