144 lines
2.8 KiB
Markdown
144 lines
2.8 KiB
Markdown
|
# 电商PC端项目
|
|||
|
|
|
|||
|
|
基于 HTML + CSS + jQuery 的电商PC端项目，支持国际化多语言切换（中文/英文/日文）。
|
|||
|
|
|
|||
|
|
## 项目特点
|
|||
|
|
|
|||
|
|
- 📱 响应式设计，支持多种屏幕尺寸
|
|||
|
|
- 🌍 国际化支持（中文、英文、日文）
|
|||
|
|
- 🎨 现代简洁的UI设计
|
|||
|
|
- 🛒 完整的购物车功能
|
|||
|
|
- 🔍 商品搜索和筛选
|
|||
|
|
- 📄 分页展示
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
|
|||
|
|
- HTML5
|
|||
|
|
- CSS3 (使用CSS变量、Grid、Flexbox)
|
|||
|
|
- jQuery 3.6.0
|
|||
|
|
- LocalStorage (用于数据持久化)
|
|||
|
|
|
|||
|
|
## 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
web/
|
|||
|
|
├── index.html # 商品列表页面
|
|||
|
|
├── assets/
|
|||
|
|
│ ├── css/
|
|||
|
|
│ │ ├── reset.css # CSS重置样式
|
|||
|
|
│ │ ├── common.css # 公共样式
|
|||
|
|
│ │ ├── header.css # 头部样式
|
|||
|
|
│ │ ├── footer.css # 底部样式
|
|||
|
|
│ │ └── product-list.css # 商品列表样式
|
|||
|
|
│ └── js/
|
|||
|
|
│ ├── i18n.js # 国际化配置
|
|||
|
|
│ ├── common.js # 公共函数
|
|||
|
|
│ └── product-list.js # 商品列表逻辑
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 功能模块
|
|||
|
|
|
|||
|
|
### 1. 多语言切换
|
|||
|
|
- 支持中文、英文、日文三种语言
|
|||
|
|
- 语言偏好保存在 localStorage
|
|||
|
|
- 实时切换，无需刷新页面
|
|||
|
|
|
|||
|
|
### 2. 商品筛选
|
|||
|
|
- 按库存状态筛选
|
|||
|
|
- 按价格区间筛选
|
|||
|
|
- 按商品分类筛选
|
|||
|
|
- 支持多条件组合筛选
|
|||
|
|
|
|||
|
|
### 3. 商品排序
|
|||
|
|
- 推荐排序
|
|||
|
|
- 最畅销排序
|
|||
|
|
- 价格升序/降序
|
|||
|
|
- 最新上架排序
|
|||
|
|
|
|||
|
|
### 4. 购物车
|
|||
|
|
- 添加商品到购物车
|
|||
|
|
- 购物车数量实时更新
|
|||
|
|
- 数据持久化存储
|
|||
|
|
|
|||
|
|
## 使用方法
|
|||
|
|
|
|||
|
|
1. 直接在浏览器中打开 `index.html`
|
|||
|
|
2. 或者使用本地服务器：
|
|||
|
|
```bash
|
|||
|
|
# 使用 Python
|
|||
|
|
python -m http.server 8000
|
|||
|
|
|
|||
|
|
# 使用 Node.js http-server
|
|||
|
|
npx http-server
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## API接口说明
|
|||
|
|
|
|||
|
|
当前版本使用模拟数据，实际项目中需要对接后端API：
|
|||
|
|
|
|||
|
|
### 商品列表 API
|
|||
|
|
```
|
|||
|
|
GET /api/products
|
|||
|
|
参数：
|
|||
|
|
- page: 页码
|
|||
|
|
- limit: 每页数量
|
|||
|
|
- category: 分类
|
|||
|
|
- minPrice: 最低价格
|
|||
|
|
- maxPrice: 最高价格
|
|||
|
|
- sort: 排序方式
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 浏览器兼容性
|
|||
|
|
|
|||
|
|
- Chrome (推荐)
|
|||
|
|
- Firefox
|
|||
|
|
- Safari
|
|||
|
|
- Edge
|
|||
|
|
|
|||
|
|
## 待开发功能
|
|||
|
|
|
|||
|
|
- [ ] 商品详情页
|
|||
|
|
- [ ] 购物车页面
|
|||
|
|
- [ ] 用户登录/注册
|
|||
|
|
- [ ] 订单管理
|
|||
|
|
- [ ] 支付集成
|
|||
|
|
- [ ] 个人中心
|
|||
|
|
|
|||
|
|
## 后续优化
|
|||
|
|
|
|||
|
|
1. 图片懒加载优化
|
|||
|
|
2. 添加骨架屏加载效果
|
|||
|
|
3. 性能优化（防抖、节流）
|
|||
|
|
4. SEO优化
|
|||
|
|
5. 添加单元测试
|
|||
|
|
|
|||
|
|
## 开发说明
|
|||
|
|
|
|||
|
|
### 添加新语言
|
|||
|
|
在 `assets/js/i18n.js` 中的 `messages` 对象添加新语言配置：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
messages: {
|
|||
|
|
'zh-CN': { ... },
|
|||
|
|
'en-US': { ... },
|
|||
|
|
'new-lang': {
|
|||
|
|
// 添加翻译
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 自定义主题颜色
|
|||
|
|
修改 `assets/css/common.css` 中的 CSS 变量：
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
:root {
|
|||
|
|
--primary-color: #ff6b6b;
|
|||
|
|
--secondary-color: #4ecdc4;
|
|||
|
|
/* ... */
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 许可证
|
|||
|
|
|
|||
|
|
MIT License
|