# shopping_mall_system
**Repository Path**: syd2333/shopping_mall_system
## Basic Information
- **Project Name**: shopping_mall_system
- **Description**: 完成了mockapi
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-06-06
- **Last Updated**: 2025-06-10
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 商城系统 - Vite版本
一个基于React + TypeScript + Vite的双端商城系统，包含前台商城和后台管理两个子项目。
## 🚀 快速开始
### 安装依赖
```bash
npm install
```
### 启动项目
```bash
npm run dev
```
### 访问项目
#### 前台商城（移动端）
```
http://localhost:3000/mall
```
- 首页: http://localhost:3000/mall/
- 搜索: http://localhost:3000/mall/search
- 商品详情: http://localhost:3000/mall/product/:id
- 购物车: http://localhost:3000/mall/cart
- 个人中心: http://localhost:3000/mall/profile
#### 后台管理（桌面端）
```
http://localhost:3000/admin
```
- 仪表盘: http://localhost:3000/admin/dashboard
- 商品管理: http://localhost:3000/admin/products
- 分类管理: http://localhost:3000/admin/categories
- 订单管理: http://localhost:3000/admin/orders
- 用户管理: http://localhost:3000/admin/users
#### 默认访问
- 访问 http://localhost:3000 会自动重定向到前台商城
## 📁 项目结构
```
shopping_mall_system/
├── 📁 public/ # 静态资源
├── 📁 src/ # 源代码
│ ├── 📄 main.tsx # Vite入口文件（路由配置）
│ ├── 📄 index.css # 全局样式
│ ├── 📁 shared/ # 共享资源
│ │ └── 📁 utils/ # 工具函数
│ │ └── 📄 index.ts # 通用工具函数
│ └── 📁 projects/ # 子项目
│ ├── 📁 mall/ # 前台商城
│ │ ├── 📄 App.tsx # 商城主应用
│ │ ├── 📁 types/ # 类型定义
│ │ │ └── 📄 index.ts # 商城类型定义
│ │ ├── 📁 pages/ # 页面组件
│ │ │ ├── 📁 Home/ # 首页
│ │ │ ├── 📁 Cart/ # 购物车
│ │ │ └── ... # 其他页面
│ │ ├── 📁 components/ # 组件
│ │ └── 📁 styles/ # 样式文件
│ │ └── 📄 index.css # 商城样式
│ └── 📁 admin/ # 后台管理
│ ├── 📄 App.tsx # 管理后台主应用
│ ├── 📁 types/ # 类型定义
│ │ └── 📄 index.ts # 管理后台类型定义
│ ├── 📁 pages/ # 页面组件
│ │ ├── 📁 Dashboard/ # 仪表盘
│ │ └── ... # 其他页面
│ ├── 📁 components/ # 组件
│ └── 📁 styles/ # 样式文件
│ └── 📄 index.css # 管理后台样式
├── 📁 mock/ # Mock数据
│ ├── 📄 _util.ts # Mock工具函数
│ ├── 📁 mall/ # 前台商城Mock API
│ │ ├── 📄 auth.ts # 用户认证API
│ │ ├── 📄 products.ts # 商品相关API
│ │ └── ... # 其他API
│ └── 📁 admin/ # 后台管理Mock API
│ ├── 📄 auth.ts # 管理员认证API
│ ├── 📄 dashboard.ts # 仪表盘API
│ └── ... # 其他API
├── 📄 vite.config.ts # Vite配置
├── 📄 tsconfig.json # TypeScript配置
├── 📄 tsconfig.node.json # Node.js TypeScript配置
├── 📄 package.json # 项目配置
└── 📄 index.html # HTML入口
```//mock看README_API.md
## 🛠️ 技术栈
### 核心框架
- **React 18.2.0**: 用户界面构建
- **TypeScript 5.2.2**: 静态类型检查
- **Vite 5.0.8**: 构建工具和开发服务器
- **React Router DOM 6.20.1**: 路由管理
### UI组件库
- **Antd Mobile 5.34.0**: 前台移动端UI组件
- **Antd 5.12.8**: 后台桌面端UI组件
### 开发工具
- **Vite Plugin Mock 3.0.0**: Mock数据服务
- **MockJS 1.1.0**: 数据模拟
- **Vitest 1.0.4**: 单元测试
- **Axios 1.6.2**: HTTP请求
- **Day.js 1.11.10**: 时间处理
## 🎯 核心特性
### 1. URL路由架构
- **统一端口**: 所有项目运行在3000端口
- **路径区分**: 通过URL路径区分不同项目
- **前台商城**: `/mall/*` 路径
- **后台管理**: `/admin/*` 路径
- **自动重定向**: 根路径自动跳转到前台商城
### 2. Mock数据服务
- **API路径**: 按项目和功能模块组织
- **真实模拟**: 包含延迟、错误处理
- **热更新**: 支持Mock文件热更新
- **TypeScript**: 完整的类型支持
### 3. 模块化设计
- **页面组件**: 独立目录结构
- **类型定义**: 项目级别隔离
- **样式管理**: 项目独立样式
- **路径别名**: 支持@/别名导入
## 📋 Mock API 说明
### 前台商城 API
#### 用户认证
- `POST /api/mall/auth/login` - 用户登录
- `GET /api/mall/auth/profile` - 获取用户信息
- `POST /api/mall/auth/register` - 用户注册
- `POST /api/mall/auth/logout` - 用户登出
#### 商品相关
- `GET /api/mall/products` - 获取商品列表
- `GET /api/mall/products/:id` - 获取商品详情
- `GET /api/mall/products/hot` - 获取热门商品
- `GET /api/mall/products/search` - 搜索商品
- `GET /api/mall/categories` - 获取分类列表
### 后台管理 API
#### 管理员认证
- `POST /api/admin/auth/login` - 管理员登录
- `GET /api/admin/auth/profile` - 获取管理员信息
- `POST /api/admin/auth/logout` - 管理员登出
- `POST /api/admin/auth/change-password` - 修改密码
#### 仪表盘
- `GET /api/admin/dashboard/stats` - 获取统计数据
- `GET /api/admin/dashboard/order-trend` - 订单趋势
- `GET /api/admin/dashboard/revenue-trend` - 收入趋势
- `GET /api/admin/dashboard/category-stats` - 分类统计
- `GET /api/admin/dashboard/recent-orders` - 最近订单
## 🔧 路由配置
### 主路由 (src/main.tsx)
```typescript
{/* 前台商城路由 */}
} />
{/* 后台管理路由 */}
} />
{/* 默认重定向到前台商城 */}
} />
```
### 前台商城路由 (src/projects/mall/App.tsx)
```typescript
} />
} />
} />
} />
} />
{/* ... 其他路由 */}
```
### 后台管理路由 (src/projects/admin/App.tsx)
```typescript
} />
} />
} />
} />
{/* ... 其他路由 */}
```
## 📦 构建和部署
### 开发环境
```bash
npm run dev # 启动开发服务器
```
### 生产构建
```bash
npm run build # 构建生产版本
```
### 预览构建
```bash
npm run preview # 预览构建结果
```
### 测试
```bash
npm run test # 运行单元测试
```
## 🔐 登录信息//这些都还做
### 前台用户
- 用户名: `test`
- 密码: `123456`
### 后台管理员
- 用户名: `admin`
- 密码: `123456`
## 🎨 样式架构
### 前台商城
- **移动端优先**: 最大宽度375px
- **现代设计**: 简洁的移动端界面
- **组件样式**: 基于Antd Mobile
### 后台管理
- **桌面端设计**: 宽屏响应式布局
- **专业界面**: 管理后台风格
- **组件样式**: 基于Antd Design
## 🚀 下一步开发
1. **页面组件实现**: 根据UI设计图实现具体页面
2. **Mock数据完善**: 添加更多API接口和数据
3. **状态管理**: 集成Redux或Zustand
4. **用户认证**: 实现完整的认证流程
5. **单元测试**: 添加组件和功能测试
6. **性能优化**: 代码分割和懒加载
## 📝 开发注意事项
1. **URL访问**: 通过不同的URL路径访问不同项目
- 前台商城: http://localhost:3000/mall
- 后台管理: http://localhost:3000/admin
2. **路由嵌套**: 子项目使用相对路径，主路由处理项目切换
3. **类型定义**: 每个项目有独立的types目录
4. **Mock数据**: 按API路径组织，支持热更新
5. **样式隔离**: 每个项目有独立的样式文件
6. **路径别名**: 使用@/前缀导入文件
## 🌐 访问示例
### 前台商城页面
- 首页: http://localhost:3000/mall/
- 商品搜索: http://localhost:3000/mall/search
- 商品详情: http://localhost:3000/mall/product/1
- 购物车: http://localhost:3000/mall/cart
- 用户登录: http://localhost:3000/mall/login
### 后台管理页面
- 仪表盘: http://localhost:3000/admin/dashboard
- 商品管理: http://localhost:3000/admin/products
- 订单管理: http://localhost:3000/admin/orders
- 用户管理: http://localhost:3000/admin/users
- 管理员登录: http://localhost:3000/admin/login
---
这个新的URL路由架构提供了更直观的访问方式，通过URL路径就能清楚地知道当前访问的是哪个项目，便于开发和测试。