注意控制层要使用@Controller注解,同时@RestController注解相当于@ResponseBody + @Controller

前端有传递Json对象Json字符串两种方式

后端有用 @RequestParam@RequestBody和@PathVariable(这个不常用)注解接受值

图里的后端获取方式不全,下面有补充

java 后端接收前段 参数 既有可能 List 也有可能是 Object 怎么接收 spring后端接收前端参数方式_post


json对象前端格式

这个好理解:

java 后端接收前段 参数 既有可能 List 也有可能是 Object 怎么接收 spring后端接收前端参数方式_spring boot_02


下面这理解有点难

java 后端接收前段 参数 既有可能 List 也有可能是 Object 怎么接收 spring后端接收前端参数方式_java_03


json字符串前端格式

json字符串是一个用单引号或者双引号引起来的字符串,因为字符串的格式符合json的格式,所以叫做json字符串。

java 后端接收前段 参数 既有可能 List 也有可能是 Object 怎么接收 spring后端接收前端参数方式_字符串_04

注解 	支持的类型 	支持的请求类型 	支持的Content-Type 	请求示例

@PathVariable 	url 	GET 	所有 	/test/{id}
@RequestParam 	url 	GET 	所有 	/test?id=1
                Body 	POST/PUT/DELETE/PATCH 	form-data或x-www.form-urlencoded 	id:1
@RequestBody 	Body 	POST/PUT/DELETE/PATCH 	json 	{"id":1}

将接口改成以@RequestBody注解方式接受json请求数据,而后将接收到的json数据转化为json对象,可以使用json对象的get()方法取得参数值,代码如下:

@PostMapping("/account")
public Object insertAccount(@RequestBody JSONObject jsonParam) {
	String userName=jsonParam.get("userName").toString()
	...

情况一

一般使用GET请求,url路径参数
前端传递Json对象
后端使用@RequestParam 或不使用直接接受

前端的contentType默认格式是 application/x-www-form-urlencoded
优点:
一、前端传递数据不用转换为Json字符串:Json.stringify(user)
二、后端接收参数灵活:
1、 可以是封装对象 (User user),对象最好不要加@RequestParam注解
2、可以是单个参数(String username,String password)
3、 可以封装对象与单个参数混用(User user,String username)

前端格式

java 后端接收前段 参数 既有可能 List 也有可能是 Object 怎么接收 spring后端接收前端参数方式_spring boot_02

后端

@GetMapping(value = "/pageVue")
     public void query(AlbumQuery albumQuery,
                       @RequestParam(value = "pageSize") Integer pageSize,
                       @RequestParam(value = "pageNum") Integer pageNum){

         System.out.println(albumQuery);
         System.out.println(pageSize+" ::"+pageNum);

     }

value其实就是我们在前台页面传过来的参数名称, 用来解决前后台传入参数不一致的问题

后面的那个是我们自己定义的参数名称(命名看你自己,最好和前端一样),它会自动获得value中参数的值

value也可以替换成为name
name和value只能使用一个, name和value属性也是完全等价

前端

const params = {...this.queryParams}
                params.pageSize = this.pageSize;
                params.pageNum = this.pageNum;
  var that = this;
 axios.get("http://localhost:8770/recomm/pageVue",{params:params})
                    .then(function (response) {
                        /*that.devices = response.data;*/
                        console.log("成功")
                    },function (err) {
                       console.log("数据出错")
                    })

情况二

一般使用 POST请求,Body传值
前端传递Json字符串
后端一般使用@RequestBody接受
使用@RequestBody:直接对象接收,属性名要与前端传过来的数据的key值对应

前端的contentType 格式是 application/json 要设置
要将JSON对象转换为JSON字符串

前端

如下面这种为json格式的:

java 后端接收前段 参数 既有可能 List 也有可能是 Object 怎么接收 spring后端接收前端参数方式_字符串_06

<script>
    var user = {
      "username": "hahah",
      "password": "123456"
    };

    $.ajax({
      url:"/testJson3",
      type: "POST",
      async: true,
      contentType: "application/json;charset=UTF-8", //使用 application/json;charset=UTF-8
      data: JSON.stringify(user), //将JSON对象转换为JSON字符串
      dataType: 'json',
      success: function (data) {

      }
    });
  </script>

后端

方式一 :使用 @RequestBody或@RequestParam注解

后端接收前端Json字符串,只能封装在 对象中,不能单独设置参数。

@PostMapping(value = "/testJson3")
    public String testJson3(@RequestBody User user){
        System.out.println(user.getUsername());//hahah
        System.out.println(user.getPassword());//123456
        return "aaaa";
    }

注意 :@RequestBody在方法参数中只能使用一个,如果多个参数都要使用该注解,可以将多个参数封装在一个类中,使用该类接受值 @RequestBody接收的参数是来自requestBody中,即请求体 ,因此该注解常用于post请求,不能用于get请求
@RequestParam则可以使用多个,这个注解不作用于自定义对象,相当于它把@RequestBody对象中的各个属性拆开了
即:@RequestBody和@RequestParam,前者只能有一个,后者可以有多个,前者作用于一个整体,后者作用于多个参数;当只有一个接收参数时,两者作用一样

具体使用查看下面的 参考三

方式二 使用Map

@RequestMapping(value = "/testJson4",method = {RequestMethod.POST})
    @ResponseBody
    public String testJson4(@RequestBody Map map){
        System.out.println(map.get("username"));//hahah
        System.out.println(map.get("password"));//123456
        return "aaaa";
    }

方式三 使用String接收

@RequestMapping(value = "/testJson5",method = {RequestMethod.POST})
    @ResponseBody
    public String testJson5(@RequestBody String user) throws IOException {
        System.out.println(user); // {"username":"hahah","password":"123456"}
        ObjectMapper mapper = new ObjectMapper();
        User user1 = mapper.readValue(user, User.class);
        System.out.println(user1.getUsername());//hahah
        System.out.println(user1.getPassword());//123456
        return "aaaa";
    }

方式四 使用数组或list

@RequestMapping(value = "/test1", method = RequestMethod.POST)
    @ResponseBody
    private String Test1(String name,@RequestParam("nums[]") Integer[] nums) {
        System.out.println(name);
        for(int i=0;i<nums.length;i++){
            System.out.println(nums[i]);
        }
        return "success";
    }
或
	@RequestMapping(value = "/test1", method = RequestMethod.POST)
    @ResponseBody
    private String Test1(String name,@RequestParam("nums[]") List<Integer> nums) {
        System.out.println(name);
        System.out.println(nums);
        return "success";
    }

优缺点

(1)前端需要使用JSON.stringify()将JSON对象转为JSON字符串
(2)后端接收参数比较麻烦,没有第一种简单,也没有第一种灵活。
(3)但Post请求较为安全,因此情况二一般用于表单的传输

细节

Vue使用axios请求数据,默认post请求传参是json格式,但后台需要formData格式?即前端传json对象