专注于 JetBrains IDEA 全家桶,永久激活,教程
持续更新 PyCharm,IDEA,WebStorm,PhpStorm,DataGrip,RubyMine,CLion,AppCode 永久激活教程

spring Boot手把手教学(10): 前后端传参接收的N种方式

  • 1、前言
  • 2、请求参数
  • 3、实例分析
    • 3.1 GET 路径参数
    • 3.2 GET 单个参数
    • 3.3 GET 接收参数为List
    • 3.4 POST单个接收参数
    • 3.5 POST参数为List
  • 4、完整代码

1、前言

实际项目中,大多数项目,前后端是分离的。前端发HTTP请求到后端Server,然后后端接收参数做相应业务逻辑。

首先先说下请求类型:

GET GET方法请求一个指定资源的表示形式. 使用GET的请求应该只被用于获取数据.

HEAD HEAD方法请求一个与GET请求的响应相同的响应,但没有响应体.

POST POST方法用于将实体提交到指定的资源,通常导致在服务器上的状态变化或副作用.

PUT PUT方法用请求有效载荷替换目标资源的所有当前表示。

DELETE DELETE方法删除指定的资源。

CONNECT CONNECT方法建立一个到由目标资源标识的服务器的隧道。

OPTIONS OPTIONS方法用于描述目标资源的通信选项。

TRACE TRACE方法沿着到目标资源的路径执行一个消息环回测试。

PATCH PATCH方法用于对资源应用部分修改。

实际上常用的类型也就是GET和POST,GET是从服务器获取资源,POST是提交资料到服务器

不过很多开发的同学,都不区分两者的区别,最好还是区分一下,两者毕竟有所不同;

那么HTTP 请求都有什么类型的参数呢?

2、请求参数

大多有这三类请求参数类型:

1、 (GET)请求路径参数用 @PathVariable : http://localhost:9002/test/user/{userId}
2、 (GET)URL中存在查询参数用 @RequestParam: http://localhost:9002/test/get?name=11&age=22
3、 (POST) 参数存在于request body中用 @RequestBody: 参数可能是Object, 也可能是List

3、实例分析

我们这里不使用前端的任何框架,以纯JS的形式,去封装一个HTTP方法,发送HTTP请求

src/main/resources/templates/js/test.js

//封装HTTP请求方法
const http = {
    // 请求方法
    request: (params = {}) => {
        // 默认参数和参数合并
 const requestParams = Object.assign({ type: 'GET', url: '', dateType: 'json',//请求返回结果类型 data: { // 请求参数 }, headers: { // 请求头 }, callback0: () => { // 报文成功返回后回调 } }, params); // 请求 const xhr = new XMLHttpRequest(); // 请求方法 const {type, data, url, headers} = requestParams; const requestMethod = ('' + type).toLocaleLowerCase(); // url 是否携带参数 const urlHasParams = requestMethod === 'get'; const requestUrl = urlHasParams ? http.getUrlString(url, data) : url; // 参数类型 const dataType = Object.prototype.toString.apply(data); xhr.open(type, requestUrl); if (dataType === '[object Array]') { xhr.setRequestHeader("Content-type", "application/json; charset=utf-8"); } // 自定义表头 Object.keys(headers).forEach(m => { xhr.setRequestHeader(m, headers[m]); }); xhr.addEventListener("load", e => { const status = xhr.status; if (status === 200) { requestParams.callback0(xhr.response); } else { console.log(e); } }); xhr.send(urlHasParams ? null : http.getFormData(data)); }, // Object 转化为 String getQueryString: (data = {}) => { let _r = []; Object.keys(data).forEach(m => { _r.push(`${m}=${JSON.stringify(data[m])}`); }); _r = _r.join('&'); return _r; }, // GET 请求,参数合并到URL上 getUrlString: (url, data) => { return url.includes('?') ? url + '&' + http.getQueryString(data) : url + '?' + http.getQueryString(data); }, // formData getFormData: data => { const dataType = Object.prototype.toString.apply(data); // Object if (dataType === '[object Object]') { const formData = new FormData(); Object.keys(data).forEach(m => { formData.append(m, data[m]); }); return formData; } else { // Array return JSON.stringify(data); } } }; 

3.1 GET 路径参数

com.scaffold.test.controller.TestController

    // 路径
    @GetMapping("/path/{id}")
    public Object testId(@PathVariable String id, @RequestParam String name) {
        Map<String, Object> map = new HashMap<>();
        map.put("id", id);
 map.put("name", name); return map; } 

@PathVariable去接收路径参数;

html

<!--GET: 路径中携带参数-->
<h1>test GET: 路径中携带参数</h1>
<code>http://localhost:9002/test/path/6666?name=11</code>
<br>
<code>
 GET { name: '11' } </code> <br/> <br/> <button onclick="testPath()">点击测试</button> <h2>testPath 结果</h2> <code></code> 

js

// Get 参数存在于路径中
const testPath = () => {
    http.request({
        url: '/test/path/6666',
        type: 'get',
 data: { name: '111', }, callback0: data => { document.querySelector('.testPathResult').innerHTML = data; } }) }; 

结果 121_1.png

121_2.png

3.2 GET 单个参数

GET请求,参数都会附加到URL上,如: http://localhost:9002/test/get?name=11&age=22

@GetMapping("/get")
public Object testGet(@RequestParam String name, @RequestParam int age) {
    Map<String, Object> result = new HashMap<>();
    // 数据处理
    result.put("name", name);
 result.put("age", age); return result; } 

html

<!--GET: 单个参数-->
<h1>test GET传参: 单个参数</h1>
<code>http://localhost:9002/test/get?name=11&age=22</code>
<br>
<code>
 GET { name: 'get', age: 22 } </code> <br/> <br/> <button onclick="test1()">点击测试</button> <h2>test1 结果</h2> <code></code> <br> 

js

// GET 参数类型为 Object
const test1 = () => {
    http.request({
        url: '/test/get',
        type: 'get',
 data: { name: 'get', age: 22 }, callback0: data => { document.querySelector('.test1Result').innerHTML = data; } }) }; 

结果 121_3.png

121_4.png

3.3 GET 接收参数为List

有时候前端需要传多个ID,如 productId=1,2,3

// 数组接收
@GetMapping("/getList")
public Object testGet4(@RequestParam String[] productId) {
    ArrayList<Object> list = new ArrayList<>();
    for (String id : productId) {
 // 数据处理 list.add(id); } return list; } 

html

<!--GET: 参数数组-->
<h1>test GET传参: 数组</h1>
<code>http://localhost:9002/test/getList?productId=1,2,3</code>
<br>
<code>
 GET { productId: 1,2,3 } </code> <br/> <br/> <button onclick="test4()">点击测试</button> <h2>test4 结果</h2> <code></code> <br> 

js

// GET 获取数组ID
const test4 = () => {
    http.request({
        url: '/test/getList',
        type: 'get',
 data: { productId: '1,2,3' }, callback0: data => { document.querySelector('.test4Result').innerHTML = data; } }) }; 

结果 121_5.png

121_6.png

3.4 POST单个接收参数

POST请求和GET请求不同,POST请求一般是是在response body里面的;

POST请求参数处理:

// formData
getFormData: data => {
    const dataType = Object.prototype.toString.apply(data);
    // Object
    if (dataType === '[object Object]') {
 const formData = new FormData(); Object.keys(data).forEach(m => { formData.append(m, data[m]); }); return formData; } else { // Array return JSON.stringify(data); } } 

如果参数是Object,用FromData的格式进行传参,用@RequestParam接收;

如果参数是Object,序列化数据直接进行传参(需指定Content-type:application/json; charset=utf-8)

这里我们先说,POST单个接收参数,也就是POST的参数是Object, 一个个接收;

// 单个参数接收
@PostMapping("/post")
public Object testPost(@RequestParam String name, @RequestParam int age) {
    Map<String, Object> result = new HashMap<>();
    // 数据处理
 result.put("name", name); result.put("age", age); return result; } 

注意:

当前接收方式,前端必须是FromData格式进行传参;

当前Content-type是 Content-Type: multipart/form-data; boundary=—-WebKitFormBoundaryNB8kMuHgB1nEVjBz

单个接收参数,在参数过多时,不适合这种写法;

这时,我们可以用实体类接收:

    // 实体类接收:不加注解
    @PostMapping("/post22")
    public Object testPost22(Test data) {
        Map<String, Object> result = new HashMap<>();
        // 数据处理
 result.put("name", data.getName()); result.put("age", data.getAge()); return result; } 

我们可以用不加注解的方式用实体类接收,这时候一定不能加注解 @RequestBody

实体类Test

public class Test implements Serializable {

    private static final long serialVersionUID=1L;

    @TableId(value = "id", type = IdType.AUTO)
 private Integer id; private String name; private String age; } 

FromData参数形式Content-type是multipart/form-data;而 @RequestBody,一般是接收Content-type是application/json的参数,如果你在这里使用了@RequestBody,一定会报一下错误

{"code":400,"message":"Content type 'multipart/form-data;boundary=----WebKitFormBoundarymrp2iCvqhwa3oMaR;charset=UTF-8' not supported"}

如果我们一定要使用@RequestBody接收参数,一定要记得设置Content-Type为application/json;

// @RequestBody 实体类接收
@PostMapping("/post23")
public Object testPost2(@RequestBody Test data) {
    Map<String, Object> result = new HashMap<>();
    // 数据处理
 result.put("name", data.getName()); result.put("age", data.getAge()); return result; } 

所以,

为了方便测试,我们对HTTP请求方法做出了以下更改:

 // formData
getFormData: data => {
    const dataType = Object.prototype.toString.apply(data);
    // Object
    // isFromData标注是否使用FromData方式发送参数
 if (dataType === '[object Object]' && data.isFromData) { const formData = new FormData(); Object.keys(data).forEach(m => { formData.append(m, data[m]); }); return formData; } else { // Array || Object(JSON格式传参) return JSON.stringify(data); } } // @ResponseBody注解,接收参数时,必须是application/json // POST请求不以FromData格式时 if (dataType === '[object Array]' || (requestMethod == 'post' && !data.isFromData)) { xhr.setRequestHeader("Content-type", "application/json; charset=utf-8"); } 

同时测试三种方法接受参数:

    // @RequestParam 单个参数接收------前端使用FromData
    @PostMapping("/post")
    public Object testPost(@RequestParam String name, @RequestParam int age) {
        Map<String, Object> result = new HashMap<>();
        // 数据处理
 result.put("name", name); result.put("age", age); return result; } // 实体类接收:不加注解------前端使用FromData @PostMapping("/post22") public Object testPost22(Test data) { Map<String, Object> result = new HashMap<>(); // 数据处理 result.put("name", data.getName()); result.put("age", data.getAge()); return result; } // @RequestBody 实体类接收------前端不使用FromData @PostMapping("/post23") public Object testPost2(@RequestBody Test data) { Map<String, Object> result = new HashMap<>(); // 数据处理 result.put("name", data.getName()); result.put("age", data.getAge()); return result; } 

html

<!--POST:单个参数,FromData格式-->
<h1>test POST:单个参数,FromData格式</h1>
<code>
    POST
    {
 name: 'post', age: 22 } </code> <br/> <br/> <button onclick="test2()">点击测试</button> <h2>test2 结果</h2> <code></code> <br> <hr><!--POST:单个参数,以JSON格式发送--> <h1>test POST:单个参数,以JSON格式发送</h1> <code> POST { name: 'post', age: 23 } </code> <br/> <br/> <button onclick="test23()">点击测试</button> <h2>test23 结果</h2> <code></code> <br> <hr> 

js

// post 参数类型为 Object, FromData格式发送
const test2 = () => {
    http.request({
        url: '/test/post',
        type: 'post',
 data: { name: 'post', age: 22, isFromData: true }, callback0: data => { document.querySelector('.test2Result').innerHTML = data; } }) }; // post 参数类型为 Object, FromData格式发送 const test22 = () => { http.request({ url: '/test/post22', type: 'post', data: { name: 'post', age: 22, isFromData: true }, callback0: data => { document.querySelector('.test2Result').innerHTML = data; } }) }; // post 参数类型为 Object, 以JSON格式发送 const test23 = () => { http.request({ url: '/test/post23', type: 'post', data: { name: 'post', age: 23, isFromData: false }, callback0: data => { document.querySelector('.test23Result').innerHTML = data; } }) }; 

结果

121_7.png

3.5 POST参数为List

参数类型List时候,请求头Content-Type设置为application/json;使用@RequestBody注解;

3.5.1 List 类型1

当参数类型List为:此时单个list中有单个Map, Map里面没有List

[
    {
        name: 'post2',
        age: 22
    },
 { name: 'post3', age: 23 } ] 
// 数组接收
@PostMapping("/post3")
public Object testPost3(@RequestBody List<Test> data) {
    ArrayList<Object> result = new ArrayList<>();
    Map<String, Object> testMap = new HashMap<>();
 for (Test test : data) { // 逻辑处理在这里 testMap.put("name", test.getName()); testMap.put("age", test.getAge()); result.add(testMap); } return result; } 

此时的实体类:com.scaffold.test.entity.Test

@Data
@EqualsAndHashCode(callSuper = false)
@JsonInclude(JsonInclude.Include.NON_NULL)
public class Test implements Serializable {

 private static final long serialVersionUID=1L; @TableId(value = "id", type = IdType.AUTO) private Integer id; private String name; private String age; } 

此时的html:

<!--POST: 数组(纯数组)-->
<h1>test POST: 数组(纯数组)</h1>
<code>
    POST
    [
 { name: 'post2', age: 22 }, { name: 'post3', age: 23 } ] </code> <br/> <br/> <button onclick="test3()">点击测试</button> <h2>test3 结果</h2> <code></code> <br> <hr> 

此时的Js:

// POST 参数类型为 list
const test3 = () => {
    http.request({
        url: '/test/post3',
        type: 'post',
 data: [ { name: 'post2', age: 22 }, { name: 'post3', age: 23 } ], callback0: data => { document.querySelector('.test3Result').innerHTML = data; } }) }; 

结果 121_8.png 121_9.png

3.5.2 list 类型2

[
    {
        "name": "post2",
        "age": 22,
        "list": [
 { "name": "post22", "age": 2233 } ] }, { "name": "post3", "age": 23, "list": [ { "name": "post33", "age": 2233 } ] } ] 

此时我们的实体类:com.scaffold.test.entity.TestList

@Data
@JsonInclude(JsonInclude.Include.NON_NULL)
public class TestList {

 private String name; private int age; private List<Test> list; } 
    // 数组接收, map里面还有数组类型
    @PostMapping("/post5")
    public Object testPost5(@RequestBody List<TestList> testList) {
        return testList;
    }

html


<!--POST传参: 数组中有map, map中还包括数组--> <h1>test POST传参: 数组中有map, map中还包括数组</h1> <code> POST [ { name: 'post2', age: 22, list: [ { name: 'post22', age: 2233, } ] }, { name: 'post3', age: 23, list: [ { name: 'post33', age: 2233, } ] } ] </code> <br/> <br/> <button onclick="test5()">点击测试</button> <h2>test5 结果</h2> <code></code> <br> <hr>

js

// 测试方法5
const test5 = () => {
    http.request({
        url: '/test/post5',
        type: 'post',
 data: [ { name: 'post2', age: 22, list: [ { name: 'post22', age: 2233, } ] }, { name: 'post3', age: 23, list: [ { name: 'post33', age: 2233, } ] } ], callback0: data => { document.querySelector('.test5Result').innerHTML = data; } }) }; 

结果

121_10.png 121_11.png

4、完整代码

src/main/resources/templates/js/test.js

//封装HTTP请求方法
const http = {
    // 请求方法
    request: (params = {}) => {
        // 默认参数和参数合并
 const requestParams = Object.assign({ type: 'GET', url: '', dateType: 'json',//请求返回结果类型 data: { // 请求参数 }, headers: { // 请求头 }, callback0: () => { // 报文成功返回后回调 } }, params); // 请求 const xhr = new XMLHttpRequest(); // 请求方法 const {type, data, url, headers} = requestParams; const requestMethod = ('' + type).toLocaleLowerCase(); // url 是否携带参数 const urlHasParams = requestMethod === 'get'; const requestUrl = urlHasParams ? http.getUrlString(url, data) : url; // 参数类型 const dataType = Object.prototype.toString.apply(data); xhr.open(type, requestUrl); // @ResponseBody注解,接收参数时,必须是application/json // POST请求不以FromData格式时 if (dataType === '[object Array]' || (requestMethod == 'post' && !data.isFromData)) { xhr.setRequestHeader("Content-type", "application/json; charset=utf-8"); } // 自定义表头 Object.keys(headers).forEach(m => { xhr.setRequestHeader(m, headers[m]); }); xhr.addEventListener("load", e => { const status = xhr.status; if (status === 200) { requestParams.callback0(xhr.response); } else { console.log(e); } }); xhr.send(urlHasParams ? null : http.getFormData(data)); }, // Object 转化为 String getQueryString: (data = {}) => { let _r = []; Object.keys(data).forEach(m => { _r.push(`${m}=${JSON.stringify(data[m])}`); }); _r = _r.join('&'); return _r; }, // GET 请求,参数合并到URL上 getUrlString: (url, data) => { return url.includes('?') ? url + '&' + http.getQueryString(data) : url + '?' + http.getQueryString(data); }, // formData getFormData: data => { const dataType = Object.prototype.toString.apply(data); // Object // isFromData标注是否使用FromData方式发送参数 if (dataType === '[object Object]' && data.isFromData) { const formData = new FormData(); Object.keys(data).forEach(m => { formData.append(m, data[m]); }); return formData; } else { // Array || Object(JSON格式传参) return JSON.stringify(data); } } }; // GET 参数类型为 Object const test1 = () => { http.request({ url: '/test/get', type: 'get', data: { name: 'get', age: 22 }, callback0: data => { document.querySelector('.test1Result').innerHTML = data; } }) }; // Get 参数存在于路径中 const testPath = () => { http.request({ url: '/test/path/6666', type: 'get', data: { name: '111', }, callback0: data => { document.querySelector('.testPathResult').innerHTML = data; } }) }; // post 参数类型为 Object, FromData格式发送 const test2 = () => { http.request({ url: '/test/post', type: 'post', data: { name: 'post', age: 22, isFromData: true }, callback0: data => { document.querySelector('.test2Result').innerHTML = data; } }) }; // post 参数类型为 Object, FromData格式发送 const test22 = () => { http.request({ url: '/test/post22', type: 'post', data: { name: 'post', age: 22, isFromData: true }, callback0: data => { document.querySelector('.test2Result').innerHTML = data; } }) }; // post 参数类型为 Object, 以JSON格式发送 const test23 = () => { http.request({ url: '/test/post23', type: 'post', data: { name: 'post', age: 23, isFromData: false }, callback0: data => { document.querySelector('.test23Result').innerHTML = data; } }) }; // POST 参数类型为 list const test3 = () => { http.request({ url: '/test/post3', type: 'post', data: [ { name: 'post2', age: 22 }, { name: 'post3', age: 23 } ], callback0: data => { document.querySelector('.test3Result').innerHTML = data; } }) }; // GET 获取数组ID const test4 = () => { http.request({ url: '/test/getList', type: 'get', data: { productId: '1,2,3' }, callback0: data => { document.querySelector('.test4Result').innerHTML = data; } }) }; // 获取请求头数据 const testHeader = () => { http.request({ url: '/test/header', type: 'post', headers: { privateHeader: "test88888", privateHeader2: "test888882", }, callback0: data => { document.querySelector('.testHeaderResult').innerHTML = data; } }) }; // 获取所有请求头数据 const testHeaders = () => { http.request({ url: '/test/headers', type: 'get', headers: { privateHeader: "test888881", privateHeader2: "test888882", privateHeader3: "test888883", }, callback0: data => { document.querySelector('.testHeadersResult').innerHTML = data; } }) }; // 测试方法5 const test5 = () => { http.request({ url: '/test/post5', type: 'post', data: [ { name: 'post2', age: 22, list: [ { name: 'post22', age: 2233, } ] }, { name: 'post3', age: 23, list: [ { name: 'post33', age: 2233, } ] } ], callback0: data => { document.querySelector('.test5Result').innerHTML = data; } }) }; 

src/main/resources/templates/test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
 <style> body { background: #333; color: #999; } hr { border: none; height: 1px; background: #999; } code { color: dodgerblue; } </style> </head> <body> <!--GET: 单个参数--> <h1>test GET传参: 单个参数</h1> <code>http://localhost:9002/test/get?name=11&age=22</code> <br> <code> GET { name: 'get', age: 22 } </code> <br/> <br/> <button onclick="test1()">点击测试</button> <h2>test1 结果</h2> <code></code> <br> <hr> <!--GET: 路径中携带参数--> <h1>test GET: 路径中携带参数</h1> <code>http://localhost:9002/test/path/6666?name=11</code> <br> <code> GET { name: '11' } </code> <br/> <br/> <button onclick="testPath()">点击测试</button> <h2>testPath 结果</h2> <code></code> <br> <hr> <!--GET: 参数数组--> <h1>test GET传参: 数组</h1> <code>http://localhost:9002/test/getList?productId=1,2,3</code> <br> <code> GET { productId: 1,2,3 } </code> <br/> <br/> <button onclick="test4()">点击测试</button> <h2>test4 结果</h2> <code></code> <br> <hr> <!--GET || POST : 获取请求头中数据--> <h1>test GET || POST : 获取请求头中数据</h1> <code>http://localhost:9002/test/header</code> <br> <code> GET || POST headers: { privateHeader: "test88888", privateHeader2: "test888882", } </code> <br/> <br/> <button onclick="testHeader()">点击测试</button> <h2>testHeader 结果</h2> <code></code> <br> <hr> <!--GET || POST: 获取请求头中所有的数据--> <h1>test GET || POST : 获取请求头中所有的数据</h1> <code>http://localhost:9002/test/headers</code> <br> <code> GET || POST headers: { privateHeader: "test888881", privateHeader2: "test888882", privateHeader3: "test888883", } </code> <br/> <br/> <button onclick="testHeaders()">点击测试</button> <h2>testHeaders 结果</h2> <code></code> <br> <hr> <!--POST:单个参数,FromData格式--> <h1>test POST:单个参数,FromData格式</h1> <code> POST { name: 'post', age: 22 } </code> <br/> <br/> <button onclick="test2()">点击测试</button> <h2>test2 结果</h2> <code></code> <br> <hr><!--POST:单个参数,以JSON格式发送--> <h1>test POST:单个参数,以JSON格式发送</h1> <code> POST { name: 'post', age: 23 } </code> <br/> <br/> <button onclick="test23()">点击测试</button> <h2>test23 结果</h2> <code></code> <br> <hr> <!--POST: 数组(纯数组)--> <h1>test POST: 数组(纯数组)</h1> <code> POST [ { name: 'post2', age: 22 }, { name: 'post3', age: 23 } ] </code> <br/> <br/> <button onclick="test3()">点击测试</button> <h2>test3 结果</h2> <code></code> <br> <hr> <!--POST传参: 数组中有map, map中还包括数组--> <h1>test POST传参: 数组中有map, map中还包括数组</h1> <code> POST [ { name: 'post2', age: 22, list: [ { name: 'post22', age: 2233, } ] }, { name: 'post3', age: 23, list: [ { name: 'post33', age: 2233, } ] } ] </code> <br/> <br/> <button onclick="test5()">点击测试</button> <h2>test5 结果</h2> <code></code> <br> <hr> <script src="./js/test.js"></script> </body> </html> 

com.scaffold.test.controller.TestController

package com.scaffold.test.controller;

import com.scaffold.test.entity.Test;
import com.scaffold.test.entity.TestList;
import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.web.bind.annotation.*; import javax.servlet.http.HttpServletRequest; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; /** * <p> * 前端控制器 * </p> * * @author alex wong * @since 2020-06-23 */ @RestController @RequestMapping("/test") public class TestController { private static final Logger log = LoggerFactory.getLogger(TestController.class); @GetMapping("/get") public Object testGet(@RequestParam String name, @RequestParam int age) { Map<String, Object> result = new HashMap<>(); // 数据处理 result.put("name", name); result.put("age", age); return result; } // 数组接收 @GetMapping("/getList") public Object testGet4(@RequestParam String[] productId) { ArrayList<Object> list = new ArrayList<>(); for (String id : productId) { // 数据处理 list.add(id); } return list; } // 路径 @GetMapping("/path/{id}") public Object testId(@PathVariable String id, @RequestParam String name) { Map<String, Object> map = new HashMap<>(); map.put("id", id); map.put("name", name); return map; } // @RequestParam 单个参数接收------前端使用FromData @PostMapping("/post") public Object testPost(@RequestParam String name, @RequestParam int age) { Map<String, Object> result = new HashMap<>(); // 数据处理 result.put("name", name); result.put("age", age); return result; } // 实体类接收:不加注解------前端使用FromData @PostMapping("/post22") public Object testPost22(Test data) { Map<String, Object> result = new HashMap<>(); // 数据处理 result.put("name", data.getName()); result.put("age", data.getAge()); return result; } // @RequestBody 实体类接收 @PostMapping("/post23") public Object testPost23(@RequestBody Test data) { Map<String, Object> result = new HashMap<>(); // 数据处理 result.put("name", data.getName()); result.put("age", data.getAge()); return result; } // 数组接收 @PostMapping("/post3") public Object testPost3(@RequestBody List<Test> data) { ArrayList<Object> result = new ArrayList<>(); Map<String, Object> testMap = new HashMap<>(); for (Test test : data) { // 逻辑处理在这里 testMap.put("name", test.getName()); testMap.put("age", test.getAge()); result.add(testMap); } return result; } // 数组接收, map里面还有数组类型 @PostMapping("/post5") public Object testPost5(@RequestBody List<TestList> testList) { return testList; } // 获取请求头 @RequestMapping("/header") public Object getHeader(@RequestHeader(name = "privateHeader") String privateHeader, @RequestHeader(name = "privateHeader2") String privateHeader2) { HashMap<Object, Object> map = new HashMap<>(); map.put("privateHeader", privateHeader); map.put("privateHeader2", privateHeader2); return map; } // 获取所有的请求头 @RequestMapping("/headers") public Object getAllHeader(HttpServletRequest request) { Map<Object, Object> resultHeader = new HashMap<>(); resultHeader.put("privateHeader", request.getHeader("privateHeader")); resultHeader.put("privateHeader2", request.getHeader("privateHeader2")); resultHeader.put("privateHeader3", request.getHeader("privateHeader3")); return resultHeader; } // 获取Cookie @RequestMapping("/cookie") public Object getCookie(@CookieValue(name = "token") String token) { return token; } } 

实体类

com.scaffold.test.entity.Test

package com.scaffold.test.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.fasterxml.jackson.annotation.JsonInclude;
import lombok.Data; import lombok.EqualsAndHashCode; import java.io.Serializable; /** * @author alex wong * @since 2020-06-23 */ @Data @EqualsAndHashCode(callSuper = false) @JsonInclude(JsonInclude.Include.NON_NULL) public class Test implements Serializable { private static final long serialVersionUID=1L; @TableId(value = "id", type = IdType.AUTO) private Integer id; private String name; private String age; } 

com.scaffold.test.entity.TestList

package com.scaffold.test.entity;

import com.fasterxml.jackson.annotation.JsonInclude;
import lombok.Data;

import java.util.List; @Data @JsonInclude(JsonInclude.Include.NON_NULL) public class TestList { private String name; private int age; private List<Test> list; } 

本文使用 tech.souyunku.com 排版

文章永久链接:https://tech.souyunku.com/34615

未经允许不得转载:搜云库技术团队 » spring Boot手把手教学(10): 前后端传参接收的N种方式

JetBrains 全家桶,激活、破解、教程

提供 JetBrains 全家桶激活码、注册码、破解补丁下载及详细激活教程,支持 IntelliJ IDEA、PyCharm、WebStorm 等工具的永久激活。无论是破解教程,还是最新激活码,均可免费获得,帮助开发者解决常见激活问题,确保轻松破解并快速使用 JetBrains 软件。获取免费的破解补丁和激活码,快速解决激活难题,全面覆盖 2024/2025 版本!

联系我们联系我们