react项⽬开发-布局和导航菜单（前三篇续）
关于布局，我们以偏向管理系统的风格为例，采⽤上左右布局，即：上放置logo，账户信息等公共数据，左放置菜单分类，多级导航等，右放置主体业务内容等。
1 先来改造layout/layout.js，增加主体布局，并且判断是否是登录页⾯，布局不同，代码如下：
import {connect} from 'dva';
import React from 'react';
import pathToRegexp from 'path-to-regexp'
import Helmet from 'react-helmet';
import classnames from 'classnames';
import styles from './index.less';
const Layout=({ children,dispatch,menu,locationPathname })=>{
const In(['byId']).toList();
let menuName='';
menuList.map(item=>{
if(('path')).exec(locationPathname)){
menuName = ('name');
}
});
//判断是否是登录页，登录页⾯和内页是不同的布局
const In(['byId','login','path']);
const isLoginPage=pathToRegexp(loginUrl).exec(locationPathname)?true:false;
return (
<React.Fragment>
<Helmet>
<title>
{menuName}
</title>
</Helmet>
{isLoginPage?
children
:
<div className={classnames(styles.LBodyOuter)}>
<div className={classnames(styles.LHeader)}>
logo
</div>
<div className={classnames(styles.LBody)}>
<div className={classnames(styles.LTree)}>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
</div>
<div className={classnames(styles.LContent)}>
{children}
</div>
</div>
</div>
}
</React.Fragment>
);
}
export default connect(({
app
})=>({
('menu'),
('locationPathname'),
}))(Layout)
2 layout⽬录下增加index.less样式⽂件，控制整体布局⽬录结构如下：
代码如下：
@import '../index.less';
.LBodyOuter{
height:100vh;
display:flex;
flex-direction:column;
.LHeader{
height:50px;
width:100vw;
background:@bg-color01;
flex-shrink:0;
}
导航页源码
.LBody{
flex-grow: 1;
width:100vw;
display:flex;
flex-direction:row;
.LTree{
width:200px;
background:@bg-color02;
flex-shrink:0;
overflow:auto;
}
.LContent{
flex-grow:1;
overflow:auto;
}
}
}
修改src/index.less全局样式，定义全局样式配置和滚动条样式设置，代码如下：/* @import '~antd/dist/antd.css'; */
//定义全局样式配置
@bg-color01:#eee;
@bg-color02:#ddd;
body {
margin: 0;
padding: 0;
font-family: sans-serif;
//滚动条样式设置
::-webkit-scrollbar-thumb {
background-color: rgba(128,128,128,.5);
border-radius: 5px;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
}
3 修改routes/home/index.js，增加内容撑开页⾯，如图：
到这⾥，我们展⽰下效果：
接下来，我们要对菜单稍微进⾏⼀下重新规划，不再以aaa啊bbb啊什么的，这样看着让⼈没有头绪。Demo菜单设计，共包含三级菜单，如下，
1 书籍
（1）历史古典
（1）古诗⽂集
（2）古词
（3）歌赋浏览
（2）现代⽂学
（3）⼉童读物
（4）⼩说娱乐
2 电影
（1）欧美⼤⽚
（2）⼤陆影视
（3）港台电影
3 ⾳乐
⼤概步骤如下：
（1）修改config中menuGlobal配置
（2）models⽬录下，创建对应的model⽂件（3）routes⽬录下，创建对应模板组件（4）layout⽬录下，创建对应布局组件（5）样式调整
调整后的⽬录结构如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。