如何使用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

最后我們的這個簡單易懂的后台管理系統就完成了