Layout布局实现一个简单的react管理后台

简介: Layout布局实现一个简单的react管理后台

今天下班之后把antd大致过了一遍,不得不说,还是挺好用的,前面对于react的知识点,该学习的也在慢慢的学习了,学完之后,打算做一个博客管理系统的后台。这里记录的就是大致的步骤。

1:首先使用一下Layout布局,把整个后台管理系统框架都已经写好了样式了,一下内容参考文档:


2:在home组件里面,新开一个模板,在模板里面引入 Layout布局的等

import { Layout, Menu, Breadcrumb, Icon } from 'antd';
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

3:引入路由和各个导航子菜组件

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Echart from './Echart';
import Parent from './Parent';
import Child from './Child';
import Tab from './Tab';
import Nav from './Nav';
import About from './About';
import News from './News';
import Add from './Add';

4:将跳转的link放在导航菜单里面

<Menu.Item key="1"> <Link to="/echart">统计图</Link></Menu.Item>
                  <Menu.Item key="2"> <Link to="/parent">table统计图</Link></Menu.Item>
                  <Menu.Item key="3"><Link to="/child">树形菜单</Link></Menu.Item>

5:路由设置

在render()里面设置路由

把 Content换成路由指向的右侧的位置

                <Route exact path="/echart" component={Echart} />
                <Route exact path="/parent" component={Parent} />
                <Route exact path="/child" component={Child} />
                <Route exact path="/tab" component={Tab} />
                <Route exact path="/nav" component={Nav} />
                <Route exact path="/news" component={News} />
                <Route exact path="/about" component={About} />
                <Route exact path="/add" component={Add} />

6:具体代码参考

import React, { Component } from 'react';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Echart from './Echart';
import Parent from './Parent';
import Child from './Child';
import Tab from './Tab';
import Nav from './Nav';
import About from './About';
import News from './News';
import Add from './Add';
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
class Laytest extends Component {
  constructor(props) {
    super(props);
    //react定义数据
    this.state = {
    }
  }
  render() {
    return (
      <Router>
        <Layout>
          <Header className="header">
            <div className="logo" />
            <Menu
              theme="dark"
              mode="horizontal"
              defaultSelectedKeys={['2']}
              style={{ lineHeight: '64px' }}
            >
              <Menu.Item key="1">nav 1</Menu.Item>
              <Menu.Item key="2">nav 2</Menu.Item>
              <Menu.Item key="3">nav 3</Menu.Item>
            </Menu>
          </Header>
          <Layout>
            <Sider width={200} style={{ background: '#fff' }}>
              <Menu
                mode="inline"
                defaultSelectedKeys={['1']}
                defaultOpenKeys={['sub1']}
                style={{ height: '100%', borderRight: 0 }}
              >
                <SubMenu
                  key="sub1"
                  title={
                    <span>
                      <Icon type="user" />
                      图表相关
                      </span>
                  }
                >
                  <Menu.Item key="1"> <Link to="/echart">统计图</Link></Menu.Item>
                  <Menu.Item key="2"> <Link to="/parent">table统计图</Link></Menu.Item>
                  <Menu.Item key="3"><Link to="/child">树形菜单</Link></Menu.Item>
                </SubMenu>
                <SubMenu
                  key="sub2"
                  title={
                    <span>
                      <Icon type="laptop" />
                      数据请求
                      </span>
                  }
                >
                  <Menu.Item key="5"> <Link to="/parent">表格</Link></Menu.Item>
                  <Menu.Item key="6"> <Link to="/child">树形控件</Link></Menu.Item>
                  <Menu.Item key="7"><Link to="/tab">Tab</Link></Menu.Item>
                  <Menu.Item key="8"><Link to="/nav">Nav</Link></Menu.Item>
                </SubMenu>
                <SubMenu
                  key="sub3"
                  title={
                    <span>
                      <Icon type="notification" />
                      ant组件
                      </span>
                  }
                >
                  <Menu.Item key="9"><Link to="/news">轮播图</Link></Menu.Item>
                  <Menu.Item key="10"><Link to="/about">卡片效果</Link></Menu.Item>
                  <Menu.Item key="11"><Link to="/add">add</Link></Menu.Item>
                  <Menu.Item key="12">option12</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
                style={{
                  background: '#fff',
                  padding: 24,
                  margin: 0,
                  minHeight: 280,
                }}
              >
                <Route exact path="/echart" component={Echart} />
                <Route exact path="/parent" component={Parent} />
                <Route exact path="/child" component={Child} />
                <Route exact path="/tab" component={Tab} />
                <Route exact path="/nav" component={Nav} />
                <Route exact path="/news" component={News} />
                <Route exact path="/about" component={About} />
                <Route exact path="/add" component={Add} />
              </Content>
            </Layout>
          </Layout>
        </Layout>
      </Router>
    )
  }
}
export default Laytest;

好了,一个简单的管理后台的样子都有了,点击不同的子菜单,右侧会显示不同的内容了,根据自己的项目需要去完善不同的组件吧。


相关文章
|
1月前
|
移动开发 前端开发 数据可视化
React 拖拽布局组件 Drag & Drop Layout
本文介绍了如何在React中构建拖拽布局组件,涵盖基础知识、常见问题及解决方案。首先解释了拖拽操作的三个阶段:开始、过程中和结束。接着推荐了几个常用的拖拽库,如`react-beautiful-dnd`,并详细展示了如何使用该库创建基础拖拽组件,包括安装依赖、初始化容器和处理拖拽结束事件。文章还探讨了常见问题,如拖拽不生效、性能优化、嵌套拖拽和跨浏览器兼容性,并提供了进阶技巧,如自定义样式、多列布局和集成其他UI组件。通过这些内容,读者可以掌握构建高效拖拽布局的方法。
61 16
|
6月前
|
前端开发
使用 React Router v6 进行布局
【8月更文挑战第27天】
75 1
|
8月前
|
存储 前端开发 JavaScript
在React中有效地管理组件之间的通信和数据流
在React中有效地管理组件之间的通信和数据流
|
8月前
|
存储 前端开发 JavaScript
React中有效地使用props和state来管理组件的数据和行为
React中有效地使用props和state来管理组件的数据和行为
|
9月前
|
前端开发 JavaScript 开发者
在React中,如何利用生命周期方法管理组件的状态和行为?
【5月更文挑战第29天】在React中,如何利用生命周期方法管理组件的状态和行为?
70 3
|
9月前
|
前端开发 JavaScript
在React中,如何通过事件处理函数来管理按钮的点击行为?
【5月更文挑战第28天】在React中,如何通过事件处理函数来管理按钮的点击行为?
91 1
|
9月前
|
前端开发 JavaScript
在React中,如何通过事件处理函数来管理输入框的获取和失去焦点行为?
【5月更文挑战第28天】在React中,如何通过事件处理函数来管理输入框的获取和失去焦点行为?
349 1
|
9月前
|
前端开发 JavaScript
深入理解React中的useReducer:管理复杂状态逻辑的利器
深入理解React中的useReducer:管理复杂状态逻辑的利器
|
9月前
|
存储 前端开发 安全
深入理解React中的useState:函数组件状态管理的利器
深入理解React中的useState:函数组件状态管理的利器
|
9月前
|
前端开发 JavaScript
React Hooks:让你轻松掌握函数组件的状态与管理
React Hooks:让你轻松掌握函数组件的状态与管理