如何使用reactJS作为前端和django rest框架作为后端显示大型数据列表

时间:2017-11-15 12:20:45

标签: django reactjs

我有很多烹饪所需成分的数据清单。超过3000 +

我使用Django rest框架作为后端,ReactJs作为前端。

列表中的每个项目都有一个名称,id,measurementunit,密度(kg / ltr)和cost / measurementunit

在Django中,我创建了一个api端点来提供JSON格式的数据。

我希望以表格格式显示数据,并在顶部显示搜索过滤器。同时我想要显示最多300个结果。

有人可以指导我如何实现这一目标。我应该一次获取所有列表还是使用django中的分页。我应该使用单独的api进行搜索,还是使用前端的reactjs进行搜索。

目前我不需要django的任何授权。这些数据仅供本地使用。

1 个答案:

答案 0 :(得分:3)

3000条记录可以在一个块中向客户端发送很多内容。它更易于开发,但它不能很好地扩展,并且很可能产生可测量的加载时间。如果您对此感到满意,并且您不希望您的数据集增长,那么实用的方法可能是将其作为一个大清单......但它违背了最佳做法。

无论哪种方式,您可能都不想向用户显示一个巨大的3k行列表,因此UI将具有某种分页机制。那可能是" next"," previous"页面,或者它可能是无限滚动。无论哪种方式,数据抽象应该将其视为分页数据。

寻呼API 假设您决定进行API支持分页,则应使用后端框架的分页功能,例如Django Paging APIREST API的其他抽象功能。那里有很多资源。

搜索 您决定对API进行分页的那一刻,您也承诺在后端处理搜索(过滤)。管理客户端过滤的唯一方法是客户端是否可以访问所有数据。由于情况并非如此,您需要在数据请求中加入搜索过滤器。搜索和分页不是互斥的,因此请确保您的API同时支持两者。处理此问题的常用方法是:

http://yoursite.com/api/ingredients?page=5&page_size=100&search=carrot

<强>客户端 在React方面,您可以构建自己的UI(it is easy to do),也可以使用为您提取此内容的组件,例如react-js-paginationreact-paginate。如果API被分页,客户端组件应该不在乎。相反,它只是通知您何时显示不同的记录,其余的由您决定。

如果您决定将所有内容保留在一个大型REST调用中,那么您仍需要将数据切片出数组以进行显示。如果您对API进行分页,则可以在您收到的页面的客户端保留实例缓存。如果您没有数据,请进行REST调用以获取数据,并使用数据填充数组。这样,如果用户前进然后后退,则您不会重新获取。

<强>结论 我希望这能有所帮助。享受:)