使用 Next.js + Remult 创建一个待办事项(三)

前两篇文章，搭建了基础配置，定义了实体类。

本篇主要讲下分页、排序和过滤

限制任务获取数量（分页）

将获取的任务数限制为 20.

在 fetchTasks 函数中，将 options 参数传递给 find 方法调用并将其 limit 属性设置为 20。

pages/index.tsx

async function fetchTasks() {
  return remult.repo(Task).find({
    limit: 20,
  });
}

稍后我们将数据库中内容添加多些，来测试分页。

定义未完成的任务（排序）

未完成的任务很重要，应显示在待办事项应用程序中已完成任务的上方。

在该函数中，将方法调用参数的属性 fetchTasks 设置为一个对象，该对象包含您要作为排序依据的字段。使用“asc”和“desc”来确定排序顺序。orderByfindoption

pages/index.tsx

async function fetchTasks() {
  return remult.repo(Task).find({
    limit: 20,
    orderBy: { completed: "asc" },
  });
}

增加切换任务功能（过滤）

让我们允许用户使用服务器端过滤来切换已完成任务的显示。

hideCompleted 向函数添加一个参数 fetchTasks 并修改 fetchTasks 函数，并设置 whereoptions 参数的属性 find：

pages/index.tsx

async function fetchTasks(hideCompleted: boolean) {
  return remult.repo(Task).find({
    limit: 20,
    orderBy: { completed: "asc" },
    where: { completed: hideCompleted ? false : undefined },
  });
}

hideCompleted 向函数组件添加布尔 React 状态 Home。

pages/index.tsx

1	const [hideCompleted, setHideCompleted] = useState(false);

在 function 组件的 useEffecthook 中 Home，修改 call to 并在第二个参数中 fetchTasks 注册 state （这样会导致 effect 在变化时重新运行）。hideCompleted useEffect hideCompleted

pages/index.tsx

1
2
3

useEffect(() => {
  fetchTasks(hideCompleted).then(setTasks);
}, [hideCompleted]);

在中的地图之前立即添加一个 checkbox 输入元素，将其检查状态绑定到该状态，并添加一个在复选框的值更改时调用的处理程序。
tasks home/index.tsx hideCompleted onChangeset HideCompleted

pages/index.tsx

return (
  <div>
    <input
      type="checkbox"
      checked={hideCompleted}
      onChange={(e) => setHideCompleted(e.target.checked)}
    />{" "}
    Hide Completed
    <main>
      {tasks.map((task) => (
        <div key={task.id}>
          <input type="checkbox" checked={task.completed} />
          {task.title}
        </div>
      ))}
    </main>
  </div>
);

浏览器刷新后，任务列表上方会出现一个“隐藏已完成”复选框。用户可以使用复选框切换未完成任务的显示。

下篇实现基础的增改删查