mern admin panel

MERN-관리-패널

특징

• Bootstrap을 사용하여 로그인 페이지 및 기본 레이아웃 디자인 완료

• 인증을 위한 JWT 및 Passport

• 클라이언트 측 및 서버 측 페이지 매김이 포함된 데이터 테이블

• 다중 정렬

• 필터

• 최소한의 디자인

• 선택적 소품과 콜백을 통해 완전히 제어 가능

데모

여기를 클릭하세요

사용 가능한 스크립트

서버와 클라이언트를 동시에 시작하려면

npm run dev

반응 애플리케이션을 구축하려면

CD 클라이언트 및 실행

npm run build

정적 데이터를 사용한 데이터 테이블 샘플 사용법

 import React, { Component, Fragment } from 'react'; import { render} from 'react-dom'; import ReactDatatable from '@ashvin27/react-datatable';class 앱 확장 Component {constructor(props) {super(props) ;this.columns = [{key: "name",text: "Name",className: "name",align: "left",sortable: true,},{key: "address",text: "주소",className: "address",align: "left",sortable: true},{key: "postcode",text: "우편번호",className: "postcode",sortable: true} ,{key: "등급",text: "등급",className: "등급",align: "left",sortable: true},{key: "type_of_food",text: "음식 유형",className: "type_of_food",sortable: true,align: "left"},{key: "action",text: "Action",className: "action",width: 100,align: "left",sortable: false,cell: 기록 => { return (<Fragment><buttonclassName="btn btn-primary btn-sm"onClick={() => this.editRecord(record)}style={{marginRight: '5px'}}><i className="fa fa-edit"></i></button><button className="btn btn-danger btn-sm " onClick={() => this.deleteRecord(record)}><i className="fa fa-trash"></i></button></Fragment>);}}];this.config = {page_size: 10,length_menu: [ 10, 20, 50 ],button: {excel: true,print: true}}this.state = {records: [ {"id": "55f14312c7447c3da7051b26","address": "228 도시 도로","이름": ".CN 중국어","우편번호": "3JH","rated": 5,"type_of_food": "중국어" }, {"id": "55f14312c7447c3da7051b27","address": "376 Rayleigh Road","name": "@ Thai","postcode" : "5PT","등급": 5.5,"type_of_food": "태국어" }, {"id": "55f14312c7447c3da7051b28","address": "30 Greyhound Road Hammersmith","name": "@ Thai Restaurant","postcode": "8NX","rated": 4.5,"type_of_food": "태국어 "  },  {"ID": "55f14312c7447c3da7051b29","address": "30 Greyhound Road Hammersmith","name": "@ Thai Restaurant","postcode": "8NX"," rating": 4.5,"type_of_food": "Thai" }]}} editRecord(record) {console.log("레코드 편집", 기록);}deleteRecord(기록) {console.log("기록 삭제", 기록);}render() {return (<div><ReactDatatableconfig={this.config}records={this.state.records}columns= {this.columns}/></div>)}}render(<App />, document.getElementById("app"));