React+ant-design搭建后台管理系统【第一章】

项目创建安装以及配置：

# 创建react项目

1.安装react依赖

cnpm i yarn -g

2.创建项目，项目名称不要有大写字母

npx create-react-app 自定义项目名称

3.//进入项目目录后，启动项目

npm run start 或者 npm start

# 安装项目插件

1.安装AntUI组件库

npm install antd --save

2.安装react-redux

npm install react-redux @reduxjs/toolkit -S

3.安装 react-router-dom@5

npm install react-router-dom@5

4.安装请求axios

 这里简单说明一下项目架构如图：

 

这里默认初始化页面配置全局

1.这里使用Ant组件库中的菜单栏配置切换路由：

import React, { Component } from 'react';
import { Breadcrumb, Avatar, Layout, Dropdown, Menu, Image } from "antd";
import { UserOutlined, DownOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
// import ComHeader from './common/Header'
import "../assets/css/home.css"
import List from '../pages/List'
import Mine from '../pages/Mine'
import Login from '../pages/Login'
import Sex from '../pages/Sex'

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
const menus = (
    <Menu
        items={[
            {
                key: '1',
                label: (
                    <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
                        首页
                    </a>
                ),
            },
            {
                key: '2',
                label: (
                    <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
                       退出登录
                    </a>
                ),
            },
        ]}
    />
);
export default class Home extends Component {
    constructor(props) {
        super(props);

        this.state = {
            userInfo: {}
        };
        this.init()
    }
    init() {
        // this.props.history.push("/List")
    }

    render() {
        // let { match } = this.props;
        return (
            <Router>
                <div>
                    <div>
                        <Layout>
                            <Header className="header" style={
   
   { color: '#fff' }}>
                                React-Admin-Zrf
                                {/*导航栏外部组件*/}
                                {/* <ComHeader/> */}

                                <Dropdown overlay={menus} trigger={['click']}>
                                    <a onClick={(e) => e.preventDefault()}>
                                        <Avatar style={
   
   { backgroundColor: '#87d068'}} gap={15}	 icon={<UserOutlined />} />
                                        <DownOutlined />
                                    </a>
                                </Dropdown>
                                {/* <Image src="https://yxsz.oss-cn-hangzhou.aliyuncs.com/pic/bearPic/93%E7%A8%80%E6%9C%891.jpg" height={40} width={100} alt="" />
                                <Image src="https://yxsz.oss-cn-hangzhou.aliyuncs.com/pic/bearPic/72%E7%A8%80%E6%9C%892.jpg" height={40} width={100}></Image>
                                <Image src="https://yxsz.oss-cn-hangzhou.aliyuncs.com/pic/bearPic/496%E7%A8%80%E6%9C%894jpg.jpg" height={40} width={100}></Image>
                                <Image src="https://yxsz.oss-cn-hangzhou.aliyuncs.com/pic/bearPic/441%E7%A8%80%E6%9C%895jpg.jpg" height={40} width={100}></Image>
                                <Image src="https://yxsz.oss-cn-hangzhou.aliyuncs.com/pic/bearPic/202%E7%A8%80%E6%9C%893.jpg" height={40} width={100}></Image> */}
                            </Header>
                            <Layout>
                                <Sider width={200} className="site-layout-background">
                                    <Menu
                                        mode="inline"
                                        defaultSelectedKeys={['1']}
                                        defaultOpenKeys={['sub1']}
                                        style={
   
   { height: '100%', borderRight: 0 }}
                                    >
                                        <SubMenu key="sub1" icon={<UserOutlined />} title="业务统计">
                                            <Menu.Item key="1">
                                                <Link to="/List">发送量统计</Link>
                                            </Menu.Item>
                                            <Menu.Item key="2">
                                                <Link to="/Mine">发送记录查询</Link>
                                            </Menu.Item>
                                            <Menu.Item key="3">
                                                <Link to="/Login">短信日志分析</Link>
                                            </Menu.Item>
                                            <Menu.Item key="4">
                                                <Link to="/Sex">费用统计</Link>
                                            </Menu.Item>
                                        </SubMenu>
                                        {/* <SubMenu  icon={<LaptopOutlined/>} title="权限信息"></SubMenu> */}
                                        <Menu.Item >
                                            权限信息
                                        </Menu.Item>
                                        <SubMenu key="sub2" icon={<NotificationOutlined />} title="系统设置"></SubMenu>
                                    </Menu>
                                </Sider>
                                <Layout style={
   
   { padding: '0 24px 24px' }}>
                                    {/*面包屑区域*/}
                                    <Breadcrumb style={
   
   { margin: '16px 0' }}>
                                        <Breadcrumb.Item>短信服务</Breadcrumb.Item>
                                    </Breadcrumb>
                                    <Content
                                        className="site-layout-background"
                                        style={
   
   {
                                            padding: 24,
                                            margin: 0,
                                            minHeight: '100vh', background: '#fff'
                                        }}
                                    >
                                        {/*内容区域*/}
                                        <Route exact path="/List" component={List} />
                                        <Route exact path="/Mine" component={Mine} />
                                        <Route exact path="/Sex" component={Sex} />
                                        <Route exact path="/Login" component={Login} />
                                    </Content>
                                </Layout>
                            </Layout>
                        </Layout>
                    </div>
                </div>
            </Router>

        )
    }

}

 这里主要配置文件APP.js

import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect
} from 'react-router-dom';
import { connect } from 'react-redux'  //引入连接器
import * as userActions from './store/actions/userAction'
import { bindActionCreators } from 'redux';

import Routers from './routes/routerMap'
import NotFound from './pages/NotFound'


function App(props) {
  let token = props.token
  // console.log('token:', token)
  return (
    <div>
      {
        <Router>
          <Switch>
            {
              Routers.map((item, index) => {
                return <Route key={index} path={item.path}  render={props =>
                  (!item.auth ? (<item.component {...props} />) : (token ? <item.component {...props} /> : <Redirect to={
   
   {
                    pathname: '/login',
                    state: { from: props.location }
                  }} />)
                  )} />
              })
            }
            {/* 所有错误路由跳转页面 */}
            <Route component={NotFound} />
          </Switch>
        </Router>
      }
    </div>
  );
}

const mapStateToProps = state => {
  // console.log(state)
  return {
    token: state.user.token,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    userActions: bindActionCreators(userActions, dispatch)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

 如图所示效果：