React-后台管理系统项目实战

React-后台管理系统项目实战视频地址
github代码地址

React 入门实例教程
Redux 入门教程（一）：基本用法
Redux 入门教程（二）：中间件与异步操作
Redux 入门教程（三）：React-Redux 的用法
React 技术栈系列教程

项目描述：

模块化：模块化是一种处理复杂系统分解为更好的可管理模块的方式。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。（描述项目的开发方式）
组件化：实现局部某一个功能界面所有代码的集合

技术选型

前端路由

api接口

开启项目开发

安装react developer tools for chrome

git操作的基本流程

git add . ：他会监控工作区的状态树，使用它会把工作时的所有变化提交到暂存区，包括文件内容修改(modified)以及新文件(new)，但不包括被删除的文件。(把工作区代码提交到缓存区）

git commit -m “init”：将缓存区代码提交到版本区

在本地创建了一个Git仓库后，又想在GitHub创建一个Git仓库，并且让这两个仓库进行远程同步，这样，GitHub上的仓库既可以作为备份，又可以让其他人通过该仓库来协作，真是一举多得。
登陆GitHub，然后，在右上角找到“New repository”按钮，创建一个新的仓库

在Repository name填入learngit，其他保持默认设置，点击“Create repository”按钮，就成功地创建了一个新的Git仓库

目前，在GitHub上的这个learngit仓库还是空的，GitHub告诉我们，可以从这个仓库克隆出新的仓库，也可以把一个已有的本地仓库与之关联，然后，把本地仓库的内容推送到GitHub仓库。

现在，我们根据GitHub的提示，在本地的learngit仓库下运行命令：

$ git remote add origin https://github.com/min-yan/AdminClient.git

添加后，远程库的名字就是origin，这是Git默认的叫法，也可以改成别的，但是origin这个名字一看就知道是远程库。

git branch：查看分支

把本地库的内容推送到远程，用git push命令，实际上是把当前分支master推送到远程。

由于远程库是空的，我们第一次推送master分支时，加上了-u参数，Git不但会把本地的master分支内容推送的远程新的master分支，还会把本地的master分支和远程的master分支关联起来，在以后的推送或者拉取时就可以简化命令

推送成功后，可以立刻在GitHub页面中看到远程库的内容已经和本地一模一样

从现在起，只要本地作了提交，就可以通过命令：

$ git push origin master

git push origin master ：指定远程仓库名和分支名。

把本地master分支的最新修改推送至GitHub（远程master分支），现在，你就拥有了真正的分布式版本库！

创建新分支：git checkout -b dev

-b：如果没有这个分支就创建；
checkout：切换

git push origin dev：将本地分支推送到远程

本地代码更新推送到远程：

远程代码更新拉取到本地

git pull origin dev

将远程仓库克隆到本地

git checkout -b dev origin/dev：根据远程的dev分支创建dev分支

原仓库新建了分支xfzhang，克隆后的仓库要获取这个新分支

总结

1). 创建远程仓库
2). 创建本地仓库配置.gitignoregit initgit add .git commit -m "init"
3). 将本地仓库推送到远程仓库git remote add origin urlgit push origin master
4). 在本地创建dev分支, 并推送到远程git checkout -b devgit push origin dev
5). 如果本地有修改git add .git commit -m "xxx"git push origin dev
6). 新的同事: 克隆仓库git clone urlgit checkout -b dev origin/devgit pull origin dev
7). 如果远程修改了git pull origin dev
8). 如何得到后面新增的远程分支git pullgit checkout -b dev origin/xxx

引入antd

项目中使用到的antd组件

引入路由

路由：映射关系（K-V）
前台路由（path-component）
后台路由（path-回调【处理请求，返回响应】）

react 精华之react-router .HashRouter 还是 BrowserRouter . 动态路由是根据变量决定这个路由是否需要进行

高阶函数
定义: 接收的参数是函数或者返回值是函数
常见的: 数组遍历相关的方法 / 定时器 / Promise / 高阶组件
作用: 实现一个更加强大, 动态的功能

高阶组件:
本质是一个函数
函数接收一个组件, 返回一个新的组件
Form.create()返回的就是一个高阶组件

运行serve端项目及前后台交互

…

对代理的理解：

什么是跨域？跨域解决方法
不要再问我跨域的问题了

使用axious的请求拦截器，转换post请求参数格式

情况：后台服务器只支持某一种格式（urlencode/json）
添加请求拦截器: 让post请求的请求体格式为urlencoded格式 a=1&b2
在真正发请求前执行

 axios.interceptors.request.use(function (config) {// 得到请求方式和请求体数据const {method, data} = config// 处理post请求, 将data对象转换成query参数格式字符串if (method.toLowerCase() === 'post' && typeof data==='object') {// qs.stringify()将对象 序列化成URL的形式，以&进行拼接config.data = qs.stringify(data) // username=admin&password=admin}return config
})

使用axious的响应拦截器，直接得到data和统一处理error

// 添加响应拦截器// 功能1: 让请求成功的结果不再是response, 而是response.data的值// 功能2: 统一处理所有请求的异常错误
// 在请求返回之后且在我们指定的请求响应回调函数之前
axios.interceptors.response.use(function (response) {return response.data // 返回的结果就会交给我们指定的请求响应的回调// return response // 返回的结果就会交给我们指定的请求响应的回调
}, function (error) { // 统一处理所有请求的异常错误message.error('请求出错 ' + error.message)// return Promise.reject(error);// 返回一个pending状态的promise, 中断promise链return new Promise(() => {})
});

async和await的理解和使用

a. 作用?
简化promise对象的使用: 不用再使用then()来指定成功/失败的回调函数
以同步编码(没有回调函数了)方式实现异步流程
b. 哪里写await?
在返回promise的表达式左侧写await: 不想要promise, 想要promise异步执行的成功的value数据
c. 哪里写async?
await所在函数(最近的)定义的左侧写async

JSONP

JSONP是JSON with padding(填充式JSON或参数式JSON)的简写，是应用JSON的一种新方法，常用于服务器与客户端跨源通信，在后来的Web服务中非常流行。
　JSONP 是解决跨域问题的一种方案，不同于 JSON，其并不是一种数据交换格式，而只是一种绕过跨域的技巧。

jsonp原理详解——终于搞清楚jsonp是啥了

call（）、apply（）、bind（）

JavaScript 中 call()、apply()、bind() 的用法

react的static函数设计的目的是什么呢？

这里涉及到了ES6的class，我们定义一个组件的时候通常是定义了一个类，而static则是创建了一个属于这个类的属性或者方法。

组件则是这个类的一个实例，component的props和state是属于这个实例的，所以实例还未创建，我们又怎么可能读得到props和state呢？

总结来说static并不是react定义的，而加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用

静态方法：
若类的方法前加了static关键字，则该方法称为静态方法，反之为实例方法。静态方法为类所有，可以通过对象来使用，也可以通过类来使用。但一般提倡通过类名来使用，因为静态方法只要定义了类，不必建立类的实例就可使用。静态方法只能调用静态变量。

方法调用
静态方法与实例方法唯一不同的，就是静态方法在返回类型前加static关键字。静态方法的调用有两种途径：
（1）通过类的实例对象去调用
调用格式为：对象名.方法名
(2) 通过类名直接调用
调用格式为：类名.方法名

方法规则
我们在使用时要注意：
静态方法只能访问类的静态成员，不能访问类的非静态成员；
非静态方法可以访问类的静态成员，也可以访问类的非静态成员；
静态方法既可以用实例来调用，也可以用类名来调用。

自定义实现数组声明式方法

get请求的两种请求参数

函数节流与防抖

富文本编辑组件

redux

setSatate（）

可视化图表

打包项目并运行