TODOMVC 设计文档与使用说明

react redux react-redux nodejs express

前言：根据对给出的挑战作业的理解，梳理出该项目主要包含四大块内容：
1、项目功能的具体设计
2、前端功能页面的实施以及与后端交互
3、后端基础服务（包括数据库）搭建与接口设计
4、前端资源打包与后端服务一起上线
以下会详细介绍每一块所用到的技术（并未完全覆盖到要求中的技术点）

1、系统功能设计

由于本次项目定位是一个练手项目，所简化了各模块的设计与功能。仅提供最基础的服务。

1.1 注册、登录、退出

1.1.1 前端设计

注册：用户注册表单只包含用户名、密码、确认密码三项，均不可为空。
登录：用户登陆表单只包含用户名和密码两项，均不可为空。以及提供记住登录信息功能。
退出：点击退出按钮

1.1.2 接口设计

注册流程：校验必填字段 -> 校验用户名是否存在 -> 密码md5 -> 插入用户 -> 返回注册结果
ps: 用户注册流程创建的用户均视为普通用户，且数据库内会内置一个admin账户
登录流程：校验用户名 -> 校验密码 ->成功后，会将登录信息写入session -> 返回登录人信息
退出流程：校验用户ID与session中的id是否一致 -> 销毁session -> 返回结果

1.1.3 数据库设计

CREATE TABLE `user` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT '用户自增ID',
  `username` varchar(16) NOT NULL COMMENT '用户名',
  `password` varchar(32) NOT NULL COMMENT 'md5加密后的用户密码',
  `usertype` tinyint(1) NOT NULL DEFAULT '1' COMMENT '0: 管理员,1: 普通用户',
  `register_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '用户注册时间',
  PRIMARY KEY (`id`),
  UNIQUE KEY `unique_username` (`username`) USING BTREE COMMENT '用户名唯一'
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;

1.2 TODO模块

普通人员登录后会跳转到个人的TODO列表模块

1.2.1 获取TODO list

1.2.1.1 前端设计

提供：待办、已办、废弃三种todo状态供过滤，可多选

1.2.1.2 接口设计

接口会根据session信息查询登录用户创建的所有TODO列表。并会根据以下规则进行排序：
1、todo状态，待办 > 已办 > 废弃
2、todo更新时间，时间越新越前
3、todo创建时间，规则同上

1.2.2 添加TODO

1.2.2.1 前端设计

添加表单只包含todo描述信息，且不可为空

1.2.2.2 接口设计

校验必填 -> 插入记录 -> 返回插入结果

1.2.3 编辑TODO

1.2.3.1 前端设计

编辑操作分为：
1、修改todo状态，由待办 -> 已办或者由待办 -> 废弃，且不可逆
2、弹窗修改todo描述
3、查看todo详细描述：当todo描述过长时，前端做了最大显示两行处理，点击详情可展开，不涉及接口交互

1.2.3.2 接口设计

校验参数 -> 修改记录 —> 返回修改结果

1.2.4 数据库设计

CREATE TABLE `todo` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT 'ID，主键自增',
  `user_id` int(11) NOT NULL COMMENT '操作用户ID',
  `title` varchar(256) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '事件名',
  `status` tinyint(4) DEFAULT NULL COMMENT '0：待办，1：已办，2：废弃',
  `create_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` timestamp NULL DEFAULT NULL COMMENT '更新时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

1.3 用户信息模块

管理员登录后会跳转到用户信息汇总页面

1.3.1 前端设计

页面展示：
1、日活、周活、月活、总用户量
2、首页打开的平均白屏和loaded耗时
3、以折线图展示最近一周每天的活跃用户量

1.3.2 接口设计

1、根据日志模块（详见1.4）记录的用户行为信息。按照不同时间段分别查出日、周、月活人数以及根据总注册人数查出总用户量。
2、根据前端埋点收集的首屏加载的数据，计算出平均白屏和平均loaded时间。
3、根据日志模块记录的用户行为信息，聚合查出一周内的每天用户活跃数。

1.3.3 页面打开耗时数据库设计

CREATE TABLE `open_page` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT 'ID，主键自增',
  `user_id` int(11) NOT NULL COMMENT '操作用户ID',
  `white_time` int(11) DEFAULT NULL COMMENT '白屏时间，单位ms',
  `loaded_time` int(11) DEFAULT NULL COMMENT '页面onloaded时间，单位ms',
  `create_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '操作时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

1.4 日志模块

用户的以下行为信息会被记录成日志：
1、注册、登录
2、创建、修改todo（状态）
该模块只提供系统内部数据支撑。前端无体现也没有接口供调用

1.4.1 数据库设计

CREATE TABLE `log` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT '日志ID，主键自增',
  `user_id` int(11) NOT NULL COMMENT '操作用户ID，-1代表访客',
  `module` tinyint(1) NOT NULL COMMENT '0:其他模块，1:用户模块',
  `type` tinyint(1) NOT NULL COMMENT '0:其他，1：登录，2：注册，3：新增，4：删除，5：修改',
  `description` varchar(64) NOT NULL COMMENT '操作描述',
  `ip` varchar(32) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '操作者IP',
  `create_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '操作时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

2、 项目使用技术汇总

2.1 前端

1、项目整体使用react框架，UI部分未使用成熟框架。
2、自定义组件用到component state以及redux和react-redux进行数据管理。
3、路由方面一开始采用history模式（后来部署的时候需要额外处理路由），考虑到时间成本切换成hash模式。
4、保持登录信息用到了localStorage和sessionStorage

2.2 后端

1、整体框架采用express
2、数据库采用MySQL，同时服务内使用sequelize服务操作数据库
3、保持用户登录信息，一开始采用了jwt形式，后来切换成session模式。主要是session在刷新过期时间方面比较方便。

2.3 打包部署上线

1、准备好阿里云服务器，且安装好必要服务：MySQL、npm、nginx、pm2等，且阿里云服务管理后台需要开放相关端口访问
2、将前端代码打包到后端目录的public目录里面
3、将后端目录上传到阿里云指定目录，进入到该目录，npm安装好服务所需依赖
4、配置nginx.conf文件，将指定端口访问定位到指定资源
5、启动nginx服务
6、用pm2启动系统服务

3、 系统使用指南

3.1 普通用户

未注册就先注册，注册完成则登录。默认跳转到todo列表模块

3.2 管理员用户

账号：admin，密码000000，登录后默认跳转到用户信息汇总页面

4、 其他

由于本人技术栈原先是vue，该项目主要目的用于react和node入手。所以系统功能和设计较为简陋和不严谨，请包涵。
后端源码涉及到个人阿里云数据库方面的配置，还望大神手下留情。
源码托管地址：https://github.com/junwoung/todo
线上可用服务地址：http://120.24.98.124:5000/#/login