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
프로젝트에는 이미 데모를 위한 테스트 엔터티(사용자 및 작업 엔터티)가 포함되어 있습니다. 모든 데이터는 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 에서 필드 유형이 부울인 경우 확인란 요소로 렌더링됩니다. 필드 유형이 드롭다운인 경우 <options> 필드의 옵션이 있는 <select> 요소로 렌더링됩니다.
엔터티 필드 유효성 검사 규칙은 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>
)
}
}
Render 함수는 React-router-dom 라이브러리의 value , className , name 및 history 객체를 수신합니다. 헤드 및 본문 요소에 작업을 추가하여 그에 따라 테이블 헤드 및 본문 항목을 사용자 정의할 수 있습니다.
git checkout -b my-new-featuregit commit -am 'Add some feature'git push origin my-new-feature블라드 모르자노프
저작권 (c) 2018 Vlad Morzhanov. LICENSE 파일에서 라이선스를 검토할 수 있습니다.
