[P0] 问卷系统存在循环调用API的性能问题 #1

New Issue

tangweijie · 2026-01-13T16:06:46+08:00

tangweijie commented

2026-01-13 16:06:46 +08:00

问题描述

在 QuestionList.vue 的 savePartitions 函数中，保存分区设置时使用了嵌套循环逐个更新问题，每个问题都会触发一次 API 请求。

代码位置: frontend/src/views/prison/questionnaire/components/QuestionList.vue:475-492

for (let i = 0; i < allPartList.value.length; i++) {
  const part = allPartList.value[i]
  if (!part.isDefault && part.name) {
    for (const p of partitions.value) {
      if (p.name === part.name) {
        for (const q of p.questions) {
          await QuestionApi.updateQuestion({  // 每次循环都会发送一次请求!
            ...q,
            id: q.id,
            partSort: i,
            partName: part.name
          })
        }
      }
    }
  }
}

影响

如��一个分区有 50 个问题，保存时会产生 50 次 API 请求
同样的问题存在于拖拽排序完成后的 onPartitionDragEnd 和 onQuestionDragEnd 函数
会导致：
- 网络拥堵，响应时间变长
- 服务器压力增大
- 用户体验差（需要等待所有请求完成）

建议修复

方案一：后端添加批量更新 API，前端一次性发送所有更新
方案二：使用 Promise.all 合并请求，但仍有 N 次请求
方案三：前端添加"保存排序"按钮，用户确认后再批量提交

推荐方案一，示例：

// 后端新增批量更新接口
// POST /prison/question/batch-update
interface BatchUpdateRequest {
  questions: Array<{ id: number; partSort?: number; sort?: number; partName?: string }>
}

// 前端调用
const savePartitions = async () => {
  const updates = []
  for (const p of partitions.value) {
    for (let i = 0; i < p.questions.length; i++) {
      updates.push({
        id: p.questions[i].id,
        partSort: p.sort,
        sort: i,
        partName: p.name
      })
    }
  }
  await QuestionApi.batchUpdate(updates)
}

优先级

P0 - 高

## 问题描述在 `QuestionList.vue` 的 `savePartitions` 函数中，保存分区设置时使用了嵌套循环逐个更新问题，每个问题都会触发一次 API 请求。 **代码位置**: `frontend/src/views/prison/questionnaire/components/QuestionList.vue:475-492` ```typescript for (let i = 0; i < allPartList.value.length; i++) { const part = allPartList.value[i] if (!part.isDefault && part.name) { for (const p of partitions.value) { if (p.name === part.name) { for (const q of p.questions) { await QuestionApi.updateQuestion({ // 每次循环都会发送一次请求! ...q, id: q.id, partSort: i, partName: part.name }) } } } } } ``` ## 影响 - 如��一个分区有 50 个问题，保存时会产生 **50 次 API 请求** - 同样的问题存在于拖拽排序完成后的 `onPartitionDragEnd` 和 `onQuestionDragEnd` 函数 - 会导致： - 网络拥堵，响应时间变长 - 服务器压力增大 - 用户体验差（需要等待所有请求完成） ## 建议修复 1. **方案一**：后端添加批量更新 API，前端一次性发送所有更新 2. **方案二**：使用 Promise.all 合并请求，但仍有 N 次请求 3. **方案三**：前端添加"保存排序"按钮，用户确认后再批量提交推荐方案一，示例： ```typescript // 后端新增批量更新接口 // POST /prison/question/batch-update interface BatchUpdateRequest { questions: Array<{ id: number; partSort?: number; sort?: number; partName?: string }> } // 前端调用 const savePartitions = async () => { const updates = [] for (const p of partitions.value) { for (let i = 0; i < p.questions.length; i++) { updates.push({ id: p.questions[i].id, partSort: p.sort, sort: i, partName: p.name }) } } await QuestionApi.batchUpdate(updates) } ``` ## 优先级 P0 - 高 ## 标签 bug performance frontend

tangweijie commented

2026-01-13 16:27:44 +08:00

修复状态：已修复 ✅

修复版本:

前端: d4cb9960 (master)
后端: 8077990e5d (master-jdk17)
父仓库: e4ec8d2 (main)

修复内容:

添加批量更新API: POST /prison/question/batch-update
前端改用批量更新，不再循环调用API
savePartitions、onPartitionDragEnd、onQuestionDragEnd 均已优化

性能提升:

50题保存分区: 50次请求 → 1次请求

请手动关闭此 Issue。

## 修复状态：已修复 ✅ **修复版本**: - 前端: d4cb9960 (master) - 后端: 8077990e5d (master-jdk17) - 父仓库: e4ec8d2 (main) **修复内容**: 1. 添加批量更新API: `POST /prison/question/batch-update` 2. 前端改用批量更新，不再循环调用API 3. savePartitions、onPartitionDragEnd、onQuestionDragEnd 均已优化 **性能提升**: - 50题保存分区: 50次请求 → **1次请求** 请手动关闭此 Issue。

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: tangweijie/xlcp-frontend#1