前后端交互代码示例 - Java Spring Boot & Fetch API

前后端交互的代码主要是通过HTTP协议进行的，前端通过发送请求到后端，后端接收请求并处理，之后将处理结果返回给前端。

以下是一个简单的前后端交互的示例代码：

前端代码：

// 发送 GET 请求到后端
function getUserInfo() {
  fetch('/api/user-info')
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error(error);
    });
}

// 发送 POST 请求到后端
function login(username, password) {
  fetch('/api/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      username: username,
      password: password
    })
  })
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error(error);
    });
}

后端代码：

// 处理 GET 请求
@GetMapping("/api/user-info")
public UserInfo getUserInfo() {
  UserInfo userInfo = new UserInfo();
  // TODO: 查询用户信息并设置到 userInfo 对象中
  return userInfo;
}

// 处理 POST 请求
@PostMapping("/api/login")
public LoginResponse login(@RequestBody LoginRequest request) {
  LoginResponse response = new LoginResponse();
  // TODO: 处理登录逻辑并设置 response 对象中的数据
  return response;
}

在上面的代码中，前端使用了 Fetch API 发送请求到后端，并处理返回的数据。后端使用 Spring Boot 框架处理请求，并返回相应的数据。在处理 POST 请求时，后端通过 @RequestBody 注解将请求体转换为一个 LoginRequest 对象，方便处理登录逻辑。最后，后端将处理结果封装到一个 LoginResponse 对象中，并返回给前端。