Vue.js项目中实现习题作答进度保存与断点续做的最佳方案是什么

核心思路 #

结合现有PHP+Vue的技术栈，无需大改原有业务逻辑，采用前端临时缓存+后端持久化存储两层机制实现进度保存，兼顾使用可靠性和加载体验。

具体实现步骤 #

1. 新增用户唯一身份标识 #

用户填写完个人信息首次进入习题页时，前端生成唯一ID，可直接用crypto.randomUUID()生成，做两处存储：

• 存入浏览器localStorage，键名可设为exercise_user_token
• 后续所有和进度相关的请求都携带该标识，用于匹配用户进度

如果担心用户清理缓存丢失标识，可冗余存储用户的姓名+班级+生日组合作为备用查询条件。

2. 新增后端进度存储能力 #

新增简单的PHP接口saveProgress.php，同时在数据库新增进度存储表，表结构参考：

CREATE TABLE exercise_progress (
  id INT PRIMARY KEY AUTO_INCREMENT,
  user_token VARCHAR(64) NOT NULL UNIQUE,
  user_info TEXT COMMENT '冗余存储用户基础信息，作为备用检索条件',
  current_ex_number INT NOT NULL DEFAULT 1 COMMENT '当前已完成的最大习题编号',
  answers TEXT COMMENT 'JSON格式存储已提交的所有答案',
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)

接口支持接收用户标识、当前习题编号、已作答答案数组三个核心参数，写入上述数据库表即可。

3. 修改单题提交逻辑 #

在现有handleSubmit方法末尾新增进度同步逻辑：

// 原有业务逻辑不变
this.addNewAnswer(this.answers)
// 新增：本地缓存进度
localStorage.setItem('exercise_progress', JSON.stringify({
  currentExNumber: this.exNumber,
  answers: this.answers
}))
// 新增：同步进度到后端
this.axios.post('http://你的接口地址/saveProgress.php', JSON.stringify({
  userToken: localStorage.getItem('exercise_user_token'),
  currentExNumber: this.exNumber,
  answers: this.answers
}))

4. 页面加载时恢复进度 #

用户再次打开习题页时按优先级读取进度：

• 先读取localStorage中的用户标识，请求后端接口拉取存储的进度
• 后端无匹配进度时，读取本地localStorage存储的进度数据
• 拿到有效进度后，直接将this.exNumber赋值为已完成最大习题编号+1，this.answers赋值为存储的答案数组，页面跳转至对应习题位置即可。

5. 兼容原有最终提交逻辑 #

原有最后提交所有答案生成Excel的逻辑无需修改，仅需在提交成功的回调中清理本地存储的进度，避免下次进入读取到旧数据：

.then((response) => {
  alert(response.data)
  // 新增：清空本地进度缓存
  localStorage.removeItem('exercise_user_token')
  localStorage.removeItem('exercise_progress')
  router.push('/main')
})

可选优化项 #

• 给后端进度同步请求加500ms防抖，减少接口调用频次
• 给数据库中的进度数据设置15天自动过期，清理无用历史数据
• 支持用户输入姓名+班级组合手动找回进度，适配清理缓存的场景

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