# Elm_Intermediate

**Repository Path**: LCC_Z/elm_intermediate

## Basic Information

- **Project Name**: Elm_Intermediate
- **Description**: 本项目是一个仿 **饿了么** 的外卖点餐 Web 应用，采用前后端分离架构开发。用户可以在移动端风格的页面上浏览附近商家、搜索店铺、查看菜品、管理购物车、提交订单并完成模拟支付；同时支持用户注册登录、个人信息维护、收货地址管理等完整业务流程。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-26
- **Last Updated**: 2026-06-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 饿了么外卖平台（Elm）

> · 软件工程实训（中级）大作业

## 项目简介

本项目是一个仿 **饿了么** 的外卖点餐 Web 应用，采用前后端分离架构开发。用户可以在移动端风格的页面上浏览附近商家、搜索店铺、查看菜品、管理购物车、提交订单并完成模拟支付；同时支持用户注册登录、个人信息维护、收货地址管理等完整业务流程。

后端提供 RESTful API 与 JWT 鉴权，前端基于 Vue 3 构建单页应用，整体结构清晰，适合作为 Java Web 全栈学习与课程实训参考项目。

## 项目亮点

- **前后端分离**：Vue 3 前端 + Spring Boot 后端，职责划分明确
- **完整业务闭环**：从浏览商家 → 加购 → 下单 → 支付 → 查单，流程完整
- **JWT 认证**：登录态管理，接口权限控制
- **API 文档**：集成 Knife4j，接口可在线调试
- **移动端 UI**：仿饿了么界面风格，贴近真实产品体验

## 技术栈

| 层次 | 技术 |
|------|------|
| 前端 | Vue 3、Vite、Vue Router、Vuex、Element Plus、Axios |
| 后端 | Spring Boot 4、MyBatis、MySQL、JWT、Knife4j |
| 运行环境 | JDK 17、Node.js 20+、MySQL 8 |

## 功能概览

| 模块 | 功能说明 |
|------|----------|
| 首页 | 商家分类入口、关键词搜索、商家列表展示 |
| 商家 | 查看商家详情、浏览菜品、加入/修改/删除购物车 |
| 订单 | 确认订单、模拟支付、查看历史订单 |
| 用户 | 注册、登录、修改个人信息/密码/头像 |
| 地址 | 新增、编辑、删除、查看收货地址 |

## 项目结构

```
大作业代码final/
├── SpringBoot/                 # 后端 Spring Boot 项目
│   ├── src/main/java/ynu/edu/
│   │   ├── controller/         # REST 接口层
│   │   ├── service/            # 业务逻辑层
│   │   ├── mapper/             # MyBatis Mapper 接口
│   │   ├── entity/             # 实体类
│   │   ├── config/             # 跨域、Swagger 等配置
│   │   ├── interceptor/        # JWT 拦截器
│   │   └── util/               # 工具类（JWT、统一响应等）
│   └── src/main/resources/
│       ├── application.yml     # 应用配置
│       └── mapper/             # MyBatis XML 映射文件
└── vue_elm/                    # 前端 Vue 项目
    └── src/
        ├── Views/              # 页面组件
        ├── SubComponents/      # 公共子组件
        ├── js/                 # 路由、Vuex 配置
        └── main.js             # 入口文件
```

## 环境要求

| 工具 | 版本要求 |
|------|----------|
| JDK | 17+ |
| Maven | 3.6+ |
| Node.js | ^20.19.0 或 >=22.12.0 |
| MySQL | 5.7+ / 8.0+ |

## 快速开始

### 1. 准备数据库

1. 创建 MySQL 数据库：

```sql
CREATE DATABASE Elm_Db DEFAULT CHARACTER SET utf8mb4;
```

2. 导入课程提供的数据库脚本（包含 `user`、`business`、`food`、`cart`、`orders`、`orderDetailet`、`deliveryAddress` 等表及初始数据）。

3. 修改后端数据库连接配置 `SpringBoot/src/main/resources/application.yml`：

```yaml
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/Elm_Db?useSSL=false
    username: root          # 修改为你的数据库用户名
    password: your_password # 修改为你的数据库密码
```

### 2. 启动后端

```bash
cd SpringBoot

# 方式一：使用 Maven Wrapper（推荐）
./mvnw spring-boot:run        # Linux / macOS
mvnw.cmd spring-boot:run      # Windows

# 方式二：使用 IDE 运行 ynu.edu.MainApplication
```

后端默认运行在 **http://localhost:8085**

### 3. 启动前端

```bash
cd vue_elm
npm install
npm run dev
```

前端默认运行在 **http://localhost:5173**

> 前端已在 `main.js` 中将 Axios 基础地址配置为 `http://localhost:8085`，请确保后端先启动。

## 主要页面路由

| 路由 | 页面 |
|------|------|
| `/home` | 首页 |
| `/businessList` | 商家列表 |
| `/businessInfo` | 商家详情 |
| `/login` | 登录 |
| `/register` | 注册 |
| `/user` | 个人中心 |
| `/order` | 确认订单 |
| `/payment` | 支付 |
| `/orderList` | 订单列表 |
| `/userAddress` | 收货地址管理 |

## API 接口

后端采用 `Controller` 名称作为路径前缀，主要接口如下：

| 控制器 | 说明 |
|--------|------|
| `UserController` | 用户注册、登录、信息修改 |
| `BusinessController` | 商家查询与搜索 |
| `FoodController` | 菜品查询 |
| `CartController` | 购物车增删改查 |
| `OrdersController` | 订单创建、查询、支付状态更新 |
| `DeliveryAddressController` | 收货地址管理 |

### API 文档

后端启动后，可通过以下地址查看接口文档：

- Knife4j 文档：http://localhost:8085/doc.html
- Swagger UI：http://localhost:8085/swagger-ui/index.html

## 认证说明

- 用户登录成功后，后端返回 JWT Token，前端将其存入 Vuex 并在请求头中携带：`Authorization: Bearer <token>`
- Token 默认有效期为 **7 天**
- 以下接口无需登录即可访问：
  - 用户登录 / 注册
  - 商家与菜品查询
  - API 文档相关路径

## 构建部署

### 前端生产构建

```bash
cd vue_elm
npm run build
```

构建产物位于 `vue_elm/dist/` 目录，可部署至 Nginx 等静态服务器。

### 后端打包

```bash
cd SpringBoot
./mvnw package
```

生成的 JAR 文件位于 `SpringBoot/target/` 目录。

## 注意事项

1. **启动顺序**：先启动 MySQL → 再启动后端 → 最后启动前端。
2. **跨域配置**：后端已配置允许 `http://localhost:5173` 跨域访问。
3. **密码安全**：请勿将真实数据库密码泄露或上传到公开平台，建议使用本地配置覆盖。

## 作者

云南大学 · 软件工程实训（中级）课程大作业

## License

本项目仅供学习交流使用。