【VUE+SpringBoot】GET请求踩过的坑

最新推荐文章于 2024-07-29 14:40:45 发布

·Timidity

最新推荐文章于 2024-07-29 14:40:45 发布

阅读量211

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_38238995/article/details/133160283

本文主要探讨了在Vue应用中使用Axios进行GET请求时遇到的问题，包括GET请求不能使用data传参而需用params，以及params包含多个对象时的序列化问题。在后端SpringBoot3中，当Controller的GET方法接收两个对象参数时，可能出现参数混淆或无法自动装配的问题。通过引入qs库序列化params和使用@InitBinder与@ModelAttribute注解可以解决这些问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端

Axios的GET请求

1.GET无法使用data传参,得使用params

http.get<PageResult<LoginLogVo>, PageParamDto<LoginLogDto>>({
    url: '/sys/v1/list',
    // data 无法传参
    // data: pageParamDto,
    params: pageParamDto
  })

2.params属性值为多个对象时

interface PageParamDto<T> {
  pageParam: PageParam
  dto?: T
}

params属性都为多个对象时,默认序列化为:

pageParam[currentPage]=2&pageParam[pageSize]=5&dto[userId]=10001&dto[location]=北京

后端无法解析这种格式对象

解决方案:使用 qs 序列化params参数

pageParam.currentPage=2&pageParam.pageSize=5&dto.userId=10001&dto.location=北京

import qs from 'qs'

// params序列化
paramsSerializer: (params) => {
  return qs.stringify(params, { indices: false, allowDots: true, arrayFormat: 'repeat' })
}

// AxiosRequestConfig 中 paramsSerializer属性
export interface AxiosRequestConfig<D = any> {
  url?: string;
  method?: Method | string;
  baseURL?: string;
  params?: any;
  paramsSerializer?: ParamsSerializerOptions | CustomParamsSerializer;
  ...
}

qs更多使用方法: https://github.com/ljharb/qs

后端

SpringBoot3中Controller的GET方法

1.方法使用两个对象接收参数时

@Operation(summary = "分页列表")
@GetMapping
public ApiResult<PageResult<LoginLogVO>> list(PageParam pageParam, LoginLogDTO dto, HttpServletRequest request) {
    return ApiResult.data(loginLogService.list(pageParam, dto));
}

GET参数为下列示例;可自动装配属性, 当两个对象中有相同字段时,值会发生混淆

currentPage=2&pageSize=5&userId=10001&location=北京

GET参数为下列示例;无法自动装配属性

pageParam.currentPage=2&pageParam.pageSize=5&dto.userId=10001&dto.location=北京

解决方法: 使用@InitBinder(“pageParam”)和@ModelAttribute(“pageParam”)指定参数前缀

@InitBinder("pageParam")
public void init1(WebDataBinder binder) {
    binder.setFieldDefaultPrefix("pageParam.");
}
@InitBinder("dto")
public void init2(WebDataBinder binder) {
    binder.setFieldDefaultPrefix("dto.");
}

@Operation(summary = "分页列表")
@GetMapping
public ApiResult<PageResult<LoginLogVO>> list(@ModelAttribute("pageParam") PageParam pageParam,@ModelAttribute("dto") LoginLogDTO dto, HttpServletRequest request) {
    return ApiResult.data(loginLogService.list(pageParam, dto));
}