# frontAndEnd

**Repository Path**: cczeros/front-and-end

## Basic Information

- **Project Name**: frontAndEnd
- **Description**: frontAndEnd
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-25
- **Last Updated**: 2025-11-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前后端分离项目 - Vue3 + TypeScript + Vant + Java + SQL

这是一个完整的前后端分离项目示例，前端使用Vue3 + TypeScript + Vant，后端使用Spring Boot + JPA + H2数据库。

## 项目结构

```
front-and-end/
├── frontend/          # Vue3前端项目
│   ├── src/
│   │   ├── api/      # API接口定义
│   │   ├── views/    # 页面组件
│   │   ├── router/   # 路由配置
│   │   └── main.ts   # 入口文件
│   ├── package.json
│   └── vite.config.ts
├── backend/           # Spring Boot后端项目
│   ├── src/main/java/com/example/backend/
│   │   ├── entity/   # 实体类
│   │   ├── repository/ # 数据访问层
│   │   ├── service/  # 业务逻辑层
│   │   ├── controller/ # 控制器
│   │   ├── config/   # 配置类
│   │   └── dto/      # 数据传输对象
│   └── pom.xml
└── README.md
```

## 功能特性

### 前端功能
- ✅ Vue3 + TypeScript + Vite
- ✅ Vant UI组件库
- ✅ Vue Router路由管理
- ✅ Pinia状态管理
- ✅ Axios HTTP客户端
- ✅ 响应式设计
- ✅ 表单验证
- ✅ 用户列表展示
- ✅ 添加用户功能

### 后端功能
- ✅ Spring Boot 3.1.5
- ✅ Spring Data JPA
- ✅ H2内存数据库（开发环境）
- ✅ RESTful API设计
- ✅ 数据验证
- ✅ CORS跨域配置
- ✅ 异常处理
- ✅ 用户CRUD操作

## 快速开始

### 前端启动

1. 进入前端目录：
```bash
cd frontend
```

2. 安装依赖：
```bash
npm install
```

3. 启动开发服务器：
```bash
npm run dev
```

前端将在 http://localhost:3000 启动

### 后端启动

1. 进入后端目录：
```bash
cd backend
```

2. 使用Maven编译并运行：
```bash
mvn spring-boot:run
```

或者使用IDE运行 `BackendApplication.java` 主类

后端将在 http://localhost:8080 启动

## API接口

### 用户管理接口

| 方法 | 路径 | 描述 |
|------|------|------|
| GET | `/users` | 获取所有用户 |
| GET | `/users/{id}` | 根据ID获取用户 |
| POST | `/users` | 创建新用户 |
| PUT | `/users/{id}` | 更新用户信息 |
| DELETE | `/users/{id}` | 删除用户 |
| GET | `/users/search?name={name}` | 根据姓名搜索用户 |

### 请求示例

#### 创建用户
```json
POST /users
{
    "name": "张三",
    "email": "zhangsan@example.com",
    "phone": "13800138001",
    "age": 25
}
```

#### 响应示例
```json
{
    "id": 1,
    "name": "张三",
    "email": "zhangsan@example.com",
    "phone": "13800138001",
    "age": 25,
    "createdAt": "2023-11-25T10:30:00",
    "updatedAt": "2023-11-25T10:30:00"
}
```

## 数据库

开发环境使用H2内存数据库，应用启动时会自动创建表结构并插入初始数据。

访问H2控制台：http://localhost:8080/h2-console

- JDBC URL: `jdbc:h2:mem:testdb`
- 用户名: `sa`
- 密码: `password`

## 生产环境部署

### 数据库配置

将 `application.properties` 中的数据库配置改为MySQL：

```properties
# MySQL配置
spring.datasource.url=jdbc:mysql://localhost:3306/user_management?useSSL=false&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=your_password
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

# JPA配置
spring.jpa.database-platform=org.hibernate.dialect.MySQL8Dialect
spring.jpa.hibernate.ddl-auto=update
```

### 前端构建

```bash
cd frontend
npm run build
```

构建后的文件在 `dist/` 目录下，可以部署到Nginx等Web服务器。

## 技术栈

### 前端
- Vue 3.3.8
- TypeScript 5.2.2
- Vant 4.8.1
- Vue Router 4.2.5
- Pinia 2.1.7
- Axios 1.6.0
- Vite 5.0.0

### 后端
- Spring Boot 3.1.5
- Spring Data JPA
- Spring Web
- Spring Validation
- H2 Database
- MySQL Connector
- Maven

## 开发说明

1. 前端通过代理访问后端API（开发环境）
2. 后端配置了CORS允许前端跨域访问
3. 所有API都支持标准的HTTP状态码和错误处理
4. 前端表单包含完整的验证规则
5. 后端实体类包含数据验证注解

## 扩展功能建议

- 添加用户认证和授权（JWT）
- 实现分页查询
- 添加文件上传功能
- 集成Redis缓存
- 添加日志记录
- 实现数据导入导出
- 添加单元测试和集成测试