220 lines
5.3 KiB
Markdown
220 lines
5.3 KiB
Markdown
# 量极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/` - 确认支付
|
||
|
||
|
||
## 上传图片接口 不要乱传文件，造成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](LICENSE) 文件
|
||
|
||
## 🙏 致谢
|
||
|
||
感谢以下开源项目的支持：
|
||
- [React](https://reactjs.org/)
|
||
- [Django](https://www.djangoproject.com/)
|
||
- [Ant Design](https://ant.design/)
|
||
- [Vite](https://vitejs.dev/)
|
||
|
||
---
|
||
|
||
**⭐ 如果这个项目对您有帮助，请给我们一个星标！** |