# front_end_dev

**Repository Path**: xenogene/front_end_dev

## Basic Information

- **Project Name**: front_end_dev
- **Description**: 前端开发实践
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-03
- **Last Updated**: 2025-06-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 饿了么外卖系统



## 文档导航
- [项目简介](#项目简介)
- [技术架构](#技术架构)
  - [前端技术栈](#前端技术栈)
  - [后端技术栈](#后端技术栈)
- [项目结构](#项目结构)
  - [前端结构](#前端结构-elmclient)
  - [后端结构](#后端结构-srcmainjavacomneusoftelm)
- [核心功能模块](#核心功能模块)
- [实现原理](#实现原理)
- [关键问题解决方案](#关键问题解决方案)
- [开发规范](#开发规范)
- [部署说明](#部署说明)
- [性能优化](#性能优化)
- [安全措施](#安全措施)
- [项目维护](#项目维护)
- [贡献指南](#贡献指南)
- [版本历史](#版本历史)
- [许可证](#许可证)


## 另：本项目包含以下核心文档：

### 1. setup.md
- 详细的环境搭建指南
- 包含所有必需软件的安装步骤
- 环境变量配置说明
- 项目初始化流程
- 常见问题解决方案

### 2. util.md
- 项目工具类说明文档
- 通用工具方法的使用说明
- 工具类的设计原则
- 常用工具方法示例
- 工具类的最佳实践

### 3. structure.md
- 项目架构设计文档
- 代码组织结构说明
- 模块依赖关系
- 设计模式应用
- 架构演进历史

### 4. dependencies.md
- 项目依赖管理文档
- 第三方库版本说明
- 依赖更新策略
- 依赖冲突解决方案
- 依赖安全建议
## 项目简介
本项目是一个基于Vue.js和Java Web技术栈开发的外卖点餐系统，采用前后端分离架构，实现了用户点餐、商家管理、订单处理等核心功能。

## 技术架构

### 前端技术栈
- Vue.js 3.x
- Vue Router 4.x
- Vuex 4.x
- Axios
- Element Plus
- ES6+

### 后端技术栈
- Java 8+
- Servlet
- MySQL 8.0+
- Maven
- Tomcat 9.0+

## 项目结构

### 前端结构 (elmclient/)
```
elmclient/
├── public/                 # 静态资源
├── src/
│   ├── assets/            # 资源文件
│   ├── components/        # 公共组件
│   ├── router/            # 路由配置
│   ├── store/             # Vuex状态管理
│   ├── views/             # 页面组件
│   ├── App.vue           # 根组件
│   └── main.js           # 入口文件
├── .env                   # 环境变量
├── package.json          # 项目配置
└── vue.config.js         # Vue配置
```

### 后端结构 (src/main/java/com/neusoft/elm/)
```
com.neusoft.elm/
├── domain/               # 领域层
│   ├── entity/          # 实体类
│   ├── repository/      # 仓储接口
│   └── service/         # 领域服务
├── application/         # 应用层
│   └── service/         # 应用服务
├── infrastructure/      # 基础设施层
│   ├── persistence/     # 持久化实现
│   ├── util/           # 工具类
│   ├── web/            # Web相关
│   ├── config/         # 配置类
│   └── exception/      # 异常处理
└── interfaces/          # 接口层
    ├── controller/      # 控制器
    ├── dto/            # 数据传输对象
    └── assembler/      # 对象转换器
```

## 核心功能模块

### 1. 用户模块
- 用户注册/登录
- 个人信息管理
- 收货地址管理

### 2. 商家模块
- 商家信息管理
- 菜品管理
- 订单管理

### 3. 订单模块
- 购物车管理
- 订单创建
- 订单状态跟踪

### 4. 支付模块
- 订单支付
- 支付状态管理

## 实现原理

### 1. 前后端分离架构
- 前端通过Axios发送HTTP请求
- 后端提供RESTful API
- 使用JSON进行数据交换

### 2. 数据流转过程
1. 用户操作触发Vue组件事件
2. 组件调用Vuex Action
3. Action通过Axios发送请求
4. 后端Controller接收请求
5. Service层处理业务逻辑
6. Repository层操作数据库
7. 返回处理结果给前端

### 3. 状态管理
- 使用Vuex管理全局状态
- 模块化状态管理
- 异步操作处理

## 关键问题解决方案

### 1. Vue3 Filter废弃问题
由于Vue3移除了filters特性，我们采用以下替代方案：

```javascript
// 1. 使用计算属性
computed: {
  formattedPrice() {
    return this.price.toFixed(2)
  }
}

// 2. 使用方法
methods: {
  formatPrice(price) {
    return price.toFixed(2)
  }
}

// 3. 使用全局属性
app.config.globalProperties.$filters = {
  formatPrice(price) {
    return price.toFixed(2)
  }
}
```

### 2. 本地端口冲突问题
1. 修改前端端口：
```javascript
// vue.config.js
module.exports = {
  devServer: {
    port: 3000 // 修改为其他端口
  }
}
```

2. 修改后端端口：
```xml
<!-- server.xml -->
<Connector port="8081" protocol="HTTP/1.1"
           connectionTimeout="20000"
           redirectPort="8443" />
```

3. 修改数据库端口：
```properties
# application.properties
db.url=jdbc:mysql://localhost:3307/elm
```

### 3. 跨域问题解决
```javascript
// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8081',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}
```

## 开发规范

### 1. 代码规范
- 使用ESLint进行代码检查
- 遵循Vue风格指南
- 使用Prettier进行代码格式化

### 2. Git提交规范
```
feat: 新功能
fix: 修复bug
docs: 文档更新
style: 代码格式
refactor: 重构
test: 测试
chore: 构建过程或辅助工具的变动
```

### 3. 命名规范
- 组件名：PascalCase
- 变量名：camelCase
- 常量名：UPPER_CASE
- 文件名：kebab-case

## 部署说明

### 1. 开发环境
```bash
# 前端
cd elmclient
npm install
npm run serve

# 后端
mvn clean install
# 部署到Tomcat
```

### 2. 生产环境
```bash
# 前端
npm run build
# 部署dist目录到Web服务器

# 后端
mvn clean package -P prod
# 部署WAR包到Tomcat
```

## 性能优化

### 1. 前端优化
- 路由懒加载
- 组件按需加载
- 图片懒加载
- 使用CDN加速

### 2. 后端优化
- 数据库索引优化
- 连接池配置
- 缓存策略
- JVM参数调优

## 安全措施

### 1. 前端安全
- XSS防护
- CSRF防护
- 敏感信息加密

### 2. 后端安全
- SQL注入防护
- 参数验证
- 权限控制
- 日志记录

## 项目维护

### 1. 日常维护
- 日志监控
- 性能监控
- 安全更新
- 数据备份

### 2. 问题处理
- 错误日志分析
- 性能问题排查
- 安全漏洞修复

## 贡献指南
1. Fork 项目
2. 创建特性分支
3. 提交代码
4. 创建Pull Request

## 版本历史
- v1.0.0: 基础功能实现
- v1.1.0: 性能优化
- v1.2.0: 安全加固

## 许可证
MIT License