大二大三以来陆陆续续带过很多小朋友做后端,往往最多的问题就是:前端和后端之间怎么传参数?后端和数据库之间怎么传参数?这种层次之间传递参数的问题。
关于后端和数据库之间的传参,我们已经在STEP5中学会了使用JDBC的传统方式,或者使用例如MyBatis等ORM框架来帮助我们进行实现。
孑辞:STEP5.1 初识MyBatiszhuanlan.zhihu.com![7fe46db70d97ffbc6379d0c63dcfff4b.png](https://i-blog.csdnimg.cn/blog_migrate/b4e1172f6a87fecfb939aa5003f4dfe3.png)
那么前端和后端之间怎么进行传参呢?
在我们之前学习STEP4.4 写一个简易登录模块中,其实已经接触过了一个基本的接收参数的方法:
@GetMapping("/login/{username}/{password}")
public String login(@PathVariable(value = "username",required = true)String username,
@PathVariable(value = "password",required = true)String password){
如果对这一行代码不熟悉,可以回到我们的STEP4.4简单回忆一下。
这里再简单解释一下@PathVariable的含义:
例如对于上面这一行代码,我们只要把参数放在@GetMapping("/login/{username}/{password}")的{username}和{password}里,在我们的方法中就可以通过
- @PathVariable(value = "username",required = true)String username
- @PathVariable(value = "password",required = true)String password
来把收到的参数分别赋值给username和password。
如果简单总结一下,@PathVariable是一种“显式地把参数放在url中”的传参方式。
而这样一种传参方式可能导致url过长,而且Spring对于@PathVariable的处理会有一个比较复杂的流程,频繁使用这种方式来收参不是一个好的决策。
那么我们还可以使用什么方式来进行收参呢?
每种不同的收参方式,也意味着前端要有对应的不同的传参方式。
常见的方式有:Path,Query,Body,Form-data等。
以下我们会简单解释一下几种方式的不同,并给出相应的后台代码实现示例。而至于对应的前端如何传参,请移步到文章末尾的transfer-demo。
一、Path
获取路径参数,形如……/{argue1}/{argue2}……使用@PathVariable接收
Controller示例代码:
@PostMapping("/path/{id}/{name}/{age}")
public String getPath(@PathVariable("id")Integer id,
@PathVariable("name")String name,
@PathVariable("age")Integer age){}
二、Query
获取查询参数,形如……?argue1={argue1}&argue2={argue2}……使用@RequestParam接收
Controller示例代码:
@PostMapping("/query")
public String getQuery(@RequestParam("id")Integer id,
@RequestParam("name")String name,
@RequestParam("age")Integer age){}
三、Body
获取body参数,一般使用@RequestBody,用实体(可以理解为是简单的Java Bean)接收
Controller示例代码:
@PostMapping("/body")
public String getBody(@RequestBody Student student){}
四、Form-data
获取表单参数,一般不使用注解,用实体接收
Controller示例代码:
@PostMapping("/form_data")
public String getForm_data(Student student){}
最后附我们的transfer-demo的代码:
(前端逻辑在resourcesstatictest.js中)
transfer-demo
运行项目后打开resources/static文件夹的test.html即可
![be69a000132e3da6404f364f680e35de.png](https://i-blog.csdnimg.cn/blog_migrate/d6c14b89383287a69fcbcccc88b8b588.png)
![59ea0b111556ddc751d7cbb8896b87a9.png](https://i-blog.csdnimg.cn/blog_migrate/bcf2c0fc26b838084f74819c4e51df56.png)
单击start,可以看到四个弹窗,就是我们的前台发送了四个请求,分别由我们后台的四个方法来接收。
tips:
- 在项目的控制层中还注入了一个工具对象gson,这个会在我们的下一节中展开。
- 项目中有一个CorsConfig.java,在本节中没有涉及到,可以暂时不管。在之后的STEP6.5中会讲到,传送门:STEP6.5 同源策略与跨域资源共享