SpringBoot和Axios数据的传递和接收-Restful完全版
// 控制器Controller层
@RestController
@RequestMapping("/api/v1/users")
public class UserController {
@Autowired
private UserService userService;
// 获取所有用户信息
@GetMapping
public ResponseEntity<List<User>> getAllUsers() {
List<User> users = userService.findAll();
return ResponseEntity.ok(users);
}
// 根据ID获取用户信息
@GetMapping("/{id}")
public ResponseEntity<User> getUserById(@PathVariable("id") Long id) {
User user = userService.findById(id);
return ResponseEntity.ok(user);
}
// 添加用户信息
@PostMapping
public ResponseEntity<User> createUser(@RequestBody User user) {
User newUser = userService.save(user);
return ResponseEntity.ok(newUser);
}
// 更新用户信息
@PutMapping("/{id}")
public ResponseEntity<User> updateUser(@PathVariable("id") Long id, @RequestBody User user) {
User updatedUser = userService.update(id, user);
return ResponseEntity.ok(updatedUser);
}
// 删除用户信息
@DeleteMapping("/{id}")
public ResponseEntity<?> deleteUser(@PathVariable("id") Long id) {
userService.delete(id);
return ResponseEntity.noContent().build();
}
}
// Vue.js中使用axios发送请求
export default {
// 获取所有用户信息
getAllUsers() {
return axios.get('/api/v1/users');
},
// 根据ID获取用户信息
getUserById(id) {
return axios.get(`/api/v1/users/${id}`);
},
// 添加用户信息
createUser(user) {
return axios.post('/api/v1/users', user);
},
// 更新用户信息
updateUser(id, user) {
return axios.put(`/api/v1/users/${id}`, user);
},
// 删除用户信息
deleteUser(id) {
return axios.delete(`/api/v1/users/${id}`);
}
}
在这个示例中,我们展示了如何在Spring Boot后端使用@RestController
和@RestController
注解来创建RESTful API,并在Vue.js前端使用axios来发送HTTP请求。这个例子涵盖了基本的CRUD操作,并且使用了ResponseEntity
来统一返回格式,这有助于前端按照统一的方式处理数据和错误。
评论已关闭