# 前端开发技术实践

**Repository Path**: haluns-deepblue/Front-end-Development

## Basic Information

- **Project Name**: 前端开发技术实践
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-05-19
- **Last Updated**: 2025-06-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端开发技术实践项目 (Front-end Development Technology Practice)

## 项目概述 (Project Overview)

本项目是一个完整的前端开发技术实践项目，通过模拟"饿了么"外卖平台的开发过程。


## 项目结构 (Project Structure)

```
Front-end-Development/
├── elm(stage2)/          # 阶段二：静态HTML实现
│   ├── *.html           # HTML页面文件
│   ├── css/             # 样式文件
│   ├── js/              # JavaScript脚本
│   ├── img/             # 图片资源
│   └── framework/       # 框架文件(Font Awesome等)
├── elm(stage3)/          # 阶段三：全栈应用实现
│   ├── backend/         # Java后端
│   │   ├── src/         # 源代码
│   │   └── pom.xml      # Maven配置
│   ├── frontend/        # Vue.js前端
│   │   ├── src/         # 源代码
│   │   ├── package.json # 依赖配置
│   │   └── vite.config.js # 构建配置
│   └── elm.sql          # 数据库脚本
└── README.md            # 项目说明文档
```

## 技术栈 (Technology Stack)

### 阶段二 (Stage 2) - 静态实现
- **前端**: HTML5, CSS3, JavaScript (ES5)
- **样式框架**: Font Awesome 图标库
- **开发模式**: 静态页面开发
- **特点**: 纯前端实现，模拟交互效果

### 阶段三 (Stage 3) - 全栈实现
- **后端**: Java + Maven + Servlet + MySQL
- **前端**: Vue.js 3 + Vite + Vue Router + Axios
- **数据库**: MySQL 8.0
- **状态管理**: Pinia
- **开发工具**: Vite (构建工具)

## 功能特性 (Features)

### 用户端功能
- **首页展示**: 商家列表、分类浏览、超级会员权益展示
- **用户系统**: 注册、登录、个人信息管理
- **商家浏览**: 商家详情、菜品展示
- **购物车**: 结算功能
- **地址管理**: 收货地址的增删改查
- **订单系统**: 下单、支付
- **订单历史**: 历史订单查看

### 商家端功能
- **商家注册**: 商家信息录入
- **菜品管理**: 菜品的增删改查、价格调整
- **订单处理**: 订单接收、处理、状态更新

## 数据库设计 (Database Design)

### 主要数据表
- **business**: 商家信息表
- **user**: 用户信息表  
- **food**: 菜品信息表
- **cart**: 购物车表
- **orders**: 订单主表
- **orderdetailet**: 订单详情表
- **deliveryaddress**: 收货地址表




### 阶段三 - 全栈版本部署

#### 后端部署

1. **环境要求**
   - Java 8+
   - Maven 3.6+
   - MySQL 8.0+

2. **数据库配置**
   ```bash
   # 创建数据库
   mysql -u root -p
   CREATE DATABASE elm;
   
   # 导入数据库结构和数据
   mysql -u root -p elm < elm.sql
   ```

3. **修改数据库配置**
   ```properties
   # src/main/resources/database.properties
   driver=com.mysql.cj.jdbc.Driver
   url=jdbc:mysql://localhost:3306/elm?useSSL=false&serverTimezone=GMT
   username=root
   password=my_password
   ```

4. **编译运行**
   ```bash
   cd elm(stage3)/backend
   mvn clean compile
   mvn package
   
   # 部署到Tomcat服务器
   cp target/elm.war $TOMCAT_HOME/webapps/
   ```

#### 前端部署

1. **环境要求**
   - Node.js 16+
   - npm 或 yarn

2. **安装依赖**
   ```bash
   cd elm(stage3)/frontend
   npm install
   ```

3. **开发环境运行**
   ```bash
   npm run dev
   ```

4. **生产环境构建**
   ```bash
   npm run build
   npm run preview
   ```

## API文档 (API Documentation)

### 用户相关接口
```
POST /UserLoginServlet          # 用户登录
POST /UserRegisterServlet       # 用户注册  
GET  /GetUserByIdServlet       # 获取用户信息
PUT  /UpdateUserServlet        # 更新用户信息
```

### 商家相关接口
```
GET  /ListBusinessServlet       # 获取商家列表
GET  /GetBusinessByIdServlet    # 获取商家详情
POST /BusinessLoginServlet      # 商家登录
POST /BusinessRegisterServlet   # 商家注册
```

### 菜品相关接口
```
GET  /ListFoodByBusinessIdServlet  # 获取商家菜品列表
GET  /GetFoodListServlet          # 获取菜品信息
```

### 购物车相关接口
```
GET    /ListCartServlet         # 获取购物车列表
POST   /SaveCartServlet         # 添加到购物车
PUT    /UpdateCartServlet       # 更新购物车
DELETE /RemoveCartServlet       # 删除购物车项
```

### 订单相关接口
```
POST /CreateOrdersServlet           # 创建订单
GET  /ListOrdersByUserIdServlet     # 获取用户订单列表
GET  /GetOrdersByIdServlet          # 获取订单详情
GET  /ListOrderDetailetByOrderIdServlet # 获取订单详情
```