介绍
暴露API的应用程序通常需要一个管理员(admin)页面来查看和编辑应用程序背后的数据,而创建一个应用程序通常需要构建接口的艰苦过程,然后手动处理每一个 GET 或 POST 数据的请求。
react-admin通过自动消耗您的(REST, GraphQL,自定义)API并允许您快速构建一个以优雅的Material-UI框架为主题的管理界面来减少这种麻烦。
在本文中,您将使用react-admin构建一个使用 JSONPlaceholder API 的管理界面。
前提条件
- Node.js 的本地开发环境 遵循 如何安装 Node.js 并创建本地开发环境。
- 对 React 的一些熟悉,您可以阅读我们的 如何在 React.js 中编码系列。
本教程是用 Node v16.6.1, 'npm' v7.20.3,'react' v17.0.2,'react-admin' vv3.17.1 和 'ra-data-json-server' v3.17.1 进行验证的。
步骤1 - 设置项目
要开始,我们将使用 create-react-app创建一个新的 React 应用程序:
1npx create-react-app react-admin-example
接下来,导航到新项目目录:
1cd react-admin-example
然后,安装react-admin的依赖性:
1npm install react-admin@<3.17.1^> [email protected]
「ra-data-json-server」是所謂的 data provider。 數據提供者是允許「react-admin」與您的 API 溝通的。 在這裡,我們使用「ra-data-json-server」是因為 JSONPlaceholder 由 JSON Server提供電源。 如果您正在使用不完全匹配 JSONPlaceholder 的 API,您需要執行自己的數據提供者。
在此时,你有一个新的React项目,安装了react-admin和ra-data-json-server。
步骤二:构建应用程序
首先,我们将在我们的代码编辑器中打开src/App.js,并在我们的根部件Admin中添加:
1[label src/App.js]
2import {
3 Admin
4} from 'react-admin';
5import jsonServerProvider from 'ra-data-json-server';
6
7const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
8
9function App() {
10 return (
11 <Admin dataProvider={dataProvider} />
12 );
13}
14
15export default App;
将更改保存到您的文件并运行应用程序:
1npm run start
然后,在我们的浏览器中打开应用程序. 它会显示一个信息,确认react-admin已正确配置:
1[secondary_label Output]
2Welcome to React-admin
3Your application is properly configured.
4Now you can add a <Resource> as child of <Admin>.
现在,我们可以开始将 API 终端点映射到 admin 界面。
步骤 3 — 使用ListGuesser来绘制数据
每当你添加一个新的终端时,你首先使用一个 guesser。这将从API中获取数据,并猜出要输出什么类型的组件。
1[label src/App.js]
2import {
3 Admin,
4 Resource,
5 ListGuesser,
6} from 'react-admin';
7import jsonServerProvider from 'ra-data-json-server';
8
9const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
10
11function App() {
12 return (
13 <Admin dataProvider={dataProvider}>
14 <Resource
15 name="users"
16 list={ListGuesser}
17 />
18 </Admin>
19 );
20}
21
22export default App;
将更改保存到您的文件中,并观察您的浏览器中的应用程序。
有一个管理员界面,自动挤满了用户列表! 包括他们的名字,电子邮件,电话号码,等等!
它几乎完美地工作,但猜测器不应该永久使用,它们只是在那里帮助我们开始。我们将从猜测器(可以在DevTools控制台中找到)获取猜测列表输出,并使用它创建一个自定义列表组件:
1export const UserList = (props) => (
2 <List {...props}>
3 <Datagrid rowClick="edit">
4 <TextField source="id" />
5 <TextField source="name" />
6 <TextField source="username" />
7 <EmailField source="email" />
8 <TextField source="address.street" />
9 <TextField source="phone" />
10 <TextField source="website" />
11 <TextField source="company.name" />
12 </Datagrid>
13 </List>
14);
我们将把这个输出插入一个名为Users.js的新文件中,同时确保从react-admin中添加所有导入:
1[label src/Users.js]
2import {
3 List,
4 Datagrid,
5 TextField,
6 EmailField,
7} from 'react-admin';
8
9export const UserList = (props) => (
10 <List {...props}>
11 <Datagrid rowClick="edit">
12 <TextField source="id" />
13 <TextField source="name" />
14 <TextField source="username" />
15 <EmailField source="email" />
16 <TextField source="address.street" />
17 <TextField source="phone" />
18 <TextField source="website" />
19 <TextField source="company.name" />
20 </Datagrid>
21 </List>
22);
现在我们需要用我们新创建的组件代替ListGuesser:
1[label src/App.js]
2import {
3 Admin,
4 Resource,
5} from 'react-admin';
6import jsonServerProvider from 'ra-data-json-server';
7import {
8 UserList,
9} from './Users';
10
11const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
12
13function App() {
14 return (
15 <Admin dataProvider={dataProvider}>
16 <Resource
17 name="users"
18 list={UserList}
19 />
20 </Admin>
21 );
22}
23
24export default App;
很棒! 在浏览器窗口中,我们可以验证列表的功能与ListGuesser完全相同。
让我们对用户列表做一些更改,让它变得更好一点,我们将网站列更改为UrlField,使其可点击,我们还将在地址和公司列中添加标签,使其更易于阅读:
1[label src/Users.js]
2import {
3 List,
4 Datagrid,
5 TextField,
6 EmailField,
7 UrlField,
8} from 'react-admin';
9
10export const UserList = props => (
11 <List {...props}>
12 <Datagrid rowClick="edit">
13 <TextField source="id" />
14 <TextField source="name" />
15 <TextField source="username" />
16 <EmailField source="email" />
17 <TextField source="address.street" label="Address" />
18 <TextField source="phone" />
19 <UrlField source="website" />
20 <TextField source="company.name" label="Company" />
21 </Datagrid>
22 </List>
23);
代替 Address.street,标签将显示为 Address,而不是 Company.name,标签将显示为 Company。
步骤 4 — 使用EditGuesser地图创建,编辑,删除
我们的管理员界面非常好,如果你只是试图查看用户,但如果你想创建,编辑,甚至删除用户呢? 幸运的是,‘react-admin’也有方法这样做。
1[label src/App.js]
2import {
3 Admin,
4 Resource,
5 EditGuesser,
6} from "react-admin";
7import jsonServerProvider from 'ra-data-json-server';
8import {
9 UserList,
10} from './Users';
11
12const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
13
14function App() {
15 return (
16 <Admin dataProvider={dataProvider}>
17 <Resource
18 name="users"
19 list={UserList}
20 edit={EditGuesser}
21 />
22 </Admin>
23 );
24}
25
26export default App;
现在,让我们在我们的浏览器中打开管理器并点击任何用户. 这将带来编辑界面,再次,guesser做得很好!
我们会像以前一样做同样的事情,从 guesser 复制输出并粘贴到我们的Users.js文件中,我们也会将id列更改为禁用输入;你不希望id字段可以编辑!
1[label src/users.js]
2import {
3 List,
4 Datagrid,
5 TextField,
6 EmailField,
7 UrlField,
8 Edit,
9 SimpleForm,
10 TextInput,
11} from 'react-admin';
12
13export const UserList = props => ( ... );
14
15export const UserEdit = props => (
16 <Edit {...props}>
17 <SimpleForm>
18 <TextInput source="id" disabled />
19 <TextInput source="name" />
20 <TextInput source="username" />
21 <TextInput source="email" />
22 <TextInput source="address.street" label="Address" />
23 <TextInput source="phone" />
24 <TextInput source="website" />
25 <TextInput source="company.name" label="Company" />
26 </SimpleForm>
27 </Edit>
28);
最后,用我们的自定义组件更换EditGuesser:
1[label src/App.js]
2import {
3 Admin,
4 Resource,
5} from "react-admin";
6import jsonServerProvider from 'ra-data-json-server';
7import {
8 UserList,
9 UserEdit,
10} from './Users';
11
12const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
13
14function App() {
15 return (
16 <Admin dataProvider={dataProvider}>
17 <Resource
18 name="users"
19 list={UserList}
20 edit={UserEdit}
21 />
22 </Admin>
23 );
24}
25
26export default App;
现在我们有一个功能的编辑界面! 不幸的是,JSONPlaceholder不允许编辑,但是,尝试编辑用户并观察发生了什么。在react-admin将其更改回原始形式之前,您将体验用户的变化一秒钟。这是因为react-admin使用 _optimistic rendering。这意味着当用户进行更改时,react-admin会在后台发送更新查询时立即显示这种变化。
由于创建表格与编辑表格非常相似,我们可以复制我们的UserEdit组件,并将新组件称为UserCreate。
1[label src/Users.js]
2import {
3 List,
4 Datagrid,
5 TextField,
6 EmailField,
7 UrlField,
8 Edit,
9 SimpleForm,
10 TextInput,
11 Create,
12} from 'react-admin';
13
14export const UserList = props => ( ... );
15
16export const UserEdit = props => ( ... );
17
18export const UserCreate = props => (
19 <Create {...props}>
20 <SimpleForm>
21 <TextInput source="name" />
22 <TextInput source="username" />
23 <TextInput source="email" />
24 <TextInput source="address.street" label="Address" />
25 <TextInput source="phone" />
26 <TextInput source="website" />
27 <TextInput source="company.name" label="Company" />
28 </SimpleForm>
29 </Create>
30);
现在将新组件添加到App.js:
1[label src/App.js]
2import {
3 Admin,
4 Resource,
5} from "react-admin";
6import jsonServerProvider from 'ra-data-json-server';
7import {
8 UserList,
9 UserEdit,
10 UserCreate,
11} from './Users';
12
13const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
14
15function App() {
16 return (
17 <Admin dataProvider={dataProvider}>
18 <Resource
19 name="users"
20 list={UserList}
21 edit={UserEdit}
22 create={UserCreate}
23 />
24 </Admin>
25 );
26}
27
28export default App;
就像这样,react-admin将添加一个创建按钮到我们的用户列表!
结论
在本文中,您使用react-admin构建了一个使用 JSONPlaceholder) API 的管理界面。
我們使用「react-admin」創建了一個很棒的小 admin 界面,但我們幾乎沒有取它所提供的表面。「react-admin」是高度可自定義的:我們迄今為止所使用的每個組件的功能和外觀(以及更多)都可以自定義。