用户中心
完整了解做项目的思路，接触一些企业级的开发技术
（尽量少写代码）目标：大家之后都能轻松做出管理系统
终 - 直播内容：
- 完成注册功能的前端开发 15 - 20min √
- 获取用户的登录态，获取当前登录用户信息接口 √
- 完成用户管理后台的前端开发 20 - 30 min
- 前端代码瘦身 & 优化 20min
- 后端代码优化 20min
- 新需求 - 讨论及开发星球用户校验（简易） ---
- 项目扩展思路
Ant Design Pro（Umi 框架）
app.tsx 项目全局入口文件，定义了整个项目中使用的公共数据（比如用户信息）
access.ts 控制用户的访问权限
首次访问页面（刷新页面），进入 app.tsx，执行 getInitialState 方法，该方法的返回值就是全局可用的状态值。
ProComponents 高级表单
- 通过 columns 定义表格有哪些列
- columns 属性
- dataIndex 对应返回数据对象的属性
- title 表格列名
- copyable 是否允许复制
- ellipsis 是否允许缩略
- valueType：用于声明这一列的类型（dateTime、select）
待优化点 todo
- 前端密码重复提示（可能有别的优化方式）
- 注册没有友好的提示
- 用户注销
- 优化查询接口（支持更多查询）
MFSU：前端编译优化
Ant Design 组件库 ⇒ React
Ant Design Procomponents ⇒ Ant Design
Ant Design Pro 后台管理系统 ⇒ Ant Design、React、Ant Design Procomponents、其他的库
企业做项目流程
需求分析 ⇒ 设计（概要设计、详细设计）⇒ 技术选型 ⇒
初始化 / 引入需要的技术 ⇒ 写 Demo ⇒ 写代码（实现业务逻辑） ⇒ 测试（单元测试）⇒ 代码提交 / 代码评审 ⇒ 部署⇒ 发布
需求分析
- 登录 / 注册
- 用户管理（仅管理员可见）对用户的查询或者修改
- 用户校验（ 仅星球用户 ）
技术选型
前端：三件套 + React + 组件库 Ant Design + Umi + Ant Design Pro（现成的管理系统）
后端：
- java
- spring（依赖注入框架，帮助你管理 Java 对象，集成一些其他的内容）
- springmvc（web 框架，提供接口访问、restful接口等能力）
- mybatis（Java 操作数据库的框架，持久层框架，对 jdbc 的封装）
- mybatis-plus（对 mybatis 的增强，不用写 sql 也能实现增删改查）
- springboot（快速启动 / 快速集成项目。不用自己管理 spring 配置，不用自己整合各种框架）
- junit 单元测试库
- mysql 数据库
部署：服务器 / 容器（平台）
计划
-
初始化项目
-
前端初始化 20 min
- 初始化项目 ✔
- 引入一些组件之类的 ✔
- 框架介绍 / 瘦身 ✔
-
后端初始化 20 min
- 准备环境（MySQL 之类的）验证 MySQL 是否安装成功 - 连接一下 ✔
- 初始化后端项目，引入框架（整合框架）✔
-
-
数据库设计
-
登录 / 注册 20min ✔
- 后端 20min ✔
- 规整项目目录 2 min
- 实现基本数据库操作（操作 user 表）
- 模型 user 对象 ⇒ 和数据库的字段关联，自动生成
- 写登录逻辑
- 前端 20min
- 删除多余代码
- 后端 20min ✔
-
用户管理（仅管理员可见） 20 min
- 后端 ✔
- 前端
笔记
三种初始化 Java 项目的方式
- GitHub 搜现成的代码
- SpringBoot 官方的模板生成器（https://start.spring.io/）
- 直接在 IDEA 开发工具中生成 ✔
如果要引入 java 的包，可以去 maven 中心仓库寻找（http://mvnrepository.com/）
数据库设计 30 min
什么是数据库？存数据的
数据库里有什么？数据表（理解为 excel 表格）
java 操作数据库，代替人工
什么是设计数据库表？
有哪些表（模型）？表中有哪些字段？字段的类型？数据库字段添加索引？
表与表之间的关联~
性别是否需要加索引？
用户表：
id（主键）bigint
username 昵称 varchar
userAccount 登录账号
avatarUrl 头像 varchar
gender 性别 tinyint
userPassword 密码 varchar
phone 电话 varchar
email 邮箱 varchar
userStatus 用户状态 int 0 - 正常
createTime 创建时间（数据插入时间）datetime
updateTime 更新时间（数据更新时间）datetime
isDelete 是否删除 0 1（逻辑删除）tinyint
userRole 用户角色 0 - 普通用户 1 - 管理员
自动生成器的使用
MyBatisX 插件，自动根据数据库生成 domain 实体对象、mapper（操作数据库的对象）、mapper.xml（定义了 mapper对象和数据库的关联，可以在里面自己写 SQL）、service（包含常用的增删改查）、serviceImpl（具体实现 service）
今日计划
- 开发完成后端登录功能 20 min（单机登录 ⇒ 后续改造为分布式 / 第三方登录）✔
- 开发后端用户的管理接口 5 min（用户的查询 / 状态更改）✔
- 后端接口测试 ✔
- 开发前端用户登录注册功能 40 min - 1h
- 讨论如何校验用户（星球的小伙伴可以使用）
注册逻辑
- 用户在前端输入账户和密码、以及校验码（todo）
- 校验用户的账户、密码、校验密码，是否符合要求
- 非空
- 账户长度 不小于 4 位
- 密码就 不小于 8 位吧
- 账户不能重复
- 账户不包含特殊字符
- 密码和校验密码相同
- 对密码进行加密（密码千万不要直接以明文存储到数据库中）
- 向数据库插入用户数据
登录接口
接受参数：用户账户、密码
请求类型：POST
请求体：JSON 格式的数据
请求参数很长时不建议用 get
返回值：用户信息（ 脱敏 ）
逻辑
-
校验用户账户和密码是否合法
- 非空
- 账户长度 不小于 4 位
- 密码就 不小于 8 位吧
- 账户不包含特殊字符
-
校验密码是否输入正确，要和数据库中的密文密码去对比
-
用户信息脱敏，隐藏敏感信息，防止数据库中的字段泄露
-
我们要记录用户的登录态（session），将其存到服务器上（用后端 SpringBoot 框架封装的服务器 tomcat 去记录）
cookie
-
返回脱敏后的用户信息
控制层 Controller 封装请求
application.yml 指定接口全局 api
servlet:
context-path: /api
@RestController 适用于编写 restful 风格的 api，返回值默认为 json 类型
controller 层倾向于对请求参数本身的校验，不涉及业务逻辑本身（越少越好）
service 层是对业务逻辑的校验（有可能被 controller 之外的类调用）
如何知道是哪个用户登录了？
（javaweb 这一块）
-
连接服务器端后，得到一个 session 状态（匿名会话），返回给前端
-
登录成功后，得到了登录成功的 session，并且给该sessio n设置一些值（比如用户信息），返回给前端一个设置 cookie 的 ”命令“
session ⇒ cookie
-
前端接收到后端的命令后，设置 cookie，保存到浏览器内
-
前端再次请求后端的时候（相同的域名），在请求头中带上cookie去请求
-
后端拿到前端传来的 cookie，找到对应的 session
-
后端从 session 中可以取出基于该 session 存储的变量（用户的登录信息、登录名）
用户管理接口
！！！ 必须鉴权
- 查询用户
- 允许根据用户名查询
- 删除用户
写代码流程
先做设计
代码实现
持续优化！！！（复用代码、提取公共逻辑 / 常量）
前后端交互
前端需要向后端发送请求
前端 ajax 来请求后端
axios 封装了 ajax
request 是 ant design 项目又封装了一次
追踪 request 源码：用到了 umi 的插件、requestConfig 是一个配置
代理
正向代理：替客户端向服务器发送请求，可以解决跨域问题
反向代理：替服务器统一接收请求。
怎么搞代理？
Nginx 服务器
Node.js 服务器
原本请求：http://localhost:8000/api/user/login
代理到请求：http://localhost:8080/api/user/login
