# 量极AI硬件商城

一个基于React和Django的AI硬件在线商城系统，提供硬件配置展示、订单管理和支付功能。

## 🚀 项目概述

量极AI硬件商城是一个全栈Web应用程序，专注于AI硬件产品的在线销售。系统采用前后端分离架构，前端使用React + Vite + Ant Design，后端使用Django REST Framework。

## 📋 功能特性

### 前端功能
- 🛍️ 硬件配置展示和选择
- 🛒 购物车功能
- 📋 订单创建和管理
- 💳 支付流程集成
- 🔗 推广码支持
- 📱 响应式设计

### 后端功能
- 🏪 产品配置管理
- 📦 订单处理
- 💰 支付接口
- 👥 用户管理
- 📊 数据统计

## 🛠️ 技术栈

### 前端技术
- **React 19** - 现代化UI库
- **Vite** - 快速构建工具
- **Ant Design** - 企业级UI组件库
- **React Router** - 路由管理
- **Axios** - HTTP客户端

### 后端技术
- **Django 6.0** - Python Web框架
- **Django REST Framework** - RESTful API
- **PostgreSQL** - 数据库
- **CORS Headers** - 跨域支持

## 📁 项目结构

```
Quant-Speed_ai_hardware/
├── frontend/                 # React前端应用
│   ├── src/
│   │   ├── components/        # React组件
│   │   │   └── HardwareShop.jsx
│   │   ├── App.jsx           # 主应用组件
│   │   ├── api.js            # API接口封装
│   │   └── main.jsx          # 应用入口
│   ├── package.json          # 前端依赖配置
│   └── vite.config.js        # Vite配置
├── backend/                   # Django后端应用
│   ├── config/               # Django配置
│   │   ├── settings.py       # 主配置文件
│   │   ├── urls.py           # URL路由配置
│   │   └── wsgi.py         # WSGI配置
│   ├── shop/                 # 商城应用
│   │   ├── models.py         # 数据模型
│   │   ├── views.py          # 视图函数
│   │   ├── serializers.py    # 序列化器
│   │   └── urls.py           # 应用路由
│   ├── manage.py             # Django管理脚本
│   └── populate_db.py        # 数据库初始化脚本
└── README.md
```

## 🚀 快速开始

### 环境要求
- Node.js 18+ 
- Python 3.8+
- PostgreSQL 12+

### 前端安装

```bash
# 进入前端目录
cd frontend

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build
```

### 后端安装

```bash
# 进入后端目录
cd backend

# 创建虚拟环境
python -m venv venv

# 激活虚拟环境
# Windows
venv\Scripts\activate
# macOS/Linux
source venv/bin/activate

# 安装依赖
pip install django djangorestframework django-cors-headers psycopg2-binary

# 数据库配置
# 编辑 config/settings.py 中的数据库配置

# 运行数据库迁移
python manage.py migrate

# 创建超级用户
python manage.py createsuperuser

# 启动开发服务器
python manage.py runserver
```

### 数据库初始化

```bash
# 运行数据库填充脚本
python populate_db.py
```
### admin账户:
‘
jeremygan2021
qweasdzxc1
’

## 🔧 配置说明

### 前端配置
- **Vite配置**: `frontend/vite.config.js`
- **环境变量**: 支持 `.env` 文件配置

### 后端配置
- **Django设置**: `backend/config/settings.py`
- **数据库**: PostgreSQL配置
- **CORS**: 跨域请求配置
- **国际化**: 中文支持

## 📡 API接口

### 硬件配置接口
- `GET /api/configs/` - 获取硬件配置列表
- `GET /api/configs/{id}/` - 获取特定配置详情

### 订单接口
- `POST /api/orders/` - 创建订单
- `GET /api/orders/{id}/` - 获取订单详情
- `POST /api/orders/{id}/pay/` - 订单支付

### 支付接口
- `POST /api/payments/initiate/` - 发起支付
- `POST /api/payments/confirm/` - 确认支付

## 🎯 使用说明

### 推广码功能
系统支持URL推广码参数，格式：`?ref=推广码`

### 支付流程
1. 选择硬件配置
2. 填写订单信息
3. 发起支付请求
4. 确认支付结果
5. 订单完成

## 🔒 安全说明

- 生产环境请修改 `SECRET_KEY`
- 配置HTTPS证书
- 设置适当的CORS白名单
- 定期备份数据库

## 🐛 常见问题

### 跨域问题
确保后端CORS配置正确，开发环境可设置为允许所有来源。

### 数据库连接失败
检查PostgreSQL服务状态和连接配置。

### 前端构建失败
检查Node.js版本和依赖包完整性。

## 📞 联系方式

如有问题或建议，请通过以下方式联系：
- 邮箱：support@Quant-Speed-ai.com
- 电话：400-123-4567

## 📄 许可证

本项目采用 MIT 许可证 - 详见 [LICENSE](LICENSE) 文件

## 🙏 致谢

感谢以下开源项目的支持：
- [React](https://reactjs.org/)
- [Django](https://www.djangoproject.com/)
- [Ant Design](https://ant.design/)
- [Vite](https://vitejs.dev/)

---

**⭐ 如果这个项目对您有帮助，请给我们一个星标！**