【共享单车】—— React后台管理系统开发手记：主页面架构设计

【共享单车】—— React后台管理系统开发手记：主页面架构设计

前言：以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址：https://github.com/66Web/react-antd-manager，欢迎star。

---

 一、页面结构定义

• 左侧导航栏，右侧页面结构
• 右侧显示内容分别分为上Header、中Content和下Footer部分

  

二、目录结构定义

• src->admin.js：项目主结构代码（index.js中替换App.js挂载到根节点）

• src->common.js：项目公共结构代码（类似admin.js，负责路由详情页展示）

• src->components目录：项目公共组件

• components->Footer、Header、NavLeft目录：index.js+index.less

• src->pages目录：项目路由页面组件

• src->style目录：全局样式common.less

• src->config目录：菜单配置、项目其它变量配置

• src->axios目录：执行axios请求文件 index.js

• src->utils目录：项目工具方法

• src->resource->assets目录：项目图片资源（public->assets目录供打包后使用）

• src->resource->gellary目录：画廊图片资源（public->gellary目录供打包后使用）

• src->resource->carousel-img目录：轮播图片资源（public->carousel-img目录供打包后使用）

三、栅格系统使用

• AntD栅格系统一共24列（BootStrap一共12列）

• AntD中行用Row组件，列使用Col组件，列存在span属性(span={长度值}的方式写入span属性)，同一Row下的Col span总和为24

  import { Row,Col } from 'antd'
  
  <Row>
       <Col span={4}>
            Left
       </Col>
       <Col span={20}>
            Right
       </Col>
  </Row>

四、calc计算方法使用

• calc()是less中动态计算长度值
• calc(四则运算）：运算符前后都需要保留一个空格

  width: calc(100% - 10px)//表示宽度属性是整个布局的100%减去50px的长度

• calc(100vh)：vh的含义相当于1%，100vh即是100%

五、关于less

• less是预编译器
• 用法一：样式嵌套

  //css中
  div{...}
  div a{...}
  
  //less中
  div{
     ...
     a{
        ... 
     }
  }

• 用法二：声明变量

  @colorA:'red'
  div{
     color:@colorA
     a{
        color:black 
     }
  }