18、构建电商产品展示界面：从 API 调用到组件开发

构建电商产品展示界面：从 API 调用到组件开发

1. 界面设计与组件概述

在电商应用的开发中，订单日期会以用户本地时间显示，但在服务器端则采用协调世界时（UTC）格式。订单商品会显示在订单列表中，同时展示商品数量和单价。接下来，我们将开始编码实现这些组件。

首先要开发的是产品列表页面，它会通过 REST API 从后端服务器获取产品数据。我们将创建一系列组件来完成这个功能，组件树结构如下：

graph TD;
    A[ProductList] --> B[Products];
    B --> C[ProductCard];

2. 创建 API 客户端

为了获取产品数据，我们将使用浏览器的 Fetch API 作为 REST API 客户端，避免引入额外的第三方依赖。

2.1 配置文件 Config.js

我们需要创建一个配置文件 Config.js ，用于存储 API 相关的常量和方法。以下是代码示例：

class Config {
  SCHEME = process.env.SCHEME ? process.env.SCHEME : "http";
  HOST = process.env.HOST ? process.env.HOST : "localhost";
  PORT = process.env.PORT ? process.env.PORT : "8080