基于springboot+vue的水果商城(前后端分离)

由于这个问题涉及到的内容较多且涉及到实际的项目，我无法提供完整的代码。但我可以提供一个基本的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>

这个例子展示了一个非常基础的水