# jh-food **Repository Path**: ch1ller/jh-food ## Basic Information - **Project Name**: jh-food - **Description**: 基于 Spring Boot 3 + Vue 3 的校园外卖配送管理系统，集成 AI 智能助手（LangChain4j + Qwen-Max），支持订单管理、商品管理、骑手管理、商家管理、数据统计大屏和 JWT 认证。 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-07-13 - **Last Updated**: 2026-07-28 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # JH Food — 校园外卖配送系统 基于 Spring Boot 3 + Vue 3 的校园外卖配送管理系统，集成 **AI 智能助手**（LangChain4j + 阿里云百炼 Qwen-Max），支持订单管理、商品管理、骑手管理、商家管理、数据统计大屏和 JWT 认证。 ## 技术栈 | 层 | 技术 | | ---- | ---------------------------------------------------------------------------------------- | | 后端 | Spring Boot 3.x, MyBatis Plus 3.x, MySQL 8.0, JWT, LangChain4j, Maven | | 前端 | Vue 3.5 (Composition API), Vite, Element Plus 2, ECharts 5, Pinia 3, Vue Router 4, Axios | | AI | LangChain4j 1.0.0-beta1, 阿里云百炼 (Qwen-Max) / DeepSeek, Function-Call 工具调用 | | 文档 | Swagger/OpenAPI, [设计文档](docs/) | ## 功能模块 | 模块 | 路径 | 说明 | | ---------- | -------------- | ---------------------------------------------------- | | 登录 | /login | 管理员 JWT 认证登录，毛玻璃特效+动画 | | 数据统计 | /charts | 热门商品 Top3、口碑商家 Top5、周趋势图、四大统计圆环 | | 商品管理 | /product | 商品 CRUD、分页搜索、商品简介、图片自动匹配 | | 订单列表 | /order | 订单分页查询、状态更新、评分评价查看 | | 订单日历 | /orderCalendar | 日历视图，按日期分组展示订单 | | 骑手管理 | /student | 骑手 CRUD、扣款/发薪、照片、逻辑删除 | | 商家管理 | /shop | 商家 CRUD、店铺描述、图片、逻辑删除 | | 管理员管理 | /admin | 管理员列表、编辑（含修改密码），支持路由联动 | | AI 助手 | 全局浮动 | 智能问答，查询订单/商品/商家/骑手，流式实时回复 | ## 快速开始 ### 环境要求 - **Java** 17+ - **Node.js** 18+ - **MySQL** 8.0 - **Maven** 3.8+ ### 1. 数据库 ```bash mysql -u root -p123456 < jh-food-server/src/main/resources/db/stl.sql ``` 数据库名自动创建为 `jhun_food`，包含 5 张表及完整的测试数据（19 种商品、10 名骑手、8 家商家、163 条订单）。 ### 2. 配置 AI 助手（可选） ```bash # 复制配置模板并填入真实的 API Key cd jh-food-server/src/main/resources cp application-template.yml application.yml # 编辑 application.yml，替换 YOUR_QWEN_API_KEY 和 YOUR_DEEPSEEK_API_KEY ``` > - **千问 (Qwen)** API Key 从 [阿里云百炼控制台](https://bailian.console.aliyun.com/) 获取 > - **DeepSeek** API Key 从 [DeepSeek 开放平台](https://platform.deepseek.com/) 获取 > - 至少配置一个即可，前端可随时切换模型。不配置不影响系统基本功能，但 AI 助手无法使用。 ### 3. 启动后端 ```bash cd jh-food-server mvn spring-boot:run # 启动在 http://localhost:8888 # Swagger 文档: http://localhost:8888/swagger-ui.html ``` ### 4. 启动前端 ```bash cd jh-food-web npm install npm run dev # 启动在 http://localhost:5173 ``` ### 测试账号 | 角色 | 手机号 | 密码 | | ---------- | ----------- | -------- | | 系统管理员 | 13800000001 | admin123 | | 运营人员 | 13800000002 | 123456 | ## 项目结构 ``` jh-food/ ├── jh-food-server/ # Spring Boot 后端 (:8888) │ └── src/main/ │ ├── java/com/jhun/ │ │ ├── controller/ # REST 控制器 (7个) │ │ │ ├── AdminController # 登录、管理员CRUD │ │ │ ├── AiController # AI 流式聊天接口 (SSE) │ │ │ ├── ChartsController # 12个图表统计API │ │ │ ├── OrderController # 订单查询、状态更新 │ │ │ ├── ProductController # 商品CRUD分页 │ │ │ ├── ShopController # 商家CRUD分页 │ │ │ └── StudentController # 骑手CRUD分页 │ │ ├── service/ # 服务接口 + Function-Call 工具 (6组) │ │ │ ├── ToolService # AI 工具方法 (订单/商品/商家/骑手查询) │ │ ├── service/impl/ # 服务实现 │ │ ├── mapper/ # MyBatis Mapper + 自定义SQL (10个) │ │ ├── pojo/ # 实体类 (5个) │ │ ├── config/ # Spring配置 (分页插件、Swagger、拦截器、AI) │ │ │ ├── AiConfig # LangChain4j AI 服务配置 │ │ ├── exception/ # 全局异常处理 │ │ ├── main/ # 工具类 (验证码生成) │ │ └── util/ # Result封装、PageBean、JWT、ChatRequest、ChatReply │ └── resources/ │ ├── application.yml # 应用配置 │ ├── db/stl.sql # 建库建表+初始数据 │ └── mapper/ # MyBatis XML映射文件 ├── jh-food-web/ # Vue 3 前端 (:5173) │ ├── public/ │ │ ├── product/product1~19.png # 商品图片 │ │ ├── shop/shop1~8.png # 商家图片 │ │ └── student/student1~10.png # 骑手照片 │ └── src/ │ ├── api/ # axios API 封装 (9个文件) │ │ ├── index.js # axios实例+拦截器(令牌自动附加) │ │ ├── adminApi.js # 登录、管理员CRUD │ │ ├── aiApi.js # AI 流式聊天 API (fetch + ReadableStream) │ │ ├── chartsApi.js # 12个统计API │ │ ├── orderApi.js # 订单API │ │ ├── productApi.js # 商品API │ │ ├── shopApi.js # 商家API │ │ ├── studentApi.js # 骑手API │ │ └── captchaApi.js # 验证码API(预留) │ ├── components/ # Vue 组件 (20个页面组件 + 9个图表) │ │ ├── Login.vue # 登录页(毛玻璃特效+动画) │ │ ├── Index.vue # 主布局(美团黄侧边栏+顶栏) │ │ ├── AiAssistant.vue # AI 智能助手浮动挂件 (流式聊天) │ │ ├── Charts.vue # 数据统计仪表盘容器 │ │ ├── Product.vue # 商品管理 │ │ ├── Order.vue # 订单列表 │ │ ├── OrderCalendar.vue # 订单日历 │ │ ├── OrderSign.vue # 商品订单子组件 │ │ ├── Student.vue # 骑手管理 │ │ ├── Shop.vue # 商家管理 │ │ ├── Admin.vue # 管理员管理 │ │ └── charts/ # 图表子组件(9个) │ │ ├── HotProduct.vue # 热门商品饼图 │ │ ├── HotShop.vue # 口碑商家榜 │ │ ├── WeekStudent.vue # 本周骑手折线 │ │ ├── Total.vue # 四大统计圆环 │ │ ├── ProductOrder.vue # 商品订单对比图 │ │ ├── OrderCount.vue # 订单趋势折线 │ │ └── Week*.vue # 备用图表(3个) │ ├── router/index.js # 路由配置(登录+主布局+7子页面) │ ├── store/index.js # Pinia store(adminToken) │ ├── echarts/index.js # ECharts按需引入 │ ├── assets/ # 静态资源(logo/bg.jpg/css) │ └── utils/dateUtil.js # 日期工具 ├── docs/ # 设计文档 │ ├── database.md # 数据库设计+Mapper SQL逐句详解 │ ├── backend.md # 后端设计+JWT令牌机制详解 │ └── frontend.md # 前端设计+组件详解 └── start.bat # Windows一键启动脚本 ``` ## 主题配色 整体采用**美团黄**暖色系： | 位置 | 色值 | 说明 | | ---------- | --------- | ---------- | | 侧边栏背景 | `#FFF8EC` | 暖白底色 | | 侧边栏文字 | `#5C4A2E` | 深棕文字 | | 菜单高亮 | `#E6A800` | 美团黄 | | 图表主色 | `#5B8FF9` | 蓝色系数据 | | 图表辅色 | `#5AD8A6` | 青绿系数据 | | 图表强调色 | `#E8684A` | 珊瑚红 | | 表格表头 | `#E6A800` | 美团黄 | ## 设计文档 - [数据库设计](docs/database.md) — 5 张表完整结构、ER 关系、10 个 Mapper SQL 逐句详解（含三表 JOIN 拆解） - [后端设计](docs/backend.md) — 项目结构、JWT 令牌机制全流程详解、30+ API 接口 - [前端设计](docs/frontend.md) — 完整组件树、路由配置、axios 拦截器、ECharts 自适应机制 ## AI 智能助手 右下角浮动 AI 助手按钮，点击展开聊天面板，支持流式实时回复。 ### 架构 ``` 浏览器 (Vue 3) Spring Boot 千问 / DeepSeek ┌──────────────┐ SSE流 ┌──────────────┐ API调用 ┌────────────┐ │ AiAssistant │ ←─────────── │ AiController │ ────────────→ │ Qwen-Max │ │ (浮动挂件) │ text/stream │ (Flux)│ │ DeepSeek │ │ [模型切换] │ │ [model param] │ │ (自选切换) │ └──────────────┘ └──────┬───────┘ └────────────┘ │ Function-Call ▼ ┌──────────────┐ │ ToolService │ │ (9个@Tool方法)│ └──────┬───────┘ │ MyBatis Plus ▼ ┌──────────────┐ │ MySQL │ │ (jhun_food) │ └──────────────┘ ``` ### 支持的问题类型 | 快捷标签 | 示例问题 | 调用的工具方法 | | -------- | -------------------------- | ------------------------ | | 今日订单 | "今天有多少订单？" | `getTodayOrders()` | | 订单统计 | "系统整体数据概览" | `getOrderStats()` | | 热门商品 | "卖得最好的商品有哪些？" | `getHotProducts()` | | 商家列表 | "有哪些商家？" | `getAllShops()` | | 骑手统计 | "有多少个骑手？" | `getRiderCount()` | | 商品列表 | "列出所有商品" | `getAllProducts()` | | 自由提问 | "帮我查一下#3号订单的详情" | `getOrderById(3)` | | 自由提问 | "骑手张三配送了哪些订单？" | `getOrdersByRiderName()` | ### 技术特点 - **多模型切换**: 前端下拉选择千问 (Qwen) 或 DeepSeek，随时切换 - **流式输出**: SSE (Server-Sent Events) 实时逐字显示，无需等待完整回复 - **Function-Call**: AI 自动识别用户意图，调用对应工具方法查询数据库 - **会话记忆**: 按用户 ID 隔离，每个用户最近 20 条消息保留上下文（切换模型不丢记忆） - **角色预设**: 设定为「JH Food 校园外卖智能助手」，友好专业，只读不写 ## 登录界面 全新毛玻璃登录页：背景虚化遮罩、卡片入场动画、输入校验、loading 状态、Enter 快捷提交。 ![登录页](jh-food-web/src/assets/bg.jpg)