目录
学习目标:开始自己写项目,复习知识点!把提前发现的问题就地解决!完整的了解做项目的思路,接触企业级的开发技术,这个流程结束后,自己个人可以轻松做出管理系统!
企业做项目的流程
需求分析-->设计(概要设计、详细设计)-->技术选项-->初始化/引入需要的技术-->写一个Demo-->写代码(实现业务逻辑)-->测试(单元测试)-->代码提交/代码评审-->部署-->发布
需求分析
1.登录/注册
2.用户管理(仅管理员可见)对用户的查询或修改
3.用户校验
技术选型
前端:三件套+React+组件库Ant Design + Umi + Ant Design Pro(现成的管理系统)
Ant Design - 一套企业级 UI 设计语言和 React 组件库
umi首页、文档和下载 - 可插拔的企业级 React 应用框架 - OSCHINA - 中文开源技术交流社区
开箱即用的中台前端/设计解决方案 - Ant Design Pro

后端:java + spring +springmvc +mybitis + mybits-plus + spring boot +mysql
部署:服务器/容器(平台)


技术选型
前端:三件套+React+组件Ant Design + Umi +Ant Design Por(现成的管理系统)
后端:
• java
•spring(依赖注入框架,帮助你管理 Java 对象,集成一些其他的内容)
•springmvc (web 框架,提供接口访问、restful接口等能力)
• mybatis Cava 操作数据库的框架,持久层框架,对jdbc 的封装)
mybatis-plus(对mybatis 的增强,不用写 sql也能实现增删改查)
•springboot (快速启动/快速集成项目。不用白己管理 spring 配置,不用自己整合各种
框架)
•junit 单元测试库
•mysal数据库
部署:服务器 /容器(平台)
yarn是个依赖包安装工具
安装依赖


3种初始化Java 项目的方式
1. GitHub 搜现成的代码
2. SpringBoot 官方的模板生成器 (https://start.spring.io/)
3.直接在 IDEA 开发工具中生成 /
如果要引入 java 的包,可以去maven 中心仓库寻找 (http://mvnrepository.com/)
数据库设计
什么是数据库?存数据的数据库里有什么?
数据表 (理解为 excel 表格)
java 操作数据库?程序代替人工
什么是设计数据库表?
有哪些表 (模型)?表中有哪些字段?字段的类型?数据库字段添加素引1? 表与表之问的关
联?
举例:性别是否需要加索引?
用户表设计
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:包含常用的增删改查
• servicelmpl:具体实现 service
从而提高开发效率!
注册逻辑设计
1.用户在前端输入账户和密码、以及校验码 (todo)
2.校验用户的账户、密码、校验密码,是否符合要求
a.非空
b.账户长度 不小于4位
c.密码就 不小子 8位吧
d.账户不能車复
e.账户不包含特殊字符
f.密码和校验密码相同
3.对密码进行加密(密码千万不要直接以明文存储到数据库中)
4. 向数据库插入用户数据
登录功能
接口设计
接受参数:用户账户、密码
请求类型:POST
请求体:JSON 格式的数据
请求参数很长时不建议用 get
返回值:用户信息(脱敏)
登录逻辑
1.校验用户账户和密码是否合法
a.非空
b.账户长度不小于4位
c.密码就不小于 8位
d.账户不包含特殊字符
2.校验密码是否输入正确,要和数据库中的密文密码去对比
3.信息脱敏,隐藏敏感信息,防止数据库中的字段泄露
4.我们要记录用户的登录态 (session),将其行到服务器上(用后端 Spring Boot 框架封
装的服务器 tomcat 去记录)cookie
5. 返回脱敏后的用户信息
实现
控制层 Controller 封装请求
application.yml 指定接口全局路径前缀:
servlet: context-path: /api
控制器注解:
@RestController 适用于编写 restful 风格的 api,返回值默认为 json 类型
校验写在哪里?
controller 层倾向于对请求参数本身的校验,不涉及业务逻辑本身(越少越好)
service 层是对业务逻辑的校验(有可能被 controller 之外的类调用)
如何知道是哪个用户登录了?
javaweb 这一块的知识
1.连接服务器端后,得到一个session 状态(匿名会话),返回给前端
2.登录成功后,得到了登录成功的 session,并目给该sessio n设置一些值(比如用户信
息),返回给前端一个设置cookie 的”命令“session => cookie
3.前端接收到后端的命令后,设置 cookie,保存到浏览器内
4. 前端再次请求后端的时候(相同的域名),在请求头中带上cookie去请求
5.后端拿到前端传来的 cookie,找到对应的 session
6.后端从 session 中可以取出基于该 session 存储的变量(用户的登录信息、登录名)
用戶管理
接口设计关键:必须鉴权!!!
1.查询用户(允许根据用户名查询)
2.删除用户
写代码流程
1.先做设计
2. 代码实现
3.持续优化!!!(复用代码、提取公共逻辑 / 常量)
前后端交互
前端需要向后端发送请求才能获取数据/ 执行操作。
怎么发请求:前端使用 ajax 来请求后端
前端请求库及封装关系
axios 封装了 aiax
request 是ant design 项目又封装了一次
追踪request 源码:用到了umi 的插件、requestConfig 配置文件
代理
正向代理:替客户端向服务器发送请求,可以解决跨域问题
反向代理:替服务器统一接收请求。
怎么实现代理?
Nginx 服务器
Nodejs 服务器
前端框架介绍
Ant Design Pro (Umi框架)权限管理
• app.tsx:项目全局入口文件,定义了整个项目中使用的公共数据(比如用户信息)
•access.ts 控制用户的访问权限
获取初始状态流程:首次访问页面(刷新页面),进入app.tsx,执行 getlnitialState 方法,
该方法的返回值就是全局可用的状态值。
• Procomponents 高级表单
1.通过 columns 定义表格有哪些列
2.columns 厲性
datalndex 对应返回数据对象的属性
title 表格列名
copyable 是否允许复制
ellipsis 是否允许缩略
valueType:用于声明这一列的类型 (date Time、select)
框架关系
Ant Design 组件库 =>基于 React 实现
Ant Design Procomponents => 基于 Ant Design 实现
Ant Design Pro 后台管理系统二>基于 Ant Design + React + Ant Design Procomponents
+其他的库实现
其他知识
MFSU: 前端编译优化
后端优化
通用返回对象
目的:给对象补充一些信息,告诉前端这个请求在业务层面上是成功还是失败
200, 404, 500, 502. 503
{
"name": "yupi"
}
↓
// 成功
{
"code": 0 // 业务状态码
"data": {
"name": "yupi"
},
"message": "ok"
}
// 错误
{
"code": 50001 // 业务状态码
"data": null
"message": "用户操作异常、xxx"
}
自定义错误码,返回类支持返回正常和错误
封装全局异常处理器
实现
1.定义业务异常类
日.相对于 java 的异常类,支持更多字段
b. 白定义构造函数,更灵活/快捷的设置字段
2.编亏全局异常处理器(利用 Spring AOP, 在调用方法前后进行额外的处理)
作用
1.捕获代码中所有的异常,内部消化,让前端得到更详细的业务报错/信息
2.同时屏蔽掉项目框架本身的异常(不暴露服务器内部状态)
3.集中处理,比如记录日志
前端优化
全局响应处理
应用场景:我们需要对接口的 通用响应 进行统一处理,比如从response 中取出 diata;或者
根据code 去集中处理错误,比如用户末登录、没权限之类的。
优势:不用在每个接口请求中都去写相同的逻辑
实现:参考你用的请求封装工具的官方文档,比如 umi-request
(https://github.com/umijs/umi-request#interceptor.
https://blog.csdn.net/huantai3334/article/details/116730020) •如果你用axios, 叄考
axios 的文档。
创建新的文件,在该文件中配置一个全局请求类。在发送请求时,使用我们白己的定义的全
局请求类。
用户校验
仅适用于用户可信的情况
先让用户自己填:2-5位编号,全凭自觉。
后台补充对编号的校验:长度校验、唯一性校验
前端补充输入框,适配后端。
后期拉取数据,定期清理违规用户
多环境
参考文章:https://blog.csdn.net/weixin_41701290/article/ details/120173283
本地开发:localhost (127.0.0.1)
多环境:指同一套项目代码在不同的阶段需要根据实际情况来调螯配置并且部署到不同的机
器上
为什么需要?
1.每个环境互不影响
2.区分不同的阶段:开发/测试/生产
3.对项目进行优化:
a.本地日志级别
b.精简依赖,节省项目体积
c.项目的环境/ 参数可以调整,比如 JVM 参数
针对不同环境做不同的事情。
多环境分类:
1. 本地环境(自己的电脑) localhost
2.开发环境(远程开发)大家连同一台机器,为了大家开发方便
3.测试环境(测试)开发/测试/产品,单元测试/性能测试/功能测试 / 系统集成测
试,独立的数据库、独立的服务器
4.预发布环境(体验服):和正式环境一致,正式数据库,更严谨,查出更多问题
5.正式环境(线上,公开对外访问的项目):尽量不要改动,保证上线前的代码是 “完美”运行
6.沙箱环境(实验环境):为了做实验
前端多环境实战
•请求地址
开发环境:localhost:8000
线上环境:user-backend.code-nav.cn
startFront(env) {
if(env === 'prod') {
// 不输出注释
// 项目优化
// 修改请求地址
} else {
// 保持本地开发逻辑
}
}
用了 umi 框架,build 时会自动传入 NODE_ENV == production 参数,start NODE_ENV 参数为 development
启动方式
开发环境:npm run start(本地启动,监听端口、自动更新)
线上环境:npm run build(项目构建打包),可以使用 serve 工具启动(npm i -g serve)
项目的配置
不同的项目(框架)都有不同的配置文件,umi 的配置文件是 config,可以在配置文件后添加对应的环境名称后缀来区分开发环境和生产环境。参考文档:https://umijs.org/zh-CN/docs/deployment
开发环境:config.dev.ts
生产环境:config.prod.ts
公共配置:config.ts 不带后缀
后端多环境实战
SpringBoot 项目,通过 application.yml 添加不同的后级来区分配置文件
可以在启动项目时传入环境变量:
java -jar .\user-center-backend-0.0.1-SNAPSHOT.jar --spring.profiles.acti
主要是改:
•依赖的环境地址
数据库地址
缓存地址
消息队列地址
项目端口号
•服务器配置
项目部署
参考文章:https://www.bilibili.com/read/cv16179200
需要 Linux 服务器(建议大家用 centos 8+ /7.6以上