# elm

**Repository Path**: ch1ller/elm

## Basic Information

- **Project Name**: elm
- **Description**: 一款基于 Spring Boot + Vue.js 的全栈外卖订餐系统。采用前后端分离架构，包含完整的用户端功能，支持商家浏览、食品选购、购物车管理、订单处理、配送地址管理等核心业务流程；实现了用户注册登录、商家浏览、购物车、订单管理、地址管理、支付等完整功能。
- **Primary Language**: Java
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2026-01-23
- **Last Updated**: 2026-03-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Java, SpringBoot, Vue, MySQL

## README

## 项目简介

本系统是一款基于 Spring Boot + Vue.js 的全栈外卖订餐系统。采用前后端分离架构，包含完整的用户端功能，支持商家浏览、食品选购、购物车管理、订单处理、配送地址管理等核心业务流程；实现了用户注册登录、商家浏览、购物车、订单管理、地址管理、支付等完整功能。

### 项目特点

- 前后端分离架构，易于维护和扩展
- 提供两个前端版本：Vue 2 和 Vue 3
- RESTful API 设计
- 响应式布局，支持移动端
- Session 会话管理
- 密码加密存储
- 中文界面

## 系统截图

### 首页

![前端首页](screenshots/1-1.png)

### 地址选择

根据不同用户选择对应的收货地址

![地址选择](screenshots/1-2.png)

### 商家筛选

主页的商家筛选功能

![筛选功能](screenshots/1-4.png)

### 商家排序

支持三种排序方式：销量、评分、距离

![排序功能](screenshots/1-5.png)

### 发现功能

浏览推荐商家和美食咨询

![发现功能](screenshots/2-3.png)

### 用户登录

![登录页面](screenshots/3-1.png)

### 用户注册

![注册页面](screenshots/3-2.png)

### 订单管理

查看订单详情页面

![订单页面](screenshots/3-3.png)

### 在线支付

确认金额准备支付页面

![准备支付页面](screenshots/3-4.png)

### 扫码支付

扫码确认支付页面

![扫码支付页面](screenshots/3-5.png)

### 个人中心

![我的页面](screenshots/4.png)

## 目录结构

```
elm/
├── elmboot/                # Spring Boot 后端
│   ├── src/main/java/com/neusoft/elmboot/
│   │   ├── controller/     # REST API 控制器
│   │   ├── service/        # 业务逻辑层
│   │   ├── mapper/         # MyBatis 数据访问层
│   │   ├── po/             # 数据模型 (POJO)
│   │   └── util/           # 工具类
│   └── src/main/resources/
│       ├── mapper/         # MyBatis XML 映射文件
│       └── application.properties  # 配置文件
├── elmclient-v2/           # Vue 2 前端版本
├── elmclient-v3/           # Vue 3 前端版本
├── start.bat               # 一键启动脚本
└── README.md
```

## 快速开始

### 环境要求

- **Java**: JDK 1.8+
- **Node.js**: 14.0+
- **MySQL**: 8.0+
- **Maven**: 3.6+

### 数据库配置

**创建数据库**：

```sql
CREATE DATABASE elm CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
```

**导入数据库数据**：

**方法1：使用命令行导入**

```bash
# 进入 MySQL 命令行
mysql -u root -p

# 选择数据库
USE elm;

# 导入数据
SOURCE f:/elm/elmboot/src/main/resources/database/elm_dump.sql;

# 或者直接在命令行导入
mysql -u root -p elm < elmboot/src/main/resources/database/elm_dump.sql
```

**方法2：使用 MySQL Workbench 或其他 GUI 工具**

1. 打开 MySQL Workbench
2. 连接到本地 MySQL 服务器
3. 选择 `elm` 数据库
4. 打开 `elmboot/src/main/resources/database/elm_dump.sql` 文件
5. 执行 SQL 脚本

### 后端启动

```bash
cd elmboot
mvn clean install
mvn spring-boot:run
```

后端服务将运行在 `http://localhost:8080/elm`

### 前端启动

**Vue 2 版本:**

```bash
cd elmclient-v2
npm install
npm run serve
```

**Vue 3 版本:**

```bash
cd elmclient-v3
npm install
npm run serve
```

前端服务将运行在 `http://localhost:8081`

### 一键启动

Windows 用户可直接运行项目根目录下的 [start.bat](start.bat) 脚本：

```bash
start.bat
```

## 功能介绍

### 用户模块

- [X] 用户注册
- [X] 用户登录
- [X] 密码加密存储 (BCrypt)
- [X] 个人信息管理
- [X] Session 会话管理

### 商家模块

- [X] 商家列表浏览
- [X] 商家详情展示
- [X] 商家评分系统
- [X] 起送金额设置
- [X] 配送费计算

### 食品模块

- [X] 食品列表展示
- [X] 食品详情查看
- [X] 食品分类管理
- [X] 食品价格管理

### 购物车模块

- [X] 添加商品到购物车
- [X] 修改商品数量
- [X] 删除购物车商品
- [X] 清空购物车
- [X] 购物车持久化

### 订单模块

- [X] 创建订单
- [X] 订单列表查询
- [X] 订单详情查看
- [X] 订单状态追踪
- [X] 订单历史记录

### 地址管理模块

- [X] 添加配送地址
- [X] 编辑配送地址
- [X] 删除配送地址
- [X] 设置默认地址
- [X] 多地址管理

### 支付模块

- [X] 支付二维码生成
- [X] 订单支付处理
- [X] 支付状态更新

## 技术栈

### 后端技术

| 技术            | 版本          | 说明         |
| --------------- | ------------- | ------------ |
| Spring Boot     | 2.3.0.RELEASE | 基础框架     |
| MyBatis         | 2.0.1         | ORM 框架     |
| MySQL           | 8.0.33        | 关系型数据库 |
| Spring Security | -             | 密码加密     |
| Maven           | -             | 项目构建     |

### 前端技术

| 技术         | 版本            | 说明           |
| ------------ | --------------- | -------------- |
| Vue.js       | 2.6.14 / 3.2.13 | 前端框架       |
| Vue Router   | 3.5.1 / 4.0.3   | 路由管理       |
| Axios        | -               | HTTP 客户端    |
| Font Awesome | 4.7.0           | 图标库         |
| qs           | -               | 查询字符串解析 |
| Webpack      | -               | 模块打包       |

## API 接口

### 用户接口

| 接口                        | 方法 | 说明         |
| --------------------------- | ---- | ------------ |
| /UserController/getUserById | GET  | 获取用户信息 |
| /UserController/saveUser    | POST | 用户注册     |
| /UserController/login       | POST | 用户登录     |

### 商家接口

| 接口                                | 方法 | 说明         |
| ----------------------------------- | ---- | ------------ |
| /BusinessController/listBusiness    | GET  | 获取商家列表 |
| /BusinessController/getBusinessById | GET  | 获取商家详情 |
| /BusinessController/searchBusiness  | GET  | 搜索商家     |

### 食品接口

| 接口                        | 方法 | 说明         |
| --------------------------- | ---- | ------------ |
| /FoodController/listFood    | GET  | 获取食品列表 |
| /FoodController/getFoodById | GET  | 获取食品详情 |

### 购物车接口

| 接口                       | 方法   | 说明           |
| -------------------------- | ------ | -------------- |
| /CartController/saveCart   | POST   | 添加到购物车   |
| /CartController/listCart   | GET    | 获取购物车列表 |
| /CartController/updateCart | PUT    | 更新购物车     |
| /CartController/removeCart | DELETE | 删除购物车商品 |

### 订单接口

| 接口                            | 方法 | 说明         |
| ------------------------------- | ---- | ------------ |
| /OrdersController/createOrders  | POST | 创建订单     |
| /OrdersController/listOrders    | GET  | 获取订单列表 |
| /OrdersController/getOrdersById | GET  | 获取订单详情 |

### 地址接口

| 接口                                             | 方法   | 说明         |
| ------------------------------------------------ | ------ | ------------ |
| /DeliveryAddressController/saveDeliveryAddress   | POST   | 添加地址     |
| /DeliveryAddressController/listDeliveryAddress   | GET    | 获取地址列表 |
| /DeliveryAddressController/updateDeliveryAddress | PUT    | 更新地址     |
| /DeliveryAddressController/removeDeliveryAddress | DELETE | 删除地址     |

## 数据库设计

### 核心数据表

| 表名             | 说明       | 主要字段                                                   |
| ---------------- | ---------- | ---------------------------------------------------------- |
| user             | 用户表     | userId, userName, password, userSex                        |
| business         | 商家表     | businessId, businessName, businessAddress, businessExplain |
| food             | 食品表     | foodId, foodName, foodPrice, businessId                    |
| cart             | 购物车表   | cartId, userId, foodId, quantity                           |
| orders           | 订单表     | orderId, userId, businessId, orderTotal, orderState        |
| order_detailet   | 订单明细表 | orderDetailetId, orderId, foodId, quantity                 |
| delivery_address | 配送地址表 | daId, userId, contactName, contactPhone, address           |

## 配置说明

### 后端配置

编辑 [elmboot/src/main/resources/application.properties](elmboot/src/main/resources/application.properties):

```properties
# 服务端口
server.port=8080
# 上下文路径
server.servlet.context-path=/elm

# 数据库配置
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/elm?useSSL=false&serverTimezone=Asia/Shanghai
spring.datasource.username=root
spring.datasource.password=你的密码

# MyBatis 配置
mybatis.mapper-locations=classpath:mapper/*.xml
```

### 前端配置

编辑 [elmclient-v2/vue.config.js](elmclient-v2/vue.config.js) 或 [elmclient-v3/vue.config.js](elmclient-v3/vue.config.js):

```javascript
module.exports = {
  devServer: {
    port: 8081,
    proxy: {
      '/elm': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}
```

## 开发指南

### 添加新功能

1. **后端开发**:
   - 在 `po/` 包下创建数据模型
   - 在 `mapper/` 包下创建数据访问接口
   - 在 `service/` 包下创建业务逻辑类
   - 在 `controller/` 包下创建控制器
  
2. **前端开发**:
   - 在 `views/` 目录下创建页面组件
   - 在 `router/index.js` 中添加路由配置
   - 使用 Axios 调用后端接口

⭐ 如果这个项目对你有帮助，请给个 Star！