React-admin 与 PostgREST 实现 CRUD 操作：告别接口开发

2023-09-26 11:25:50

前言

React-admin 是一个 React 框架，可让您轻松构建数据管理应用程序，而无需编写任何后端代码。PostgREST 是一个用 Go 编写的开源 API，可将 PostgreSQL 数据库公开为 RESTful API。结合这两者，我们可以快速创建 CRUD 应用程序，无需编写任何接口代码。

简介

React-admin 和 PostgREST 都旨在简化数据管理任务。React-admin 提供了一套易于使用的组件，可让您轻松构建数据管理应用程序的 UI。PostgREST 则将 PostgreSQL 数据库公开为 RESTful API，允许您使用 HTTP 请求来执行 CRUD 操作。

准备工作

在开始之前，请确保您已安装以下软件：

Node.js
npm
PostgreSQL
PostgREST

您还需要创建一个 PostgreSQL 数据库和一个 PostgREST 实例。有关详细说明，请参考各自的官方文档。

PostgREST 数据库

要使用 PostgREST，您需要创建一个 PostgreSQL 数据库并启用 PostgREST 扩展。您可以使用以下命令来完成此操作：

createdb my_database
psql -d my_database -c "CREATE EXTENSION postgrest"

这将创建一个名为 "my_database" 的数据库并启用 PostgREST 扩展。

React-admin

要安装 React-admin，请打开终端并运行以下命令：

npx create-react-app my-app --template @react-admin/template

这将创建一个新的 React 应用程序并安装 React-admin 模板。

新建

要创建新的数据，可以使用 React-admin 提供的 CreateButton 组件。该组件将生成一个按钮，单击该按钮将打开一个表单，允许您输入新数据的详细信息。

import { CreateButton, SimpleForm, TextInput } from 'react-admin';

const PostCreate = () => (
  <CreateButton basePath="/posts">
    <SimpleForm>
      <TextInput source="title" />
      <TextInput source="content" />
    </SimpleForm>
  </CreateButton>
);

export default PostCreate;

编辑

要编辑现有数据，可以使用 React-admin 提供的 EditButton 组件。该组件将生成一个按钮，单击该按钮将打开一个表单，允许您编辑数据。

import { EditButton, SimpleForm, TextInput } from 'react-admin';

const PostEdit = (props) => (
  <EditButton basePath="/posts" {...props}>
    <SimpleForm>
      <TextInput source="title" />
      <TextInput source="content" />
    </SimpleForm>
  </EditButton>
);

export default PostEdit;

查询

要查询数据，可以使用 React-admin 提供的 List 组件。该组件将生成一个表格，显示所有数据。

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

const PostList = () => (
  <List>
    <Datagrid>
      <TextField source="id" />
      <TextField source="title" />
      <TextField source="content" />
    </Datagrid>
  </List>
);

export default PostList;

结果

通过结合 React-admin 和 PostgREST，我们可以快速构建 CRUD 应用程序，无需编写任何接口代码。React-admin 提供了一套易于使用的组件，可让您轻松构建数据管理应用程序的 UI，而 PostgREST 则将 PostgreSQL 数据库公开为 RESTful API，允许您使用 HTTP 请求来执行 CRUD 操作。