当前位置：首页 > article >正文

SpringBoot3 + Vue3 由浅入深的交互基础交互教学2

article 2024/12/4 16:01:43

一、这篇文章是基础交互教学系列的续作

二、发送请求时，携带发送的数据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到localStorage
    localStorage.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到localStorage
    localStorage.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);
    }
}

然后前端就只需要将该异常进行显示出来，提示用户即可完成了交互