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，沒有的話，返回一個<Menu.Item>，並將他的key值設置為<NavLink>的to屬性，這里的<NavLink>就類似於<a>標簽，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 (
          <SubMenu key={ item.key }
                   title={ <span><Icon type={ item.icon }/><span>{ item.title }</span></span> }>
            { this.setMenu(item.children, item) }
          </SubMenu>
        )
      }
      return (
        <Menu.Item title={ item.title } key={ item.key } pitem={ pItem }>
          <NavLink to={ item.key } >
            { item.icon && <Icon type={ item.icon }/> }
            <span>{ item.title }</span>
          </NavLink>
        </Menu.Item>
      )
    });
  };

  // 收縮側邊欄
  onCollapse = collapsed => {
    this.setState({ collapsed });
  };

  render() {
    let name;
    if (!this.state.collapsed) {
      name = <span className="name">React管理后台</span>;
    }
    return (
      <Sider collapsible collapsed={ this.state.collapsed } onCollapse={ this.onCollapse }>
        <div className="logo">
          <img className="logo-img" src={ logoURL } alt=""/>
          { name }
        </div>
        <Menu theme="dark"
              defaultOpenKeys={ this.state.defaultOpenKeys }
              defaultSelectedKeys={ this.state.defaultSelectedKeys }
              mode="inline">
          { this.state.menuList }
        </Menu>
      </Sider>
    );
  }
}

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 = (
      <Menu>
        <Menu.Item key="outLogin">退出登錄</Menu.Item>
      </Menu>
    );
    return (
      <Dropdown overlay={ menu } onVisibleChange={ this.handleVisibleChange } visible={ this.state.visible }>
        <div className="ant-dropdown-link">
          <img className="custom-img" src={ customUrl } alt=""/>
          <Icon type="caret-down" />
        </div>
      </Dropdown>
    );
  }
}

const HeaderBar = () => {
  return (
    <Header>
      <Breadcrumb>
        <Breadcrumb.Item>首頁</Breadcrumb.Item>
      </Breadcrumb>
      <UserInfo/>
    </Header>
  );
};

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 (
      <Layout>
        <SiderBar></SiderBar>
        <Layout>
          <HeaderBar></HeaderBar>
          <div className="layout-content">
            <Switch>
              <Route exact path="/" component={ Home }/>
              <Route path="/user/connect" component={ Connect }/>
              <Route path="/user/list" component={ List }/>
              <Route path="/tool/rich" component={ Rich }/>
              <Route component={ NotFind }/>
            </Switch>
          </div>
        </Layout>
      </Layout>
    );
  }
}

export default Index;

　　寫到這一步，運行我們的項目http://localhost:3000/，此時如果頁面如下，說明我們寫的代碼沒有問題，點擊側邊欄，會發現我們的路由可以變化了，並且頁面也會隨着路由的變化展示不同的頁面。

 

　　注：交流問題的可以加QQ群：531947619

　　　　

 下一篇：react + react-router + redux + ant-Desgin 搭建react管理后台 -- 處理登錄及默認選中側邊欄（六)