介绍
@turbolent/aor-postgrest-client 是一个基于 React-admin 和 postgREST 的前端数据请求库。它可以方便地将 postgREST 的 REST API 集成到 React-admin 应用程序中，并提供了丰富的资源操作功能。
安装
首先，确保您的项目已经安装了 React-admin。接着，在项目根目录执行以下命令来安装 @turbolent/aor-postgrest-client：
npm install @turbolent/aor-postgrest-client
使用
基本用法
第一步是使用 resource 定义一个资源。例如，我们定义一个名称为 posts 的资源：
-- -------------------- ---- -------
------ --------------- ---- ----------------------------------
----- ---------- - ---------------------------------------- - ------------ ---
----- ------------- - -
-- ----
----- --------
-- ---- --- --
--------- --------
-- ----
----------- -
--- -
----- ---------
-------- -----
--
------ -
----- ---------
---------- ----
--
-------- -
----- ---------
---------- ---------
--
---------- -
----- -----------
--------- -----
--
---------- -
----- -----------
--------- -----
--
--
--接下来，我们可以使用 React-admin 中的典型方式来定义一个页面：
import { Admin, Resource, List, Datagrid, TextField } from 'react-admin';
const App = () => (
<Admin dataProvider={restClient}>
<Resource name={postsResource.name} />
</Admin>
);这将创建一个 posts 资源的列表页面。现在，我们可以使用 List 组件来定义列表，并使用 Datagrid 和 TextField 组件来定义列：
-- -------------------- ---- -------
----- -------- - ------- -- -
----- -----------
--------- ----------------
---------- ----------- --
---------- -------------- --
---------- ---------------- --
---------- ------------------ --
---------- ------------------ --
-----------
-------
--
----- --- - -- -- -
------ --------------------------
--------- ------------------------- --------------- --
--------
--现在，我们可以在浏览器中访问 http://localhost:3000/#/posts 查看 posts 资源的列表页面。
高级用法
除了基本用法之外，@turbolent/aor-postgrest-client 还提供了丰富的资源操作功能，例如过滤、排序、分页等。
过滤
在上面的示例中，List 组件中使用 rowClick="edit" 将行点击操作定义为编辑表单。为了过滤出某个特定资源，我们可以使用 filter 属性：
const PostList = (props) => (
<List {...props} filter={{ title: 'Hello, World!' }}>
...
</List>
);这将过滤出所有标题为 "Hello, World!" 的帖子。
排序
我们可以通过 sort 属性来对数据进行排序。sort 属性接受一个带有字段和顺序的数组：
const PostList = (props) => (
<List {...props} sort={['createdAt', 'DESC']}>
...
</List>
);这将按创建时间字段按降序排列数据。
分页
我们可以使用 pagination 属性来进行分页：
const PostList = (props) => (
<List {...props} perPage={10}>
...
</List>
);这将将每页显示 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