mern admin panel

MERN 管理面板

特征

• 使用Bootstrap完成登录页面和基本布局设计

• 用于身份验证的 JWT 和 Passport

• 具有客户端和服务器端分页的数据表

• 多分类

• 过滤器

• 简约设计

• 通过可选的 props 和回调完全可控

演示

点击这里

可用脚本

同时启动服务器和客户端

npm run dev

构建反应应用程序

cd 客户端并运行

npm run build

静态数据的数据表示例用法

从 'react' 导入 React, { Component, Fragment };从 'react-dom' 导入 { render};从 '@ashvin27/react-datatable' 导入 ReactDatatable;class App 扩展 Component {constructor(props) {super(props) ;this.columns = [{key: "name",text: "Name",className: "name",align: "left",sortable: true,},{key: “地址”，文本：“地址”，className：“地址”，对齐：“左”，可排序：true}，{key：“邮政编码”，文本：“邮政编码”，className：“邮政编码”，可排序：true} ,{key: "评级",text: "评级",className: "评级",align: "左",sortable: true},{key: "type_of_food",text: "食物类型",className: “type_of_food”，可排序：true，对齐：“左”}，{key：“动作”，文本：“动作”，className：“动作”，宽度：100，对齐：“左”，可排序：假，单元格：记录 => { 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 = {记录: [ {"id": "55f14312c7447c3da7051b26","address": "城市路228号","姓名":".CN中文","邮政编码": "3JH"," rating": 5,"type_of_food": "中餐" }, {"id": "55f14312c7447c3da7051b27","地址": "瑞利路376号","name": "@泰语","邮政编码" ：“5PT”，“评级”：5.5，“type_of_food”：“泰国菜”}， {“id”：“55f14312c7447c3da7051b28”，“地址”：“灰狗路哈默史密斯30号”，“名称”：“@泰国餐厅”，“邮政编码”：“8NX”，“评级”：4.5，“type_of_food”：“泰国菜“  }，  {“ID”： "55f14312c7447c3da7051b29","地址": "30 Greyhound Road Hammersmith","名称": "@泰国餐厅","邮政编码": "8NX","评级": 4.5,"type_of_food": "泰国菜" }]}} editRecord(record) {console.log("编辑记录", record);}deleteRecord(record) {console.log("删除记录", record);}render() {return (<div><ReactDatatableconfig={this.config}records={this.state.records}columns= {this.columns}/></div>)}}render(<App />, document.getElementById("app"));