@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)

简介: 文章详细讲解了在SpringMVC中如何使用`@RequestMapping`进行路由映射,并介绍了前后端参数传递的多种方式,包括传递单个参数、多个参数、对象、数组、集合以及JSON数据,并且涵盖了参数重命名和从URL中获取参数的方法。

一、@RequestMapping 路由映射

  • 指定请求访问的路径
  • 既可以修饰类,又可以修饰方法

@RequestMapping支持Get、Post、Delete等多种请求方式

@RestController
@RequestMapping("/user")
public class HelloController {
    @RequestMapping("/sayhi")
    public String sayHi(){
        return "Hi,SpringBoot";
    }

    @RequestMapping("/sayhello")
    public String sayHello(){
        return "Hello,SpringBoot";
    }
}

假设该程序在本地运行,则访问的url路径为 localhost:8080/user/sayhi

     **/user**即类的路径,**/sayhi**是方法的路径

若类上没有@RequestMapping等注解进行路由映射的话,直接端口号后加方法的路径即可

    如:    localhost:8080**/sayhi**

注意: / 可以省略,但建议企业开发时,统一加上,前加后不加

@RequestMapping注解没有写属性名,默认是value

若要限制请求方式,使用method属性 如:

@RequestMapping(value = "/sayhi",method = RequestMethod.POST)
    public String sayHi(){
        return "Hi,SpringBoot";
    }

比如上面的代码就限制了/sayhi路径的访问必须是POST请求

二、参数传递

此处我们加上类路径/user避免路由重复(读者可忽略这句话,不影响)

1、传递单个参数

    @RequestMapping("/m1")
    public String m1(String name){
        return "接收到的参数name:" + name;
    }

后端接收单个参数,此处是name,字符串类型,并返回字符串

前端传过来的请求中需要带上name参数,需要名称完全一样,参数前用?与路由隔开

浏览器直接访问:

Postman构造请求(本地路由既可以用127.0.0.1,也可以用localhost):

底层逻辑:从请求的参数中,获取参数名为name的值,并给name赋值

2、传递多个参数

    @RequestMapping("/m2")
    public String m2(String name, Integer age){
        return "接收到的参数name:" + name + " ;age:" + age;
    }

后端接收多个参数,此处是name和age,字符串类型和整形,并返回字符串

前端传过来的请求中需要带上name参数和age参数,需要名称完全一样,参数前用?与路由隔开,不同的参数间用&隔开

参数发送的顺序可以任意调换

当多个参数传值时,可以不用每个参数都传值,不传值的参数默认是null(使用包装类的前提下)

此处不用age,用Integer的原因是如果使用基本类型,必须要传值,不传会报错,所以开发时,建议使用包装类

底层逻辑:从请求的多个参数中,获取参数名为name和age的值,并给对应名称的数据赋值

3、传递对象

    @RequestMapping("/m3")
    public String m3(Person person){
        return "接收到的参数person:" + person.toString();
    }

Person中有以下属性

后端接收一个对象或对象中的属性,此处是Person,并返回字符串

前端传过来的请求中可以依然用传递参数的方式,参数需要是对象中的属性名,需要名称完全一样,参数前用?与路由隔开,不同的参数间用&隔开

可以看到,用传递多个参数的方式依然可以,后端会自动读取参数中对象中名称一样的属性,对于没有的属性则不理睬

底层逻辑:从请求的参数中,自动识别与对象属性名一致的参数,并给对象中对应名称的属性赋值

4、后端参数重命名

应用场景:传过来的参数名称不方便改变,但又想改变后端中自己使用的参数名称,不想用传过来的参数名称

    @RequestMapping("/m4")
    public String m4(@RequestParam(value = "name", required = false) String username){
        return "接收到的参数name:" + username;
    }

后端:此刻用了@RequestParam后,前端传过来的参数为name(value中的值),会自动赋值给username

前端:参数名需要与value中的值保持一致

注意:如果进行了重命名,就必须要使用@RequestParam注解里的名字

底层逻辑:此处只是运用了@RequestParam注解实现了参数重命名,传递参数的逻辑与前面几种方式一致

5、传递数组

    @RequestMapping("/m6")
    public String m6(String[] arrayParam){
        return "接收到的参数arrayParam" + Arrays.toString(arrayParam) + ", 长度" + arrayParam.length;
    }

后端:接收参数是数组类型,可接收前端传来的数组类型参数

前端:当我们请求中,同一个参数有多个时,浏览器会帮我们自动给封装成一个数组

注意:参数名需完全一致,且和后端数组名相同,对应的value可以不同

底层逻辑:后端正常接收数组,前端(浏览器)发送请求时,若同一个参数有多个时,会自动将其封装成一个数组,发送给后端

6、传递集合

    @RequestMapping("/m7")
    public String m7(@RequestParam(required = false) List<String> listParam){
        return "接收到的参数listParam:" + listParam + ",长度:" +listParam.size();
    }

后端:接收参数类型为集合,并加上注解@RequestParam修饰,表示后端会将前端传来的参数自动解析为集合

前端:按数组的方式进行传参,当我们请求中,同一个参数有多个时,浏览器会帮我们自动给封装成一个数组

注意:传递集合和传递数组前端传递参数的方式是没有发生改变的,改变的是后端的处理方法


底层逻辑:@RequestParam表示将前端传来的参数自动解析成该注解修饰的类型(此处是集合),注解内参数意思为若前端没有传递参数,则自动将该类型赋值为null,避免空指针报错

7、传递JSON

    @RequestMapping("/m8")
    public String m8(@RequestBody Person person){
        return "接收到的参数person:" + person.toString();
    }

后端:@RequestBody注解来将请求体内容转换为一个Person对象
前端:以JSON格式来传递参数
注意:后端参数要加上@RequestBody注解进行修饰,表示自动将前端传来的参数换成需要的参数类型,传递Json数据这种传参方式被大量使用,咱数组、对象等的参数类型全部可以用JSON传递

底层逻辑:参数加上@RequestBody注解进行修饰,表示自动将前端传来的参数换成需要的参数类型,其实后端接收JSON参数的功能还是靠得该注解

8、获取url中的参数

    @RequestMapping("/m9/{userId}/{name}")
    public String m9(@PathVariable Integer userId, @PathVariable String name){
        return "userId:" + userId + ",name:" + name;
    }

后端:在url中用占位符占位,然后参数用@PathVariable修饰,表示从路径中取到该参数
前端:直接在url中传参,用 / 分隔
注意:可以获取一个,也可以获取多个,但是需要注意他们的顺序,请求格式必须和后端定义的url格式匹配,否则会取错数据甚至报错

底层逻辑: 前端直接在url中传参,用 / 分隔,后端先在url中用占位符占位,然后参数用@PathVariable修饰,表示从url中占的对应位置取得对应参数并赋值给自己的参数

9、上传图片/文件

    @RequestMapping("/m10")
    public String m10(@RequestPart MultipartFile file) throws IOException {
        // 打印文件名称
        System.out.println(file.getOriginalFilename());
        // 保存本地
        file.transferTo(new File("D:/临时,后续删除/" +file.getOriginalFilename()));
        return "success";
    }

后端:用MultipartFile类型的变量接收文件,参数使用@RequestPart注解,它用于接收文件上传
前端:直接发送文件/图片即可
注意:前端发送的文件名称必须和后端接受的参数名称完全一致,不然会报错

底层逻辑:用MultipartFile类型的变量接收文件,参数使用@RequestPart注解,它用于接收文件上传

目录
相关文章
|
1月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
158 1
|
2月前
|
前端开发 Java 物联网
智慧班牌源码,采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署
智慧班牌系统是一款基于信息化与物联网技术的校园管理工具,集成电子屏显示、人脸识别及数据交互功能,实现班级信息展示、智能考勤与家校互通。系统采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署与私有化定制。核心功能涵盖信息发布、考勤管理、教务处理及数据分析,助力校园文化建设与教学优化。其综合性和可扩展性有效打破数据孤岛,提升交互体验并降低管理成本,适用于日常教学、考试管理和应急场景,为智慧校园建设提供全面解决方案。
271 70
|
3月前
|
前端开发 算法 NoSQL
前端uin后端php社交软件源码,快速构建属于你的交友平台
这是一款功能全面的社交软件解决方案,覆盖多种场景需求。支持即时通讯(一对一聊天、群聊、文件传输、语音/视频通话)、内容动态(发布、点赞、评论)以及红包模块(接入支付宝、微信等第三方支付)。系统采用前后端分离架构,前端基于 UniApp,后端使用 PHP 框架(如 Laravel/Symfony),配合 MySQL/Redis 和自建 Socket 服务实现高效实时通信。提供用户认证(JWT 集成)、智能匹配算法等功能,助力快速上线,显著节约开发成本。
77 1
前端uin后端php社交软件源码,快速构建属于你的交友平台
|
2月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
178 12
|
3月前
|
JavaScript Java Docker
干货含源码!如何用Java后端操作Docker(命令行篇)
只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
6月前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
511 5
|
7月前
|
存储 前端开发 JavaScript
前端中对象的深度应用与最佳实践
前端对象应用涉及在网页开发中使用JavaScript等技术创建和操作对象,以实现动态交互效果。通过定义属性和方法,对象可以封装数据和功能,提升代码的组织性和复用性,是现代Web开发的核心技术之一。
|
8月前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
249 2
|
8月前
|
JSON 前端开发 数据格式
前端的全栈之路Meteor篇(五):自定义对象序列化的EJSON介绍 - 跨设备的对象传输
EJSON是Meteor框架中扩展了标准JSON的库,支持更多数据类型如`Date`、`Binary`等。它提供了序列化和反序列化功能,使客户端和服务器之间的复杂数据传输更加便捷高效。EJSON还支持自定义对象的定义和传输,通过`EJSON.addType`注册自定义类型,确保数据在两端无缝传递。
103 1
|
8月前
|
人工智能 前端开发 JavaScript
拿下奇怪的前端报错(一):报错信息是一个看不懂的数字数组Buffer(475) [Uint8Array],让AI大模型帮忙解析
本文介绍了前端开发中遇到的奇怪报错问题,特别是当错误信息不明确时的处理方法。作者分享了自己通过还原代码、试错等方式解决问题的经验,并以一个Vue3+TypeScript项目的构建失败为例,详细解析了如何从错误信息中定位问题,最终通过解读错误信息中的ASCII码找到了具体的错误文件。文章强调了基础知识的重要性,并鼓励读者遇到类似问题时不要慌张,耐心分析。
170 5