20、构建真实世界零售应用的全流程指南

构建真实世界零售应用的全流程指南

1. 项目结构设计

项目采用特定的文件夹结构，旨在提高代码的可重用性和可扩展性，具体优势如下：
- 模块化组织 ：每个文件夹都有明确的用途，随着应用的增长，便于定位和管理文件。
- 关注点分离 ：将组件、状态管理和静态数据分离，提高代码的可维护性。
- 未来可扩展性 ：若添加新功能（如用户认证），无需重构整个项目结构。

2. 添加模拟数据

为了模拟零售应用中的产品列表，使用本地存储在单独文件中的模拟数据。这种方法使开发者可以专注于构建和展示应用功能，而无需依赖后端或数据库。

2.1 创建模拟数据文件

具体步骤如下：
1. 在 src 目录下创建 data 文件夹，用于存储模拟数据。
2. 在 data 文件夹中创建 products.js 文件，并添加以下代码：

const products = [
  { id: 1, name: "Laptop", price: 999, image: "/images/laptop.jpg" },
  { id: 2, name: "Phone", price: 499, image: "/images/phone.jpg" },
  { id: 3, name: "Headphones",