SpringBoot 3.2.0实战
1. 关键知识点
1.1 请求参数格式
- multipart/form-data
- application/json
1.2 响应数据格式
- application/json
2. 后端开发(SpringBoot 3.2.0)
2.1 接口实现的三大步
- 第一步:响应客户端请求(Controller)
- 第二步:实现业务逻辑(Service)
- 第三步:操作数据库(Mapper)
2.2 参数校验
-
- 在全局异常处理器中处理参数校验失败的异常
2.3 登录认证
- 所有的Controller都需要验证token, 此功能可交给拦截器(interceptor)来实现
2.4 获取用户信息
- 同一份信息,在 一个流程中只调用一次
2.5 更新用户基本信息
2.6 更新用户头像
2.7 更新用户密码
2.8 参数分组校验
2.9 自定义注解
2.10 文件上传
2.10.1 云服务(对象存储)
2.11 令牌主动失效机制
2.12 SpringBoot项目部署
3. 前端开发(Vue3+Element-Plus)
3.1 Vue3
3.1.1 前置知识
- Vue:是一款用于构建用户界面的渐进式的JavaScript框架
3.1.2 常用指令
3.1.2.1 v-for
3.1.2.2 v-bind
3.1.2.3 v-if & v-show
3.1.2.4 v-on
3.1.2.5 v-model
3.1…3 Vue生命周期
- 生命周期:指一个对象从创建到销毁的整个过程
- 生命周期的八个阶段:每个阶段会自动执行一个生命周期方法(钩子),让开发者有机会在特定的阶段执行自己的代码
3.1.4 Axios
3.1.5 全Vue环境安装
- 安装NodeJS之后,以管理员身份执行:
- 更换安装包的源
# 设置
npm config set registry http://registry.npm.taobao.org/
# 检查
npm config get registry
# 安装axios
npm install axios
3.1.6 创建Vue项目
- 创建项目及安装依赖
#创建项目
npm init vue@latest
#安装依赖
npm install
3.1.7 API风格
-
发送异步请求
-
异步转同步+代码优化 (使用async await同步获取服务器数据)
-
拦截器 (在请求或响应被 then 或catch 处理前拦截它们)
3.2 Element-Plus
什么是Element Plus
- ELement: 是饿了么团队研发的,基于 Vue 3,面向设计师和开发者的组件库。
- 组件:组成网页的部件,例如 超链接、按钮、图片、表格、表单、分页条等等
- 官网: https://element-plus.org/zh-CN/#/zh-CN
3.2.1 准备工作
npm install element-plus --save
3.3 文件上传
3.4 富文本编辑器
- 文章内容需要使用到富文本编辑器,这里咱们使用一个开源的富文本编辑器 Quill官网地址:
https://vueup.github.io/vue-quill/ - 安装:
npm install @vueup/vue-quill@latest --save
- 导入组件和样式:
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
- 页面长使用quill组件:
<quill-editor
theme="snow"
v-mode1:content="formModel.content"
contentType="html" >
</quill-editor>
4. 实战项目
4.1 需求
- 需要管理的项目
- 每个项目的增、删、改、查(CRUD:Create+Read+Update+Delete)
4.2 前端开发
4.2.1 环境准备
- 创建Vue工程
npm init vue@latest
- 安装依赖
# Element-Plus
npm install element-plus --save
#Axios
npm install axios
# Sass (CSS包)
npm install sass -D
- 目录调整
- 删除components下面自动生成的内容
- 新建目录api、utils、views
- 将资料中的静态资源拷贝到assets目录下
- 删除App.uve中自动生成的内容
4.2.2 开发步骤
4.2.3 注册页面
4.2.4 Vue路由
- 安装vue-router
npm install vue-router@4
4.2.5 Pinia状态管理(Token)
- 安装
npm install pinia
4.2.6 Axios请求拦截器
4.2.7 Pinia持久化存储
- Pinia默认是内存存储,当刷新浏览器的时候会丢失数据
- Persist插件可以将pinia中的数据持久化的存储
- 安装
npm install pinia-persistedstate-plugin