07-SpringBoot --- SpringBoot+Vue 实现前后端数据交互

以下是一个简化的示例，展示了如何在Spring Boot后端和Vue前端之间实现数据交互：

后端代码 (Spring Boot):

// UserController.java
@RestController
@RequestMapping("/api/users")
public class UserController {
 
    @GetMapping
    public ResponseEntity<List<User>> getAllUsers() {
        // 假设有一个服务层来获取用户列表
        List<User> users = userService.findAll();
        return ResponseEntity.ok(users);
    }
 
    // ...其他CRUD操作
}

前端代码 (Vue.js):

// User.vue
<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      users: []
    };
  },
  methods: {
    fetchUsers() {
      this.$http.get('/api/users')
        .then(response => {
          this.users = response.data;
        })
        .catch(error => {
          console.error('Error fetching users:', error);
        });
    }
  },
  created() {
    this.fetchUsers();
  }
};
</script>

在这个例子中，Spring Boot后端提供了一个REST API来获取用户列表，而Vue前端通过axios（或其他HTTP客户端）在组件的created生命周期钩子中向该API发送请求，并将响应渲染到模板中。这是前后端交互的典型方式。