# springboot架构小组仓库--前端页面

**Repository Path**: iamLemonTea/Springboot-mall-front

## Basic Information

- **Project Name**: springboot架构小组仓库--前端页面
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2026-06-10
- **Last Updated**: 2026-07-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 二手手机商城 - 前端项目

## 📁 项目结构

```
mall-front-mall/
├── public/                 # 静态资源
├── src/
│   ├── api/               # API 请求封装
│   │   ├── request.js     # axios 实例和拦截器
│   │   ├── user.js        # 用户相关 API
│   │   ├── product.js     # 商品相关 API
│   │   ├── cart.js        # 购物车相关 API
│   │   └── order.js       # 订单相关 API
│   ├── assets/            # 资源文件
│   ├── components/        # 公共组件
│   ├── router/            # 路由配置
│   │   └── index.js       # 路由守卫和路由表
│   ├── store/             # 状态管理 (Pinia)
│   │   ├── user.js        # 用户状态
│   │   └── cart.js        # 购物车状态
│   ├── views/             # 页面组件
│   │   ├── Home.vue       # 首页
│   │   ├── user/          # 用户模块
│   │   │   ├── Login.vue         # 登录页
│   │   │   ├── Register.vue      # 注册页
│   │   │   └── UserProfile.vue   # 个人中心
│   │   ├── product/       # 商品模块
│   │   │   └── ProductDetail.vue # 商品详情
│   │   ├── cart/          # 购物车模块
│   │   │   └── Cart.vue         # 购物车页
│   │   └── order/         # 订单模块
│   │       ├── Order.vue        # 订单列表
│   │       └── CreateOrder.vue   # 创建订单
│   ├── App.vue            # 根组件
│   └── main.js            # 入口文件
├── index.html             # HTML 模板
├── package.json           # 项目配置
├── vite.config.js         # Vite 配置
└── README.md              # 项目说明文档
```

## 🎯 功能模块

### 1. 用户模块 (user)
- **登录页** (`Login.vue`)：用户登录，JWT Token 认证
- **注册页** (`Register.vue`)：新用户注册
- **个人中心** (`UserProfile.vue`)：查看用户信息

### 2. 商品模块 (product)
- **首页** (`Home.vue`)：展示所有商品列表
- **商品详情** (`ProductDetail.vue`)：查看商品详情，加入购物车

### 3. 购物车模块 (cart)
- **购物车** (`Cart.vue`)：管理购物车商品，结算

### 4. 订单模块 (order)
- **订单列表** (`Order.vue`)：查看历史订单
- **创建订单** (`CreateOrder.vue`)：确认订单信息并创建

## 🔧 技术栈

- **Vue 3** - 渐进式 JavaScript 框架
- **Vue Router 4** - Vue.js 官方路由管理器
- **Pinia** - Vue.js 状态管理库
- **Axios** - HTTP 请求库
- **Element Plus** - Vue 3 UI 组件库
- **Vite** - 新一代前端构建工具

## 📝 API 接口说明

所有接口通过网关 `http://localhost:8888` 访问，已配置代理。

### 白名单接口（无需认证）
| 方法 | 路径 | 说明 |
|------|------|------|
| POST | /api/user/login | 用户登录 |
| POST | /api/user/register | 用户注册 |
| GET | /api/product | 获取商品列表 |
| GET | /api/product/{id} | 获取商品详情 |

### 需要认证的接口（需要携带 Token）
需要在请求头中添加：`Authorization: Bearer <token>`

| 方法 | 路径 | 说明 |
|------|------|------|
| GET | /api/user/{id} | 获取用户信息 |
| PUT | /api/user/{id} | 更新用户信息 |
| GET | /api/cart/{userId} | 获取购物车列表 |
| POST | /api/cart | 添加商品到购物车 |
| DELETE | /api/cart/{id} | 删除购物车商品 |
| GET | /api/order/user/{userId} | 获取用户订单 |
| POST | /api/order | 创建订单 |
| PUT | /api/order/{id}/cancel | 取消订单 |
| PUT | /api/order/{id}/pay | 支付订单 |

## 🚀 启动指南

### 环境要求
- Node.js >= 16
- npm >= 8

### 安装依赖

```bash
cd mall-front-mall
npm install
```

### 启动开发服务器

```bash
npm run dev
```

访问地址：`http://localhost:3000`

### 构建生产版本

```bash
npm run build
```

## 🔗 后端服务连接

### 后端服务地址
- **网关端口**：8888
- **用户服务**：8081
- **商品服务**：8082
- **订单服务**：8083
- **购物车服务**：8084
- **Nacos**：8849

### 前端配置
在 `vite.config.js` 中配置了 API 代理：

```javascript
proxy: {
  '/api': {
    target: 'http://localhost:8888', // 网关地址
    changeOrigin: true
  }
}
```

所有以 `/api` 开头的请求都会被代理到网关。

## 🔐 JWT 认证流程

1. **登录**：调用 `/api/user/login` 获取 Token
2. **存储**：Token 存储在 localStorage
3. **请求**：每次请求在请求头携带 Token
4. **拦截**：Axios 拦截器自动添加 Token
5. **验证**：网关 JwtAuthFilter 验证 Token 有效性

## 📱 页面路由

| 路径 | 页面 | 是否需要登录 |
|------|------|-------------|
| / | 首页 | 否 |
| /home | 首页 | 否 |
| /login | 登录页 | 否 |
| /register | 注册页 | 否 |
| /product/:id | 商品详情 | 否 |
| /cart | 购物车 | 是 |
| /order | 订单列表 | 是 |
| /order/create | 创建订单 | 是 |
| /user/profile | 个人中心 | 是 |

## 🎨 组件说明

### API 层 (`src/api/`)
- `request.js`：封装 axios 实例，配置请求拦截器和响应拦截器
- 其他文件：封装各个模块的 API 调用方法

### 状态管理 (`src/store/`)
- `user.js`：管理用户登录状态和 Token
- `cart.js`：管理购物车商品

### 路由 (`src/router/`)
- 配置所有页面路由
- 实现路由守卫，检查登录状态

## 📞 注意事项

1. **跨域问题**：通过 Vite 代理解决，所有请求先发送到前端服务器，再代理到网关
2. **Token 过期**：Token 有效期 24 小时，过期后需要重新登录
3. **Nacos 连接**：确保 Nacos 已启动并正常运行
4. **后端服务**：确保所有后端服务都已启动并注册到 Nacos

## 🐛 常见问题

### 1. 请求 401 未授权
- 检查 Token 是否正确存储
- 检查 Token 是否过期
- 尝试重新登录

### 2. 请求 503 服务不可用
- 检查后端服务是否启动
- 检查服务是否注册到 Nacos
- 检查网关是否正常运行

### 3. 无法连接后端
- 检查 Vite 代理配置
- 检查网关端口是否正确
- 确保没有端口冲突

## 📄 License

MIT