介绍
@turbolent/aor-postgrest-client 是一个基于 React-admin 和 postgREST 的前端数据请求库。它可以方便地将 postgREST 的 REST API 集成到 React-admin 应用程序中,并提供了丰富的资源操作功能。
安装
首先,确保您的项目已经安装了 React-admin。接着,在项目根目录执行以下命令来安装 @turbolent/aor-postgrest-client:
--- ------- -------------------------------
使用
基本用法
第一步是使用 resource 定义一个资源。例如,我们定义一个名称为 posts 的资源:
------ --------------- ---- ---------------------------------- ----- ---------- - ---------------------------------------- - ------------ --- ----- ------------- - - -- ---- ----- -------- -- ---- --- -- --------- -------- -- ---- ----------- - --- - ----- --------- -------- ----- -- ------ - ----- --------- ---------- ---- -- -------- - ----- --------- ---------- --------- -- ---------- - ----- ----------- --------- ----- -- ---------- - ----- ----------- --------- ----- -- -- --
接下来,我们可以使用 React-admin 中的典型方式来定义一个页面:
------ - ------ --------- ----- --------- --------- - ---- -------------- ----- --- - -- -- - ------ -------------------------- --------- ------------------------- -- -------- --
这将创建一个 posts 资源的列表页面。现在,我们可以使用 List 组件来定义列表,并使用 Datagrid 和 TextField 组件来定义列:
----- -------- - ------- -- - ----- ----------- --------- ---------------- ---------- ----------- -- ---------- -------------- -- ---------- ---------------- -- ---------- ------------------ -- ---------- ------------------ -- ----------- ------- -- ----- --- - -- -- - ------ -------------------------- --------- ------------------------- --------------- -- -------- --
现在,我们可以在浏览器中访问 http://localhost:3000/#/posts 查看 posts 资源的列表页面。
高级用法
除了基本用法之外,@turbolent/aor-postgrest-client 还提供了丰富的资源操作功能,例如过滤、排序、分页等。
过滤
在上面的示例中,List 组件中使用 rowClick="edit" 将行点击操作定义为编辑表单。为了过滤出某个特定资源,我们可以使用 filter 属性:
----- -------- - ------- -- - ----- ---------- --------- ------ ------- ------- --- --- ------- --
这将过滤出所有标题为 "Hello, World!" 的帖子。
排序
我们可以通过 sort 属性来对数据进行排序。sort 属性接受一个带有字段和顺序的数组:
----- -------- - ------- -- - ----- ---------- ------------------- --------- --- ------- --
这将按创建时间字段按降序排列数据。
分页
我们可以使用 pagination 属性来进行分页:
----- -------- - ------- -- - ----- ---------- ------------- --- ------- --
这将将每页显示 10 条数据。
@turbolent/aor-postgrest-client 还支持更多的其他操作,如资源的添加、编辑、删除等。这里不再赘述。
总结
在本文中,我们介绍了如何使用 @turbolent/aor-postgrest-client 库将 postgREST 的 REST API 集成到 React-admin 应用程序中。通过定义资源、创建页面和使用过滤、排序、分页等高级用法,我们可以更轻松地操作数据。
示例代码见:https://github.com/turbolent/aor-postgrest-client。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600566c181e8991b448e31c2