spring前后端传参交互 和细节

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

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

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

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

json对象前端格式
这个好理解：

下面这理解有点难

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

注解 	支持的类型 	支持的请求类型 	支持的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）

前端格式

后端

   @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格式的：

<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对象
参考：vue+axios 传json对象

参考

参考一：
主要的参考：
地址： 后端如何接受前端传过来的Json数据
Json对象和Json字符串的区别
json对象、json字符串的区别和相互转换

参考二：
SpringBoot实现前后端数据交互、json数据交互、Controller接收参数的几种常用方式
参考三：

如何使用@RequestBody传递多个不同对象

参考四：
POST、GET、@RequestBody和@RequestParam区别

参考五：
@PathVariable，@RequestParam中的name和value