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 参数校验

• 4. 在全局异常处理器中处理参数校验失败的异常

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

4.2.8 未登录统一处理

5 Redis

5.1 简介

• 
  
  
  
  

5.2 下载与安装

• 下载

参考

• HTML + CSS + JS
• 后端（SpringBoot3.2.0) + 前端(Vue3+Element-Plus)