mern admin panel

Panel de administración de MERN

Características

• Diseño de página de inicio de sesión y diseño básico realizado con Bootstrap

• JWT y pasaporte para autenticación

• Tabla de datos con paginación del lado del cliente y del lado del servidor

• Clasificación múltiple

• Filtros

• Diseño minimalista

• Totalmente controlable mediante accesorios opcionales y devoluciones de llamada

Manifestación

Haga clic aquí

Guión disponible

Para iniciar el servidor y el cliente simultáneamente

npm run dev

Para construir una aplicación de reacción

cliente de cd y ejecutar

npm run build

Uso de muestra de datos con datos estáticos

 importar React, {Componente, Fragmento} de 'react'; importar {render} de 'react-dom'; importar ReactDatatable de '@ashvin27/react-datatable'; la aplicación de clase extiende el componente {constructor(props) {super(props) ;this.columns = [{clave: "nombre",texto: "Nombre",nombredeclase: "nombre",alinear: "izquierda",ordenable: verdadero,},{clave: "dirección", texto: "Dirección", nombre de clase: "dirección", alineación: "izquierda", ordenable: verdadero}, {clave: "código postal", texto: "Código postal", nombre de clase: "código postal", ordenable: verdadero} ,{clave: "calificación",text: "Clasificación",className: "rating",align: "left",sortable: true},{key: "type_of_food",text: "Tipo de comida",className: "type_of_food" ", ordenable: verdadero, alinear: "izquierda"}, {clave: "acción", texto: "Acción", nombre de clase: "acción", ancho: 100, alinear: "izquierda", ordenable: falso, celda: registro => { return ( <Fragmento><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 ],botón: {excel: true,print: true}}this.state = {registros: [ {"id": "55f14312c7447c3da7051b26","address": "228 City Road","name": ".CN chino" ,"código postal": "3JH","calificación": 5,"tipo_de_comida": "chino" }, {"id": "55f14312c7447c3da7051b27","address": "376 Rayleigh Road","name": "@ Thai","código postal": "5PT","rating": 5.5,"type_of_food": "Thai" }, {"id" : "55f14312c7447c3da7051b28","address": "30 Greyhound Road Hammersmith","name": "@ tailandés Restaurante","código postal": "8NX","rating": 4.5,"type_of_food": "tailandés" }, {"id": "55f14312c7447c3da7051b29","address": "30 Greyhound Road Hammersmith","nombre": "@ Restaurante tailandés","código postal": "8NX","rating": 4.5,"type_of_food": "Tailandés" }]}}editRecord(record) {console.log("Editar registro", registro);}deleteRecord(registro) {console.log("Eliminar registro", registro);}render() {return (<div><ReactDatatableconfig={this.config}registros ={this.state.records}columns={this.columns}/></div>)}}render(<Aplicación />, document.getElementById("aplicación"));