由于这是一个商城管理系统，涉及到的代码可能会非常庞大，我们可以提供一个简化版的Spring Boot和Vue的商城管理系统的核心代码示例。
Spring Boot后端部分：
// 商品服务
@Service
public class ProductService {
// 假设使用Map作为数据库
private Map<String, Product> products = new HashMap<>();
public List<Product> getAllProducts() {
return new ArrayList<>(products.values());
}
public Product getProductById(String id) {
return products.get(id);
}
public Product createProduct(Product product) {
product.setId(UUID.randomUUID().toString());
products.put(product.getId(), product);
return product;
}
// 更多的CRUD操作
}
// 商品控制器
@RestController
@RequestMapping("/api/products")
public class ProductController {
@Autowired
private ProductService productService;
@GetMapping
public ResponseEntity<List<Product>> getAllProducts() {
return ResponseEntity.ok(productService.getAllProducts());
}
@GetMapping("/{id}")
public ResponseEntity<Product> getProductById(@PathVariable String id) {
Product product = productService.getProductById(id);
if (product == null) {
return ResponseEntity.notFound().build();
}
return ResponseEntity.ok(product);
}
@PostMapping
public ResponseEntity<Product> createProduct(@RequestBody Product product) {
return ResponseEntity.ok(productService.createProduct(product));
}
// 更多的CRUD操作
}Vue前端部分（简化版）：
<!-- 商品列表页面 -->
<template>
<div>
<h1>商品列表</h1>
<ul>
<li v-for="product in products" :key="product.id">
{{ product.name }} - {{ product.price }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
products: []
};
},
created() {
this.fetchProducts();
},
methods: {
async fetchProducts() {
try {
const response = await this.$http.get('/api/products');
this.products = response.data;
} catch (error) {
console.error('Failed to fetch products:', error);
}
}
}
};
</script>这个例子展示了如何使用Spring Boot和Vue创建一个简单的商品管理系统。在实际的商城管理系统中，你需要实现更多的功能，比如用户管理、订单处理、支付集成等。这个例子只是为了展示如何连接后端和前端，并且如何通过API进行数据交换。