REST API：GUI 中的无限滚动分页，但允许搜索所有条目

Posted 2023-02-19

【中文标题】REST API：GUI 中的无限滚动分页，但允许搜索所有条目

【英文标题】：REST API: Infinite scroll pagination in the GUI, but allow searching through all entries

【发布时间】：2018-02-02 16:45:07

【问题描述】：

我在 Node.js 服务器中运行 Express，它作为我的 React 前端应用程序的后端。

前端应用程序通过 REST 调用从后端（存储在 Mongo 中）获取数据，并将这些数据显示在表格中。 数据量每天都在增长，所以我认为我应该考虑减少传输到前端应用程序的数据量，以避免对后端造成不必要的压力。

我不确定这是否是解决此问题的正确方法，但我一直在考虑让后端获取有限数量的条目，以便只有这些数据会显示在前端表中.

搜索出现问题 - 当用户想要搜索表中的数据时，我需要能够搜索所有条目，而不仅仅是加载到表中的数据。

我想一种选择是让搜索函数实际查询 REST API，而不是搜索表本身。

如果我走在正确的轨道上，我想我可以在 https://refactoringfactory.wordpress.com/2012/09/08/pagination-in-node-js-and-express/ 中找到的示例中的某处实现 REST API 分页。欢迎提出其他关于如何实现分页的建议。

我非常希望对我所描述的方法提供一些意见，并提出更明智的实施方法的建议。

编辑：我稍微更改了标题以包含“无限滚动分页”。这就是我想要实现的。目前我点击页面分页设置，但想将其替换为无限滚动分页。

【参考方案1】：

我一直在考虑让后端获取有限数量的条目，以便只有这些数据会显示在前端表中。

根据我的经验，这是常见的做法。它的术语是“分页”。查看有关 REST API 中分页最佳实践的 SO 问题：API pagination best practices。

搜索出现问题 - 当用户想要搜索表中的数据时，我需要能够搜索所有条目，而不仅仅是加载到表中的数据。

我想一种选择是让搜索函数实际查询 REST API，而不是搜索表本身。

再一次，你明白了。在客户端执行小型过滤器/搜索对于有限数量的条目来说是可以的，但如果您首先只需要检索匹配搜索条件的项目，那么将该功能添加到您的 REST API 是正确的选择。

【讨论】：

感谢您的回复！我会阅读你链接到的帖子，希望我现在的问题能得到解答。致其他读者：就在 TW80000 写完他的回复后，我编辑了我原来的帖子标题和正文，包括“分页”。

看起来接受的答案 (***.com/a/13905523/6650955) 是要走的路。我的理解是 REST API 返回一个包含数据和光标（上一个/下一个）的数据结构，我需要相应地调整我的客户端。正确的？我遇到了npmjs.com/package/react-infinite-scroller，我希望我可以使用它。

是的，我会这样做。非常好，希望对您有所帮助。

【参考方案2】：

对，你应该这样做

分页：您可以通过在列表的其余端点中公开 2 个参数来实现它

?p=<number>：页码，默认为1 ?l=<number>：每页的项目数/页长，默认为10到100之间的数字

搜索：通过在列表的其余端点中公开 1 个参数来实现它

/?q=<string>：你可以定义为你想要的，可能是一个匹配数据的一个或多个字段的字符串

如果你想尽量减少网络流量，你还可以再添加一个参数来明确选择你想要返回的字段，像这样

/?f=<string>：字符串可能类似于 id,name,age，因此 api 应该只返回每条记录的这三个字段。

您的RESTful API 中的list 端点应接受所有这些参数

例子：

http://example.com/api/cars/?p=2&l=15&q=toyota&f=id,brand,model,color

【讨论】：

谢谢，这是一些很棒的信息。感谢您提供诸如此类的示例，我正在学习很多有关 REST 端点的知识。