量极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+

前端安装

# 进入前端目录
cd frontend

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

后端安装

# 进入后端目录
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

数据库初始化

# 运行数据库填充脚本
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/ - 确认支付

上传图片接口 不要乱传文件，造成oss存储费用增加

上传硬件的3D文件（小智参数） zip压缩包，包含3文件和材质文件

• POST https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/market_page/hardware_xiaozhi/product_3D_image - 上传3D文件

上传硬件的图片（小智参数） 单张图片

• POST https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/market_page/hardware_xiaozhi/product_image - 上传图片

🎯 使用说明

推广码功能

系统支持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 文件

🙏 致谢

感谢以下开源项目的支持：

• React
• Django
• Ant Design
• Vite

---

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