Layout布局实现一个简单的react管理后台
今天下班之后把antd大致过了一遍，不得不说，还是挺好用的，前面对于react的知识点，该学习的也在慢慢的学习了，学完之后，打算做一个博客管理系统的后台。这里记录的就是大致的步骤。
1：首先使用一下Layout布局，把整个后台管理系统框架都已经写好了样式了，一下内容参考文档： https://ant.design/components/layout-cn/
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;好了，一个简单的管理后台的样子都有了，点击不同的子菜单，右侧会显示不同的内容了，根据自己的项目需要去完善不同的组件吧。
本文参与?腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读