# react-antd4

**Repository Path**: mymayue/react-antd4

## Basic Information

- **Project Name**: react-antd4
- **Description**: 后台管理系统
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-12-11
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

react-后台管理
day1: create-react-app搭建环境;
      目录拆分;
      create-react-app+antd;
day2: 登录组件:(1)静态组件
              (2)校验表单数据:(a)必须输入
                            （b）必须大于4位
                            （c）必须小于12位
                            （d）必须是英文，数字或下划线组成
                  高阶组件：（1）本质上就是一个函数
                           （2） 接受一个组件(被包装组件)， 返回一个新的组件(包装组件), 包装组件会向被包装组件传入特定属性
              (3)收集表单数据
day3: axios库的使用:(1) 封装axios库-->缺点：不同的接口的url, type重复了
                   (2) 封装成对应的应用接口请求函数
                   (3) 请求跨域问题(https/http,host,port) ---解决方案:(a)代理服务器(开发); (b)cors (c)jsonp(get)
                   (4)async和await简化promise对象的使用（不再使用then()来指定成功/失败的回调函数）
                              (a)哪里写await?:返回primise的表达式左侧写await(不想要promise,想要promise异步执行成功的Value数据)
                              (b)哪里写async?(await所在函数最近的)定义的左侧
                   (5)优化ajax.js(统一处理请求异常)
                        (a)在外层包一个自己创建的promise对象
                        (b)在请求出错时，不reject(error),而是显示错误提示
day4:登录功能:(1)在主页显示用户名-->内存中保存用户名--->缺点-->一刷新就跳转到登录页面
             (2)localstore--> yarn add store-->维持登录
             (3)再优化-->登录过的用户再访问登录页面自动跳转到主页
     主页:(1)布局
          (2)左侧组件
          (3)跳转路由组件--->category, charts(bar, line, pie), product, role, user
          (4)路由映射-->访问对应的url显示不同的content--><Switch/>, <Router/>, <Redirect/>
          (5)点击相应的组件右侧的Content显示对应的内容-->路由-组件映射--><Link to="/xxx"/>
          (6)优化(5)-->代码重复,扩展性差-->(a)根据menu的数据数组生成对应的标签数组,使用map() + 递归调用
                                         (b)根据menu的数据数组生成对应的标签数组,使用reduce() + 递归调用
          (7)优化:自动选中当前菜单项 -->withRouter(高阶组件),selectedKeys,[this.props.location.pathname]
          (8)Header组件：布局+伪元素  
          (9)jsonp请求 `天气接口`
          (10)动态显示header-title->withRoute(Header)
          (11)娱乐组件->(a)静态界面=>Card+Table
          (12)异步请求娱乐类型数据（reqEntertainment）