SpringBoot和Axios数据的传递和接收-Restful完全版
    		       		warning:
    		            这篇文章距离上次修改已过426天,其中的内容可能已经有所变动。
    		        
        		                
                
// 控制器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来统一返回格式,这有助于前端按照统一的方式处理数据和错误。
评论已关闭