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

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

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

限制任务获取数量(分页)

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

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

pages/index.tsx

1
2
3
4
5
async function fetchTasks() {
return remult.repo(Task).find({
limit: 20,
});
}

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

定义未完成的任务(排序)

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

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

pages/index.tsx

1
2
3
4
5
6
async function fetchTasks() {
return remult.repo(Task).find({
limit: 20,
orderBy: { completed: "asc" },
});
}

增加切换任务功能(过滤)

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

  1. hideCompleted 向函数添加一个参数 fetchTasks 并修改 fetchTasks 函数,并设置 whereoptions 参数的属性 find:

pages/index.tsx

1
2
3
4
5
6
7
async function fetchTasks(hideCompleted: boolean) {
return remult.repo(Task).find({
limit: 20,
orderBy: { completed: "asc" },
where: { completed: hideCompleted ? false : undefined },
});
}
  1. hideCompleted 向函数组件添加布尔 React 状态 Home。

pages/index.tsx

1
const [hideCompleted, setHideCompleted] = useState(false);
  1. 在 function 组件的 useEffecthook 中 Home,修改 call to 并在第二个参数中 fetchTasks 注册 state (这样会导致 effect 在变化时重新运行)。hideCompleted useEffect hideCompleted

pages/index.tsx

1
2
3
useEffect(() => {
fetchTasks(hideCompleted).then(setTasks);
}, [hideCompleted]);
  1. 在 中的地图之前立即添加一个 checkbox 输入元素,将其检查状态绑定到该状态,并添加一个在复选框的值更改时调用的处理程序。
    tasks home/index.tsx hideCompleted onChangeset HideCompleted

pages/index.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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>
);

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

下篇实现基础的增改删查