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
|