目录
一、这篇文章是基础交互教学系列的续作
二、发送请求时,携带发送的数据json格式的参数:data
三、携带token请求头,进行JWT校验
四、实现throw抛出异常,并交互显示在前端的界面
一、这篇文章是基础交互教学系列的续作
大家可以看看我之前的文章,里面有详细的搭建环境过程:
SpringBoot3 + Vue3 由浅入深的交互 基础交互教学_springboot和vue怎么交互-CSDN博客
二、发送请求时,携带发送的数据json格式的参数:data
之前只是讲解了如何路径参数的方式发起和响应请求,这次将会讲解通过json格式参数发起和响应请求:
以登录界面为例,将向后端发送表单
首先通过ref创建form的表单
const form = ref({username:'',password:'',
})
用户在输入账号和密码后,通过点击登录按钮,触发登录的事件:
const handleLogin = async () => {const response = await apiUserLoginService(form.value);if (response && response.code === 200) {const token = response.data;// 存储token到localStoragelocalStorage.setItem('token', token);ElMessage({ type: 'success', message: '登录成功!' });router.push('/home');} };
发现没有,直接传入的是表单的值:
在api/userApis.js中:
这里将定义前端发送的数据请求方法和数据
import request from '@/utils/request.js'export const apiUserLoginService = (data)=>{return request.post('/user/login',data)
}
后端的代码,接收请求的参数使用的是@RequestBody注解
@PostMapping("/login")public Result<String> loginByPassword(@RequestBody UserLoginForm userLoginForm){String token = userService.loginByPassword(userLoginForm);return !StringUtil.isNullOrEmpty(token) ? Result.success(token):Result.fail(ResultCodeEnum.FAIL);}
其中UserLoginForm类定义的变量,对应着前端form表单发送过来的参数名username和password
@Data
public class UserLoginForm {private String username;private String password;}
三、携带token请求头,进行JWT校验
在登录的时候存入token的参数
const handleLogin = async () => {const response = await apiUserLoginService(form.value);if (response && response.code === 200) {const token = response.data;// 存储token到localStoragelocalStorage.setItem('token', token);ElMessage({ type: 'success', message: '登录成功!' });router.push('/home');} };
修改utils/request.js中的代码:
使每次请求如果存在token则会携带token进行校验
import axios from "axios";
import { ElMessage } from "element-plus";const baseURL = '/api';const token = localStorage.getItem("token");
const instance = axios.create({baseURL,headers: {"Content-Type": "application/json","Authorization":token || []},
})instance.interceptors.response.use(result=>{return result.data;},err=>{ElMessage({ type: 'warning', message: err.response.data.message});return Promise.reject(err);})export default instance;
关于JWT后端校验的代码,大家可以看看我之前写的JWT认证校验这篇文章,里面有更详细的讲解,这里我就不多赘述了
JWT 认证校验 从理论到实战(登录校验)_jwt签名校验-CSDN博客
四、实现throw抛出异常,并交互显示在前端的界面
throw抛出异常,大家想必在项目中经常使用吧,还是以登录为例:
如果登录的用户不存在,则会抛出用户不存在的异常
//1.判断用户是否存在User user = selectUserByName(username);if(user == null){throw new BusinessRuntimeException(ResultCodeEnum.ACCOUNT_NOT_EXIST);}
直接抛出异常,前端是无法获取到的,这时需要创建一个全局异常类,将捕获到的异常返回给前端,这样前端就可以通过异常的信息进行显示
exception/GlobalException中,定义了处理自定义抛出的异常类BusinessRuntimeException,并捕获到的异常将返回给前端
@ControllerAdvice
public class GlobalException {// 处理 BusinessRuntimeException@ExceptionHandler(BusinessRuntimeException.class)public ResponseEntity<Object> handleBusinessException(BusinessRuntimeException ex, WebRequest request) {Map<String, Object> body = new HashMap<>();body.put("message", ex.getResultCodeEnum().getMsg());body.put("code",ex.getResultCodeEnum().getCode());return new ResponseEntity<>(body, HttpStatus.BAD_REQUEST);}
}
然后前端就只需要将该异常进行显示出来,提示用户即可完成了交互