# 外卖

**Repository Path**: ns6/takeout

## Basic Information

- **Project Name**: 外卖
- **Description**: 基于Spring和Vue的外卖网站，学习用
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-02-14
- **Last Updated**: 2026-06-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 苍穹外卖 - 全栈外卖平台系统

<div align="center">

一个基于 **Spring Boot + Vue3 + 微信小程序** 的完整外卖点餐系统

![Spring Boot](https://img.shields.io/badge/Spring%20Boot-2.7.3-brightgreen)
![Vue](https://img.shields.io/badge/Vue-3.x-green)
![TypeScript](https://img.shields.io/badge/TypeScript-4.x-blue)
![License](https://img.shields.io/badge/License-MIT-yellow)

[技术栈](#技术栈) • [功能模块](#功能模块) • [快速开始](#快速开始) • [API 文档](#api-文档) • [项目结构](#项目结构)

</div>

---

## 📖 项目简介

苍穹外卖是一个全栈式的外卖点餐平台，包含三个核心端：

- **🖥️ 管理后台**：供商家使用，管理菜品、订单、员工、数据统计等
- **📱 用户端小程序**：供消费者使用，支持浏览菜品、下单支付、订单查询等功能
- **⚙️ 后端服务**：提供 RESTful API，处理业务逻辑、数据存储、支付集成等

### ✨ 核心特性

- 🔐 **JWT 无状态认证**：前后端分离，支持分布式部署
- 💳 **微信支付集成**：完整的支付流程，支持模拟支付模式
- 📊 **实时数据推送**：WebSocket 实现来单提醒、催单通知
- ⏰ **定时任务处理**：自动取消超时订单、自动完成派送订单
- 🛒 **购物车管理**：完整的购物车功能，支持再来一单
- 📈 **数据统计分析**：营业额统计、订单量统计、销量排名

---

## 🛠️ 技术栈

### 后端服务 (rearend)

#### 核心框架
- **Spring Boot 2.7.3** - 核心框架，提供自动配置和快速开发能力
- **MyBatis 2.2.0** - ORM 持久层框架
- **Spring Security** - 安全框架（用于 JWT 认证）
- **Spring Cache** - 缓存抽象框架
- **Spring WebSocket** - WebSocket 实时通信
- **Spring Task** - 定时任务调度

#### 数据库与中间件
- **MySQL** - 关系型数据库
- **Druid 1.2.1** - 阿里巴巴数据库连接池，提供监控和扩展功能
- **PageHelper 1.3.0** - MyBatis 分页插件
- **Redis** - 缓存数据库，存储店铺状态、验证码等临时数据

#### 第三方服务集成
- **微信支付 API v3** - 处理订单支付、退款
- **阿里云 OSS / MinIO** - 对象存储，存放菜品图片等资源
- **微信小程序接口** - 获取用户 openid、手机号授权

#### 开发辅助工具
- **Lombok 1.18.20** - 简化代码（@Data, @Builder, @Slf4j 等注解）
- **Knife4j 3.0.2** - Swagger 增强版，生成接口文档
- **FastJSON 1.2.83** - JSON 序列化和反序列化
- **Apache POI 3.16** - Excel 文件导入导出（数据统计报表）
- **AspectJ 1.9.4** - AOP 面向切面编程（自动填充公共字段）
- **JWT (JJWT 0.9.1)** - 生成和解析 Token，实现无状态认证

### 前端管理后台 (frontend)

- **Vue 3** - 渐进式 JavaScript 框架
- **Vite** - 新一代前端构建工具
- **TypeScript 4.x** - JavaScript 的超集，提供类型安全
- **Pinia** - Vue 3 的状态管理库
- **Vue Router** - Vue.js 的官方路由管理器
- **Naive UI** - Vue 3 组件库
- **Tailwind CSS** - 实用优先的 CSS 框架
- **Axios** - HTTP 请求库
- **Iconify** - 图标库

### 微信小程序 (weixin)

- **原生小程序开发** - 微信官方框架
- **uni-ui** - UI 组件库
- **本地存储** - wx.setStorageSync 存储用户信息和 token

## 开发环境配置

### 前端管理后台
```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产构建
npm run preview

# 代码检查
npm run lint
```

### 后端服务
```bash
# 使用 Maven 构建
mvn clean package

# 启动服务
java -jar sky-server/target/sky-server.jar
```

## 端口与地址

- **前端管理后台**: http://localhost:3000
- **后端服务**: http://localhost:8080
- **API 基础路径**: /api
- **微信小程序 AppID**: wxec66c715195866c7

---

## 📦 项目结构

```
waimai/
├── frontend/                          # 前端管理后台（Vue3 + TypeScript）
│   ├── src/
│   │   ├── views/                     # 页面组件
│   │   ├── components/                # 公共组件
│   │   ├── router/                    # 路由配置
│   │   ├── stores/                    # Pinia 状态管理
│   │   ├── services/                  # API 服务
│   │   └── utils/                     # 工具函数
│   ├── .env.development               # 开发环境变量
│   ├── .env.production                # 生产环境变量
│   └── vite.config.ts                 # Vite 配置文件
│
├── rearend/                           # 后端服务（Spring Boot）
│   ├── sky-common/                    # 公共模块（工具类、常量、异常）
│   ├── sky-pojo/                      # 实体类模块（Entity、DTO、VO）
│   └── sky-server/                    # 服务主模块
│       ├── controller/                # 控制器层
│       ├── service/                   # 服务层
│       ├── mapper/                    # 数据访问层
│       ├── entity/                    # 实体类
│       ├── dto/                       # 数据传输对象
│       ├── vo/                        # 视图对象
│       ├── config/                    # 配置类
│       ├── interceptor/               # 拦截器
│       ├── aspect/                    # 切面
│       ├── task/                      # 定时任务
│       └── websocket/                 # WebSocket 服务
│
└── weixin/                            # 微信小程序
    ├── pages/                         # 页面
    ├── components/                    # 组件
    ├── utils/                         # 工具函数
    └── static/                        # 静态资源
```

---

## 🎯 功能模块

### 🖥️ 管理后台功能

#### 工作台
- 数据概览（今日订单、今日营收、有效订单）
- 快捷入口（订单管理、菜品管理等）

#### 订单管理
- 订单列表查询（按状态筛选）
- 订单详情查看
- 订单操作（接单、拒单、派送、完成）
- 催单处理（WebSocket 实时通知）

#### 商品管理
- **菜品管理**：新增、编辑、删除、上下架
- **套餐管理**：新增、编辑、删除、上下架
- **分类管理**：菜品分类、套餐分类
- **口味管理**：为菜品设置多种口味

#### 员工管理
- 员工列表（分页查询）
- 新增/编辑员工信息
- 启用/禁用员工账号
- 员工密码修改

#### 数据统计
- 营业额数据统计（折线图展示）
- 用户数据统计
- 订单数量统计
- 销量排名 TOP10

#### 财务管理
- 财务报表查看
- 数据导出（Excel 格式）

### 📱 小程序端功能

#### 首页
- 店铺营业状态显示
- 轮播图广告
- 菜品分类展示
- 推荐菜品

#### 点餐功能
- 菜品浏览（按分类）
- 菜品详情（图片、价格、口味选择）
- 加入购物车
- 购物车管理（增减数量、清空）

#### 订单功能
- 提交订单（选择地址、备注、餐具数量）
- 订单支付（微信支付、模拟支付）
- 历史订单查询
- 订单详情查看
- 再来一单（一键加购）
- 取消订单
- 催单功能

#### 个人中心
- 用户信息展示
- 地址管理（新增、编辑、删除、默认地址）
- 最近订单

### ⚙️ 后端核心功能

#### 认证授权
- JWT Token 生成与验证
- 管理端与用户端双 Token 体系
- ThreadLocal 用户上下文隔离

#### 订单处理
- 订单创建（事务控制）
- 订单支付（真实支付 + 模拟支付）
- 订单状态流转
- 超时订单自动取消（定时任务）
- 派送中订单自动完成（定时任务）

#### 缓存优化
- Redis 缓存店铺状态
- Spring Cache 缓存菜品数据
- 缓存清理策略（新增/修改时清除）

#### 实时推送
- WebSocket 服务端搭建
- 来单提醒推送
- 催单通知推送

#### 文件上传
- MinIO/OSS 对象存储集成
- 图片上传接口
- 文件大小限制（1MB）

---

## 🚀 快速开始

### 环境要求

- **JDK**: 9+
- **Node.js**: 14+
- **Maven**: 3.6+
- **MySQL**: 5.7+
- **Redis**: 5.0+
- **微信开发者工具**: 最新版

### 1️⃣ 数据库初始化

```bash
# 1. 创建数据库
CREATE DATABASE sky_take_out CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

# 2. 导入 SQL 脚本（在 docs/sql 目录下）
mysql -u root -p sky_take_out < docs/sql/schema.sql
mysql -u root -p sky_take_out < docs/sql/data.sql
```

### 2️⃣ 后端服务启动

```bash
# 1. 进入后端目录
cd rearend

# 2. 修改配置文件（sky-server/src/main/resources/application.yml）
# 配置数据库连接、Redis、JWT 密钥、MinIO、微信支付等信息

# 3. Maven 构建
mvn clean package -DskipTests

# 4. 启动服务
java -jar sky-server/target/sky-server.jar

# 启动成功后会显示：server started
```

**访问后端接口文档**：http://localhost:8080/doc.html

### 3️⃣ 前端管理后台启动

```bash
# 1. 进入前端目录
cd frontend

# 2. 安装依赖
npm install

# 3. 启动开发服务器
npm run dev

# 启动成功后访问：http://localhost:3000
```

### 4️⃣ 小程序端启动

```bash
# 1. 打开微信开发者工具

# 2. 导入项目：选择 weixin 目录

# 3. 配置 AppID（project.config.json）
# 当前配置：wxec66c715195866c7

# 4. 编译运行即可
```

---

## ⚙️ 配置说明

### 后端环境变量配置

在 `application.yml` 中配置以下环境变量：

```yaml
sky:
  datasource:
    host: localhost
    port: 3306
    database: sky_take_out
    username: root
    password: your_password
  
  redis:
    host: localhost
    port: 6379
  
  jwt:
    admin-secret-key: itcast
    user-secret-key: zong
    admin-ttl: 7200000  # 2 小时
    user-ttl: 7200000
  
  minio:
    endpoint: http://localhost:9000
    access-key: your_access_key
    secret-key: your_secret_key
    bucket-name: takeout
  
  wechat:
    appid: wxec66c715195866c7
    secret: your_wechat_secret
    mchid: your_mch_id
    notifyUrl: http://your-domain.com/user/order/paySuccess
```

### 前端环境变量

**开发环境** (`.env.development`):
```env
NODE_ENV=development
VITE_APP_TITLE=外卖平台管理系统
VITE_APP_BASE_API=/api
```

**生产环境** (`.env.production`):
```env
NODE_ENV=production
VITE_APP_TITLE=外卖平台管理系统
VITE_APP_BASE_API=/api
```

### 小程序配置

在 `utils/api.js` 中配置后端接口地址：

```javascript
const BASE_URL = 'http://localhost:8080';
```

---

## 🌐 端口与地址

| 服务 | 地址 | 说明 |
|------|------|------|
| **前端管理后台** | http://localhost:3000 | Vue3 管理后台 |
| **后端服务** | http://localhost:8080 | Spring Boot API 服务 |
| **API 文档** | http://localhost:8080/doc.html | Knife4j 接口文档 |
| **微信小程序** | 微信开发者工具 | 需要导入项目运行 |
| **MinIO 控制台** | http://localhost:9001 | 对象存储管理界面 |

---

## 📝 常用命令

### 前端命令

```bash
# 安装依赖
npm install

# 启动开发服务器（热重载）
npm run dev

# 构建生产版本
npm run build

# 预览生产构建
npm run preview

# 代码检查
npm run lint

# 格式化代码
npm run format
```

### 后端命令

```bash
# Maven 清理
mvn clean

# Maven 编译
mvn compile

# Maven 打包（跳过测试）
mvn clean package -DskipTests

# Maven 测试
mvn test

# 启动服务
java -jar sky-server/target/sky-server.jar

# 查看日志
tail -f sky-server/logs/sky.log
```

---

## 📚 API 文档

后端服务提供了 Knife4j 生成的交互式 API 文档，包含完整的接口说明和在线调试功能。

### 访问地址

```
http://localhost:8080/doc.html
```

### 文档分组

- **管理端接口**：`/admin/**` 路径下的所有接口
- **用户端接口**：`/user/**` 路径下的所有接口

### 接口测试

1. 访问 doc.html 页面
2. 在对应接口处点击"尝试"
3. 填写参数后执行即可测试

**注意**：需要先登录后端系统获取 Token，然后在请求头中添加 `authentication: your_token`

---

## 🔧 开发指南

### 新增菜品接口

**后端**：
```java
@PostMapping
@ApiOperation("新增菜品")
public Result<String> add(@RequestBody DishDTO dishDTO) {
    dishService.saveWithFlavor(dishDTO);
    return Result.success();
}
```

**前端**：
```typescript
const addDish = async (data: DishDTO) => {
  return axios.post('/admin/dish', data);
};
```

### 添加定时任务

```java
@Component
public class CustomTask {
    
    @Scheduled(cron = "0 */5 * * * ?")  // 每 5 分钟执行一次
    public void execute() {
        // 业务逻辑
    }
}
```

### WebSocket 消息推送

```java
@Autowired
private WebSocketServer webSocketServer;

// 发送消息
public void sendOrderNotification(Long orderId) {
    Map<String, Object> message = new HashMap<>();
    message.put("type", 1);  // 1 来单提醒，2 客户催单
    message.put("orderId", orderId);
    message.put("content", "订单号：" + orderId);
    
    webSocketServer.sendToAllClient(JSON.toJSONString(message));
}
```

---

## 🐛 常见问题

### 1. 跨域问题

**解决方案**：已在后端配置 CORS

```java
@Configuration
public class WebMvcConfiguration extends WebMvcConfigurationSupport {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE");
    }
}
```

### 2. 文件上传大小限制

默认限制为 1MB，如需修改：

```yaml
spring:
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 10MB
```

### 3. 数据库连接失败

检查以下几点：
- MySQL 服务是否启动
- 数据库连接信息是否正确
- 数据库字符集是否为 utf8mb4

### 4. Redis 连接失败

检查：
- Redis 服务是否启动
- Redis 连接配置是否正确
- 防火墙是否阻止 6379 端口

---

## 📄 开源协议

MIT License

---

## 👨‍💻 项目信息

- **创建时间**: 2024
- **最后更新**: 2026-03-28
- **版本**: 1.0-SNAPSHOT
- **技术栈**: Spring Boot 2.7.3 + Vue 3 + TypeScript + 微信小程序

---