一个完整的全栈电商应用，基于 Flask 后端和 React 前端构建。
项目特点
- 用户系统：完整的注册、登录、个人资料管理功能
- 商品管理：商品浏览、搜索、添加、编辑、删除
- 购物车：添加商品、修改数量、删除商品、清空购物车
- 订单管理：创建订单、查看订单历史、订单状态跟踪
- 密码重置：支持忘记密码和密码重置功能
技术栈
后端
- Flask：Python Web 框架
- JWT：用户认证
- RESTful API：接口设计规范
前端
- React：用户界面库
- Vite：构建工具
- CSS：自定义样式
快速开始
环境要求
- Python 3.8+
- Node.js 16+
- MongoDB
后端设置
cd backend
python -m venv venv
source venv/bin/activate # Linux/Mac
# 或
.\\venv\\Scripts\\activate # Windows
pip install -r requirements.txt
cp .env.example .env
# 编辑 .env 文件，设置数据库连接等信息
python initialize_data.py
python wsgi.py
后端服务将在 http://localhost:5000 运行。
前端设置
cd frontend
npm install
npm run dev
前端服务将在 http://localhost:5173 运行。
项目结构
flask-ecommerce/
├── backend/
│ ├── app/
│ │ ├── api/ # API 路由
│ │ │ ├── auth.py # 认证接口
│ │ │ ├── cart.py # 购物车接口
│ │ │ ├── orders.py # 订单接口
│ │ │ └── products.py # 产品接口
│ │ ├── models/ # 数据模型
│ │ │ ├── cart.py
│ │ │ ├── order.py
│ │ │ ├── product.py
│ │ │ └── user.py
│ │ └── utils/ # 工具函数
│ │ └── security.py
│ ├── wsgi.py # WSGI 入口
│ ├── requirements.txt # Python 依赖
│ └── initialize_data.py # 数据初始化
├── frontend/
│ ├── src/
│ │ ├── components/ # React 组件
│ │ │ └── Navbar.jsx
│ │ ├── context/ # 状态管理
│ │ │ └── AuthContext.jsx
│ │ ├── pages/ # 页面组件
│ │ │ ├── Home.jsx
│ │ │ ├── Login.jsx
│ │ │ ├── Register.jsx
│ │ │ ├── Cart.jsx
│ │ │ ├── Orders.jsx
│ │ │ ├── Profile.jsx
│ │ │ ├── ProductDetail.jsx
│ │ │ ├── ForgotPassword.jsx
│ │ │ └── ResetPassword.jsx
│ │ ├── services/ # API 服务
│ │ │ └── api.js
│ │ ├── App.jsx
│ │ └── main.jsx
│ └── package.json
└── README.md
API 文档
认证接口
- POST /api/auth/register – 用户注册
- POST /api/auth/login – 用户登录
- GET /api/auth/profile – 获取用户资料（需登录）
- POST /api/auth/forgot-password – 忘记密码
- POST /api/auth/reset-password/<token> – 重置密码
商品接口
- GET /api/products – 获取商品列表
- GET /api/products/<product_id> – 获取单个商品详情
- POST /api/products – 创建商品（需登录）
- PUT /api/products/<product_id> – 更新商品（需登录）
- DELETE /api/products/<product_id> – 删除商品（需登录）
购物车接口
- GET /api/cart – 获取购物车（需登录）
- POST /api/cart/add – 添加商品到购物车（需登录）
- PUT /api/cart/update/<product_id> – 更新商品数量（需登录）
- DELETE /api/cart/remove/<product_id> – 删除商品（需登录）
- DELETE /api/cart/clear – 清空购物车（需登录）
订单接口
- GET /api/orders – 获取订单列表（需登录）
- GET /api/orders/<order_id> – 获取订单详情（需登录）
- POST /api/orders – 创建订单（需登录）
- PUT /api/orders/<order_id> – 更新订单（需登录）
