在前端开发中，我们经常要和后端的 API 交互。而对于一些简单的业务场景，使用 Parse Server 可能会更加方便快捷。aor-parseserver-client 是一个基于 parse.js 的封装，为 react-admin 提供了与 Parse Server 交互的能力。本文将介绍如何在 react-admin 项目中使用 aor-parseserver-client。
安装
使用 npm 安装 aor-parseserver-client：
$ npm install aor-parseserver-client
配置
在使用 aor-parseserver-client 前，需要先进行配置。在 react-admin 的入口文件中，配置 Parse Server 的基本信息：
import parseClient from 'aor-parseserver-client';
parseClient.init({
appId: 'appId',
serverUrl: 'http://localhost:1337/parse',
// ...
});其中，appId 表示 Parse Server 后台的应用 ID，serverUrl 则是 Parse Server 的 URL。其它可选配置项包括：
- javascriptKey：Parse Server 后台的 JavaScript Key。
- masterKey: Parse Server 后台的 Master Key。
- storageKey：存储在本地的当前用户信息的 key。
- appName：应用名称。
- usePointer：是否在请求中使用 pointer。
- useMasterKey：是否在请求中使用 master key。
除了以上配置项，还可以在初始化时传入自定义的 Parse 对象：
import parseClient, { Parse } from 'aor-parseserver-client';
parseClient.init({ Parse });使用
aor-parseserver-client 提供了 react-admin 需要的各种方法，包括“获取资源列表”、“获取资源详情”、“创建资源”等。下面将演示如何使用这些方法，实现一个基本的用户管理功能。
获取资源列表
获取用户列表，需要创建一个与用户相关的 Parse.Object 类，并调用 getList 方法：
-- -------------------- ---- -------
------ - ------ --------- ----------- - ---- --------------
------ ----------- ---- -------------------------
----- ---- - -------------------------------
----- --- - -- -- -
------ ------------------------------------------
--------- ------------ ------------------ --
--------
--这里使用 define 方法创建了一个 User 类，然后将其作为 dataProvider 传递给 react-admin。在 List 组件中，我们可以使用 ListGuesser 自动渲染用户列表页，也可以自定义 List 组件。
获取资源详情
获取用户详情，需要调用 getOne 方法：
-- -------------------- ---- -------
------ - ------ --------- ----------- ---------- ----------- - ---- --------------
------ ----------- ---- -------------------------
----- --- - -- -- -
------ ------------------------------------------
---------
------------
----------- -- -
------------
---------- ----------------- --
------------ ------------ --
-------------
--
--
--------
--在 Show 组件中，我们可以使用 SimpleForm 组件，将获取的资源详情填充到表单中进行展示和编辑。
创建资源
创建用户，需要调用 create 方法：
-- -------------------- ---- -------
------ - ------ --------- ------- ----------- ---------- ----------- - ---- --------------
------ ----------- ---- -------------------------
----- --- - -- -- -
------ ------------------------------------------
---------
------------
------------- -- -
--------
------------
---------- ----------------- --
------------ ------------ --
-------------
---------
--
--
--------
--在 Create 组件中，我们可以使用 SimpleForm 组件，获取用户输入的表单数据，调用 create 方法创建新资源。
总结
本文介绍了如何在 react-admin 中使用 aor-parseserver-client 操作 Parse Server，涵盖了获取资源列表、获取资源详情和创建资源等基本操作。aor-parseserver-client 的底层是使用 parse.js 实现的，因此在操作上与 parse.js 类似，但提供了更适合 react-admin 的 API。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596081e8991b448d6cce