SpringBoot前后端传参方案

在工作中遇到一些复杂的数据前端就很容易传不过来,然后开始甩锅"明明是你接收有问题",所以在这里总结一下常见的传参姿势.

用户登录

前端代码:

var param = {
    "username": "admin",
    "password": "admin"
}
$.ajax({
    url: "/sys/login",
    data: param,
    type: "post",
    dataType: "json",
    success: function(data) {

    }
});

后端代码:

@RestController
@RequestMapping("/sys")
public class LoginController {

    private static final Logger logger = LoggerFactory.getLogger(LoginController.class);

    /**
     * 登录
     */
    @PostMapping("/login")
    @RequestParam(value="username", required=true)
    public Result login(String username, String password){
        logger.info("用户登录"+username);
        //业务逻辑
        return Result.ok("登录成功");
    }
}

两个简单的string,最简单的场景

用户注册

前端代码与登录基本一致

后端代码:

/**
  * 注册
  */
@PostMapping("/register")
public Result register(SysUser user){
    logger.info("{}，用户注册",user.getUsername());
    //业务逻辑
    return Result.ok("注册成功");
}

使用了一个实体来接收

多参数无实体一

前端:

var param = {
    "title": "笔记",
    "content": "一个有趣的公众号",
    "author": "小小"
}
param = JSON.stringify(param);
$.ajax({
    url: "/sys/multiParameter",
    data: param,
    type: "post",
    contentType: "application/json",
    dataType: "json",
    success: function(data) {

    }
});

后端:

/**
  * 多参数
  */
@PostMapping("/multiParameter")
public Result register(@RequestBody Map<String,Object> map){
    logger.info("多参数传递:{},{}",map.get("title"),map.get("content"));
    //业务逻辑
    return Result.ok("接收多参数成功");
}

这是在body里面传递

多参数无实体二

前端:

var param = {
    "title": "笔记",
    "content": "一个有趣的公众号",
    "author": "小小"
}
$.ajax({
    url: "/sys/multiParameter",
    data: param,
    type: "post",
    dataType: "json",
    success: function(data) {

    }
});

后端:

/**
  * 多参数
  * https://blog.52itstyle.vip
  */
@PostMapping("/multiParameter")
public Result register(@RequestParam Map<String,Object> map){
    logger.info("多参数传递:{},{}",map.get("title"),map.get("content"));
    //业务逻辑
    return Result.ok("接收多参数成功");
}

这是在param里面传递. 一般不推荐用map来传参,开发一时爽.

传递数组

前端:

var param = {
    "ids": [1, 2, 3]
}
$.ajax({
    url: "/sys/array",
    data: param,
    type: "post",
    dataType: "json",
    success: function(data) {

    }
});

后端:

/**
  * 数组
  */
@PostMapping("array")
public Result array(@RequestParam(value = "ids[]") Integer[] ids) {
    logger.info("数据{}", Arrays.asList(ids));
    //业务逻辑
    return Result.ok();
}

传递集合

前端与传递数组一致.

后端:

/**
  * 集合
  */
@PostMapping("array")
public Result array(@RequestParam(value = "ids[]") List<Integer> ids) {
    logger.info("数据{}", ids.toString());
    //业务逻辑
    return Result.ok();
}

传递对象集合

前端:

var list = [];
list.push({
    "username": "小小",
    "mobile": "17762288888"
});
list.push({
    "username": "小七",
    "mobile": "17762289999"
});
$.ajax({
    url: "/sys/listUser",
    data: JSON.stringify(list),
    type: "post",
    contentType: "application/json",
    dataType: "json",
    success: function(data) {

    }
});

后端:

@PostMapping("listUser")
public Result listUser(@RequestBody List<SysUser> list) {
   logger.info("数据{}", list.size());
   list.forEach(user->{
      //输出实体对象
      System.out.println(user.getUsername());
   });
   //业务逻辑
   return Result.ok();
}

传递嵌套对象的集合

前端:

var roleList = [];
roleList.push({
    "roleSign": "admin",
    "roleName": "管理员"
});
roleList.push({
    "roleSign": "user",
    "roleName": "普通用户"
});
var list = [];
var user = {
    "username": "小小",
    "mobile": "17762288888"
};
user.roleList = roleList;
list.push(user);
$.ajax({
    url: "/sys/listUserRole",
    data: JSON.stringify(list),
    type: "post",
    contentType: "application/json",
    dataType: "json",
    success: function(data) {

    }
});

后端:

@PostMapping("listUserRole")
public Result listUserRole(@RequestBody List<SysUser> list) {
    logger.info("数据{}", list.size());
    list.forEach(user->{
        List<SysRole> roleList = user.getRoleList();
        roleList.forEach(role->{
          System.out.println(role.getRoleName());
        });
    });
    return Result.ok();
}

补充

@RequestBody 注解，必须与 contentType 类型application/json配合使用。

@RequestParam 注解，必须与 contentType 类型application/x-www-form-urlencoded配合使用，其为默认类型。
JSON.stringify() 把对象类型转换为字符串类型，一般配合 @RequestBody 注解和contentType 类型application/json使用。
复杂参数一般都用post方法,放在body里面传递.用get方法的话前端需要拼接到url上,不过很少前端会这么做.