如何使用react做一个简易的后台管理系统

首先我们要创建一个项目 代码是npx create-react-app之后我们开始写这个项目在写这个项目之前我们因为样式美观度的原因所以使用ant design 安装方法请去ant design官网快速上手当中复制粘贴安装命令之后我们还需要安装echarts，echarts同时也是增加页面美观度的一种操作详情同上 那么安装这些东西以后我们则正式开始做项目我们要做的时候我们先看我们要实现的效果先创建页面

在主页引用ant desgin同时配置路由

import React, {Component} from 'react';
import '../App.css';
import {Route,Switch,Redirect} from 'react-router-dom'
import {Layout, Menu, Icon} from 'antd';
import HomeComponent from "./home";
import TableComponent from "./table"; const {Header, Sider, Content} = Layout; const SubMenu = Menu.SubMenu; class App extends Component { state = { collapsed: false, }; toggle = () => { this.setState({ collapsed: !this.state.collapsed, }); } goPage(path){ this.props.history.replace(path) } render() { return ( <Layout> <Sider trigger={null} collapsible collapsed={this.state.collapsed} style={{height:"100vh"}} > <div className="logo" > <img src={'http://gaohui628.top:8084/dist/184d0d26d7b4d5e11f4045622edd2b54.jpg'} alt=""/> </div> <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline"> <SubMenu key="sub1" title={<span><Icon type="user" /><span>学生管理</span></span>} > <Menu.Item key="1" onClick={this.goPage.bind(this,'/table')}>实训学生</Menu.Item> <Menu.Item key="2" onClick={this.goPage.bind(this,'/home')}>专高学生</Menu.Item> <Menu.Item key="3">专业学生</Menu.Item> </SubMenu> <SubMenu key="sub2" title={<span><Icon type="user" /><span>面试题管理</span></span>} > <Menu.Item key="4">实训学生</Menu.Item> <Menu.Item key="5">专高学生</Menu.Item> <Menu.Item key="6">专业学生</Menu.Item> </SubMenu> <SubMenu key="sub3" title={<span><Icon type="user" /><span>项目库</span></span>} > <Menu.Item key="7">实训学生</Menu.Item> <Menu.Item key="8">专高学生</Menu.Item> <Menu.Item key="9">专业学生</Menu.Item> </SubMenu> <SubMenu key="sub4" title={<span><Icon type="user" /><span>snippet快捷键</span></span>} > <Menu.Item key="10">实训学生</Menu.Item> <Menu.Item key="11">专高学生</Menu.Item> <Menu.Item key="12">专业学生</Menu.Item> </SubMenu> </Menu> </Sider> <Layout> <Header style={{background: '#fff', padding: 0}}> <Icon className="trigger" type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'} onClick={this.toggle} style={{fontSize:"2rem",marginLeft:"0.5rem"}} /> <span style={{fontSize:"2rem",marginLeft:"0.5rem"}}>首页</span> <span className={'head-span'}></span> </Header> <Content style={{margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280}}> <Switch> <Route path={"/home"} component={HomeComponent}></Route> <Route path={'/table'} component={TableComponent}></Route> <Redirect to={'/home'}/> </Switch> </Content> </Layout> </Layout> ); } } export default App;

为了配置我们的二级路由我们还需要一个配置路由的文件夹

以下是路由代码对于路由有问题的朋友们可以找react路由配置相关文章

import React,{Component} from 'react'
import {HashRouter as Router,Route,Switch} from 'react-router-dom'
import App from "../pages/App";

class RouterComponent extends Component{
    render() {
        return (
            <React.Fragment>
                <Router>
                    <React.Fragment>
                        <Switch>
                            <Route path='/' component={App}></Route>
                        </Switch>
                    </React.Fragment>
                </Router>
            </React.Fragment> ); } } export default RouterComponent

之后我们还需要配置我们的index.js页面的代码它是为了更好的配置路由使路由不报错

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import RouterComponent from "./router/router";

ReactDOM.render(<RouterComponent />, document.getElementById('root')); registerServiceWorker();

代码如上图之后就是配置我们的组件首先是我们的首页组件其中这里会用到我们的echarts

import React,{Component} from 'react'
import '../asstes/css/home.css'
import echarts from 'echarts'

class HomeComponent extends Component{
    componentDidMount(){
        var myChart = echarts.init(document.getElementById('main'));
        // app.title = '坐标轴刻度与标签对齐';

        var option = {
            color: ['#3398DB'], tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'  } }, grid: { left: '3%', right: '4%', bottom: '3% containLabel: true }, xAxis : [ { type : 'category', data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisTick: { alignWithLabel: true } } ], yAxis : [ { type : 'value' } ], series : [ { name:'直接访问', type:'bar', barWidth: '60%', data:[10, 52, 200, 334, 390, 330, 220] } ] }; myChart.setOption(option); var myChart = echarts.init(document.getElementById('mains')); var option = { title : { text: '某站点用户访问来源', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, series : [ { name: '访问来源', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; myChart.setOption(option); } render() { return ( <div> <div className={'home'}> <div className={'home-left'}> <div className={'h-l-box'}></div> <div className={'h-l-box'}></div> <div className={'h-l-box'}> <div id="main" style={{width:"100%",height:"100%"}}></div> </div> </div> <div className={'home-right'}> <div className={'h-r-box h-r-flex'} style={{width:"100%",height:"20%"}}> <div></div> <div></div> <div></div> <div></div> </div> <div className={'h-r-box'} style={{width:"100%",height:"8%"}}></div> <div className={'h-r-box'}></div> <div className={'h-r-box h-r-flex'}> <div style={{margin:"0"}}> <div id="mains" style={{width:"80%",height:"100%",border:"0"}}></div> </div> <div style={{margin:"0 0 0 0.5rem"}}></div> </div> </div> </div> {/*<div className="home-footer"></div>*/} </div> ); } } export default HomeComponent

最后一步我们需要配置我们的最后的增删改查页面这里我们也要注意一点我们要使用分页器使用蚂蚁金服当中的分页器解决

import React, {Component} from 'react'
import '../asstes/css/table.css'
import {Button,Input} from 'antd';
import {Pagination} from 'antd';


class TableComponent extends Component {
    constructor() {
        super()
        this.state = { list: [], last_page:'', link:'' } } componentDidMount() { let url = 'url' fetch(url,{ method:"get" }) .then(res => res.json()) .then(json => this.setState({list: json.data,last_page:json.last_page}, () => { // console.log(this.state.total)  })) } link(){ let url = "url"+this.state.link fetch(url) .then(res=>res.json()) .then(json=>this.setState({list:json.data})) } render() { return ( <div> <div style={{width:"100%"}}><Input style={{width:"95%"}} placeholder="Basic usage" onChange={e => {this.setState({link:e.target.value})}}/> <Button type='primary' onClick={this.link.bind(this)}>查询</Button></div> <table> <thead> <tr className={'table-tr'}> <th>班级</th> <th>学生</th> <th>项目答辩（实训一）</th> <th>项目答辩（实训二）</th> <th>项目答辩（实训三）</th> <th>面试简历</th> <th>操作</th> </tr> </thead> <tbody> {this.state.list.map((item, index) => { return ( <tr className={'table-tr'} key={index}> <td>{item.classname}</td> <td>{item.username}</td> <td>{item.dabian1 === 1 ? <span style={{backgroundColor: "green"}}>已答辩</span> : <span style={{backgroundColor:"orange"}}>未答辩</span>}</td> <td>{item.dabian2 === 1 ? <span style={{backgroundColor: "green"}}>已答辩</span> : <span style={{backgroundColor:"orange"}}>未答辩</span>}</td> <td>{item.dabian3 === 1 ? <span style={{backgroundColor: "green"}}>已答辩</span> : <span style={{backgroundColor:"orange"}}>未答辩</span>}</td> <td>{item.jianli_status === 1 ? <span style={{backgroundColor: "green"}}>已开始</span> : <span style={{backgroundColor:"orange"}}>未开始</span>}</td> <td> <Button type="primary" style={{backgroundColor: "red", border: "1px solid red"}}>删除</Button> <Button type="primary" style={{margin: "0 0.5rem 0 0.5rem"}}>编辑</Button> <Button type="primary" style={{backgroundColor: "orange", border: "1px solid orange"}}>抽取面试题</Button> </td> </tr> ) })} <Pagination onChange={page=>{ let url = 'url'+page+'&size=10' fetch(url) .then(res => res.json()) .then(json => this.setState({list: json.data}, () => { console.log(this.state.list) })) }} defaultCurrent={1} total={(this.state.last_page)*10}/> </tbody> </table> </div> ) } } export default TableComponent

最后我们的这个简单易懂的后台管理系统就完成了

转载于:https://www.cnblogs.com/canbai/p/9540631.html