# web-mall

**Repository Path**: yxsw/web-mall

## Basic Information

- **Project Name**: web-mall
- **Description**: 新版商城， 简单模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-28
- **Last Updated**: 2025-08-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Web商城 - Vue3 + Vite 项目

一个基于 Vue3 + Vite 构建的现代化Web商城前端项目，采用最新的技术栈和最佳实践。

## 🚀 技术栈

- **前端框架**: Vue 3 (Composition API + `<script setup>`)
- **构建工具**: Vite 4.x
- **UI组件库**: Ant Design Vue 4.x
- **状态管理**: Vuex 4
- **路由管理**: Vue Router 4
- **HTTP客户端**: Axios
- **数据模拟**: MockJS
- **开发语言**: JavaScript (ES6+)

## ✨ 功能特性

### 🛍️ 商城功能
- **商品展示**: 商品列表、商品详情、分类浏览
- **搜索功能**: 关键词搜索、分类筛选、价格排序
- **购物车**: 添加商品、数量调整、价格计算
- **用户系统**: 登录注册、个人中心、订单管理
- **订单系统**: 订单创建、支付流程、物流跟踪

### 🎨 界面特性
- **响应式设计**: 适配桌面端和移动端
- **现代化UI**: 基于Ant Design Vue的美观界面
- **用户体验**: 流畅的交互和动画效果
- **主题定制**: 支持主题切换和个性化设置

### 🔧 技术特性
- **模块化架构**: 清晰的目录结构和代码组织
- **状态管理**: 基于Vuex的集中式状态管理
- **路由守卫**: 完善的权限控制和页面保护
- **API封装**: 统一的HTTP请求处理和错误处理
- **数据持久化**: 本地存储用户信息和购物车数据
- **数据模拟**: 使用MockJS生成随机测试数据

## 📁 项目结构

```
web-mall/
├── public/                 # 静态资源
├── src/
│   ├── api/               # API接口定义
│   ├── components/        # 公共组件
│   │   ├── Header.vue     # 顶部导航栏
│   │   ├── Footer.vue     # 底部信息
│   │   ├── ProductCard.vue # 商品卡片
│   │   └── CartSidebar.vue # 购物车侧边栏
│   ├── mock/              # MockJS数据模拟
│   │   └── index.js       # Mock配置和数据生成
│   ├── router/            # 路由配置
│   ├── store/             # Vuex状态管理
│   │   ├── index.js       # 根store
│   │   └── modules/       # 模块化store
│   │       ├── user.js    # 用户模块
│   │       ├── cart.js    # 购物车模块
│   │       └── product.js # 商品模块
│   ├── utils/             # 工具函数
│   │   └── request.js     # HTTP请求封装
│   ├── views/             # 页面组件
│   │   ├── Home.vue       # 首页
│   │   ├── Products.vue   # 商品列表
│   │   ├── ProductDetail.vue # 商品详情
│   │   ├── Cart.vue       # 购物车
│   │   ├── Checkout.vue   # 结算页面
│   │   ├── Login.vue      # 登录页面
│   │   ├── Register.vue   # 注册页面
│   │   ├── Profile.vue    # 个人中心
│   │   ├── Orders.vue     # 订单列表
│   │   ├── OrderDetail.vue # 订单详情
│   │   ├── Search.vue     # 搜索结果
│   │   ├── Category.vue   # 分类页面
│   │   ├── About.vue      # 关于我们
│   │   ├── Contact.vue    # 联系我们
│   │   ├── TestMock.vue   # MockJS测试页面
│   │   └── NotFound.vue   # 404页面
│   ├── App.vue            # 根组件
│   ├── main.js            # 入口文件
│   └── style.css          # 全局样式
├── index.html             # HTML模板
├── package.json           # 项目配置
├── vite.config.js         # Vite配置
└── README.md              # 项目说明
```

## 🛠️ 安装和运行

### 环境要求
- Node.js >= 16.0.0
- npm >= 8.0.0

### 安装依赖
```bash
npm install
```

### 开发环境运行
```bash
npm run dev
```
项目将在 `http://localhost:3000` 启动

### 生产环境构建
```bash
npm run build
```

### 预览生产构建
```bash
npm run preview
```

## 📱 页面路由

| 路由 | 页面 | 描述 |
|------|------|------|
| `/` | 首页 | 商城首页，展示推荐商品和分类 |
| `/products` | 商品列表 | 所有商品展示，支持筛选和排序 |
| `/product/:id` | 商品详情 | 单个商品的详细信息 |
| `/cart` | 购物车 | 购物车商品管理和结算 |
| `/checkout` | 结算页面 | 订单确认和支付流程 |
| `/login` | 登录页面 | 用户登录 |
| `/register` | 注册页面 | 用户注册 |
| `/profile` | 个人中心 | 用户信息和设置管理 |
| `/orders` | 订单列表 | 用户订单历史 |
| `/order/:id` | 订单详情 | 单个订单的详细信息 |
| `/search` | 搜索结果 | 关键词搜索商品 |
| `/category/:category` | 分类页面 | 按分类浏览商品 |
| `/about` | 关于我们 | 公司介绍 |
| `/contact` | 联系我们 | 联系方式和客服信息 |
| `/test-mock` | MockJS测试 | 测试MockJS数据生成功能 |

## 🎯 主要组件

### Header.vue
- 顶部导航栏
- 搜索功能
- 购物车图标
- 用户菜单

### ProductCard.vue
- 商品卡片展示
- 价格和评分显示
- 添加到购物车功能

### CartSidebar.vue
- 购物车侧边栏
- 商品数量调整
- 快速结算

## 🔧 配置说明

### Vite配置 (vite.config.js)
- Vue插件支持
- 路径别名配置 (`@` 指向 `src`)
- 开发服务器配置 (端口3000)
- API代理配置
- MockJS集成配置
- 环境变量支持
- 生产环境优化

### Vuex状态管理
- **user模块**: 用户认证和用户信息
- **cart模块**: 购物车商品管理
- **product模块**: 商品数据和分类管理

### API请求封装 (utils/request.js)
- Axios实例配置
- 请求/响应拦截器
- 错误处理
- 加载状态管理

## 🎨 样式系统

### 全局样式 (style.css)
- CSS重置
- 通用工具类
- 响应式布局

### 组件样式
- 使用 `<style scoped>` 确保样式隔离
- 响应式设计支持
- 主题色彩系统

## 📊 数据管理

### 本地存储
- 用户token持久化
- 购物车数据本地存储
- 用户偏好设置

### 模拟数据
- **MockJS集成**: 使用MockJS生成随机测试数据
- **环境控制**: 仅在开发环境启用MockJS
- **商品数据**: 随机商品名称、价格、图片、规格等
- **用户数据**: 随机用户信息、地址、订单等
- **订单数据**: 随机订单状态、物流信息、商品列表等
- **开源图片**: 使用Picsum Photos提供的随机图片服务
- **API代理**: 当后端服务不可用时，MockJS自动拦截请求

## 🚀 部署指南

### 开发环境
1. 克隆项目
2. 安装依赖: `npm install`
3. 启动开发服务器: `npm run dev`

### 生产环境
1. 构建项目: `npm run build`
2. 部署 `dist` 目录到Web服务器
3. 配置反向代理处理API请求

## 🤝 贡献指南

1. Fork 项目
2. 创建功能分支
3. 提交更改
4. 推送到分支
5. 创建 Pull Request

## 📄 许可证

MIT License

## 📞 联系方式

如有问题或建议，请通过以下方式联系：
- 邮箱: support@example.com
- 项目Issues: [GitHub Issues](https://github.com/your-repo/issues)

---

**注意**: 这是一个前端演示项目，使用了MockJS生成的模拟数据。在实际生产环境中，需要配置真实的后端API接口。

## 🧪 MockJS 测试

项目集成了MockJS来生成随机测试数据，您可以通过以下方式测试：

1. **访问测试页面**: 在浏览器中访问 `http://localhost:3000/test-mock`
2. **测试API接口**: 点击各个测试按钮验证MockJS数据生成
3. **查看控制台**: 在浏览器开发者工具中查看API响应数据

### MockJS特性
- **随机数据生成**: 商品、用户、订单等数据都是随机生成的
- **真实图片**: 使用Picsum Photos提供的随机图片
- **完整数据结构**: 包含所有必要的字段和关联关系
- **API接口模拟**: 完全模拟真实API的请求和响应格式