用Cursor编写分页页面的核心，在于前后端的分页逻辑协同配合：前端通常使用React或Vue实现页码切换、当前页状态展示与数据刷新，后端则需要支持page/size或limit/offset等分页参数。Cursor可以高效生成分页组件与分页逻辑代码，但仍需手动补充样式、校验total字段含义，并根据后端分页模式做适配；如果结合自定义指令，还能进一步提升代码生成的准确性与实用性。

使用Cursor来写分页页面，重点就是把几个关键环节理顺：前端需要能够按页请求数据、切换页码，并清晰显示当前是第几页；同时，后端接口也必须配合支持limit+offset，或者page+size这类常见分页参数。虽然Cursor本身没有内置现成的分页组件，但它在生成符合React、Vue等前端框架规范的分页代码方面，效率确实很高，特别适合快速搭建分页功能页面。

在Cursor中生成React分页组件

第一步：打开Cursor编辑器，新建一个React项目，或者进入已有项目的src/components目录。

第二步：右键→New File，命名为Pagination.jsx，然后在文件中输入“生成React分页组件，支持点击页码跳转、上一页/下一页、禁用不可用按钮”，按下Cmd+K（Mac）或Ctrl+K（Win）触发AI指令。

第三步：Cursor通常会生成一个带useState的函数组件，用于管理current、totalPages和onPageChange。这里要特别注意，它默认会通过Math.ceil(total / pageSize)来计算总页数——【务必确认后端返回的是total总条数，而不是totalPages字段】，否则分页页码很容易出现偏差。

第四步：将生成的代码复制并粘贴到Pagination.jsx中，再手动补充CSS类名（如page-item、active等），因为Cursor默认不会连同分页样式一起生成。

连接真实API并处理分页响应

方法一：使用useEffect + useState手动发起请求

在调用Pagination组件的页面中，先定义data、loading、error等状态；然后在useEffect里发起GET请求，URL可拼接为?page=1&size=10；请求成功后，从response.data.items中读取列表数据，再从response.data.total中获取总条数。

方法二：使用React Query自动管理分页请求

安装@tanstack/react-query → 在main.jsx中包裹QueryClientProvider → 在组件内部使用useQuery({ queryKey: ['list', page, size], queryFn: () => fetch(`/api/items?page=${page}&size=${size}`) })；这类queryFn代码Cursor也可以直接生成，但最好明确告诉它“使用page和size两个变量拼接请求URL”，这样结果会更准确。

注意：如果后端采用offset分页模式（例如?offset=20&limit=10），那么Cursor默认生成的page计算逻辑就需要调整——不能直接使用page值与size配合，应该改为Math.floor(offset / limit) + 1，才能正确还原当前页码。

配置Cursor的自定义指令提升生成质量

第一步：点击Cursor左下角Settings → Custom Prompts → Add New Prompt。

第二步可以这样设置：Name填写“React分页模板”，Prompt填写：“你是一个资深React开发者，生成的分页组件必须包含：① current（受控）、② onPageChange回调、③ 上一页/下一页按钮的禁用逻辑（当current===1或current===totalPages时设为disabled）、④ 页码项渲染数量不得超过7个（需要包含省略号逻辑）。”

第三步：保存之后，在任意文件中输入“/React分页模板”，再按Cmd+K即可调用这条自定义指令，生成匹配度更高的React分页组件代码。

这一步实际操作并不复杂，直接粘贴自定义提示词即可，但如果漏掉第③点，就可能出现用户已经在第1页时仍然能点击“上一页”的情况，导致分页交互异常，影响页面体验。