使用 Next.js + Remult 创建一个待办事项(三)
前两篇文章,搭建了基础配置,定义了实体类。
本篇主要讲下分页、排序和过滤
限制任务获取数量(分页)
将获取的任务数限制为 20.
在 fetchTasks 函数中,将 options 参数传递给 find 方法调用并将其 limit 属性设置为 20。
pages/index.tsx
1 | async function fetchTasks() { |
稍后我们将数据库中内容添加多些,来测试分页。
定义未完成的任务(排序)
未完成的任务很重要,应显示在待办事项应用程序中已完成任务的上方。
在该函数中,将方法调用参数的属性 fetchTasks 设置为一个对象,该对象包含您要作为排序依据的字段。使用“asc”和“desc”来确定排序顺序。orderByfindoption
pages/index.tsx
1 | async function fetchTasks() { |
增加切换任务功能(过滤)
让我们允许用户使用服务器端过滤来切换已完成任务的显示。
- hideCompleted 向函数添加一个参数 fetchTasks 并修改 fetchTasks 函数,并设置 whereoptions 参数的属性 find:
pages/index.tsx
1 | async function fetchTasks(hideCompleted: boolean) { |
- 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 | useEffect(() => { |
- 在 中的地图之前立即添加一个 checkbox 输入元素,将其检查状态绑定到该状态,并添加一个在复选框的值更改时调用的处理程序。
tasks home/index.tsx hideCompleted onChangeset HideCompleted
pages/index.tsx
1 | return ( |
浏览器刷新后,任务列表上方会出现一个“隐藏已完成”复选框。用户可以使用复选框切换未完成任务的显示。
下篇实现基础的增改删查