Axios请求以及对应的Springboot接收参数

前一段时间做项目的时候前后端参数的对接出现了很大问题，导致痛不欲生，故想把一直没有搞明白的前后端传参接收参数的方法搞清楚，记录以下内容帮助我记忆，以及给需要的人一点帮助。

• 前端代码

axios.get("http://localhost:8081/boot/one?name=xxx&age=22")
  .then(function (res) {
    console.log(res)
  })
  .catch(function (err) {
    console.log(err)
  })

• 后端接收

@GetMapping(value = "/boot/get1")
public Result getParamByQ(String name, Integer age) {
    if (name != null && age != null) {
        return new Result(name + age, "请求成功", 100);
    }
    return new Result(null, "请求失败", -1);
}

• 前端代码

axios.get("http://localhost:8081/boot/get2/xxx/22")
  .then(function (res) {
    console.log(res)
  })
  .catch(function (err) {
    console.log(err)
  })

• 后端代码

@GetMapping(value = "/boot/get2/{name}/{age}")
public Result getParamByX(@PathVariable String name, @PathVariable Integer age) {
    if (name != null && age != null) {
        return new Result(name + age, "请求成功", 100);
    }
    return new Result(null, "请求失败", -1);
}

• 前端代码

axios.post('http://localhost:8081/user/login', {
  uid: that.username,
  pwd: that.password
}).then(function (res) {
  console.log(res)
}).catch(function (err) {
  console.log(err)
})

• 后端代码

@PostMapping(value = "/user/login")
public Result Login(@RequestBody User loginParam) {
    User user = userService.getUserById(loginParam);
    if (user != null) {
        String token = UUID.randomUUID() + "";
        // 存储token到redis
        redisTemplate.opsForValue().set(token, user, Duration.ofMinutes(30l));
        return new Result(token, "登录成功", 100);
    }
    return new Result(null, "登录失败", -1);
}

此处的User类有两个类成员变量分别为Long uid；String pwd；

• 前端代码
  需要引入Qs模块，前端控制台执行npm install Qs

axios.post("http://localhost:8081/boot/post1", Qs.stringify({name: 'hqz', age: 22}), {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
}).then(function (res) {
  console.log(res)
}).catch(function (err) {
  console.log(err)
})

• 后端代码

@PostMapping(value = "/boot/post1")
public Result getDataByForm(@RequestParam(value = "name") String name, @RequestParam(value = "age") Integer age) {
    if (name != null && age != null) {
        return new Result(name + age, "请求成功", 100);
    }
    return new Result(null, "请求失败", -1);
}

• 前端代码
  前端需要构造一个FormData类

let fd = new FormData()
fd.append("name", "xxx")
fd.append("age", 22)

axios.post("http://localhost:8081/boot/post2", fd, {
  headers: {'Content-Type': 'multipart/form-data'}
}).then(function (res) {
  console.log(res)
}).catch(function (err) {
  console.log(err)
})

• 后端代码

@PostMapping(value = "/boot/post2")
public Result getDataByFormData(@RequestParam(value = "name") String name, @RequestParam(value = "age") Integer age) {
    if (name != null && age != null) {
        return new Result(name + age, "请求成功", 100);
    }
    return new Result(null, "请求失败", -1);
}

• 前端代码

let fd = new FormData()
fd.append("file", this.file)
axios.post("http://localhost:8081/boot/postFile", fd, {
  headers: {'Content-Type': 'multipart/form-data'}
}).then(function (res) {
  console.log(res)
}).catch(function (err) {
  console.log(err)
})

• 后端代码
  后端可以接收图片文件，txt文件，视频文件等。但是后端接收文件的大小初始限制为1M，想要接收更大文件需要需改application.yml或其他配置文件。

spring:
  servlet:
    multipart:
      max-file-size: 80000000 # 单位为byte

@PostMapping(value = "/boot/postFile")
public Result getFile(@RequestParam(value = "file") MultipartFile multipartFile) throws IOException {
    if (multipartFile != null){
        String originName = multipartFile.getOriginalFilename();
        String folder = "D:\";
        String picName = new Date().getTime() + originName;
        File fileLocal = new File(folder, picName);
        multipartFile.transferTo(fileLocal);
        return new Result("文件收到", "post成功", 100);
    }
    return new Result(null, "post失败", -1);
}

1. 上传文件过大时，报The field file exceeds its maximum permitted size of 1048576 bytes问题
2. axios post 请求类型和 SpringBoot 参数接收知识
3. @RequestBody的使用
4. 关于接收x-www-form-urlencoded格式数据的后端
5. springboot 接收文件