API Platform Admin 使用教程

API Platform Admin 使用教程

admin A beautiful and fully-featured administration interface builder for hypermedia APIs 项目地址: https://gitcode.com/gh_mirrors/admin/admin

1. 项目介绍

API Platform Admin 是一个自动创建美观（Material Design）且功能完整的管理界面的工具，适用于支持 Hydra Core Vocabulary 或暴露 OpenAPI 文档的任何 API，包括但不限于使用 API Platform 框架创建的所有 API。生成的管理界面是一个 100% 独立的 Single-Page-Application，与服务器部分没有任何耦合，遵循 API-first 设计理念。

API Platform Admin 解析 Hydra 或 OpenAPI 文档，然后使用强大的 React-admin 库（和 React）来展示一个优雅的、响应式的管理界面，支持所有资源的创建、检索、更新和删除操作。用户还可以通过使用 React-admin 组件甚至原始的 JavaScript/React 代码来自定义所有屏幕。

2. 项目快速启动

首先，确保你的开发环境中已经安装了 Node.js 和 Yarn。

安装

使用以下命令将 API Platform Admin 添加到你的项目：

yarn add @api-platform/admin

使用

在你的 React 项目中，你可以使用以下代码快速启动一个基本的 Admin 界面：

import React from 'react';
import ReactDOM from 'react-dom';
import { HydraAdmin, OpenApiAdmin } from '@api-platform/admin';

// 使用 Hydra
const Admin = () => (
    <HydraAdmin entrypoint="https://demo.api-platform.com" />
);

// 或者使用 OpenAPI
const Admin = () => (
    <OpenApiAdmin docEntrypoint="https://demo.api-platform.com/docs.json" entrypoint="https://demo.api-platform.com" />
);

ReactDOM.render(<Admin />, document.getElementById('root'));

确保替换 entrypoint 和 docEntrypoint 的值为你自己的 API 入口和 OpenAPI 文档入口。

3. 应用案例和最佳实践

在实际应用中，你可能需要根据你的 API 特性自定义 Admin 界面。以下是一些最佳实践：

• 利用 React-admin 组件自定义屏幕和表单。
• 根据你的 API 描述，自动验证字段是否必填。
• 使用适合的数据提供者和资源分析器来适配你的 API。
• 实现分页、过滤和排序功能，以优化数据展示。

4. 典型生态项目

API Platform Admin 是 API Platform 生态系统的一部分，以下是一些与之配合使用的典型项目：

• API Platform: 一个用于构建 API 的 PHP 框架，提供了创建 REST 和 GraphQL API 的工具。
• React-admin: 一个用于构建管理界面的 React UI 库。
• Mercure: 一个实时 API 更新库，用于实现实时数据更新。

通过整合这些项目，开发者可以构建出功能丰富且响应迅速的 API 管理界面。

admin A beautiful and fully-featured administration interface builder for hypermedia APIs 项目地址: https://gitcode.com/gh_mirrors/admin/admin