03 前后端数据交互【小白入门SpringBoot + Vue3】

在Spring Boot和Vue.js之间进行数据交互，通常是通过REST API进行的。以下是一个简单的例子，展示了如何在Spring Boot后端创建一个REST API，并在Vue.js前端中调用它。

Spring Boot后端:

1. 创建一个REST控制器:

@RestController
@RequestMapping("/api/items")
public class ItemController {
 
    // 假设有一个服务层，这里省略了服务层的实现
 
    @GetMapping
    public ResponseEntity<List<Item>> getAllItems() {
        // 获取所有项目的逻辑
        List<Item> items = // ... 获取数据的逻辑
        return ResponseEntity.ok(items);
    }
}

Vue.js前端:

1. 安装axios:

npm install axios

2. 在Vue组件中使用axios发送请求并处理响应:

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      items: []
    };
  },
  created() {
    this.fetchItems();
  },
  methods: {
    async fetchItems() {
      try {
        const response = await axios.get('http://localhost:8080/api/items');
        this.items = response.data;
      } catch (error) {
        console.error('An error occurred while fetching items:', error);
      }
    }
  }
};
</script>

在这个例子中，Spring Boot后端暴露了一个/api/items的端点，Vue.js前端通过axios在created钩子函数中异步请求这个端点，并将返回的数据存储在本地数据属性items中，然后可以在模板中进行渲染。