数据库任务分批展示功能开发问询：每次显示3个任务，完成后加载新任务

嘿，看起来你已经搞定了第一步——取出3个任务，接下来咱们把完成后加载新任务的逻辑补全！核心思路就是每次只给用户返回他们还没完成的任务，并且在确认当前3个都完成后，再请求下一批。下面分几个环节拆解：

一、数据库查询：精准获取用户未完成的任务 #

首先要确保你从数据库取的3个任务，是该用户从未完成过的。你可以用JOIN或者NOT IN来过滤已完成的任务，这里给你两种SQL写法：

方法1：LEFT JOIN过滤（性能更优，适合数据量大的情况） #

SELECT t.taskID, t.taskContent
FROM tasks t
LEFT JOIN completedTasks ct 
  ON t.taskID = ct.taskID 
  AND ct.username = '当前登录的用户名' -- 替换为实际的用户名变量
WHERE ct.taskID IS NULL -- 只保留未关联到完成记录的任务
LIMIT 3;

方法2：NOT IN子查询（写法更直观） #

SELECT taskID, taskContent
FROM tasks
WHERE taskID NOT IN (
    SELECT taskID 
    FROM completedTasks 
    WHERE username = '当前登录的用户名'
)
LIMIT 3;

注意：给completedTasks表加一个联合唯一约束（taskID + username），这样可以避免同一个用户重复提交同一个任务的完成记录，防止数据冗余。

二、前端交互：跟踪任务完成状态，触发加载 #

前端需要做两件事：记录当前批次的任务完成情况，以及在全部完成后请求新任务。

实现思路： #

• 初始化时，调用后端接口获取第一批3个任务，渲染到页面。
• 维护一个计数器（比如completedCount），初始值为0。
• 当用户点击「Complete Task」按钮：
  1. 调用后端接口，把taskID和用户名提交到completedTasks表。
  2. 接口返回成功后，把该任务标记为已完成（比如灰掉、打勾），同时completedCount += 1。
  3. 检查completedCount是否等于3：
     • 如果等于，调用后端接口获取下一批3个未完成任务。
     • 拿到新任务后，清空当前任务列表，渲染新任务，同时把completedCount重置为0。
     • 如果没有新任务返回（比如所有任务都完成了），显示提示“没有更多任务啦！”。

伪代码示例（JS）： #

let completedCount = 0;
const currentUsername = '当前用户'; // 从登录状态中获取

// 获取任务的函数
async function fetchTasks() {
  const response = await fetch(`/api/tasks?username=${currentUsername}`);
  const tasks = await response.json();
  if (tasks.length === 0) {
    document.getElementById('task-container').innerHTML = '<p>没有更多任务啦！</p>';
    return;
  }
  // 渲染任务到页面
  renderTasks(tasks);
  // 重置计数器
  completedCount = 0;
}

// 完成任务的函数
async function completeTask(taskID) {
  const response = await fetch('/api/complete-task', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ taskID, username: currentUsername })
  });
  if (response.ok) {
    completedCount++;
    // 标记任务为已完成（比如添加样式）
    document.getElementById(`task-${taskID}`).classList.add('completed');
    // 检查是否完成当前批次
    if (completedCount === 3) {
      // 加载下一批
      fetchTasks();
    }
  }
}

// 页面加载时获取第一批任务
document.addEventListener('DOMContentLoaded', fetchTasks);

三、后端接口：处理任务查询和完成请求 #

后端需要提供两个核心接口：

1. 获取未完成任务接口：接收用户名，执行上面的SQL查询，返回3个未完成任务的JSON数据。
2. 完成任务接口：接收taskID和用户名，执行插入操作（注意先检查是否已存在，或者利用唯一约束避免重复插入）。

伪代码示例（以Node.js/Express为例）： #

// 获取未完成任务
app.get('/api/tasks', async (req, res) => {
  const { username } = req.query;
  try {
    const tasks = await db.query(`
      SELECT t.taskID, t.taskContent
      FROM tasks t
      LEFT JOIN completedTasks ct ON t.taskID = ct.taskID AND ct.username = ?
      WHERE ct.taskID IS NULL
      LIMIT 3;
    `, [username]);
    res.json(tasks);
  } catch (err) {
    res.status(500).json({ error: '获取任务失败' });
  }
});

// 标记任务完成
app.post('/api/complete-task', async (req, res) => {
  const { taskID, username } = req.body;
  try {
    // 用INSERT IGNORE避免重复插入（前提是有联合唯一约束）
    await db.query(`
      INSERT IGNORE INTO completedTasks (taskID, username)
      VALUES (?, ?);
    `, [taskID, username]);
    res.json({ success: true });
  } catch (err) {
    res.status(500).json({ error: '标记任务完成失败' });
  }
});

四、额外注意点 #

• 用户刷新页面：刷新后要重新获取当前未完成的任务（如果剩下的未完成任务不足3个，接口会自动返回剩余的数量，用户完成后再加载新的3个）。
• 加载状态：在请求新任务时，显示加载动画，避免用户重复点击。
• 异常处理：如果接口请求失败（比如网络问题），要给用户提示，并且允许重试。

这样一套逻辑下来，就能实现你想要的“完成当前3个任务后自动加载下一批”的效果啦！

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