基于SpringBoot + Vue的商城购物系统实战

由于篇幅所限，以下仅展示如何使用Spring Boot创建REST API和Vue.js前端的核心代码。

Spring Boot后端代码示例（只包含关键部分）:

// 商品控制器
@RestController
@RequestMapping("/api/products")
public class ProductController {
 
    @Autowired
    private ProductService productService;
 
    // 获取所有商品
    @GetMapping
    public ResponseEntity<List<Product>> getAllProducts() {
        List<Product> products = productService.findAll();
        return ResponseEntity.ok(products);
    }
 
    // 根据ID获取商品
    @GetMapping("/{id}")
    public ResponseEntity<Product> getProductById(@PathVariable(value = "id") Long productId) {
        Product product = productService.findById(productId);
        return ResponseEntity.ok(product);
    }
 
    // 添加商品
    @PostMapping
    public ResponseEntity<Product> createProduct(@RequestBody Product product) {
        Product newProduct = productService.save(product);
        return new ResponseEntity<>(newProduct, HttpStatus.CREATED);
    }
 
    // ...其他CRUD操作
}

Vue.js前端代码示例（只包含关键部分）:

// 商品列表组件
<template>
  <div>
    <div v-for="product in products" :key="product.id">
      {{ product.name }} - {{ product.price }}
    </div>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      products: []
    };
  },
  created() {
    this.fetchProducts();
  },
  methods: {
    fetchProducts() {
      axios.get('/api/products')
        .then(response => {
          this.products = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

以上代码展示了如何使用Spring Boot创建REST API和Vue.js前端进行交互，以实现商品列表的获取和显示。这只是一个简化的示例，实际项目中还需要包含诸如用户认证、权限控制、异常处理等多种复杂逻辑。