react + react-router + redux + ant-Desgin 搭建react管理後臺 -- 頁面佈局（五）

前言

　　學習總結使用，博客如中有錯誤的地方，請指正。改系列文章主要記錄了搭建一個管後臺的步驟，主要實現的功能有：使用路由模擬登陸、退出、以及切換不一樣的頁面；使用redux實現麪包屑；引入使用其餘經常使用的組件，好比highchart、富文本等，後續會繼續完善。

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

　　項目展現地址：https://huangtao5921.github.io/react-admin/ 

 

1、配置側邊欄組件

　　上一篇文章中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;

 

2、配置頭部組件

　　目前爲止，側邊欄已經搭建完畢，繼續搭建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;

　　

3、引入側邊欄以及頭部

　　側邊欄以及頂部都是登陸成功以後，其餘頁面共享的組件，因爲咱們把登陸成功後的頁面路由所有放在了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管理後臺 -- 處理登陸及默認選中側邊欄（六)