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

在这里插入图片描述

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

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 富文本编辑器

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

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/e4416276691d4731af1cd78259492b3f.png

4.2.8 未登录统一处理

在这里插入图片描述

5 Redis

5.1 简介

  • 在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

5.2 下载与安装

参考

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值