常见前端GET请求以及对应的Spring后端接收接口写法

ⅰ. 前端 GET 请求的常见写法

1. 直接拼接 URL 参数(最基础)
复制代码
export const getList = (current, size, project, header) => {
  return request({
    url: `/blade-bpConfigur/bpTable/list?current=${current}&size=${size}&project=${project}&header=${header}`,
    method: 'get'
  });
};

特点 :

• 手动拼接 URL,适合参数少且固定的场景。

• 需自行处理参数编码(如 encodeURIComponent)。

2. 使用 params 对象(推荐)
复制代码
export const getList = (current, size, params) => {
  return request({
    url: '/blade-bpConfigur/bpTable/list',
    method: 'get',
    params: {  // Axios/umi-request 会自动将 params 拼接到 URL
      current,
      size,
      ...params  // 将params属性展开
    }
  });
};

特点 :

• 代码更简洁,自动处理 URL 编码。

• 参数可动态扩展。

a. 3. 使用 URLSearchParams
复制代码
const query = new URLSearchParams({
  current: 1,
  size: 10,
  project: "隆基西安北郊",
  header: "梁恩伟"
}).toString();

export const getList = () => {
  return request({
    url: `/blade-bpConfigur/bpTable/list?${query}`,
    method: 'get'
  });
};

特点 :

• 浏览器原生 API,适合非 Axios 场景。

• 自动处理特殊字符编码。

ⅰ. 后端对应的GET请求接收方式

1. 方式一:实体类直接接收(推荐)
复制代码
@GetMapping("/list")
public R<IPage<BpTableVO>> list(BpTable bpTable, Query query) {
    // Spring 自动将 URL 参数注入到 bpTable 和 query 对象
    IPage<BpTable> pages = bpTableService.page(Condition.getPage(query), Condition.getQueryWrapper(bpTable));
    return R.data(BpTableWrapper.build().pageVO(pages));
}

匹配规则 :

• URL 参数名必须与 BpTable 实体字段名一致(如 project → BpTable.project)。

• 分页参数 current、size 会被注入到 Query 对象。

原因:

Spring 的隐式绑定规则,当参数是 自定义对象(如 BpTable**)** 时,Spring 会 自动遍历其字段名,尝试从 URL 参数中匹配同名值注入

多余参数 :

实体类中存在但前端未传递的字段(如实体类有 address 字段,但 JSON 中无此字段)。

  • 结果 :该字段保持 null 或默认值,不会报错。

变量名不匹配 :

实体类字段名与 JSON 键名不一致(如实体类用 projectName,JSON 中用 project)。

  • 结果 :该字段无法自动注入,保持 null。
2. 方式二:使用 @RequestParam 注解
复制代码
@GetMapping("/list")
public R<IPage<BpTableVO>> list(
    @RequestParam String project,
    @RequestParam String header,
    @RequestParam Integer current,
    @RequestParam Integer size
) {
    BpTable bpTable = new BpTable();
    bpTable.setProject(project);
    bpTable.setHeader(header);
    
    Query query = new Query();
    query.setCurrent(current);
    query.setSize(size);
    
    IPage<BpTable> pages = bpTableService.page(Condition.getPage(query), Condition.getQueryWrapper(bpTable));
    return R.data(BpTableWrapper.build().pageVO(pages));
}

原因:Spring MVC 默认要求显式声明非对象参数的来源。

适用场景 :

• 参数较少时使用,灵活性较差。

• 需手动构建实体类。

默认行为 :

若方法参数标注了 @RequestParam,但前端未传递同名参数,Spring 会抛出:
MissingServletRequestParameterException: Required parameter 'xxx' is not present。

3. 方式三:接收 Map 或 MultiValueMap
复制代码
@GetMapping("/list")
public R<IPage<BpTableVO>> list(@RequestParam Map<String, Object> params) {
    BpTable bpTable = new BpTable();
    bpTable.setProject((String) params.get("project"));
    bpTable.setHeader((String) params.get("header"));
    
    Query query = new Query();
    query.setCurrent(Integer.parseInt(params.get("current").toString()));
    query.setSize(Integer.parseInt(params.get("size").toString()));
    
    IPage<BpTable> pages = bpTableService.page(Condition.getPage(query), Condition.getQueryWrapper(bpTable));
    return R.data(BpTableWrapper.build().pageVO(pages));
}

特点 :

• 适合动态字段(参数名不固定)。

• 需手动处理类型转换。

相关推荐
架构技术专栏6 分钟前
Agent 工具调用:从工具声明到执行反馈
前端·人工智能·后端
别动我齐刘海1 小时前
C++ 工程化学习
java·linux·前端·c++·学习·机器学习·机器人
码事漫谈1 小时前
你让AI干的活,它可能只干了十分之一——而你根本看不出来
后端
Wx-bishekaifayuan1 小时前
express皖美特色农产品网售系统53118-计算机课程设计、毕业设计
人工智能·spring boot·后端·python·课程设计·express·旅游
志尊宝2 小时前
Vue3 零基础每日笔记(071):暗黑模式与主题切换——CSS 变量 + Element Plus 暗黑方案
前端·css·笔记·vue·html·前端开发·软件开发
Wx-bishekaifayuan2 小时前
springboot汉中旅游服务平台41442-计算机课程设计、毕业设计
spring boot·后端·python·django·课程设计·express·旅游
code2cat2 小时前
Java进阶篇之AtomicLongFieldUpdater:把累计额度留在对象字段中
java·cas·并发编程
WeiXin_DZbishe2 小时前
基于springboot城市公交实时运营与调度系统-计算机毕设 附源码【课程设计】66173
java·vue.js·spring boot·后端·python·php·课程设计
泡茶喝茶写代码2 小时前
A股量化数据工程:从 REST 接口到策略信号(第 18 篇):放量缩量异动扫描
java·python·股票数据api·股票数据api接口·股票api数据接口·股票量化数据api·股票量化数据接口
刘发财2 小时前
前端如何生成10000页PDF文件?
前端·javascript·开源