react-chat

Project development log

---

One

1. Project development preparation

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

2. Common operations of git management projects

1). 创建本地仓库
    创建.gitignore配置文件
    git init
    git add *
    git commit -m "xxx"
2). 创建github远程仓库
    New Repository
    指定名称
    创建
3). 将本地仓库推送到远程仓库
    git remote add origin https://github.com/zxfjd3g/170612_JSAdvance.git 关联远程仓库
    git push origin master

4). push本地的更新 
    git add *
    git commit -m "xxx"
    git push origin master

5). pull远程的更新
        git pull origin master
        
6). 克隆github上的项目:
    git clone https://github.com/zxfjd3g/xxx.git

3. Build the project

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

4. Login/Registration Interface

1). 创建3个1级路由: main/login/register
2). 完成登陆/注册的静态组件
    antd组件: NavBar/WingBlank/WhiteSpace/List/InputItem/Radio/Button
    路由跳转: this.props.history.replace('/login')
    收集表单输入数据: state/onChange/变量属性名

5. Implement a simple backend

1). 使用webstorm创建基于node+express的后台应用
2). 根据需求编写后台路由
3). 使用postman测试后台接口
4). 使用nodemon实现后台应用的自动重启动
5). 路由回调函数的3步: 读取请求参数/处理/返回响应数据

two

1. Use mongoose to operate the database

1). 连接数据库
2). 定义schema和Model
3). 通过Model函数对象或Model的实例的方法对集合数据进行CRUD操作 

2. Registration/Login background processing

1). models.js
    连接数据库: mongoose.connect(url)
    定义文档结构: schema
    定义操作集合的model: UserModel
2). routes/index.js
    根据接口编写路由的定义
    注册: 流程
    登陆: 流程
    响应数据结构: {code: 0, data: user}, {code: 1, msg: 'xxx'}

3. Registration/login front desk processing

1). ajax
    ajax请求函数(通用): 使用axios库, 返回的是promise对象
    后台接口请求函数: 针对具体接口定义的ajax请求函数, 返回的是promise对象
    代理: 跨域问题/配置代理解决
    await/async: 同步编码方式实现异步ajax请求 
2). 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名称常量
3). component
    UI组件: 
        组件内部没有使用任何redux相关的API
        通过props接收容器组件传入的从redux获取数据
        数据类型: 一般和函数
    容器组件
        connect(
          state => ({user: state.user}),
          {action1, action2}
        )(UI组件)

three

1. Realize user information perfect function

1). 用户信息完善界面路由组件: 
    组件: dashen-info/laoban-info/header-selector
    界面: Navbar/List/Grid/InputItem/Button/TextareaItem
    收集用户输入数据: onChange监听/state 
    注册2级路由: 在main路由组件
2). 登陆/注册成功后的跳转路由计算
    定义工具函数
    计算逻辑分析
3). 后台路由处理
4). 前台接口请求函数
5). 前台redux
    action-types
    异步action/同步action
    reducer
6). 前台组件
    UI组件包装生成容器组件
    读取状态数据
    更新状态

2. Build the overall interface (Part 1)

1). 登陆状态维护
    后台将userid保存到cookie中
    前台读取cookie中的userid
    redux中管理user信息状态
    
2). 实现自动登陆
    整体逻辑分析
    ajax请求根据cookie中的userid查询获取对应的user信息

four

1. Build the overall interface (below)

封装导航路由相关数据(数组/对象)
抽取底部导航组件
非路由组件使用路由组件API

2. Personal Center

读取user信息显示
退出登陆

3. User list

为大神/老板列表组件抽取用户列表组件
异步读取指定类型用户列表数据
    后台路由
    api
    redux
    component

4. socket.io

实现实时聊天的库
包装的H5 WebSocket和轮询---> 兼容性/编码简洁性
包含2个包:
  socket.io: 用于服务器端
  socket.io-client: 用于客户端
基本思想: 远程自定义事件机制
    on(name, function(data){}): 绑定监听
    emit(name, data): 发送消息
    
    io: 服务器端核心的管理对象
    socket: 客户端与服务器的连接对象

Fives

1. Chat component function:

后台接口
chat静态组件
发送消息与接收消息
获取消息列表显示
接收消息显示
完善列表显示

six

1. Message list

对消息进行分组保存, 且只保存每个组最后一条消息
对于对象容器和数组容器的选择
数组排序

2. Display of the number of unread messages

每个组的未读数量统计
总未读数量统计显示
查看消息后, 更新未读数量

3. Customize redux and react-redux

理解redux模块
    1). redux模块整体是一个对象模块
    2). 内部包含几个函数
        createStore(reducers)  // reducers: function(state, action){ return newState}
        combineReducers(reducers)  // reducers: {reducer1, reducer2}  返回: function(state, action){ return newState}
        applyMiddleware()  // 暂不实现
    3). store对象的功能
        getState()  // 返回当前state
        dispatch(action)  // 分发action: 调用reducers()得到新的总state, 执行所有已注册的监听函数
        subscibe(listener) // 订阅监听: 将监听函数保存起来
理解react-redux模块
	1). react-redux模块整体是一个对象模块
	2). 包含2个重要属性: Provider和connect
	3). Provider
		值: 组件类
		作用: 向所有容器子组件提供全局store对象
		使用: <Provider store={store}><Xxx/></Provider>
	4). connect
		值: 高阶函数
		作用: 包装组件生成容器组件, 让被包装组件能与redux进行通信
		使用: connect(mapStateToProps, mapDispatchToProps)(Xxx)