react rest admin panel
1.0.0
可擴展且易於使用的管理儀表板將幫助您管理使用 React 和 Mobx 建立的 REST API 資料。
https://rest-admin-panel.herokuapp.com/
為 REST API 伺服器的管理面板建立前端部分總是需要大量的時間來設計和開發，而且可能很複雜且具有挑戰性。該專案將幫助您快速將 API 連接到可擴展的前端應用程式以管理資料。該專案基於 JSON 配置文件，因此要添加新的實體來管理，您只需為其添加 [entity].js 配置文件，所有其他邏輯都是自動化的。此外，該專案還為管理面板提供了隨時可用的日誌記錄、身份驗證和其他基本邏輯。所有資料表都包含排序、過濾和搜尋功能。此外，該專案還實作了頁面來建立和更新實體專案。
使用以下步驟安裝項目
1. yarn install
2. yarn start
建構專案：
yarn build
專案已包含用於演示的測試實體（使用者和任務實體）。此外，該專案還包含具有模擬方法的假 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-featuregit commit -am 'Add some feature'git push origin my-new-feature弗拉德·莫爾扎諾夫
版權所有 (c) 2018 弗拉德·莫爾扎諾夫。您可以在 LICENSE 檔案中查看許可證。
