由于篇幅所限，我将提供一个简化的例子来说明如何使用Spring Boot创建一个API端点，并使用Vue.js进行前端数据展示。
后端代码（Spring Boot）:
@RestController
@RequestMapping("/api/properties")
public class PropertyController {
// 假设有一个服务层用于处理业务逻辑
@Autowired
private PropertyService propertyService;
// 获取所有物业信息的API
@GetMapping
public ResponseEntity<List<Property>> getAllProperties() {
List<Property> properties = propertyService.findAll();
return ResponseEntity.ok(properties);
}
}前端代码（Vue.js）:
<!-- Vue模板 -->
<template>
<div>
<h1>物业列表</h1>
<ul>
<li v-for="property in properties" :key="property.id">
{{ property.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
properties: []
};
},
created() {
this.fetchProperties();
},
methods: {
async fetchProperties() {
try {
const response = await this.$http.get('/api/properties');
this.properties = response.data;
} catch (error) {
console.error('An error occurred while fetching properties:', error);
}
}
}
};
</script>在这个例子中，Spring Boot后端提供了一个REST API，而Vue.js前端通过Axios（通常在Vue项目中作为this.$http使用）发送HTTP GET请求来获取物业信息列表，并将其展示在页面上。这只是一个简单的交互示例，实际系统可能会更加复杂。