# 在线点餐项目前端开发

**Repository Path**: lucas-c/online-ordering-project-front

## Basic Information

- **Project Name**: 在线点餐项目前端开发
- **Description**: 在线点餐项目前端开发vue3
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 小陈餐馆在线点餐系统 - 前端项目

> 基于 Vue 3 + Element Plus 构建的在线点餐平台前端应用

---

## 🍔 项目简介

小陈餐馆在线点餐系统是一个面向餐饮行业的数字化解决方案，为用户提供便捷的线上点餐服务，为商家提供高效的店铺管理工具。

### 🎯 项目目标

- **用户端**：提供便捷的点餐体验，支持浏览商家、菜品查看、购物车管理、订单追踪等功能
- **商家端**：提供全面的店铺管理功能，包括菜品管理、订单处理、数据统计等

### ✨ 核心功能

| 模块 | 用户端功能 | 商家端功能 |
|------|-----------|-----------|
| **认证** | 用户注册/登录 | 商家注册/登录 |
| **浏览** | 商家列表、菜品查看 | - |
| **点餐** | 购物车、下单支付 | - |
| **订单** | 订单列表、状态追踪 | 订单管理、状态处理 |
| **管理** | 收货地址管理 | 菜品管理、分类管理 |
| **统计** | - | 数据统计仪表盘 |
| **设置** | 个人中心 | 店铺设置 |

---

## 🛠️ 技术栈

### 前端技术

| 技术 | 版本 | 说明 |
|------|------|------|
| Vue | 3.5.x | 前端框架 |
| Vue Router | 4.x | 路由管理 |
| Element Plus | 2.13.x | UI组件库 |
| Axios | 1.15.x | HTTP请求库 |
| ECharts | 6.1.x | 数据可视化 |
| Vite | 8.0.x | 构建工具 |

### 后端技术

| 技术 | 版本 | 说明 |
|------|------|------|
| Spring Boot | 4.0.x | 后端框架 |
| Spring Data JPA | 3.2.x | 数据持久化 |
| MySQL | 8.0.x | 数据库 |
| Lombok | 1.18.x | 代码简化 |

---

## 📁 项目结构

```
front/online-ordering-project-front/
├── public/                    # 静态资源
│   ├── default-merchant-avatar.jpg  # 默认商家头像
│   ├── favicon.svg            # 网站图标
│   └── ...
├── src/
│   ├── api/                   # API接口封装
│   │   └── merchant.js        # 商家相关API
│   ├── assets/                # 静态资源
│   │   └── images/            # 图片资源
│   ├── components/            # 公共组件
│   │   ├── merchant/          # 商家端组件
│   │   │   └── MerchantLoginRegister.vue
│   │   └── user/              # 用户端组件
│   │       ├── DishOrderModal.vue
│   │       └── UserLoginRegister.vue
│   ├── config/                # 配置文件
│   │   └── index.js           # 全局配置
│   ├── layout/                # 布局组件
│   │   └── MerchantLayout.vue # 商家端布局
│   ├── router/                # 路由配置
│   │   ├── index.js           # 路由入口
│   │   ├── merchant/          # 商家端路由
│   │   │   └── index.js
│   │   └── user/              # 用户端路由
│   │       └── index.js
│   ├── utils/                 # 工具函数
│   │   └── request.js         # Axios封装
│   ├── views/                 # 页面视图
│   │   ├── merchant/          # 商家端页面
│   │   │   ├── CategoryManagement.vue
│   │   │   ├── Dashboard.vue
│   │   │   ├── DishManagement.vue
│   │   │   ├── MerchantHome.vue
│   │   │   ├── OrderManagement.vue
│   │   │   ├── ShopSettings.vue
│   │   │   └── Statistics.vue
│   │   └── user/              # 用户端页面
│   │       ├── AddressPage.vue
│   │       ├── CartPage.vue
│   │       ├── DishDetail.vue
│   │       ├── MerchantDetail.vue
│   │       ├── OrderList.vue
│   │       ├── OrdersPage.vue
│   │       ├── UserCenter.vue
│   │       └── UserHome.vue
│   ├── App.vue                 # 根组件
│   ├── main.js                 # 入口文件
│   └── style.css               # 全局样式
├── .gitignore                 # Git忽略配置
├── index.html                 # HTML模板
├── package.json               # 项目依赖
├── vite.config.js             # Vite配置
└── README.md                  # 项目文档
```

---

## 🚀 快速开始

### 环境要求

- Node.js >= 18.0.0
- npm >= 9.0.0 或 yarn >= 1.22.0

### 安装依赖

```bash
# 使用 npm
npm install

# 或使用 yarn
yarn install
```

### 开发模式

```bash
# 启动开发服务器
npm run dev

# 或
yarn dev
```

访问 http://localhost:5173 查看应用

### 生产构建

```bash
# 构建生产版本
npm run build

# 或
yarn build

# 预览生产版本
npm run preview
```

---

## 🗺️ 路由结构

### 用户端路由

| 路径 | 组件 | 说明 |
|------|------|------|
| `/` | UserHome.vue | 用户首页（商家列表） |
| `/merchant/:id` | MerchantDetail.vue | 商家详情页 |
| `/dish/:id` | DishDetail.vue | 菜品详情页 |
| `/cart` | CartPage.vue | 购物车页面 |
| `/orders` | OrdersPage.vue | 订单列表页 |
| `/order/:id` | OrderList.vue | 订单详情页 |
| `/address` | AddressPage.vue | 收货地址管理 |
| `/user/center` | UserCenter.vue | 用户中心 |

### 商家端路由

| 路径 | 组件 | 说明 |
|------|------|------|
| `/merchant` | MerchantHome.vue | 商家首页 |
| `/merchant/dashboard` | Dashboard.vue | 数据仪表盘 |
| `/merchant/dish` | DishManagement.vue | 菜品管理 |
| `/merchant/category` | CategoryManagement.vue | 分类管理 |
| `/merchant/order` | OrderManagement.vue | 订单管理 |
| `/merchant/statistics` | Statistics.vue | 数据统计 |
| `/merchant/settings` | ShopSettings.vue | 店铺设置 |

---

## 🔌 API接口

### 基础配置

- 后端服务地址：`http://localhost:9090`
- 接口前缀：`/api`

### 用户端接口

| 接口 | 方法 | 说明 |
|------|------|------|
| `/api/user/login` | POST | 用户登录 |
| `/api/user/register` | POST | 用户注册 |
| `/api/user/getCode` | POST | 获取验证码 |
| `/api/user/changePassword` | POST | 修改密码 |
| `/api/merchant/list` | GET | 获取商家列表 |
| `/api/merchant/search` | GET | 搜索商家 |
| `/api/merchant/{id}` | GET | 获取商家详情 |
| `/api/dish/list` | GET | 获取菜品列表 |
| `/api/dish/{id}` | GET | 获取菜品详情 |
| `/api/order/list` | GET | 获取用户订单 |
| `/api/order/create` | POST | 创建订单 |
| `/api/order/pay` | POST | 支付订单 |
| `/api/order/cancel` | POST | 取消订单 |
| `/api/address/list` | GET | 获取收货地址 |
| `/api/address/create` | POST | 创建收货地址 |
| `/api/cart/add` | POST | 添加购物车 |
| `/api/cart/list` | GET | 获取购物车 |

### 商家端接口

| 接口 | 方法 | 说明 |
|------|------|------|
| `/api/merchant/login` | POST | 商家登录 |
| `/api/merchant/register` | POST | 商家注册 |
| `/api/merchant/update` | PUT | 更新商家信息 |
| `/api/dish/create` | POST | 新增菜品 |
| `/api/dish/update` | PUT | 更新菜品 |
| `/api/dish/delete/{id}` | DELETE | 删除菜品 |
| `/api/dish/page` | GET | 分页查询菜品 |
| `/api/category/list` | GET | 获取分类列表 |
| `/api/category/create` | POST | 新增分类 |
| `/api/category/update` | PUT | 更新分类 |
| `/api/category/delete/{id}` | DELETE | 删除分类 |
| `/api/order/merchant/list` | GET | 获取商家订单 |
| `/api/order/merchant/page` | GET | 分页查询订单 |
| `/api/order/merchant/{orderId}/accept` | PUT | 接单 |
| `/api/order/merchant/{orderId}/deliver` | PUT | 配送 |
| `/api/order/merchant/{orderId}/complete` | PUT | 完成订单 |
| `/api/order/merchant/statistics` | GET | 获取统计数据 |
| `/api/upload/dish` | POST | 上传菜品图片 |
| `/api/upload/merchant/avatar` | POST | 上传商家头像 |

---

## 🧩 核心组件说明

### 1. 登录注册组件

**UserLoginRegister.vue** - 用户登录注册组件
- 支持手机号+验证码注册
- 支持手机号+密码登录
- 验证码倒计时功能

**MerchantLoginRegister.vue** - 商家登录注册组件
- 商家注册需填写店铺信息
- 支持手机号+密码登录

### 2. 布局组件

**MerchantLayout.vue** - 商家端布局组件
- 左侧导航菜单
- 顶部用户信息
- 路由视图出口

### 3. 功能组件

**DishOrderModal.vue** - 菜品下单弹窗
- 数量选择
- 价格计算
- 加入购物车

---

## 📊 数据统计模块

商家端数据统计功能包含：

| 统计项 | 说明 |
|--------|------|
| 今日订单数 | 当日订单总量 |
| 今日销售额 | 当日销售金额 |
| 待接单数 | 待处理订单数量 |
| 累计订单数 | 历史订单总量 |
| 累计销售额 | 历史销售总额 |
| 上架菜品数 | 当前上架菜品数量 |
| 订单趋势图 | 近7日订单趋势 |
| 销售趋势图 | 近7日销售额趋势 |
| 菜品销量排行 | 菜品销量TOP10 |
| 订单状态分布 | 各状态订单占比 |

---

## 🗂️ 文件上传

### 图片存储结构

```
D:/upload/
├── dish/                      # 菜品图片
│   └── {merchantId}/          # 商家ID
│       └── {categoryId}/      # 分类ID
│           └── {uuid}.jpg     # 图片文件
└── merchant/                  # 商家相关
    └── avatar/                # 商家头像
        └── {uuid}.jpg         # 头像文件
```

### 上传配置

- 最大文件大小：5MB
- 支持格式：jpg, jpeg, png, gif, webp
- 存储路径：D:/upload/

---

## 🔐 状态管理

### 用户状态

```javascript
// 用户信息存储在 localStorage
localStorage.setItem('userInfo', JSON.stringify({
  userId: 1,
  phone: '13800138000',
  nickname: '用户昵称',
  avatar: '/upload/user/avatar.jpg'
}))
```

### 商家状态

```javascript
// 商家信息存储在 localStorage
localStorage.setItem('merchantInfo', JSON.stringify({
  merchantId: 1,
  merchantName: '店铺名称',
  phone: '13900139000',
  avatar: '/upload/merchant/avatar.jpg',
  token: 'merchant-token-xxx'
}))
```

---

## 📝 开发规范

### 代码风格

- 使用 Vue 3 Composition API
- 组件命名使用 PascalCase
- 文件命名使用 kebab-case
- 变量命名使用 camelCase

### 提交规范

```
feat: 添加新功能
fix: 修复bug
docs: 更新文档
style: 代码格式调整
refactor: 代码重构
test: 添加测试
chore: 构建/工具更新
```

---

## 🧪 测试

```bash
# 运行单元测试
npm run test

# 运行 ESLint 检查
npm run lint
```

---

## 📄 License

MIT License

---

## 📞 联系我们

如有问题或建议，请联系开发团队。

---

**项目版本**：v1.0.0  
**最后更新**：2026年6月