可扩展且易于使用的管理仪表板将帮助您管理使用 React 和 Mobx 构建的 REST API 数据。
https://rest-admin-panel.herokuapp.com/
为 REST API 服务器的管理面板创建前端部分总是需要大量的时间来设计和开发,而且可能很复杂且具有挑战性。该项目将帮助您快速将 API 连接到可扩展的前端应用程序以管理数据。该项目基于 JSON 配置文件,因此要添加新的实体来管理,您只需为其添加 [entity].js 配置文件,所有其他逻辑都是自动化的。此外,该项目还为管理面板提供了随时可用的日志记录、身份验证和其他基本逻辑。所有数据表都包含排序、过滤和搜索功能。此外,该项目还实现了页面来创建和更新实体项目。
使用以下步骤安装项目
1. yarn install
2. yarn start
构建项目:
yarn build
项目已包含用于演示的测试实体(用户和任务实体)。所有数据均使用 faker.js 库生成。此外,该项目还包含带有模拟方法的假 API 服务器,这些方法将从装置中获取测试数据。您可以在演示应用程序中查看项目的工作原理。
要进入演示应用程序,您应该提供任何电子邮件和密码数据,应用程序不会保存您的数据,也不会连接到任何后端服务器或数据库。
要将新实体添加到项目中,您应该在/src/entities
文件夹中创建新的 [entity_name].js 文件并将其连接到/src/entities/index.js
文件中:
// connect your entities here
import user from './user'
import task from './task'
// INFO: provide your entities here
const entities = [user, task]
export default entities
这是基本的最小实体配置文件:
import ExampleIcon from '@material-ui/icons/ExampleIcon'
export default {
name: 'example',
icon: ExampleIcon,
url: 'https://url.to.entity.api',
fields: [
{
name: 'name',
type: 'string',
rules: 'required'
}
]
}
以下是包含Task
实体的更复杂字段的示例配置文件:
import React from 'react'
import Assignment from '@material-ui/icons/Assignment'
import apiUrls from '../utils/apiUrls'
import { UpdateEntityUrlMethod } from '../utils/constants'
// NOTICE: we should use .jsx extention for this file to support custom actions
export default {
name: 'task',
icon: Assignment,
url: apiUrls.fake.task,
updateUrlMethod: UpdateEntityUrlMethod.PATCH,
filtersUrl: apiUrls.fake.taskFilters,
pagination: { pageSize: 20, pageNumber: 1 },
filters: [
{
name: 'status',
value: ''
},
{
name: 'importance',
value: ''
}
],
fields: [
{
name: 'name',
type: 'string',
rules: 'required'
},
{
name: 'desc',
type: 'string',
rules: 'email|required'
},
{
name: 'status',
type: 'dropdown',
rules: 'required',
options: ['Created', 'In progress', 'Closed'],
// example of custom body action
actions: {
body: {
custom: ({ value }) => (
<div style={{ display: 'flex', alignItems: 'center' }}>
<span
style={{
borderRadius: '50%',
width: 8,
height: 8,
marginRight: 8,
backgroundColor:
value === 'Created'
? '#bbb'
: value === 'In progress'
? '#3d2'
: '#222'
}}
/>
{value}
</div>
)
}
}
},
{
name: 'importance',
type: 'dropdown',
rules: 'required',
options: ['Low', 'Medium', 'High'],
// example of custom body action
actions: {
body: {
custom: ({ value }) => (
<span
style={{
color: value === 'Low' ? '#3d2' : value === 'Medium' ? '#c37800' : '#e23'
}}
>
{value}
</span>
)
}
}
}
]
}
实体名称。
实体图标,将显示在侧边栏菜单上。您可以使用 MaterialUI 图标或提供自定义图标组件或使用简单的 SVG 文件。
实体基础 URL。该 url 将用于对实体执行 CRUD 操作。
将用于更新更新实体的 HTTP 方法,默认情况下项目使用 PATCH 方法。可用的方法是 PUT 和 PATCH。您可以在此处分配文字值 [ PATCH
、 POST
],或使用src/utils/constants
中的UpdateEntityUrlMethod
枚举。
updateUrlMethod 将用于获取实体过滤器,可用于过滤实体表中的实体项。过滤器名称应该是实体字段之一。此参数是可选的,您可以为filters
项目对象中的过滤器提供所有选项,只需对它们进行硬编码。但在这种情况下,如果您有大量针对过滤器的独特选项,您可能希望从某个 API 端点异步获取它们。
NOTE: you can inject all url parameters as string literal or add them to the `src/utils/apiUrls` file and import from there.
分页字段将更改默认分页规则。默认项目将使用pageSize = 20
和pageNumber = 1
值。
例子:
pagination: { pageSize: 20, pageNumber: 1 }
包含实体过滤器的数组。
过滤字段:
{
name: 'status', // name, should be one of the entity fields names
value: '' // default filter value
options: [] // array of options, you can provide them here or fecth async using `filtersUrl`
}
该数组应包含所有实体字段配置。
字段字段:
name: 'name', // field name
type: 'dropdown', // field type
rules: 'required', // field validation rules
options: ['Created', 'In progress', 'Closed'], // array of options, only for dropdown type
actions: { // field custom actions
head: { // field head custom axtions
custom: <ReactElement>, // custom action React element
className // head custom className
}
body: { // body custom actions
custom: <ReactElement>, // custom action React element
className // body custom className
}
}
实体字段名称
实体字段类型。可用类型:数字、布尔值、字符串、下拉列表。
如果Entity edit page
中的字段类型为布尔值,它将呈现为复选框元素。如果字段类型是下拉列表,它将呈现为<select>
元素,其中包含<options>
字段中的选项。
实体字段验证规则,您可以在 validator.js API 页面中查看所有可用的规则。
下拉选择选项数组,仅适用于dropdown
字段类型。
Actions 是一个自定义的 React 元素。如果您想使用表主体或表头中的特殊字段自定义实体表,则可以使用操作。只需在custom
字段中传递自定义渲染函数即可。通过此功能您可以
例子:
actions: {
body: {
custom: ({ value, name, history }) => (
<div style={{ display: 'flex', alignItems: 'center' }}>
<span
style={{
borderRadius: '50%',
backgroundColor:
value === 'Created'
? '#bbb'
: value === 'In progress'
? '#3d2'
: '#222'
}}
/>
{value} {name}
<button onClick={() => history.push('home')}>Go to home</button>
</div>
)
}
}
渲染函数将接收react-router-dom库的value
、 className
、 name
和history
对象。您可以将操作添加到 head 和 body 元素中,这将相应地自定义表格 head 和 body 项目。
git checkout -b my-new-feature
git commit -am 'Add some feature'
git push origin my-new-feature
弗拉德·莫尔扎诺夫
版权所有 (c) 2018 弗拉德·莫尔扎诺夫。您可以在 LICENSE 文件中查看许可证。