Java获取前端不同请求方式的参数

---

---

一. 前言

随着前端后端分离项目的普及，一些单体架构的项目也渐渐退出舞台，本篇文章主要是总结一下前后端交互时前端的一些请求方式携带的参数后端该如何编写接口进行获取，在此之前我觉得有必要先进行一些基础知识的铺垫，这样更有利于各位读者朋友们对后文的理解。

1. 请求类型

在前端开发中一共有八种请求，分别为：GET，POST，PUT，DELETE，TRACE，HEAD，OPTIONS，CONNECT，但是最为常用的只有GET请求和POST请求

• GET请求：常以路径参数和查询字符串的方式进行参数传递
• POST请求：将参数存放在请求体中进行参数的传递

POST常用于大量参数或者文件等数据的传输相比于GET请求也更加的美观，而GET请求相比于POST请求可读性更好，总之是各有各的优点，具体使用依业务场景而定。

2. 数据提交方式

在前端访问后端接口时，都会设置一个属性Content-Type的值，这个表示设置数据的提交方式。
更多细节方面可以参考这篇文章：点击跳转
常见的有：

• Content-Type：application/x-www-form-urlencoded：默认的提交方式，传递的参数以key-value的形式进行传递。
• Content-Type：multipart/form-data：用于文件上传
• Content-Type：application/json：以JSON的格式进行传递

请求的方式不同 Content-Type的值也会不同，一般一些ajax请求库都帮我们封装好了，无需我们担心，

二. 不同请求方式参数的获取

下面我将以前端常用的ajax库axios来模拟请求携带参数，再从后端开发的的角度获取这些参数：

1. get¶ms

前端代码：

//axios普通get请求
//方法名为test,传入数据value
function test(value) {
  axios({
    //请求方式
    method:'get',
    //后端接口路径
    url:'/sys/test',
    //注意这里使用的是params,该属性负责把属性名和属性值添加到url后面(以查询字符串的方式)，一般和get配合使用，但也能和post配合使用
    params: {
      //attributeName为属性名，value为属性值
      attributeName:value
    }
  }).then((response) => {
    //response是一个返回的promise对象，该注释所在的这行一般对该promise对象进行处理从而获取数据
  }).catch((error) => {
    //对error进行处理
  })
}
 

后端代码：

//普通get请求时对应的接收
@GetMapping("/sys/test")
public void test(@RequestParam(value = "attributeName") String attributeName){
    //axios使用params进行传值，而Java就需要用到@RequestParam来接收params的值，value后的值要对应上params里的属性名，即attributeName，若不写，则value默认为String后的attributeName这一属性名，而且一个请求能拥有多个@RequestParam
}

2. get&路径参数

前端代码：

//axios使用restful规范的get请求
 
//方法名为test,传入数据value
function test(value) {
  axios({
    //请求方式
    method:'get',
    //后端接口路径+属性值;注意！！！路径后面有反斜杠/，注意不要写漏了，不然value就会变成路径的一部分，请求路径就会变成/sys/test后面跟上value的值，从而导致404
    url:'/sys/test/'+value,
  }).then((response) => {
    //response是一个返回的promise对象，该注释所在的这行一般对该promise对象进行处理从而获取数据
  }).catch((error) => {
    //对error进行处理
  })
}

后端代码：

//使用restful请求时对应的接收
@GetMapping("/sys/test/{accept}")
public void test(@PathVariable("accept") String(传进来的数据的类型) attributeName){
    //axios使用restful的方式进行传值，而Java就需要用到@PathVariable来接收url后的值，/sys/test/{accept}里的accept必须和@PathVariable("accept")里的accept名字一致，而且一个请求能拥有多个@PathVariable
}

3. post¶ms

前端代码：

//axios使用post+params请求
 
//方法名为test,传入数据value
function test(value) {
  axios({
    //请求方式
    method:'post',
    //后端接口路径
    url:'/sys/test',
    //注意这里使用的是params,该属性负责把属性名和属性值添加到url后面，一般和get配合使用，但也能    和post配合使用
    params: {
      //attributeName为属性名，value为属性值
      attributeName:value
    }
  }).then((response) => {
    //response是一个返回的promise对象，该注释所在的这行一般对该promise对象进行处理从而获取数据
  }).catch((error) => {
    //对error进行处理
  })
}

后端代码：

//post+params请求时对应的接收
@PostMapping("/sys/test")
public void test(@RequestParam(value = "attributeName") String attributeName){
    //axios使用params进行传值，而Java就需要用到@RequestParam来接收params的值，value后的值要对应上params里的属性名，即attributeName，若不写，则value默认为String后的attributeName这一属性名，而且一个请求能拥有多个@RequestParam
}

4. post&data

前端代码：

//axios使用post+data请求
//方法名为test,传入js对象obj,js对象放属性和属性值,例如obj:{userName:张三，age:18}
function test(obj) {
  axios({
    //请求方式
    method:'post',
    //后端接口路径
    url:'/sys/test',
    //注意这里使用的是data,该属性负责把属性名和属性值添加到请求体里面，一般和post配合使用,而且不要用{}把obj对象包裹起来，不然后端无法解析前端传过来的JSON数据
    data: obj
  }).then((response) => {
    //response是一个返回的promise对象，该注释所在的这行一般对该promise对象进行处理从而获取数据
  }).catch((error) => {
    //对error进行处理
  })
}

后端代码：

//Java后端
//post+data请求时对应的接收
@PostMapping("/sys/test")
public void test(@RequestBody People people){
    //axios使用post+data进行传值，而Java就需要用到@RequestBody来接收data的值，obj里的属性名与people实体类的属性名相同，obj里的属性名和people的属性名就能进行动态绑定从而把obj的属性值set进people实体类里，而一个请求只能拥有一个@RequestBody；注意！！！ obj对象里的属性名一定得和people实体类里的属性名一模一样，因为obj对象里的属性名与people实体类里的属性名匹配时，大小写敏感，即区分大小写
 
//对应的People实体类
public class People{
 
    private String userName;
    
    private Integer age;
 
    public String getUserName() {
        return userName;
    }
 
    public void setUserName(String userName) {
        this.userName = userName;
    }
 
    public Integer getAge() {
        return age;
    }
 
    public void setAge(Integer age) {
        this.age = age;
    }
 
}

值得注意的是：obj对象里的属性名一定得和people实体类里的属性名一模一样，因为obj对象里的属性名与people实体类里的属性名匹配时，大小写敏感，即区分大小写。
这里只是简单介绍详细可以参考这篇文章：点击跳转