HTTP 客户端向服务端传递参数的4种方式 SpringMVC的对应接收方式

快来打我* 2022-12-30 10:41 14阅读 0赞

## Intro ##

本文暂不讨论不同的HTTP请求方法，只对前端向后端传递参数的方式进行测试总结。

前端向后端传递参数的4条路径：

1.  路由变量 `@PathVariable`
2.  请求参数 `@RequestParam`
3.  请求体 `@RequestBody`
4.  请求头(如Cookie就是一个很著名请求头，用于传递sessionid信息)  
    三个注解表示使用`SpringMVC`对应的接收方式。

## Java demo ##

*  后端web层接口：  
    该web接口会将从不同途径接收到的参数打印出来(作为响应数据返回给前端)。

@RestController
    @RequestMapping(path = "/test")
    public class FunctionTestController { 
    
        @PostMapping("/testArgs/{id}")
        public Map<String, Object> testArgs(
                HttpServletRequest request,
                @PathVariable("id") String id,
                @RequestParam("name") String name,
                @RequestParam("age") String age,
                @RequestBody User user
        ) { 
            Map<String, Object> result = new HashMap<>();
            result.put("查询参数对：", name + age);
            result.put("请求体：", user);
            result.put("路由参数：", id);
            String header01 = request.getHeader("wuyujin1997-01");
            String header02 = request.getHeader("wuyujin1997-02");
            Cookie[] cookies = request.getCookies();
            result.put("自定义请求头：", header01 + header02 + JSON.toJSONString(cookies));
            return result;
        }
    
    }

*  前端请求发送  
    使用 [postman][]模拟HTTP请求。
    
    1.  设置请求头(Cookie是规范中的，后面两个是自己定义的)  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70]
    2.  设置请求参数  
        （postman中可以在Params中一对一对填，也可以直接在URL中手动拼接参数对）![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70 1]

1.  路由变量  
    见URL中对应位置的 123  
    `@PostMapping("/testArgs/{id}")`  
    `@PathVariable("id") String id,`  
    `post localhost:8080/test/testArgs/123?name=111&age=bbb`中`123`占据了`id`的位置，会被服务端解析为id的值。
2.  设置请求体  
    设置步骤：`Body` \--> `raw` \--> 右侧下拉菜单`Text`切换为`JSON (application/json)` (本次请求发送的是JSON格式)  
    然后运行，得到数据。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70 2]

响应数据内容：

{ 
        "查询参数对：": "aaabbb",
        "请求体：": { 
            "gender": "男",
            "subject": "软件工程"
        },
        "自定义请求头：": "11112222[{\"httpOnly\":false,\"maxAge\":-1,\"name\":\"a\",\"secure\":false,\"value\":\"1\",\"version\":0},{\"httpOnly\":false,\"maxAge\":-1,\"name\":\"b\",\"secure\":false,\"value\":\"2\",\"version\":0},{\"httpOnly\":false,\"maxAge\":-1,\"name\":\"c\",\"secure\":false,\"value\":\"333\",\"version\":0}]",
        "路由参数：": "123"
    }

其中自定义请求头部分，`111`和`222`为获取到的自定义的请求头的值(前端要和服务端提前约定好，才能这样通信)，  
后面部分为Cookie请求头的数据：

[
      { 
        "httpOnly": false,
        "maxAge": -1,
        "name": "a",
        "secure": false,
        "value": "1",
        "version": 0
      },
      { 
        "httpOnly": false,
        "maxAge": -1,
        "name": "b",
        "secure": false,
        "value": "2",
        "version": 0
      },
      { 
        "httpOnly": false,
        "maxAge": -1,
        "name": "c",
        "secure": false,
        "value": "333",
        "version": 0
      }
    ]

## Others ##

*  传送数据的方式
    
    4种方式中，最常用的是查询参数对、请求体。  
    而路由变量较少见到(其实也就是服务端对URL的解析实现了这种规则而已，不止SpringMVC, express服务也实现了路由变量)  
    自定义请求头的话，Cookie就是一个很好的例子，用cookit请求头传递session相关的数据几乎是规范/约定。  
    而自定义其他请求头的话，不推荐。
 *  自定义请求头

关于自定义请求头，已有先例：  
`X-Forwarded-For`  
`X-Real-IP`  
这两个请求头是nginx服务器会加上的，用于记录调用链上的机器地址信息。  
但并非标准的HTTP请求头(X表示 eXtension 扩展)

也就是说：我们完全可以通过自定义请求头来完成前后端通信，但**不推荐**。

*  RESTful  
    是一种URL风格，可以更语义化地描述资源。  
    需要搭配不同的HTTP方法、路由变量，URL命名设计等，以遵循该规则。  
    见 [https://wuyujin.blog.csdn.net/article/details/111658284][https_wuyujin.blog.csdn.net_article_details_111658284]

[postman]: https://www.postman.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70]: /images/20221120/631e5438d55a45b3857ad05641b1e337.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201224224247282.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020122422534192.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3,size_16,color_FFFFFF,t_70
[https_wuyujin.blog.csdn.net_article_details_111658284]: https://wuyujin.blog.csdn.net/article/details/111658284