react后台项目开发(一)

1. 项目开发准备

1. 描述项目
2. 技术选型
3. api 接口(4部分：3请求{url,请求方式,请求参数格式}, 1响应数据格式)/ 接口文档/ 测试接口

2. 启动项目开发

1. 使用react脚手架创建项目
2. 开发环境运行:　　npm start
3. 生产环境打包运行: npm run build     serve build

3. git管理项目

1. 创建远程仓库
2. 创建本地仓库
   1.  配置 .gitignore
   2.  　 git init
   3.  　 git add .
   4.   　git commit -m "init"
3. 将本地仓库推送到远程仓库
   1. 　　git remote add origin url
   2. 　　git push origin master
4. 在本地创建dev分支，并推送到远程
   1. 　　gitcheckout -b dev
   2. 　　git push origin dev
5. 如果本地有修改
   1. 　　git add.
   2. 　　git commit -m "xxx"
   3. 　　git push origin dev
6. 新的同时：克隆仓库
   1. 　　git clone url
   2. 　　git checkout -b dev origin/dev
   3. 　　git pull origin dev
7. 如果远程修改
   1. 　　git pull origin dev

4. 创建项目的基本结构

　　api: ajax请求模块

　　components: 非路由组件

　　pages: 理由组件

　　app.js: 应用的根组件

　　index.js: 入口js

5. 引入antd

　　下载antd包 ( npm i antd -d )

　　按需打包：只打包import引入组件的js/css

　　　　　　下载工具包 ( npm i react-app-rewired customize-cra babel-plugin-import )

　　　　　　config-overrides.js

　　　　　　package.jason

　　自定义主题

　　　　　　下载工具包 ( npm i less less-loader -d )

　　　　　　config-overrides.js

　　使用antd的组件

　　　　　　根据antd的文档编写

6. 引入路由

　　下载: react-router-dom　　

　　拆分应用路由:

　　　　Login: 登陆

　　　　Admin: 后台管理界面

　　注册路由：

　　　　<BrowserRouter>　　//路由器

　　　　<Switch>　　　　　　//切换其中一个路由

　　　　<Route path='' component={ }/>　　//路由

7. Login的静态组件

1. 自定义了一部分样式布局
2. 使用antd的组件实现登陆表单界面
   1. 　　Form / Form.Item
   2. 　　Input
   3. 　　Icon
   4. 　　Button

8. 收集表单数据和表单的前台验证

　　1. form 对象

　　　　如何让包含<Form> 的组件得到form对象？

WrapLoginForm = Form.create()(LoginForm)

　　　　WrapLoginForm是LoginForm的父组件，它给LoginForm传入form属性，用到了高阶函数和高阶组件的技术

　　2. 操作表单数据

form.getFiledDecorator('标识名称', { initialValue:初始值，rules:[]})(<Input/>)包装表单项组件标签
form.getFieldsValue();  得到包含所有输入数据的对象
form.getFieldValue(id); 根据标识得到对应字段输入的数据

　　3. 前台表单验证

　　　　1. 声明式实时表单验证

form.getFieldDecorator('标识名称',{rules:[{min:4,message:'错误提示信息'}]}) (<Input/>)

　　　　2.自定义表单验证　　　　　　

form.getFieldDecorator('标识名称',{rules:{validator:this.validatePwd}})(<Input/>)
　　　　　　validatePwd = (rule,value,callback)=>{

　　　　　　　　if(问题) callback('错误提示') else callback()
　　　　　　}

　　　　3.点击提示时统一验证　

form.validateFields((error,values)=>{
   if(!error){ 通过验证，发送ajax请求} 
})

 

9. 高阶函数和高阶组件　　

　　1. 高阶函数

　　　　1).一类特别的函数

　　　　　　a).接受函数类型的参数

　　　　　　b).函数返回值是函数

　　　　2).常见

　　　　　　a).定时器:setTimeout()/setInterval()

　　　　　　b).Promise:Promise(()=>{}) then(value=>{},reason=>{})

　　　　　　c).数组遍历相关的方法: forEach()/ filter()/ map()/ find()/ findindex()

　　　　　　d).fn.bind() 本身是个函数，bind方法返回一个新的函数方法

　　　　　　e).Form.create()() create函数能够包装组件，生成另外一个组件的新功能函数

　　　　　　f).getFieldDecorator()()

　　　　3).高阶函数更加动态，更加具有扩展性

　　2. 高阶组件

　　　　1).本质就是一个函数

　　　　2).接收一个组件(被包装组件),返回一个新的组件(包装组件),包装组件会向被包装组件传入特定属性

　　　　3).作用：扩展组件的功能

　　3. 高阶组件也是高阶函数:接受一个组件函数，返回一个新的组件函数