npm 包 speed-admin 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

speed-admin 是一个基于 React 的后台管理系统快速开发框架，它提供了一套完整的前端解决方案，旨在让开发者更加专注于业务逻辑的实现而不必花费大量时间在构建基础框架上。

安装

您可以通过 npm 进行安装：

npm install speed-admin

快速开始

运行以下命令，创建一个新的项目并安装依赖：

npx create-react-app my-admin
cd my-admin
npm install speed-admin

接着，在您的 src/App.js 中使用 speed-admin：

-- -------------------- ---- -------
------ ----- ---- --------
------ ------- --------- ------------ ---- --------------

-------- ----- -
  ------ -
    -------
      --------- ------------ ------------------ --
    --------
  --
-

------ ------- ----

现在启动您的应用程序并访问 http://localhost:3000/admin，您将看到一个包含“用户列表”的页面。

组件

speed-admin 提供了许多用于快速开发后台管理系统的 React 组件。

Admin

Admin 组件是 speed-admin 的核心组件，它是整个管理系统的根组件。通过 Admin 组件，您可以为您的管理系统注册资源。

-- -------------------- ---- -------
------ ------- ---- --------------

-------- ----- -
  ------ -
    -------
      --- -------- --------- ---- ---
    --------
  --
-

属性

属性	类型	必须	描述
`authProvider`	`Function`	可选	一个认证提供程序函数，在进行任何后端请求之前都会首先调用它。
`dashboard`	`React.Component`	可选	指定管理系统的仪表板，它是一个 React 组件。
`dataProvider`	`Function`	必须	数据提供程序函数，用于从远程 REST API 检索数据。
`i18nProvider`	`Function`	可选	一个国际化提供程序函数，用于提供翻译，它会注入到所有的子组件中。
`loginPage`	`React.Component`	可选	指定登录页，它是一个 React 组件。
`logoutButton`	`React.Component`	可选	指定注销按钮，它是一个 React 组件。
`menu`	`React.Component`	可选	指定包含应用程序菜单的组件。
`resources`	`Array`	可选	注册资源的数组。
`theme`	`Object`	可选	指定应用程序的主题，它是一个 Material UI 主题对象。
`title`	`string`	可选	指定管理系统的标题。
`dataProvider`	`Function`	必须	数据提供者，在删除，更新或创建后，应更新并发回数据。

Resource

Resource 组件用于告诉 speed-admin 要管理哪种类型的实体（例如 users）。通过资源，您可以指定如何渲染实体，并使用渲染后的组件呈现数据。

-- -------------------- ---- -------
------ ---------- ------------ ---- --------------

-------- ----- -
  ------ -
    -------
      --------- ------------ ------------------ --
    --------
  --
-

属性

属性	类型	必须	描述
`name`	`string`	必须	要管理的资源的名称
`list`	`React.Component`	必须	用于呈现资源列表的组件
`create`	`React.Component`	可选	用于呈现创建条目表单的组件。当删除、编辑或查看选项卡呈现到页面时，`Create` 组件也会用作替代组件。
`edit`	`React.Component`	可选	用于呈现编辑条目表单的组件。当删除、创建或查看选项卡呈现到页面时，`Edit` 组件也会用作替代组件。
`show`	`React.Component`	可选	用于呈现查看条目的组件。当删除、编辑或创建选项卡呈现到页面时，`Show` 组件也会用作替代组件。
`icon`	`React.Component`	可选	资源图标
`options`	`Object`	可选	用于自定义组件名称和图标的对象
`listProps`	`Object`	可选	传递给列表组件的 props
`title`	`String`	可选	资源标头
`actions`	`Array<Object>`	可选	操作的数组, 每个操作都是一个对象，每个对象包含 `name` 和 `icon` 属性。
`filters`	`Array<React.Component> or Boolean`	可选	表示资源筛选器的一个数组对象或 boolean 类型。
`sort`	`Object`	可选	根据提供的参数对资源进行排序： `{ field: 'title', order: 'DESC' }`

List

List 组件用于渲染资源列表。您可以使用内置的 ListGuesser 组件，也可以为您的资源实现自己的自定义组件。

-- -------------------- ---- -------
------ ------ ---- --------------

-------- --------------- -
  ------ -
    ----- -----------
      --- --- ---
    -------
  --
-

子组件

List 组件的子组件必须是 Datagrid 组件。

Datagrid

Datagrid 组件用于对资源进行分页、排序和筛选。它是 List 组件的内置子组件。

-- -------------------- ---- -------
------ ---------- ---------- ---- --------------

-------- --------------- -
  ------ -
    ----- -----------
      ----------
        ---------- ------------- --
      -----------
    -------
  --
-

子组件

子组件必须是列组件，例如 TextField 或 DateField。

TextField

TextField 组件用于呈现文本字段。

-- -------------------- ---- -------
------ ----------- ---- --------------

-------- --------------- -
  ------ -
    ----- -----------
      ----------
        ---------- ------------- --
      -----------
    -------
  --
-

属性

属性	类型	必须	描述
`source`	`String`	必须	要渲染的字段的名称
`label`	`String`	可选	显示的标签(可理解为名称)。
`sortable`	`Boolean`	可选	指示此字段是否可排序

DateField

DateField 组件用于呈现日期字段。

-- -------------------- ---- -------
------ ----------- ---- --------------

-------- --------------- -
  ------ -
    ----- -----------
      ----------
        ---------- ------------------------ --
      -----------
    -------
  --
-

属性

属性	类型	必须	描述
`source`	`String`	必须	要渲染的字段的名称
`label`	`String`	可选	显示的标签(可理解为名称)。
`format`	`String`	可选	要使用的日期格式(默认为ISO)

总结

在本文中，我们介绍了 speed-admin 的一些核心组件，以及如何使用这些组件来快速构建并开发管理系统。虽然我们只是涵盖了一小部分 speed-admin 的可能性，但希望这篇文章能够引导您开始使用 speed-admin 并构建自己的管理系统。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600670a08ccae46eb111f07b