由于篇幅所限，以下仅展示如何使用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前端进行交互，以实现商品列表的获取和显示。这只是一个简化的示例，实际项目中还需要包含诸如用户认证、权限控制、异常处理等多种复杂逻辑。