293 lines
8.4 KiB
Markdown
293 lines
8.4 KiB
Markdown
# Power Leasing - 电商系统
|
||
|
||
一个基于 Vue 2 + Element UI 的轻量级电商系统，包含商品展示、购物车、结算等完整功能。
|
||
|
||
## 🚀 功能特性
|
||
|
||
### 核心功能
|
||
- **商品列表页面** - 展示所有商品，支持添加到购物车
|
||
- **商品详情页面** - 商品详细信息展示，数量选择
|
||
- **购物车页面** - 商品管理、数量修改、删除
|
||
- **结算页面** - 订单摘要、收货信息填写、订单提交
|
||
|
||
### 技术特点
|
||
- 轻量级架构，不依赖 Vuex 状态管理
|
||
- 使用 localStorage 持久化购物车数据
|
||
- 响应式设计，支持移动端
|
||
- 完整的无障碍访问支持
|
||
- 错误处理和用户反馈
|
||
|
||
## 🏗️ 项目结构
|
||
|
||
```
|
||
src/
|
||
├── components/ # 公共组件
|
||
│ ├── header.vue # 顶部导航栏（含面包屑导航）
|
||
│ └── content.vue # 内容容器
|
||
├── Layout/ # 布局组件
|
||
│ └── idnex.vue # 主布局
|
||
├── views/ # 页面组件
|
||
│ ├── productList/ # 商品列表
|
||
│ │ └── index.vue
|
||
│ ├── productDetail/ # 商品详情
|
||
│ │ └── index.vue
|
||
│ ├── cart/ # 购物车
|
||
│ │ └── index.vue
|
||
│ └── checkout/ # 结算页面
|
||
│ └── index.vue
|
||
├── utils/ # 工具函数
|
||
│ ├── productService.js # 商品数据服务
|
||
│ ├── cartManager.js # 购物车管理
|
||
│ ├── navigation.js # 导航配置
|
||
│ └── routeTest.js # 路由测试工具
|
||
├── router/ # 路由配置
|
||
│ ├── index.js # 主路由文件
|
||
│ └── routes.js # 路由配置文件
|
||
├── store/ # 状态管理（轻量使用）
|
||
│ └── index.js
|
||
├── App.vue # 根组件
|
||
└── main.js # 入口文件
|
||
```
|
||
|
||
## 🔧 技术栈
|
||
|
||
- **前端框架**: Vue 2.6.14
|
||
- **UI 组件库**: Element UI 2.15.14
|
||
- **路由**: Vue Router 3.5.1
|
||
- **状态管理**: Vuex 3.6.2（轻量使用）
|
||
- **样式**: SCSS + CSS Grid/Flexbox
|
||
- **构建工具**: Vue CLI 5.0
|
||
|
||
## 🧭 路由配置
|
||
|
||
### 完整路由列表
|
||
|
||
| 路径 | 名称 | 描述 | 权限 |
|
||
|------|------|------|------|
|
||
| `/productList` | 商品列表 | 浏览所有可用商品 | all |
|
||
| `/product/:id` | 商品详情 | 查看商品详细信息 | all |
|
||
| `/cart` | 购物车 | 管理购物车商品 | all |
|
||
| `/checkout` | 订单结算 | 完成订单结算 | all |
|
||
|
||
### 路由特性
|
||
|
||
- **嵌套路由**: 所有页面都在 Layout 组件内渲染
|
||
- **动态路由**: 商品详情页支持动态 ID 参数
|
||
- **路由守卫**: 自动设置页面标题和权限检查
|
||
- **错误处理**: 404 页面自动重定向到商品列表
|
||
- **面包屑导航**: 自动生成页面导航路径
|
||
|
||
### 路由文件结构
|
||
|
||
```
|
||
src/router/
|
||
├── index.js # 主路由文件，包含路由守卫和错误处理
|
||
└── routes.js # 路由配置文件，按功能模块组织
|
||
```
|
||
|
||
## 📱 页面说明
|
||
|
||
### 1. 商品列表页面 (`/productList`)
|
||
- 网格布局展示所有商品
|
||
- 商品卡片包含图片、标题、描述、价格
|
||
- 支持点击查看详情
|
||
- 一键添加到购物车
|
||
|
||
### 2. 商品详情页面 (`/product/:id`)
|
||
- 商品图片和详细信息展示
|
||
- **自定义数量选择器**：美观的加减按钮设计，支持1-99数量范围
|
||
- 数量选择器特性：
|
||
- 减号按钮（-）：减少数量，最小值为1时自动禁用
|
||
- 数量输入框：支持直接输入，实时验证范围
|
||
- 加号按钮（+）：增加数量，最大值为99时自动禁用
|
||
- 悬停效果和焦点状态
|
||
- 响应式设计，移动端适配
|
||
- 添加到购物车功能
|
||
- 返回商品列表
|
||
|
||
### 3. 购物车页面 (`/cart`)
|
||
- 购物车商品列表
|
||
- 数量修改和删除功能
|
||
- 实时计算总价和商品数量
|
||
- 清空购物车功能
|
||
- 跳转到结算页面
|
||
|
||
### 4. 结算页面 (`/checkout`)
|
||
- 订单摘要展示
|
||
- 收货信息表单（姓名、电话、地址、备注）
|
||
- 表单验证
|
||
- 订单提交功能
|
||
|
||
## 🛠️ 安装和运行
|
||
|
||
```bash
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# 开发环境运行
|
||
npm run serve
|
||
|
||
# 生产环境构建
|
||
npm run build
|
||
|
||
# 代码检查
|
||
npm run lint
|
||
```
|
||
|
||
## 🧪 路由测试
|
||
|
||
项目包含完整的路由测试工具，可以在浏览器控制台中运行：
|
||
|
||
```javascript
|
||
// 导入测试工具
|
||
import { runFullTest } from './src/utils/routeTest'
|
||
|
||
// 运行完整测试
|
||
runFullTest()
|
||
|
||
// 或者单独测试
|
||
import { testRoutes, testNavigation } from './src/utils/routeTest'
|
||
testRoutes()
|
||
testNavigation()
|
||
```
|
||
|
||
## 🔍 问题修复记录
|
||
|
||
### 页面重复渲染问题
|
||
**问题描述**: 页面出现重复渲染，显示两次相同内容
|
||
|
||
**根本原因**:
|
||
1. 路由配置存在冲突 - 两个相同路径的路由
|
||
2. Layout 组件嵌套问题 - 多层 router-view 嵌套
|
||
3. Vue 版本不匹配 - header.vue 使用了 Vue 3 语法
|
||
|
||
**解决方案**:
|
||
1. 修复路由配置，移除重复路由
|
||
2. 简化 Layout 组件结构，避免多层嵌套
|
||
3. 将 header.vue 改为 Vue 2 语法
|
||
4. 优化组件渲染逻辑
|
||
|
||
### 路由配置完善
|
||
**新增功能**:
|
||
1. 完整的路由配置文件 (`routes.js`)
|
||
2. 导航配置工具 (`navigation.js`)
|
||
3. 路由测试工具 (`routeTest.js`)
|
||
4. 面包屑导航支持
|
||
5. 路由守卫和错误处理
|
||
|
||
### 具体修复内容
|
||
- `src/router/index.js`: 清理重复路由，添加电商页面路由
|
||
- `src/router/routes.js`: 新增路由配置文件
|
||
- `src/utils/navigation.js`: 新增导航配置工具
|
||
- `src/utils/routeTest.js`: 新增路由测试工具
|
||
- `src/components/header.vue`: Vue 3 → Vue 2 语法转换，添加面包屑导航
|
||
- `src/components/content.vue`: 简化组件，移除不必要的 router-view
|
||
- 新增完整的电商页面组件
|
||
|
||
## 🎨 设计原则
|
||
|
||
- **DRY 原则**: 避免代码重复，提取公共组件和工具函数
|
||
- **KISS 原则**: 保持代码简单易懂
|
||
- **SOLID 原则**: 单一职责，开闭原则
|
||
- **YAGNI 原则**: 只实现当前需要的功能
|
||
- **无障碍访问**: 支持键盘导航和屏幕阅读器
|
||
|
||
## 🔢 数量选择器组件
|
||
|
||
### 组件特性
|
||
- **现代化设计**：圆角边框、阴影效果、悬停状态
|
||
- **交互反馈**：按钮点击动画、焦点状态高亮
|
||
- **数量验证**：自动限制范围（1-99），输入验证
|
||
- **无障碍支持**：包含aria-label属性，支持键盘操作
|
||
- **响应式布局**：移动端和桌面端自适应
|
||
|
||
### 使用方法
|
||
```vue
|
||
<template>
|
||
<div class="quantity-selector">
|
||
<button
|
||
class="quantity-btn minus-btn"
|
||
@click="handleDecreaseQuantity"
|
||
:disabled="quantity <= 1"
|
||
aria-label="减少数量"
|
||
>
|
||
<span class="btn-icon">−</span>
|
||
</button>
|
||
|
||
<input
|
||
type="number"
|
||
class="quantity-input"
|
||
v-model.number="quantity"
|
||
:min="1"
|
||
:max="99"
|
||
aria-label="数量输入"
|
||
/>
|
||
|
||
<button
|
||
class="quantity-btn plus-btn"
|
||
@click="handleIncreaseQuantity"
|
||
:disabled="quantity >= 99"
|
||
aria-label="增加数量"
|
||
>
|
||
<span class="btn-icon">+</span>
|
||
</button>
|
||
</div>
|
||
</template>
|
||
```
|
||
|
||
### 样式定制
|
||
支持以下CSS类名和状态：
|
||
- `.quantity-selector`：主容器样式
|
||
- `.quantity-btn`：按钮基础样式
|
||
- `.minus-btn` / `.plus-btn`：减号/加号按钮
|
||
- `.quantity-input`：数量输入框
|
||
- `.btn-icon`：按钮图标样式
|
||
- 悬停状态、焦点状态、禁用状态
|
||
|
||
## 📱 响应式设计
|
||
|
||
- 使用 CSS Grid 和 Flexbox 布局
|
||
- 移动端优先的响应式设计
|
||
- 支持触摸操作和手势
|
||
- 适配不同屏幕尺寸
|
||
|
||
## 🔒 数据安全
|
||
|
||
- 购物车数据本地存储
|
||
- 表单验证和错误处理
|
||
- 用户输入过滤和清理
|
||
- 安全的订单提交流程
|
||
|
||
## 🚀 未来优化
|
||
|
||
- [ ] 用户登录注册系统
|
||
- [ ] 订单历史记录
|
||
- [ ] 商品搜索和筛选
|
||
- [ ] 支付集成
|
||
- [ ] 商品评价系统
|
||
- [ ] 库存管理
|
||
- [ ] 后台管理系统
|
||
|
||
## 📝 更新日志
|
||
|
||
### v1.2.0 - 数量选择器组件优化 (2024)
|
||
- ✨ 新增自定义数量选择器组件，替换Element UI数字输入框
|
||
- 🎨 现代化UI设计：圆角边框、阴影效果、悬停状态
|
||
- 🔧 功能增强：支持1-99数量范围，实时验证
|
||
- ♿ 无障碍优化：添加aria-label属性，支持键盘操作
|
||
- 📱 响应式设计：移动端和桌面端自适应
|
||
- 🐛 修复：移除重复代码，优化组件结构
|
||
- 📚 文档更新：添加组件使用说明和样式定制指南
|
||
|
||
## 📄 许可证
|
||
|
||
MIT License
|
||
|
||
## 🤝 贡献
|
||
|
||
欢迎提交 Issue 和 Pull Request！
|
||
|
||
---
|
||
|
||
**注意**: 这是一个演示项目，商品数据为静态数据，实际使用时需要连接后端 API。
|