react + react-router + redux + ant-Desgin 搭建react管理后台 -- 页面布局（五）

前言

　　学习总结使用，博客如中有错误的地方，请指正。改系列文章主要记录了搭建一个管后台的步骤，主要实现的功能有：使用路由模拟登录、退出、以及切换不同的页面；使用redux实现面包屑；引入使用其他常用的组件，比如highchart、富文本等，后续会继续完善。

　　github地址：https://github.com/huangtao5921/react-antDesgin-admin （欢迎Star）

　　项目展示地址：https://huangtao5921.github.io/react-admin/ 

 

一、配置侧边栏组件

　　上一篇文章中react + react-router + redux + ant-Desgin 搭建react管理后台 -- 路由搭建（四）我们已经将将路由搭建好了，在浏览器中输入不同的url路径，能访问到不同的页面。接下来，我们要将管理后台的页面布局呈现出来。

　　首先我们将需要在侧边栏展示的路由全部放在一个文件中，方便管理，我们在前面建过一个src/config/menuConfig.js，就是为了放路由数组，接下来，我们将路由配置如下：

const menuConfig = [
  {
    title: '首页',
    key: '/',
    icon: 'home'
  },
  {
    title: '用户',
    key: '/user',
    icon: 'user',
    children: [
      {
        title: '联系',
        key: '/user/connect',
      },
      {
        title: '用户列表',
        key: '/user/list',
      },
    ]
  },
  {
    title: '组件',
    key: '/tool',
    icon: 'build',
    children: [
      {
        title: '富文本',
        key: '/tool/rich',
      }
    ]
  }
];

export default menuConfig;

　　然后我们开始编写侧边栏以及顶部这两个组件，其实开发的时候我是先整体布好页面之后，再把组件拆分出去。这里为了快速展示，我直接上代码，还记得我们在src/component/layout里面新建了2个文件么？一个是header/HeaderBar.js，另一个是siderBar/SiderBar.js，这2个文件主要是为了放布局的组件。整个首页公共布局的样式，我们写在app.css中。开始写我们的侧边栏组件SiderBar.js代码，这里需要注意几点：

　　1.我们引入了menuConfig.js，在处理函数setMenu中，我们通过循环判断每一项中是否有children，有的话，我们继续调用setMenu，没有的话，返回一个，并将他的key值设置为的to属性，这里的就类似于标签，to就是要跳转的地址；

　　2.onCollapse()函数：就是收缩侧边栏的操作；
　　3.defaultOpenKeys表示默认打开的父级侧边栏，defaultSelectedKeys表示默认选中的侧边栏，ant的文档可查；

　　4.为了减少篇幅css我就忽略了，全部的css在app.css中。

import React from 'react';
import { NavLink } from 'react-router-dom'
import { Menu, Icon, Layout } from 'antd';
import menuConfig from '../../../config/menuConfig';
import logoURL from '../../../images/logo.jpeg';
const { Sider } = Layout;
const { SubMenu } = Menu;

class SiderBar extends React.Component {
  state = {
    collapsed: false,
    menuList: [],
    defaultOpenKeys: [],       // 默认展开
    defaultSelectedKeys: ['/'],   // 默认选中
  };

  componentWillMount() {
    const menuList = this.setMenu(menuConfig);
    this.setState({
      menuList
    });
  }

  // 处理菜单列表
  setMenu = (menu, pItem) => {
    return menu.map((item) => {
      if (item.children) {
        return (
          { item.title } }>
            { this.setMenu(item.children, item) }
          
        )
      }
      return (
        
          
            { item.icon &&  }
            { item.title }
          
        
      )
    });
  };

  // 收缩侧边栏
  onCollapse = collapsed => {
    this.setState({ collapsed });
  };

  render() {
    let name;
    if (!this.state.collapsed) {
      name = React管理后台;
    }
    return (
      
        

          
          { name }
        
        
          { this.state.menuList }
        
      
    );
  }
}

export default SiderBar;

 

二、配置头部组件

　　目前为止，侧边栏已经搭建完毕，继续搭建HeaderBar.js组件，头部组件没有什么难点，就是引入了一些基本的ant组件，将用户头像部分又拆成了一个组件，样式同样写在了app.css中，代码如下：

import React from 'react';
import { Layout, Menu, Dropdown, Icon, Breadcrumb } from 'antd';
import customUrl from '../../../images/custom.jpeg';
const { Header } = Layout;

class UserInfo extends React.Component {
  state = {
    visible: false,   // 菜单是否显示
  };

  handleVisibleChange = flag => {
    this.setState({ visible: flag });
  };

  render() {
    const menu = (
      
        退出登录
      
    );
    return (
      
        

          
          
        
      
    );
  }
}

const HeaderBar = () => {
  return (
    

      
        首页
      
      
    
  );
};

export default HeaderBar;

　　

三、引入侧边栏以及头部

　　侧边栏以及顶部都是登录成功之后，其他页面共享的组件，由于我们把登录成功后的页面路由全部放在了routes/index.js中，所以我们接下来将上面写的2个组件在routes/index.js中引入，routes/index.js的代码我们可以改写一下，样式写在app.css中：

import React from 'react';
import {Layout} from "antd";
import { Route, Switch } from 'react-router-dom';
import SiderBar from "../components/layout/siderBar/SiderBar";
import HeaderBar from "../components/layout/header/HeaderBar";
import Home from '../pages/home/Home';
import Connect from '../pages/user/connect/Connect';
import List from '../pages/user/list/List';
import Rich from '../pages/tool/rich/Rich';
import NotFind from '../pages/notFind/NotFind';

class Index extends React.Component{
  render() {
    return (
      
        
        
          
          

            
              
              
              
              
              
            
          
        
      
    );
  }
}

export default Index;

　　写到这一步，运行我们的项目http://localhost:3000/，此时如果页面如下，说明我们写的代码没有问题，点击侧边栏，会发现我们的路由可以变化了，并且页面也会随着路由的变化展示不同的页面。

 

　　注：交流问题的可以加QQ群：531947619

　　　　

 下一篇：react + react-router + redux + ant-Desgin 搭建react管理后台 -- 处理登录及默认选中侧边栏（六)

　　

转载于:https://www.cnblogs.com/huangtao5921/p/11350704.html