# elm_24 **Repository Path**: zhang_jitong/elm_24 ## Basic Information - **Project Name**: elm_24 - **Description**: THU-2025软件工程综合实践-24组 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-09-26 - **Last Updated**: 2026-01-13 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # ELM外卖平台 > 一个基于Spring Boot + Vue 3的现代化外卖平台系统，集成钱包、积分、优惠券、活动等完整功能模块 [![Java](https://img.shields.io/badge/Java-17-orange.svg)](https://www.oracle.com/java/) [![Spring Boot](https://img.shields.io/badge/Spring%20Boot-3.5.5-brightgreen.svg)](https://spring.io/projects/spring-boot) [![Vue](https://img.shields.io/badge/Vue-3.0-4FC08D.svg)](https://vuejs.org/) [![MySQL](https://img.shields.io/badge/MySQL-5.7+-blue.svg)](https://www.mysql.com/) ## 📋 目录 - [项目简介](#项目简介) - [功能特性](#功能特性) - [技术栈](#技术栈) - [快速开始](#快速开始) - [项目结构](#项目结构) - [核心模块](#核心模块) - [系统架构](#系统架构) - [API文档](#api文档) - [数据库设计](#数据库设计) - [开发指南](#开发指南) - [部署指南](#部署指南) - [常见问题](#常见问题) - [贡献指南](#贡献指南) ## 🎯 项目简介 ELM外卖平台是一个功能完整的外卖订餐系统，支持用户下单、商家管理、订单处理、积分系统、优惠券管理、活动运营等核心业务功能。系统采用前后端分离架构，后端基于Spring Boot构建RESTful API，前端使用Vue 3构建现代化单页应用。 ### 核心功能模块 - **用户系统**：用户注册、登录、个人信息管理 - **商家系统**：商家入驻、店铺管理、菜品管理、订单处理 - **订单系统**：购物车、下单、支付、订单跟踪、评价 - **钱包系统**：充值、提现、转账、交易记录、VIP等级 - **积分系统**：积分获取、积分消费、积分商城、积分明细 - **优惠券系统**：优惠券兑换、使用、管理 - **活动系统**：每日签到、幸运转盘、节日活动 - **管理员系统**：商家审核、活动配置、规则管理 ## ✨ 功能特性 ### 用户端功能 - ✅ 商家浏览与搜索 - ✅ 菜品浏览与下单 - ✅ 购物车管理 - ✅ 订单管理（待支付、待接单、已完成等） - ✅ 订单评价 - ✅ 钱包充值、提现、转账 - ✅ 积分查看与兑换 - ✅ 优惠券查看与使用 - ✅ 每日签到 - ✅ 幸运转盘抽奖 - ✅ 节日活动参与 ### 商家端功能 - ✅ 店铺信息管理 - ✅ 菜品管理（上架、下架、审核） - ✅ 订单管理（接单、拒单、完成） - ✅ 营业状态管理 - ✅ 钱包管理 ### 管理员端功能 - ✅ 商家审核 - ✅ 菜品审核 - ✅ 评论审核 - ✅ 活动配置（签到、转盘、节日活动） - ✅ 充值奖励规则配置 - ✅ 积分规则配置 ## 🛠 技术栈 ### 后端技术 - **框架**: Spring Boot 3.5.5 - **数据库**: MySQL 5.7+ - **ORM**: MyBatis - **认证**: JWT (JSON Web Token) - **构建工具**: Maven 3.9+ - **Java版本**: JDK 17 ### 前端技术 - **框架**: Vue 3 - **UI组件库**: Element Plus - **路由**: Vue Router - **HTTP客户端**: Axios - **构建工具**: Vue CLI / Vite - **样式**: CSS3 + Font Awesome ### 开发工具 - **IDE**: IntelliJ IDEA / VS Code - **版本控制**: Git - **API测试**: Postman / Apifox ## 🚀 快速开始 ### 环境要求 - JDK 17+ - Maven 3.8+ (或使用项目自带的Maven Wrapper) - Node.js 16+ (推荐LTS版本) - MySQL 5.7+ - Git ### 安装步骤 #### 1. 克隆项目 ```bash git clone https://gitee.com/zhang_jitong/elm_24.git cd elm_24 ``` #### 2. 数据库配置 创建数据库： ```sql CREATE DATABASE elm_v2 CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; ``` 导入数据库脚本： ```bash # 使用MySQL客户端执行 mysql -u root -p elm_v2 < 数据库脚本.sql ``` #### 3. 后端配置 编辑 `elm_springboot/src/main/resources/application.properties`: ```properties spring.datasource.url=jdbc:mysql://localhost:3306/elm_v2?useSSL=false&serverTimezone=UTC spring.datasource.username=your_mysql_username spring.datasource.password=your_mysql_password ``` 启动后端服务： ```bash cd elm_springboot ./mvnw spring-boot:run # 或 mvn spring-boot:run ``` 后端服务将在 `http://localhost:8080` 启动 #### 4. 前端配置 安装依赖： ```bash cd elmclient npm install ``` 配置API地址（如需要）： 编辑 `elmclient/src/main.js`: ```javascript axios.defaults.baseURL = 'http://localhost:8080/api/'; ``` 启动前端服务： ```bash npm run serve ``` 前端服务将在 `http://localhost:8081` 启动 #### 5. 访问应用 - 前端页面: http://localhost:8081 - 后端API: http://localhost:8080/api/ ### 预置账号 | 用户名 | 密码 | 角色 | 说明 | | -------- | ------ | -------- | -------------- | | zhangsan | 123456 | 普通用户 | 测试用户账号 | | boss1 | 123456 | 商家 | 川味轩商家账号 | | boss2 | 123456 | 商家 | 海鲜大排档商家 | | admin | admin | 管理员 | 系统管理员账号 | ## 📁 项目结构 ``` elm_24/ ├── elm_springboot/ # 后端服务 │ ├── src/ │ │ ├── main/ │ │ │ ├── java/com/elm/ │ │ │ │ ├── controller/ # 控制器层 │ │ │ │ ├── service/ # 服务层 │ │ │ │ ├── mapper/ # 数据访问层 │ │ │ │ ├── po/ # 实体类 │ │ │ │ ├── vo/ # 视图对象 │ │ │ │ ├── bo/ # 业务对象 │ │ │ │ ├── common/ # 公共类 │ │ │ │ ├── config/ # 配置类 │ │ │ │ └── util/ # 工具类 │ │ │ └── resources/ │ │ │ └── application.properties │ │ └── test/ # 测试代码 │ ├── docs/ # 后端文档 │ └── pom.xml ├── elmclient/ # 前端应用 │ ├── src/ │ │ ├── views/ # 页面组件 │ │ ├── components/ # 公共组件 │ │ ├── router/ # 路由配置 │ │ └── main.js # 入口文件 │ ├── public/ # 静态资源 │ └── package.json ├── 数据库脚本.sql # 数据库脚本 └── README.md # 项目文档 ``` ## 🎨 核心模块 ### 1. 用户认证模块 - JWT令牌认证 - 角色权限管理（USER、BUSINESS、ADMIN） - 用户信息管理 ### 2. 订单模块 - 购物车管理 - 订单创建与支付 - 订单状态流转（未支付→待接单→已接单→配送中→已完成） - 订单评价 ### 3. 钱包模块 - 账户余额管理 - 充值、提现、转账 - 交易记录查询 - VIP等级系统 ### 4. 积分模块 - 积分获取（订单完成、评论、签到、活动） - 积分消费（兑换商品、优惠券） - 积分过期处理 - 积分明细查询 ### 5. 优惠券模块 - 积分兑换优惠券 - 优惠券使用 - 优惠券状态管理（未使用、已使用、已过期） ### 6. 活动模块 - 每日签到 - 幸运转盘抽奖 - 节日活动 ## 🏗 系统架构 ### 整体架构 ``` ┌─────────────────┐ │ 前端应用层 │ │ (Vue 3) │ │ Port: 8081 │ └────────┬────────┘ │ HTTP/REST │ ┌────────▼────────┐ │ API网关层 │ │ (Spring Boot) │ │ Port: 8080 │ └────────┬────────┘ │ ┌────┴────┐ │ │ ┌───▼───┐ ┌───▼───┐ │业务逻辑层│ │数据访问层│ │Service │ │ Mapper │ └───┬───┘ └───┬───┘ │ │ └────┬────┘ │ ┌────────▼────────┐ │ 数据持久层 │ │ (MySQL) │ │ Port: 3306 │ └─────────────────┘ ``` ### 后端分层架构 ``` Controller层 (API接口) ↓ Service层 (业务逻辑) ↓ Mapper层 (数据访问) ↓ Database (MySQL) ``` ### 数据流设计 ``` 用户操作 ↓ 前端组件 ↓ Axios请求 ↓ 后端Controller ↓ Service业务处理 ↓ Mapper数据访问 ↓ MySQL数据库 ↓ 返回结果 ↓ 前端展示 ``` ### 认证流程 ``` 用户登录 ↓ 后端验证 ↓ 生成JWT Token ↓ 返回Token给前端 ↓ 前端存储Token ↓ 后续请求携带Token ↓ 后端验证Token ↓ 允许/拒绝访问 ``` ## 📡 API文档 ### API基础信息 - **Base URL**: `http://localhost:8080/api/` - **协议**: HTTP/HTTPS - **数据格式**: JSON - **字符编码**: UTF-8 - **认证方式**: Bearer Token (JWT) - **请求头**: `Authorization: Bearer ` ### 统一响应格式 **成功响应**: ```json { "success": true, "code": "200", "data": {}, "message": "操作成功" } ``` **错误响应**: ```json { "success": false, "code": "错误代码", "data": null, "message": "错误信息" } ``` **特殊接口** (`/api/auth`): ```json { "id_token": "JWT_TOKEN_STRING" } ``` ### 主要API端点 #### 认证相关 - `POST /auth` - 用户登录 - `POST /register` - 用户注册 - `GET /user` - 获取当前用户信息 #### 订单相关 - `GET /orders` - 获取订单列表 - `POST /orders` - 创建订单 - `PUT /orders/{id}/cancel` - 取消订单 - `PUT /orders/{id}/receive` - 商家接单 - `PUT /orders/{id}/reject` - 商家拒单 #### 钱包相关 - `GET /wallet` - 获取钱包信息 - `POST /wallet/recharge` - 充值 - `POST /wallet/withdraw` - 提现 - `GET /wallet/transactions` - 获取交易记录 #### 积分相关 - `GET /points/account` - 获取积分账户 - `GET /points/records` - 获取积分明细 - `POST /points/signin` - 每日签到 - `GET /points/products` - 获取积分商城商品 - `POST /points/exchange` - 兑换商品 #### 优惠券相关 - `GET /points/coupons` - 获取优惠券列表 - `POST /points/coupons/use` - 使用优惠券 #### 活动相关 - `GET /activities` - 获取活动概览 - `POST /activities/wheel/draw` - 幸运转盘抽奖 - `POST /activities/festival/{code}` - 领取节日积分 ### API请求示例 #### JavaScript (Axios) ```javascript // GET请求 const response = await axios.get('/api/user', { headers: { 'Authorization': `Bearer ${token}` } }) // POST请求 const response = await axios.post('/api/orders', { businessId: 1, addressId: 33, cartArr: [...] }, { headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' } }) ``` #### cURL ```bash # GET请求 curl -X GET "http://localhost:8080/api/user" \ -H "Authorization: Bearer " # POST请求 curl -X POST "http://localhost:8080/api/orders" \ -H "Authorization: Bearer " \ -H "Content-Type: application/json" \ -d '{"businessId": 1, "addressId": 33}' ``` ## 🗄 数据库设计 ### 核心表结构 - **users** - 用户表 - **business** - 商家表 - **food** - 菜品表 - **orders** - 订单表 - **orderdetailet** - 订单明细表 - **wallet** - 钱包表 - **transaction** - 交易记录表 - **points_account** - 积分账户表 - **points_record** - 积分明细表 - **points_product** - 积分商城商品表 - **user_coupon** - 用户优惠券表 - **activity_sign_config** - 签到配置表 - **activity_festival** - 节日活动表 - **activity_wheel_prize** - 转盘奖品表 ### 状态字段说明 #### 订单状态 (orders.status) - `unpaid` - 未支付 - `paid` - 待接单 - `received` - 已接单 - `delivering` - 配送中 - `ended` - 已完成 - `refunded` - 已退款 - `rejected` - 商家拒单 #### 商家状态 (business.status) - `opening` - 营业中 - `closing` - 已打烊 - `banned` - 已封禁 - `offline` - 已下线 - `reviewing` - 审核中 #### 菜品状态 (food.status) - `available` - 在售 - `Reviewing` - 审核中 - `rejected` - 审核未通过 - `soldout` - 售完 #### 优惠券状态 (user_coupon.status) - `unused` - 未使用 - `used` - 已使用 - `expired` - 已过期 #### 积分记录状态 (points_record.status) - `valid` - 有效 - `used` - 已使用 - `expired` - 已过期 详细数据库设计请参考：[数据库脚本](数据库/数据库脚本.sql) ## 💻 开发指南 ### 开发环境搭建 #### IDE推荐 - **后端**: IntelliJ IDEA (推荐) - **前端**: VS Code (推荐) #### 插件推荐 - **VS Code**: Vue Language Features (Volar), ESLint, Prettier - **IntelliJ IDEA**: Lombok, MyBatis, Spring Boot Assistant ### 代码规范 #### Java代码规范 - **类名**: 大驼峰命名，如 `UserController` - **方法名**: 小驼峰命名，如 `getUserInfo()` - **常量**: 全大写下划线分隔，如 `MAX_RETRY_COUNT` - **包名**: 全小写，如 `com.elm.controller` #### Vue代码规范 - **组件文件**: 大驼峰命名，如 `UserProfile.vue` - **组件名**: 与文件名一致 ### 开发流程 ``` 需求分析 ↓ 数据库设计 ↓ 后端开发 ├── 实体类 (PO) ├── Mapper接口 ├── Service接口和实现 └── Controller ↓ 前端开发 ├── 页面组件 ├── 路由配置 └── API调用 ↓ 联调测试 ↓ 代码审查 ↓ 合并主分支 ``` ### 后端开发示例 #### 创建新功能模块 **步骤1: 创建实体类** ```java package com.elm.po; public class NewEntity { private Long id; private String name; // getter/setter } ``` **步骤2: 创建Mapper接口** ```java package com.elm.mapper; @Mapper public interface NewMapper { @Select("SELECT * FROM new_table WHERE id = #{id}") NewEntity getById(@Param("id") Long id); } ``` **步骤3: 创建Service** ```java package com.elm.service; @Service public class NewServiceImpl implements NewService { @Autowired private NewMapper newMapper; @Override public NewEntity getById(Long id) { return newMapper.getById(id); } } ``` **步骤4: 创建Controller** ```java package com.elm.controller; @RestController @RequestMapping("/api/new") public class NewController { @Autowired private NewService newService; @GetMapping("/{id}") public ApiResponse getById(@PathVariable Long id) { return ApiResponse.success(newService.getById(id)); } } ``` ### 前端开发示例 #### 创建新页面 ```vue ``` ### 设计模式 项目遵循SOLID原则和常见设计模式，详细说明请参考： - [设计模式总览](elm_springboot/docs/设计模式分析-总览.md) - [积分系统设计模式](elm_springboot/docs/设计模式分析-Points.md) - [钱包系统设计模式](elm_springboot/docs/设计模式分析-Wallet.md) ## ❓ 常见问题 ### 1. CORS跨域问题 **问题**: 前端请求后端API时出现跨域错误 **解决方案**: 检查 `WebConfig.java` 中的CORS配置： ```java config.addAllowedOriginPattern("*"); // 开发环境 // 生产环境应指定具体域名 ``` ### 2. 端口冲突 **问题**: 默认端口被占用 **解决方案**: - 后端端口: 在 `application.properties` 中配置 `server.port=8081` - 前端端口: 在 `vue.config.js` 中配置 `devServer.port` ### 3. 数据库连接失败 **问题**: 无法连接到MySQL数据库 **解决方案**: 1. 检查MySQL服务是否启动 2. 确认数据库名称、用户名、密码正确 3. 检查防火墙设置 4. 确认数据库已创建 ### 4. JWT Token过期 **问题**: 登录后一段时间提示Token过期 **解决方案**: 重新登录获取新的Token，或调整Token过期时间配置 ### 5. 前端页面空白 **问题**: 前端页面加载后显示空白 **解决方案**: 1. 检查浏览器控制台错误信息 2. 确认后端服务已启动 3. 检查API地址配置是否正确 4. 清除浏览器缓存 ### 6. 插入id=0的用户失败 **问题**: 插入id=0的用户时，MySQL自动将其改为1 **解决方案**: 数据库脚本已包含SQL_MODE设置，允许插入id=0： ```sql SET SESSION sql_mode = CONCAT_WS(',', 'NO_AUTO_VALUE_ON_ZERO', @OLD_SQL_MODE); ``` ### 7. 状态字段不一致 **问题**: 数据库中的状态值与前后端代码不一致 **解决方案**: 确保使用正确的状态值： - 订单: `unpaid`, `paid`, `received`, `delivering`, `ended` - 商家: `opening`, `closing`, `banned`, `offline`, `reviewing` - 菜品: `available`, `Reviewing`, `rejected`, `soldout` ## 🤝 贡献指南 1. Fork 本仓库 2. 创建特性分支 (`git checkout -b feature/AmazingFeature`) 3. 提交更改 (`git commit -m 'Add some AmazingFeature'`) 4. 推送到分支 (`git push origin feature/AmazingFeature`) 5. 开启 Pull Request ### 提交规范 ``` feat: 新功能 fix: 修复bug docs: 文档更新 style: 代码格式调整 refactor: 代码重构 test: 测试相关 chore: 构建/工具相关 ``` ## 📄 许可证 本项目仅供学习和研究使用。 ## 🙏 致谢 感谢所有为本项目做出贡献的开发者和用户！ --- **最后更新**: 2026年1月