如何仅提交前端修改的任务数据至后端，避免全量保存？

前端通过axios从数据库拉取2000-3000条任务，每个任务结构如下：

tasks: [
  { title: 'some text here', completed: false },
  // ...更多任务
]

通过v-model绑定checkbox修改任务完成状态：

<li v-for="task in tasks">
  <input type="checkbox" v-model="task.completed">
  <label :for="task.title">{{task.title}}</label>
</li>

当前提交逻辑会全量发送所有任务至后端：

submit(){
  return axiosComponent.updateTask(this.tasks)
}

导致数据量过大引发超时等性能问题，需仅提交实际修改过状态的任务。

后端现有代码：

• axios组件：

updateTask(tasks){
  return axios.put('task/updateStatus', tasks)
}

• Controller：

@PutMapping("/updateStatus")
public void updateStatusOnTask(@RequestBody List<TaskEntity> taskEntities){
    taskManager.updateTaskStatus(taskEntities);
}

• Manager：

public void updateTaskStatus(List<TaskEntity> taskEntities) {
    taskRepository.saveAll(taskEntities);
}

前端修改：跟踪状态变更，仅提交修改项 #

1. 保存初始状态：拉取任务列表后，给每个任务新增originalCompleted字段存储初始完成状态，用于后续对比：

async fetchTasks() {
  const response = await axios.get('task/list');
  this.tasks = response.data.map(task => ({
    ...task,
    originalCompleted: task.completed // 保存从数据库获取的初始状态
  }));
}

注意：需确保后端返回的任务包含唯一标识（如id），否则无法准确对应数据库中的任务（title可能重复）。

2. 筛选修改过的任务：提交时过滤出状态变更的任务，仅传输必要字段（id和completed）减少数据量：

submit(){
  // 筛选状态变更的任务，只保留核心字段
  const modifiedTasks = this.tasks.filter(task => task.completed !== task.originalCompleted)
                                 .map(({ id, completed }) => ({ id, completed }));
  
  if (modifiedTasks.length === 0) {
    console.log('无任务状态变更，无需提交');
    return Promise.resolve();
  }
  
  return axiosComponent.updateTask(modifiedTasks);
}

后端适配（可选优化） #

原后端代码可直接兼容修改后的提交（只要TaskEntity包含id，saveAll会根据id执行更新），还可进一步优化性能：

1. 使用DTO减少数据传输：创建仅包含核心字段的DTO类，避免不必要的字段序列化：

public class TaskStatusUpdateDTO {
    private Long id;
    private Boolean completed;
    
    // getter、setter方法
}

2. 修改Controller接收DTO：

@PutMapping("/updateStatus")
public void updateStatusOnTask(@RequestBody List<TaskStatusUpdateDTO> updateDTOs){
    taskManager.updateTaskStatus(updateDTOs);
}

3. 优化Manager逻辑：直接通过Repository批量更新状态（比saveAll更高效）：

public void updateTaskStatus(List<TaskStatusUpdateDTO> updateDTOs) {
    updateDTOs.forEach(dto -> taskRepository.updateCompletedById(dto.getCompleted(), dto.getId()));
}

4. Repository定义批量更新方法：

@Modifying
@Query("UPDATE TaskEntity t SET t.completed = :completed WHERE t.id = :id")
void updateCompletedById(@Param("completed") Boolean completed, @Param("id") Long id);

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