由于这个问题涉及到的内容较多且涉及到实际的项目，我无法提供完整的代码。但我可以提供一个基本的Spring Boot和Vue前后端分离项目的架构和部分核心代码。
后端（Spring Boot）:
pom.xml依赖:
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- 其他依赖 -->
</dependencies>
实体类 Fruit.java:
public class Fruit {
private Long id;
private String name;
private String description;
// 省略getter和setter
}
Controller FruitController.java:
@RestController
@RequestMapping("/api/fruits")
public class FruitController {
// 假设有一个服务层
@Autowired
private FruitService fruitService;
@GetMapping
public ResponseEntity<List<Fruit>> getAllFruits() {
List<Fruit> fruits = fruitService.findAll();
return ResponseEntity.ok(fruits);
}
// 其他API方法
}
配置类 CorsConfig.java:
@Configuration
public class CorsConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("http://localhost:8080");
}
};
}
}
前端（Vue.js）:
vue.config.js:
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
}
}
FruitService.js:
import axios from 'axios';
export default {
getAllFruits() {
return axios.get('/api/fruits');
}
// 其他方法
}
FruitList.vue:
<template>
<div>
<ul>
<li v-for="fruit in fruits" :key="fruit.id">{{ fruit.name }}</li>
</ul>
</div>
</template>
<script>
import FruitService from '@/services/FruitService';
export default {
data() {
return {
fruits: []
};
},
async mounted() {
try {
const response = await FruitService.getAllFruits();
this.fruits = response.data;
} catch (error) {
console.error('An error occurred while fetching fruits:', error);
}
}
}
</script>
这个例子展示了一个非常基础的水