# online_supermarket

**Repository Path**: chen_chong/online_supermarket

## Basic Information

- **Project Name**: online_supermarket
- **Description**: 分为用户端和管理端
用户端-买东西
管理端-备货
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-09
- **Last Updated**: 2026-05-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 生鲜超市, 支付配置, Node, React

## README

# 在线超市售卖系统

一个基于 React + Node.js + MySQL 的全栈在线超市购物平台，支持用户端购物、订单管理、支付宝支付以及管理后台商品、订单、用户管理等功能。

## 项目结构

```
onlineSupermarket/
├── client/                 # 前端项目 (React + Vite)
│   ├── src/
│   │   ├── api/           # API 接口封装
│   │   ├── components/    # 公共组件
│   │   ├── pages/         # 页面组件
│   │   ├── store/         # Zustand 状态管理
│   │   └── utils/         # 工具函数
│   └── package.json
├── server/                 # 后端项目 (Express)
│   ├── config/            # 配置文件
│   ├── controllers/       # 控制器
│   ├── middleware/        # 中间件
│   ├── routes/            # 路由
│   ├── uploads/           # 上传文件目录
│   └── utils/             # 工具函数
└── sql/                    # 数据库脚本
    └── supermarket.sql
```

## 技术栈

### 前端
- **框架**: React 18
- **构建工具**: Vite
- **UI 组件库**: NextUI
- **状态管理**: Zustand
- **路由**: React Router v6
- **样式**: Tailwind CSS
- **HTTP 客户端**: Axios
- **动画**: Framer Motion

### 后端
- **框架**: Express.js
- **数据库**: MySQL
- **ORM**: 原生 SQL (mysql2)
- **认证**: JWT (jsonwebtoken)
- **密码加密**: bcryptjs
- **文件上传**: Multer
- **支付**: 支付宝 SDK (沙箱环境)
- **二维码**: qrcode

## 功能特性

### 用户端
- 用户注册/登录
- 商品浏览与搜索
- 商品分类筛选
- 购物车管理
- 收货地址管理
- 订单创建与管理
- 支付宝支付（沙箱）
- 个人中心

### 管理端
- 管理员登录
- 数据概览仪表盘
- 商品管理（CRUD）
- 商品分类管理
- 订单管理
- 用户管理

## 快速开始

### 环境要求
- Node.js >= 16
- MySQL >= 5.7

### 1. 克隆项目

```bash
git clone <repository-url>
cd onlineSupermarket
```

### 2. 数据库配置

1. 创建数据库：
```bash
mysql -u root -p < sql/supermarket.sql
```

2. 配置后端数据库连接：
编辑 `server/config/db.js`，修改数据库连接信息：
```javascript
const db = mysql.createPool({
  host: 'localhost',
  user: 'root',
  password: 'your_password',
  database: 'supermarket'
});
```

### 3. 启动后端服务

```bash
cd server
npm install
npm run dev
```

后端服务默认运行在 `http://localhost:3000`

### 4. 启动前端开发服务器

```bash
cd client
npm install
npm run dev
```

前端服务默认运行在 `http://localhost:5173`

## 默认账号

| 角色 | 用户名 | 密码 |
|------|--------|------|
| 管理员 | admin | 123456 |

## API 接口

### 认证接口
- `POST /api/auth/register` - 用户注册
- `POST /api/auth/login` - 用户登录
- `GET /api/auth/profile` - 获取用户信息
- `PUT /api/auth/profile` - 更新用户信息

### 商品接口
- `GET /api/categories` - 获取分类列表
- `GET /api/products` - 获取商品列表
- `GET /api/products/:id` - 获取商品详情

### 购物车接口
- `GET /api/cart` - 获取购物车
- `POST /api/cart` - 添加商品到购物车
- `PUT /api/cart/:id` - 更新购物车商品数量
- `DELETE /api/cart/:id` - 删除购物车商品

### 订单接口
- `GET /api/orders` - 获取订单列表
- `POST /api/orders` - 创建订单
- `GET /api/orders/:id` - 获取订单详情
- `PUT /api/orders/:id/cancel` - 取消订单

### 地址接口
- `GET /api/addresses` - 获取地址列表
- `POST /api/addresses` - 添加地址
- `PUT /api/addresses/:id` - 更新地址
- `DELETE /api/addresses/:id` - 删除地址

### 支付接口
- `POST /api/pay/create` - 创建支付订单
- `GET /api/pay/status/:orderNo` - 查询支付状态

### 管理接口
- `POST /api/admin/login` - 管理员登录
- `GET /api/admin/dashboard` - 仪表盘数据
- `GET /api/admin/users` - 用户列表
- `GET /api/admin/orders` - 订单列表
- `GET /api/admin/products` - 商品列表（管理）
- `POST /api/admin/products` - 创建商品
- `PUT /api/admin/products/:id` - 更新商品
- `DELETE /api/admin/products/:id` - 删除商品
- `GET /api/admin/categories` - 分类列表
- `POST /api/admin/categories` - 创建分类
- `PUT /api/admin/categories/:id` - 更新分类
- `DELETE /api/admin/categories/:id` - 删除分类

## 数据库表结构

| 表名 | 说明 |
|------|------|
| users | 用户表 |
| categories | 商品分类表 |
| products | 商品表 |
| cart_items | 购物车表 |
| addresses | 收货地址表 |
| orders | 订单表 |
| order_items | 订单商品表 |
| payments | 支付记录表 |

## 支付配置

项目使用支付宝沙箱环境进行支付测试。如需修改支付配置，请编辑 `server/config/alipay.js`：

```javascript
const alipayConfig = {
  appId: 'your_app_id',
  privateKey: 'your_private_key',
  alipayPublicKey: 'your_alipay_public_key',
  gateway: 'https://openapi-sandbox.dl.alipaydev.com/gateway.do',
  notifyUrl: 'your_notify_url',
  returnUrl: 'your_return_url'
};
```

## 开发命令

### 前端
```bash
cd client
npm run dev      # 启动开发服务器
npm run build    # 构建生产版本
npm run preview  # 预览生产构建
```

### 后端
```bash
cd server
npm run dev      # 开发模式（热重载）
npm start        # 生产模式
```

## 项目截图

### 用户端
- 首页：商品分类展示、热销商品
- 商品列表：分类筛选、搜索
- 商品详情：商品信息、加入购物车
- 购物车：商品管理、结算
- 订单：订单列表、订单详情、支付
- 个人中心：个人信息、收货地址

### 管理端
- 仪表盘：数据统计、图表展示
- 商品管理：商品增删改查
- 分类管理：分类增删改查
- 订单管理：订单列表、状态管理
- 用户管理：用户列表

## 注意事项

1. 支付功能使用支付宝沙箱环境，需要使用支付宝沙箱版 APP 扫码测试
2. 上传的商品图片存储在 `server/uploads` 目录
3. 生产环境部署时请修改 JWT 密钥和数据库配置
4. 请确保 MySQL 服务已启动且数据库配置正确

## 许可证

MIT License