简介

公开 API 的应用程序通常需要管理员 (admin) 页面来查看和编辑应用程序背后的数据。创建一个通常需要艰苦的过程来构建一个接口,然后手动处理每个请求,以获取或从 API 发送数据。

react-admin通过自动使用您的(REST、GraphQL、自定义)API 并允许您快速构建以优雅的Material-UI框架为主题的管理界面,从而减少了这种苦差事。

在本文中,您将使用react-admin构建一个使用JSONPlaceholderAPI 的管理界面。

先决条件

• Node.js 的本地开发环境。关注如何安装 Node.js 并创建本地开发环境。

• 对 React 有一定的了解。您可以阅读我们的如何在 React.js系列中编码。

本教程已使用 Node v16.6.1、npmv7.20.3、reactv17.0.2、react-adminvv3.17.1 和ra-data-json-serverv3.17.1 进行了验证。

第 1 步 - 设置项目

首先,我们将使用create-react-app创建一个新的 React 应用程序:

npx create-react-app react-admin-example

接下来,导航到新的项目目录:

cd react-admin-example

然后,安装react-admin的依赖项:

npm install react-admin@<3.17.1^> ra-data-json-server@3.17.1<^>

ra-data-json-server是所谓的_数据提供者_。数据提供者允许react-admin与您的 API 进行通信。在这里,我们使用ra-data-json-server因为 JSONPlaceholder 由JSON Server提供支持。如果您使用的 API 与 JSONPlaceholder 不完全匹配,则需要实现自己的数据提供程序。有关详细信息,请参阅数据提供者文档。

此时,您有一个安装了react-admin和ra-data-json-server的新 React 项目。

第 2 步 - 构建应用程序

首先,我们将在代码编辑器中打开src/App.js并添加根Admin组件:

src/App.js

import {
  Admin
} from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');

function App() {
  return (
    <Admin dataProvider={dataProvider} />
  );
}

export default App;

将更改保存到文件并运行应用程序:

npm run start

然后,在我们的浏览器中打开应用程序。它将显示一条消息,确认react-admin已正确配置:

OutputWelcome to React-admin
Your application is properly configured.
Now you can add a <Resource> as child of <Admin>.

现在,我们可以开始将 API 端点映射到管理界面。

步骤 3 — 使用ListGuesser映射数据

每当您添加新端点时,您首先使用 guesser。这将从 API 获取数据并猜测要输出哪种组件。我们将添加的第一个端点是users,我们将使用ListGuesser自动呈现所有用户的列表:

src/App.js

import {
  Admin,
  Resource,
  ListGuesser,
} from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');

function App() {
  return (
    <Admin dataProvider={dataProvider}>
      <^><Resource
        name="users"
        list={ListGuesser}
      />
    </Admin>
  );
}

export default App;

保存对文件的更改并在浏览器中观察应用程序。

有一个管理界面会自动填充用户列表!包括他们的姓名、电子邮件、电话号码等等!

它几乎可以完美运行,但猜测器并不意味着永久使用。他们只是为了帮助我们开始。我们将从猜测器(可以在 DevTools 控制台中找到)获取猜测列表输出,并使用它来创建自定义列表组件:

export const UserList = (props) => (
  <List {...props}>
    <Datagrid rowClick="edit">
      <TextField source="id" />
      <TextField source="name" />
      <TextField source="username" />
      <EmailField source="email" />
      <TextField source="address.street" />
      <TextField source="phone" />
      <TextField source="website" />
      <TextField source="company.name" />
    </Datagrid>
  </List>
);

我们将获取此输出并将其粘贴到一个名为Users.js的新文件中,同时确保添加来自react-admin的所有导入:

src/Users.js

import {
  List,
  Datagrid,
  TextField,
  EmailField,
} from 'react-admin';

export const UserList = (props) => (
  <List {...props}>
    <Datagrid rowClick="edit">
      <TextField source="id" />
      <TextField source="name" />
      <TextField source="username" />
      <EmailField source="email" />
      <TextField source="address.street" />
      <TextField source="phone" />
      <TextField source="website" />
      <TextField source="company.name" />
    </Datagrid>
  </List>
);

现在我们需要用我们新创建的组件替换ListGuesser:

src/App.js

import {
  Admin,
  Resource,
} from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';
import {
  UserList,
} from './Users';

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');

function App() {
  return (
    <Admin dataProvider={dataProvider}>
      <Resource
        name="users"
        list={UserList}
      />
    </Admin>
  );
}

export default App;

伟大的!在浏览器窗口中,我们可以验证该列表是否与ListGuesser完全一样。

让我们对UserList进行一些更改以使其更好一些。我们将website列更改为UrlField以使其可点击。我们还将为address和company列添加标签以使其更具可读性:

src/Users.js

import {
  List,
  Datagrid,
  TextField,
  EmailField,
  UrlField,
} from 'react-admin';

export const UserList = props => (
  <List {...props}>
    <Datagrid rowClick="edit">
      <TextField source="id" />
      <TextField source="name" />
      <TextField source="username" />
      <EmailField source="email" />
      <TextField source="address.street" label="Address" />
      <TextField source="phone" />
      <UrlField source="website" />
      <TextField source="company.name" label="Company" />
    </Datagrid>
  </List>
);

标签显示为 Address 而不是 Address.street。而不是 Company.name 标签显示为 Company。好多了!

第 4 步 — 使用EditGuesser创建、编辑、删除地图

如果您只是想查看用户,我们的管理界面非常有用,但如果您想创建、编辑甚至删除用户怎么办?值得庆幸的是,react-admin也有办法做到这一点。我们将再次使用猜测器,但这次是EditGuesser:

src/App.js

import {
  Admin,
  Resource,
  EditGuesser,
} from "react-admin";
import jsonServerProvider from 'ra-data-json-server';
import {
  UserList,
} from './Users';

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');

function App() {
  return (
    <Admin dataProvider={dataProvider}>
      <Resource
        name="users"
        list={UserList}
        edit={EditGuesser}
      />
    </Admin>
  );
}

export default App;

现在,让我们在浏览器中打开管理员并单击任何用户。这将调出编辑界面,再一次,猜测者做得很好!

我们将像以前一样做同样的事情,复制猜测器的输出并将其粘贴到我们的Users.js文件中。我们还将id列更改为disabled输入;您不希望id字段可编辑!

src/users.js

import {
  List,
  Datagrid,
  TextField,
  EmailField,
  UrlField,
  Edit,
  SimpleForm,
  TextInput,
} from 'react-admin';

export const UserList = props => ( ... );

export const UserEdit = props => (
  <Edit {...props}>
    <SimpleForm>
      <TextInput source="id" disabled />
      <TextInput source="name" />
      <TextInput source="username" />
      <TextInput source="email" />
      <TextInput source="address.street" label="Address" />
      <TextInput source="phone" />
      <TextInput source="website" />
      <TextInput source="company.name" label="Company" />
    </SimpleForm>
  </Edit>
);

最后,将EditGuesser替换为我们的自定义组件:

src/App.js

import {
  Admin,
  Resource,
} from "react-admin";
import jsonServerProvider from 'ra-data-json-server';
import {
  UserList,
  UserEdit,
} from './Users';

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');

function App() {
  return (
    <Admin dataProvider={dataProvider}>
      <Resource
        name="users"
        list={UserList}
        edit={UserEdit}
      />
    </Admin>
  );
}

export default App;

现在我们有了一个功能编辑界面!不幸的是,JSONPlaceholder 不允许编辑。但是,尝试编辑用户并观察会发生什么。在react-admin将其更改回其原始形式之前,您将体验用户更改一秒钟。这是因为react-admin使用了_乐观渲染_。这意味着当用户进行更改时,react-admin会立即显示该更改,同时在后台发送更新查询。这允许无缝的用户体验,无需在更新管理界面之前等待服务器响应。

我们现在唯一缺少的是一种创建新用户的方法。由于创建表单与编辑表单非常相似,我们可以复制我们的UserEdit组件并调用新组件UserCreate。确保删除id字段,因为用户在创建之前不能拥有id。

src/Users.js

import {
  List,
  Datagrid,
  TextField,
  EmailField,
  UrlField,
  Edit,
  SimpleForm,
  TextInput,
  Create,
} from 'react-admin';

export const UserList = props => ( ... );

export const UserEdit = props => ( ... );

export const UserCreate = props => (
  <Create {...props}>
    <SimpleForm>
      <TextInput source="name" />
      <TextInput source="username" />
      <TextInput source="email" />
      <TextInput source="address.street" label="Address" />
      <TextInput source="phone" />
      <TextInput source="website" />
      <TextInput source="company.name" label="Company" />
    </SimpleForm>
  </Create>
);

现在将新组件添加到App.js:

src/App.js

import {
  Admin,
  Resource,
} from "react-admin";
import jsonServerProvider from 'ra-data-json-server';
import {
  UserList,
  UserEdit,
  UserCreate,
} from './Users';

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');

function App() {
  return (
    <Admin dataProvider={dataProvider}>
      <Resource
        name="users"
        list={UserList}
        edit={UserEdit}
        create={UserCreate}
      />
    </Admin>
  );
}

export default App;

就像这样,react-admin会在我们的用户列表中添加一个创建按钮!

结论

在本文中,您使用react-admin构建了一个使用 JSONPlaceholder) API 的管理界面。

我们使用react-admin创建了一个漂亮的小管理界面,但我们几乎没有触及它所提供的表面。react-admin是高度可定制的:我们迄今为止(以及更多)使用的每个组件的功能和外观都可以定制。要了解更多信息,请参阅react-admin文档。