在Spring Boot和Vue.js之间进行数据交互，通常是通过REST API进行的。以下是一个简单的例子，展示了如何在Spring Boot后端创建一个REST API，并在Vue.js前端中调用它。
Spring Boot后端:
- 创建一个REST控制器:
@RestController
@RequestMapping("/api/items")
public class ItemController {
// 假设有一个服务层，这里省略了服务层的实现
@GetMapping
public ResponseEntity<List<Item>> getAllItems() {
// 获取所有项目的逻辑
List<Item> items = // ... 获取数据的逻辑
return ResponseEntity.ok(items);
}
}Vue.js前端:
- 安装axios:
npm install axios- 在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中，然后可以在模板中进行渲染。