Springboot框架Controller层接收不同形式的数据

一、URL路径参数(@PathVariable)

后端Java代码：

@GetMapping("/user/{id}")
public String getUserById(@PathVariable("id") Integer id) {
    return "User ID: " + id;
}

前端对应请求代码：

axios.get('/user/123')
  .then(response => {
    console.log(response.data);
  });

二、URL查询参数(@RequestParam)

后端Java代码：

@GetMapping("/user")
public String getUserByQuery(@RequestParam("name") String name) {
    return "User name: " + name;
}

前端对应请求代码：

axios.get('/user', {
  params: { name: 'John' }
})
.then(response => {
  console.log(response.data);
});

三、表单数据(@RequestParam)

后端Java代码：

@PostMapping("/user")
public String createUser(@RequestParam("name") String name, @RequestParam("age") Integer age) {
    return "User created with name: " + name + ", age: " + age;
}

前端对应请求代码：

以 application/x-www-form-urlencoded 方式提交表单数据。

axios.post('/user', new URLSearchParams({
  name: 'John',
  age: 25
}))
.then(response => {
  console.log(response.data);
});

四、JSON格式数据(@RequestBody)

后端Java代码：

@PostMapping("/user")
public String createUser(@RequestBody User user) {
    return "User created: " + user.getName();
}

前端对应请求代码：

以 application/json 格式发送 JSON 数据。

axios.post('/user', {
  name: 'John',
  age: 25
})
.then(response => {
  console.log(response.data);
});

五、文件上传(@RequestParam MultipartFile)

后端Java代码：

@PostMapping("/upload")
public String handleFileUpload(@RequestParam("file") MultipartFile file) {
    return "File uploaded: " + file.getOriginalFilename();
}

前端对应请求代码：

使用 multipart/form-data 上传文件。

let formData = new FormData();
formData.append('file', fileInput.files[0]);

axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
.then(response => {
  console.log(response.data);
});

六、自定义对象接收多个参数

后端Java代码：

@PostMapping("/user")
public String createUser(@ModelAttribute User user) {
    return "User created: " + user.getName();
}

前端对应请求代码：

可以通过 URL 查询参数或者表单数据传递。

axios.post('/user', new URLSearchParams({
  name: 'John',
  age: 25
}))
.then(response => {
  console.log(response.data);
});