用户中心
# 企业做项目流程
- 需求分析
- 设计(概要设计、详细设计)
- 技术选型
- 初始化/引入需要的技术
- 写
Demo
,写代码(实现业务逻辑) - 测试(单元测试)
- 代码提交、代码评审
- 部署
- 发布
# 需求分析
- 登录、注册
- 用户管理(仅管理员可见)对用户的查询或修改
- 用户校验(仅部分用户使用等)
# 技术选型
- 前端:三件套 +
React
+Ant Design
组件库 +Umi
+Ant Design Pro(现成的管理系统)
- 后端:
Java
+Spring
+SpringMVC
+MyBatis
+MyBatis Plus
+SpringBoot
+MySQL
- 部署:服务器/容器(平台)
# 计划
# 初始化项目
- 前端初始化(20min)✅
- 初始化项目 ✅
- 引入一些组件之类的 ✅
- 框架介绍/项目瘦身 ✅
- 后端初始化(20min)
- 准备环境(MySQL 之类的) 验证是否安装完成 - 连接测试 ✅
- 初始化后端项目、引入框架 ✅
# 数据库设计
什么是设计数据库表?
答:有哪些表(模型)?表中有哪些字段?字段的类型?给数据库字段添加索引?
表与表之间的关联?
区分度不大的无需加索引,即性别不需要加索引
用户表:
id
(主键,用于标识身份) bigint
username
(用户昵称) varchar
userAccount
登录账号
gender
性别 tinyint
userPassword
密码 varchar
phone
电话 char/varchar
有人说电话固定是 11 位,但是总有一些地方要加+86
什么的,不一定是固定的
email
邮箱 varchar
userStatus
是否有效(比如是否封号) int
0-正常
avatarUrl
头像 varchar
createTime
创建时间(数据插入时间)datetime/timestamp
updateTime
更新时间(数据更新时间)datetime/timestamp
isDelete
是否删除(软删)tinyint
DROP TABLE IF EXISTS user;
create table user
(
id bigint auto_increment comment '主键id',
username varchar(256) null comment '用户昵称',
userAccount varchar(256) null comment '账号',
avatarUrl varchar(1024) null comment '用户头像',
gender tinyint null comment '性别',
userPassword varchar(512) not null comment '密码',
phone varchar(128) null comment '手机号',
email varchar(512) null comment '邮箱',
userStatus int default 0 not null comment '是否有效 0正常',
createTime datetime default CURRENT_TIMESTAMP null comment '创建时间',
updateTime datetime default CURRENT_TIMESTAMP null on update CURRENT_TIMESTAMP comment '更新时间',
isDelete tinyint default 0 null comment '是否删除',
constraint user_pk
primary key (id)
)
comment '用户';
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 自动生成器的使用
MybatixX
插件,自动根据数据库表生成domain
实体对象,自动生成mapper
操作数据库对象,生成mapper.xml
定义了mapper
对象和数据库的关联,可以在里面自己写 SQL,还生成了service
包含常用的增删改查、以及serviceImpl
实现类
# 登录/注册(20min)
前端
后端
- 规整项目目录 ✅
- 实现基本的用户(数据库)操作(操作
user
表) ✅- 模型
user
对象和数据库的字段关联,自动生成 ✅
- 模型
- 写登录逻辑 ✅
# 用户管理(20min)
- 前端
- 后端 ✅
# 三种初始化 java 项目的方法
- Github 搜索模板
- Spring 官网的模板生成器start.spring.io (opens new window)
- 直接在 IDEA 开发工具中生成 ✅
# 注册逻辑 ✅
- 用户在前端输入账号和密码以及校验码(TODO)
- 后端校验用户的账户、密码、校验密码是否符合规则
- 非空
- 账户:不小于 4 位
- 密码:不小于 8 位(>=8)
- 账户不能重复
- 账户不包含特殊字符
- 密码和校验密码相同
- 其他的校验
- 对密码进行加密(千万不能明文存储到数据库中)
- 向数据库插入用户数据
# 登录接口 ✅
接收参数:用户账户、密码
请求类型:
POST
请求参数很长时不建议使用
GET
请求体:
JSON
格式数据返回值:用户信息(脱敏)
# 逻辑
- 校验用户账户和密码是否安全
- 非空
- 账户长度不小于 4 位
- 密码不小于 8 位
- 账户不包含特殊字符
- 校验密码是否输入正确,要和数据库中的密文进行对比
- 配置
mybatis-plus
的逻辑删除 - 脱敏,隐藏敏感信息
- 记录用户的登录态(
session
),将其存储到服务器上,或者存到某个服务里,或者存到redis
里,这里使用默认的服务器tomcat
去记录。 - 返回安全的脱敏后的用户信息
# 如何知道是哪个用户登录了
- 连接服务器端后得到一个
session1
状态(匿名会话),返回给前端 - 当用户登录成功后,得到了登录成功的
session
,并且给该session
设置一些值,返回给前端一个设置cookie
的命令 - 前端接收到后端的命令,设置
cookie
保存到浏览器中 - 前端再次请求后端时,在请求头中带上
cookie
去请求 - 后端拿到前端传来的
cookie
,找到对应的session
- 再从
session
中可以取出基于该session
存储的变量(用户的登录信息、登录名、Token
等) - 需要在请求参数里加上
HttpServletRequest
# 控制层封装请求
@RestController
适用于编写
restful
风格的api
,返回值默认为json
类型
controller
层倾向于对请求参数本身的校验,不涉及业务逻辑本身,越少越好。
service
层是对业务逻辑的校验(有可能被controller
之外的类调用)
# 用户管理接口 ✅
!!!必须鉴权
- 查询用户 ✅
- 允许根据用户名查询 ✅
- 删除用户 ✅
# 前后端交互
前端需要向后端发送请求
前端ajax
来请求后端
axios
封装了ajax
antDesignPro
里的request
是它又进行了封装
追踪request
源码,用到了umi
的插件,同时requestConfig
是一个配置
可以在app.tsx
文件中进行配置接口请求地址
export const request: RequestConfig = {
timeout: 1000,
prefix: 'http://localhost:8080/api',
}
2
3
4
# 跨域正向代理处理方式
正向代理:替客户端发送请求
反向代理:替服务器接收请求
服务端设置接口全局前缀
server:
servlet:
context-path: /api
2
3
上述的配置请求地址的稍作修改
export const request: RequestConfig = {
timeout: 10000,
}
2
3
将proxy.ts
中的正向代理代码修改
dev: {
// localhost:8000/api/** -> https://preview.pro.ant.design/api/**
'/api/': {
// 要代理的地址 这里原先会是一个 https 的如果发现测试不通过,需要去掉https,换成http
target: 'http://localhost:8080',
// 配置了这个可以从 http 代理到 https
// 依赖 origin 的功能可能需要这个,比如 cookie
changeOrigin: true,
},
},
2
3
4
5
6
7
8
9
10
# 写代码流程
- 先做设计
- 代码实现
- 持续优化!!!(复用代码、提取公共逻辑/常量)