React模拟后台项目（六）components文件配置

一、错误处理 components/err/404.js

import React, { Component } from 'react'

 class Err404 extends Component {
    render() {
        return (
            <div>
                this is Err404 index
            </div>
        )
    }
}

export default Err404

二、顶部和侧边栏 components/frame/index.js

// 导入库
import React, {Component} from 'react';
import {
    BrowserRouter as Router,
    Link,
    // withRouter  
} from "react-router-dom";
import screenfull from 'screenfull'

// 导入UI
import {
    Button,
    message,
} from 'antd'

// 导入样式
import Logo from '../../static/img/logo.png'
import {
    LayoutDiv
} from './style'

// 导入组件
import { Layout, Menu, Breadcrumb } from 'antd';
import { HomeOutlined, UserOutlined, ShoppingOutlined, FileTextOutlined, NotificationOutlined } from '@ant-design/icons';

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

class LayoutFrom extends Component {
    // 退出
    logOut(){
        // 清除信息
        sessionStorage.clear()
        localStorage.clear()
        // this.props.history.push('#/login') // 不可使用此方式
        message.success('退出成功')
        setTimeout(() => {
            window.location.href='/login'
        }, 1000)    
    }
    // 全屏
    fullScreen = () => {
        screenfull.toggle()
    }
    render(){
        return (
            <LayoutDiv>
                <Layout>
                <Header className="header">
                <div className="logo" />
                <img src={Logo} alt="Logo" height="64"></img>
                <div style={{width: 350, float: 'right'}}>
                    {/* 全屏 */}
                    <Button
                        // type="link"
                        shape="circle" 
                        // icon="fullscreen" 
                        onClick = {this.fullScreen}
                    >全屏
                    </Button>
                    <span style={{color:'red'}}>欢迎：{JSON.parse(localStorage.getItem('userinfo')).username}</span>

                    {/* 退出登录 临时 */}
                    {/* <Link to='/login'>退出登录</Link> */}
                    <Link to='/login'>
                        <Button 
                        type="primary" 
                        danger
                        onClick={this.logOut.bind(this)}
                        >
                            退出登陆
                        </Button>
                    </Link> 
                    </div>
                </Header>
                <Router>
                <Layout>                
                <Sider width={200} className="site-layout-background">
                    <Menu
                    mode="inline"
                    defaultSelectedKeys={['1']}
                    defaultOpenKeys={['sub1']}
                    style={{ height: '100%', borderRight: 0 }}
                    >
                    <SubMenu
                        key="sub1"
                        title={
                        <span>                           
                            <Link to="/admin">
                                <HomeOutlined />首页
                            </Link>                         
                        </span>
                        }
                    >
                    </SubMenu>
                    <SubMenu
                        key="sub2"
                        title={
                        <span>
                            <UserOutlined />
                            用户管理
                        </span>
                        }
                    >
                        <Menu.Item key="1"><Link to="/admin/users">用户列表</Link></Menu.Item>
                        <Menu.Item key="2"><Link to="/admin/users/create">添加用户</Link></Menu.Item>
                    </SubMenu>
                    <SubMenu
                        key="sub3"
                        title={
                        <span>
                            <ShoppingOutlined />
                            商品管理
                        </span>
                        }
                    >
                        <Menu.Item key="3"><Link to="/admin/goods">商品列表</Link></Menu.Item>
                        <Menu.Item key="4"><Link to="/admin/goods/create">添加商品</Link></Menu.Item>
                    </SubMenu>
                    <SubMenu
                        key="sub4"
                        title={
                        <span>
                            <FileTextOutlined />
                            订单管理
                        </span>
                        }
                    >
                         <Menu.Item key="5"><Link to="/admin/orders">订单列表</Link></Menu.Item>
                        <Menu.Item key="6"><Link to="/admin/orders/create">添加订单</Link></Menu.Item>                     
                    </SubMenu>
                    <SubMenu
                        key="sub5"
                        title={
                        <span>
                            <NotificationOutlined />
                            权限设置
                        </span>
                        }
                    >
                        <Menu.Item key="7"><Link to="/admin/roles">角色列表</Link></Menu.Item>
                        <Menu.Item key="8"><Link to="/admin/powers">权限列表</Link></Menu.Item>
                    </SubMenu>
                    </Menu>
                </Sider>
                

                <Layout style={{ padding: '0 24px 24px' }}>
                    <Breadcrumb style={{ margin: '16px 0' }}>
                    <Breadcrumb.Item>Home</Breadcrumb.Item>
                    <Breadcrumb.Item>List</Breadcrumb.Item>
                    <Breadcrumb.Item>App</Breadcrumb.Item>                  
                    </Breadcrumb>
                    
                    <Content
                    className="site-layout-background"
                    style={{
                        padding: 24,
                        margin: 0,
                        minHeight: 280,
                    }}
                    >
                    {this.props.children}
                    </Content>                                   
                </Layout>                             
                </Layout>
                </Router>
            </Layout>
            </LayoutDiv>
        )
    }
}

export default LayoutFrom

三、顶部和侧边栏样式文件 components/frame/style.js

import styled from 'styled-components'

export const LayoutDiv = styled.div`
    width: 100%;
    height: 100%;
    .ant-layout{
        height: 100%;
        .ant-layout-header{
            padding: 0;
        }
    }
`