JS如何与SpringRESTfulAPI通信_JS与SpringRESTfulAPI通信的实现教程

@RestController
@CrossOrigin(origins = "http://localhost:3000") // 允许前端域名访问（解决跨域）
public class UserController {

    @GetMapping("/api/users")
    public List<User> getUsers() {
        return Arrays.asList(
            new User(1, "Alice"),
            new User(2, "Bob")
        );
    }

    @PostMapping("/api/users")
    public User createUser(@RequestBody User user) {
        user.setId(99); // 模拟保存
        return user;
    }
}

fetch('http://localhost:8080/api/users')
  .then(response => response.json())
  .then(data => {
    console.log('用户列表:', data);
    // 可在此渲染到页面
  })
  .catch(error => console.error('请求失败:', error));

const userData = { name: "Charlie" };

fetch('http://localhost:8080/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(userData)
})
.then(response => response.json())
.then(result => {
  console.log('创建成功:', result);
})
.catch(error => console.error('提交失败:', error));

fetch('http://localhost:8080/api/users/1', {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: "Alice Smith" })
})
.then(res => res.json())
.then(data => console.log('更新成功:', data));

fetch('http://localhost:8080/api/users/1', {
  method: 'DELETE'
})
.then(() => console.log('用户已删除'));