前言：以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址：https://github.com/66Web/react-antd-manager，欢迎star。
一、页面结构定义
二、目录结构定义
三、栅格系统使用
import { Row,Col } from ‘antd‘
<Row>
<Col span={4}>
Left
</Col>
<Col span={20}>
Right
</Col>
</Row>
四、calc计算方法使用
width: calc(100% - 10px)//表示宽度属性是整个布局的100%减去50px的长度
五、关于less
//css中
div{...}
div a{...}
//less中
div{
...
a{
...
}
}
@colorA:‘red‘
div{
color:@colorA
a{
color:black
}
}
六、架构代码
import React from ‘react‘;
import { Row, Col } from ‘antd‘;
import Header from ‘./components/Header‘;
import Footer from ‘./components/Footer‘;
import NavLeft from ‘./components/NavLeft‘;
import ‘./style/common.less‘
class Admin extends React.Component{
render(){
return(
<Row className="container">
<Col span={4} className="nav-left">
<NavLeft/>
</Col>
<Col span={20} className="main">
<Header/>
<Row className="content">
content
</Row>
<Footer/>
</Col>
</Row>
);
}
}
export default Admin;
style->common.less
.container{
display: flex;
.nav-left{
width: 15%;
min-width: 180px;
height: calc(100vh);
background-color: red;
}
.main{
flex: 1;
height: calc(100vh);
}
.content{
position: relative;
padding: 20px;
}
}
components->Header/Footer/NavLeft->index.js
import React from ‘react‘;
class Header extends React.Component{
render(){
return(
<div>Header</div>
)
}
}
export default Header;
七、导航栏内容
const menuList = [
{
title:‘首页‘,
key:‘/admin/home‘
},
{
title:‘UI‘,
key:‘/admin/ui‘,
children:[
{
title:‘按钮‘,
key:‘/admin/ui/buttons‘,
},
{
title:‘弹框‘,
key:‘/admin/ui/modals‘,
},
{
title:‘Loading‘,
key:‘/admin/ui/loadings‘,
},
{
title:‘通知提醒‘,
key:‘/admin/ui/notification‘,
},
{
title:‘全局Message‘,
key:‘/admin/ui/messages‘,
},
{
title:‘Tab页签‘,
key:‘/admin/ui/tabs‘,
},
{
title:‘图片画廊‘,
key:‘/admin/ui/gallery‘,
},
{
title:‘轮播图‘,
key:‘/admin/ui/carousel‘,
}
]
},
{
title:‘表单‘,
key:‘/admin/form‘,
children:[
{
title:‘登录‘,
key:‘/admin/form/login‘,
},
{
title:‘注册‘,
key:‘/admin/form/reg‘,
}
]
},
{
title:‘表格‘,
key:‘/admin/table‘,
children:[
{
title:‘基础表格‘,
key:‘/admin/table/basic‘,
},
{
title:‘高级表格‘,
key:‘/admin/table/high‘,
}
]
},
{
title:‘富文本‘,
key:‘/admin/rich‘
},
{
title:‘城市管理‘,
key:‘/admin/city‘
},
{
title:‘订单管理‘,
key:‘/admin/order‘,
btnList:[
{
title:‘订单详情‘,
key:‘/admin/order/detail‘
},
{
title:‘结束订单‘,
key:‘/admin/order/finish‘
}
]
},
{
title:‘员工管理‘,
key:‘/admin/user‘
},
{
title:‘车辆地图‘,
key:‘/admin/bikeMap‘
},
{
title:‘图标‘,
key:‘/admin/charts‘,
children:[
{
title:‘柱形图‘,
key:‘/admin/charts/bar‘
},
{
title:‘饼图‘,
key:‘/admin/charts/pie‘
},
{
title:‘折线图‘,
key:‘/admin/charts/line‘
},
]
},
{
title:‘权限设置‘,
key:‘/admin/permission‘
},
];
export default menuList;
import { Menu, Icon } from ‘antd‘;
import MenuConfig from ‘./../../config/manuConfig‘
const SubMenu = Menu.SubMenu;
<Menu theme="dark">
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>Navigation One</span></span>}>
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</SubMenu>
</Menu>
import React from ‘react‘
import { Menu, Icon } from ‘antd‘;
import MenuConfig from ‘./../../config/manuConfig‘
import ‘./index.less‘
const SubMenu = Menu.SubMenu;
export default class NavLeft extends React.Component {
componentWillMount() {
const MenuTreeNode = this.renderMenu(MenuConfig);
this.setState({
MenuTreeNode
})
}
//菜单渲染 -- 递归
renderMenu = (data) => {
return data.map((item) => {
if(item.children) {
return (
<SubMenu title={item.title} key={item.key}>
{this.renderMenu(item.children)}
</SubMenu>
)
}
return <Menu.Item title={item.title} key={item.key}>{item.title}</Menu.Item>
})
}
render() {
return (
<div>
<div className="logo">
<img src="/assets/logo-ant.svg" />
<h1>LJQ MS</h1>
</div>
<Menu theme="dark">
{this.state.MenuTreeNode}
</Menu>
</div>
)
}
}
NevLeft->index.less:
.logo{
line-height: 90px;
padding-left: 20px;
background-color: #002140;
img {
height: 35px;
}
h1{
color: #ffffff;
font-size: 20px;
display: inline-block;
vertical-align: middle;
margin: 0 0 0 10px;
}
}
八、首页头部内容
<\script> <\img> <\iframe>等）
yarn add jsonp --save
import React from ‘react‘
import { Row, Col } from ‘antd‘
import ‘./index.less‘
import Util from ‘../../utils/utils‘
import axios from ‘../../axios‘;
export default class Header extends React.Component {
state = {}
componentWillMount() {
this.setState({
userName: ‘莱茵月牙‘
})
setInterval(() => {
let sysTime = Util.formateDate(new Date().getTime());
this.setState({
sysTime
})
}, 1000)
//this.getWeatherAPIDate();由于百度API禁止了服务，故该功能暂时不使用
}
getWeatherAPIDate() {
let city = encodeURIComponent(‘杭州‘);
axios.jsonp({
url: ‘http://api.map.baidu.com/telematics/v3/weather?location=‘+city+‘&output=json&ak=kwQXPVDYPZIYArkpi3rQT7aZHTGTCCB2‘
}).then((res) => {
if(res.status == ‘success‘){
let data = res.result[0].weather_data[0];
this.setState({
dayPictureUrl:data.dayPictureUrl,
weather:data.weather
})
}
})
}
render() {
return (
<div className="header">
<Row className="header-top">
<Col span={24}>
<span>欢迎，{this.state.userName}</span>
<a href=‘#‘>退出</a>
</Col>
</Row>
<Row className="breadcrumb">
<Col span={4} className="breadcrumb-title">
首页
</Col>
<Col span={20} className="weather">
<span className="date">{this.state.sysTime}</span>
<span className="weather-detail">晴转多云</span>
</Col>
</Row>
</div>
)
}
}
export default {
formateDate(time){
if(!time)return ‘‘;
let date = new Date(time);
return date.getFullYear()+‘-‘+(date.getMonth()+1)+‘-‘+date.getDate()
+‘ ‘+date.getHours()+‘:‘+date.getMinutes()+‘:‘+date.getSeconds()
}
}
import JsonP from ‘jsonp‘
export default class Axios{
static jsonp(options){
new Promise((resolve, reject) => {
JsonP(options.url,{
param:‘callback‘
}, function (err, response) {
if(response.status === ‘success‘){
resolve(response);
}else{
reject(response.message);
}
})
})
}
}
九、底部组件开发
import React from ‘react‘
import ‘./index.less‘;
export default class Footer extends React.Component {
render() {
return (
<div className="footer">
版权所有：柳洁琼Elena
</div>
)
}
}
@import "文件路径";【注意用@import引入，用分号分割】@变量名@import "./../../style/default.less";
.footer{
height: 100px;
padding: 40px 0;
text-align: center;
color: @colorJ;
}
十、Home页面实现
import React from ‘react‘
import ‘./index.less‘
export default class Home extends React.Component{
render() {
return (
<div className="home-wrap">
欢迎学习慕课后台管理系统课程
</div>
)
}
}
pages->Home->index.less：
@import ‘./../../style/default.less‘;
.home-wrap{
background-color: @colorM;
height: calc(62vh); //内容高度占右侧的62%
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
flex弹性布局：实现水平垂直居中
display: flex; align-items: center;//前提布局是flex，align-items表示垂直居中 justify-content: center;//前提布局是flex，align-items表示水平居中
CSS实现箭头图标
注意：当内部元素使用绝对定位，父级需要使用相对定位，否则内部元素则会相对整个文档进行绝对定位
after伪类：元素后添加内容实现箭头图标
实现下三角样式：设定border-top为指定颜色，左右border为透明色(transparent)
.breadcrumb{
height: 40px;
line-height: 40px;
padding: 0 20px;
border-top: 1px solid #f9c700;
position: relative; //父级元素相对定位
.breadcrumb-title{
font-size: @fontC;
text-align: center;
&:after{
position: absolute; //绝对定位
content: ‘‘; //设为空用于占位
left: 73px;
top: 39px;
border-top: 9px solid @colorM;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
}
}
注：项目来自慕课网
【共享单车】—— React后台管理系统开发手记：主页面架构设计
原文：https://www.cnblogs.com/ljq66/p/10188214.html