1、 git操作

远程仓库有内容（公司有功能）

• 将远程仓库内容克隆到本地来
  • git clone url
• 切换到dev分支进行开发
  • git checkout -b dev
• 写完某个功能，要提交dev分支远程仓库去
  • 本地仓库管理
    • git add .
    • git commit -m 'xxx'
  • 提交远程仓库去
    • git push origin dev

本地仓库有内容

• 新建远程仓库
  • 去github新建一个仓库
• 本地仓库进行管理
  • git init
  • git add .
  • git commit -m 'xxx'
• 将本地仓库和远程仓库关联起来
  • git remote add origin url
• 切换到dev分支进行开发
  • git checkout -b dev
• 写完某个功能，要提交dev分支远程仓库去
  • 本地仓库管理
    • git add .
    • git commit -m 'xxx'
  • 提交远程仓库去
    • git push origin dev

问题：远程仓库有两分支master和dev

• 如果通过克隆只能获取master分支上的内容
• 我需要dev分支的内容：
  • git checkout -b dev origin/dev 将远程仓库dev分支克隆到本地dev分支上

合并分支操作

• 切换到master分支
  • git checkout master
• 合并dev分支
  • git merge dev

2、 项目准备

• 项目描述: 整体业务功能/功能模块/主体的技术/开发模式
• 技术选型: 数据展现/用户交互/组件化, 后端, 前后台交互, 模块化, 项目构建/工程化, 其它
• API接口: 接口的4个组成部分, 接口文档, 对/调/测接口

3、 搭建项目

• 使用create-react-app脚手架创建模板项目(工程化)
• 引入antd-mobile, 并实现按需打包和自定义主题
• 引入react-router-dom(v4):
  • HashRouter/Route/Switch
  • history: push()/replace()
• 引入redux
  • redux/react-redux/redux-thunk
  • redux: createStore()/combineReducers()/applyMiddleware()
  • react-redux: / connect()(Xxx)
  • 4个重要模块: reducers/store/actions/action-types

4. 使用mongoose操作数据库

• 连接数据库
• 定义Schema和Model
• 通过Model函数对象或Model的实例的方法对集合数据进行CRUD操作

5. 注册/登陆后台处理

• 根据接口编写路由的定义
• 注册: 流程
• 登陆: 流程
• 响应数据结构: {code: 0, data: user}, {code: 1, msg: 'xxx'}

6. 注册/登陆前台处理

• ajax
  • ajax请求函数(通用): 使用axios库, 返回的是promise对象
  • 后台接口请求函数: 针对具体接口定义的ajax请求函数, 返回的是promise对象
• 代理proxy
  • 是什么？
    • 全称代理服务器，
    • 将用户/浏览器发送的请求拦截下来, 转发请求到新地址，访问请求的资源，最终将响应转发给用户/浏览器
  • 作用： 解决浏览器跨域问题
  • 位置在哪：浏览器端
  • 注意：只在开发时使用，项目上线时还是需要使用jsonp或者cors技术解决跨域问题
  • 使用： 在package.json文件 加一个字段 proxy: 'http://localhost:4000'

7. 使用redux管理组件状态数据

• store.js
  • 生成并暴露一个store管理对象
• reducers.js
  • 包含n个reducer函数
  • 根据老state和指定action来产生返回一个新的state
• actions.js
  • 包含n个action creator函数
  • 同步action: 返回一个action对象({type: 'XXX', data: xxx})
  • 异步action: 返回一个函数: disptach => {执行异步代理, 结束时dispatch一个同步action}
• action-types.js
  • action的type名称常量
• component
  • UI组件:
    • 组件内部没有使用任何redux相关的API
    • 通过props接收容器组件传入的从redux获取数据
    • 数据类型: 一般和函数
  • 容器组件 connect( state => ({user: state.user}), {action1, action2} )(UI组件)
• 修改套路
  • actions / action-types
  • reducers
  • 容器组件
  • 入口文件
  • UI组件
• redux插件
  • 需要引入redux@3.7.2版本
  • 能够实时查看redux的状态数据和action

8. 实现user信息完善功能

• 用户信息完善界面路由组件:
  • 组件: dashen-info/laoban-info/header-selector
  • 界面: Navbar/List/Grid/InputItem/Button/TextareaItem
  • 收集用户输入数据: onChange监听/state
  • 注册2级路由: 在main路由组件
• 登陆/注册成功后的跳转路由计算
  • 定义工具函数
  • 计算逻辑分析
• 后台路由处理
• 前台接口请求函数ajax
• 异步action/同步action 和 action-types
• reducers函数
• 创建容器组件
• 入口文件更新组件
• 修改UI组件