# Springboot+Vue3+MySQL开发动态网站

**Repository Path**: wozik16/Web

## Basic Information

- **Project Name**: Springboot+Vue3+MySQL开发动态网站
- **Description**: 一个使用了Springboot+Vue3+MySQL开发的简单动态网站，可以用于教学
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-28
- **Last Updated**: 2025-12-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 学生管理系统 (Student Management System)

一个基于 Spring Boot + Vue3 + MySQL 的前后端分离学生信息管理系统。

## 📋 项目简介

本项目是一个现代化的学生信息管理系统，采用前后端分离架构，提供了完整的学生信息增删改查、搜索筛选、统计分析等功能。系统具有美观的现代化UI界面，支持响应式设计。

## 🛠️ 技术栈

### 后端技术
- **框架**: Spring Boot 4.0.1
- **语言**: Java 17
- **持久层**: Spring Data JPA
- **数据库**: MySQL 8.0
- **构建工具**: Maven
- **ORM**: Hibernate
- **端口测试**：Postman

### 前端技术
- **框架**: Vue 3.4.0 (Composition API)
- **构建工具**: Vite 5.0.0
- **HTTP客户端**: Axios 1.6.0
- **开发语言**: JavaScript (ES6+)

### 数据库
- **数据库**: MySQL 8.0
- **连接驱动**: MySQL Connector/J 8.0.33


## 📁 项目结构

### 后端结构 (`back/`)

```
back/
├── src/
│   ├── main/
│   │   ├── java/com/example/demo/
│   │   │   ├── config/              # 配置类
│   │   │   │   └── CorsConfig.java  # CORS跨域配置
│   │   │   ├── controller/          # 控制器层
│   │   │   └── StudentController.java # 学生相关API接口
│   │   │   ├── service/             # 业务逻辑层
│   │   │   ├── StudentService.java  # 服务接口
│   │   │   └── StudentServiceImpl.java # 服务实现
│   │   │   ├── dao/                 # 数据访问层
│   │   │   ├── Student.java        # 学生实体类
│   │   │   └── StudentRepository.java # JPA仓库接口
│   │   │   ├── dto/                 # 数据传输对象
│   │   │   ├── StudentDTO.java      # 学生DTO
│   │   │   └── StatisticsDTO.java  # 统计信息DTO
│   │   │   ├── converter/           # 转换器
│   │   │   └── StudentConverter.java # 实体与DTO转换
│   │   │   ├── Response.java        # 统一响应封装
│   │   │   └── DemoApplication.java # 启动类
│   │   └── resources/
│   │       └── application.properties # 配置文件
│   └── test/                        # 测试代码
├── pom.xml                          # Maven依赖配置
└── mvnw, mvnw.cmd                   # Maven包装器
```

**架构说明**:
- **Controller层**: 处理HTTP请求，调用Service层
- **Service层**: 实现业务逻辑，处理数据转换和验证
- **DAO层**: 数据访问层，使用JPA Repository进行数据库操作
- **DTO层**: 数据传输对象，用于前后端数据交互
- **Converter层**: 负责Entity与DTO之间的转换
- **Config层**: 系统配置，如CORS跨域配置

### 前端结构 (`frontend/`)

```
frontend/
├── src/
│   ├── api/                         # API接口封装
│   │   └── studentApi.js           # 学生相关API调用
│   ├── components/                  # Vue组件
│   │   ├── MainSystem.vue          # 主系统页面组件
│   │   ├── WelcomePage.vue         # 欢迎页面组件
│   │   ├── StudentFormModal.vue    # 学生表单模态框
│   │   ├── PasswordModal.vue       # 密码验证模态框
│   │   └── Toast.vue               # 消息提示组件
│   ├── assets/                      # 静态资源
│   │   └── style.css               # 全局样式
│   ├── App.vue                      # 根组件
│   └── main.js                      # 入口文件
├── index.html                       # HTML模板
├── package.json                     # 依赖配置
└── vite.config.js                   # Vite构建配置
```

**架构说明**:
- **API层**: 封装所有后端API调用，使用Axios进行HTTP请求
- **Components层**: 可复用的Vue组件，采用Composition API编写
- **Assets层**: 静态资源文件，包括样式表
- **入口文件**: `main.js` 负责初始化Vue应用

## 🚀 快速开始

### 环境要求
- JDK 17+
- Node.js 16+
- MySQL 8.0+
- Maven 3.6+

### 数据库配置

1. 创建数据库：
```sql
CREATE DATABASE test CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
```

2. 导入数据（可选）：
```bash
mysql -u root -p test < student.sql
```

3. 修改数据库配置 (`back/src/main/resources/application.properties`)：
```properties
spring.datasource.url=jdbc:mysql://localhost:3306/test?serverTimezone=Asia/Shanghai&useSSL=false&allowPublicKeyRetrieval=true&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=你的数据库密码
```

### 后端启动

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

后端服务将在 `http://localhost:8080` 启动

### 前端启动

```bash
cd frontend
npm install
npm run dev
```

前端服务将在 `http://localhost:3000` 启动

### 生产构建

**后端**:
```bash
cd back
mvn clean package
java -jar target/demo-0.0.1-SNAPSHOT.jar
```

**前端**:
```bash
cd frontend
npm run build
# 构建产物在 dist/ 目录
```

## ✨ 功能特性

### 1. 学生信息管理
- ✅ **添加学生**: 支持添加新学生信息（姓名、邮箱、年龄）
- ✅ **编辑学生**: 支持修改学生信息
- ✅ **删除学生**: 支持单个删除和批量删除
- ✅ **查看学生**: 支持查看所有学生列表和单个学生详情

### 2. 搜索与筛选
- ✅ **关键词搜索**: 支持按姓名或邮箱进行模糊搜索
- ✅ **年龄筛选**: 支持按年龄范围筛选学生
- ✅ **实时刷新**: 支持手动刷新数据

### 3. 统计分析
- ✅ **总人数统计**: 显示系统中的学生总数
- ✅ **平均年龄**: 自动计算所有学生的平均年龄
- ✅ **年龄范围**: 显示最小年龄和最大年龄

### 4. 用户体验
- ✅ **现代化UI**: 采用深色主题，具有科技感的界面设计
- ✅ **响应式设计**: 支持移动端和桌面端自适应
- ✅ **操作提示**: Toast消息提示，操作反馈及时
- ✅ **密码验证**: 敏感操作需要密码验证（前端简单验证）

## 🔌 API接口文档

### 学生管理接口

| 方法 | 路径 | 说明 |
|------|------|------|
| GET | `/student` | 获取所有学生 |
| GET | `/student/{id}` | 根据ID获取学生 |
| GET | `/student/search?keyword={keyword}` | 搜索学生（姓名或邮箱） |
| GET | `/student/age-range?minAge={min}&maxAge={max}` | 按年龄范围查询 |
| GET | `/student/statistics` | 获取统计信息 |
| POST | `/student` | 添加新学生 |
| PUT | `/student/{id}?name={name}&email={email}&age={age}` | 更新学生信息 |
| DELETE | `/student/{id}` | 删除学生 |
| DELETE | `/student/batch` | 批量删除学生 |

### 响应格式

```json
{
  "success": true,
  "data": {...},
  "message": "操作成功"
}
```

## ⚠️ 项目不足与改进建议

### 1. 安全性问题
- ❌ **密码验证不安全**: 密码硬编码在前端代码中（`DEFAULT_PASSWORD = '123456'`），存在严重安全隐患
- ❌ **缺少用户认证**: 没有实现真正的用户登录和权限管理系统
- ❌ **CORS配置过于宽松**: 生产环境允许所有来源访问，存在安全风险
- **改进建议**: 
  - 实现JWT或Session-based认证机制
  - 将密码验证移至后端，使用加密存储
  - 生产环境配置具体的允许域名

### 2. 数据验证
- ❌ **缺少输入验证**: 前端和后端都缺少完善的数据验证
- ❌ **邮箱格式验证**: 没有验证邮箱格式的有效性
- ❌ **年龄范围验证**: 没有限制年龄的合理范围
- **改进建议**:
  - 使用Bean Validation (JSR-303)进行后端验证
  - 前端使用表单验证库（如VeeValidate）
  - 添加邮箱格式、年龄范围等业务规则验证

### 3. 异常处理
- ❌ **异常处理不统一**: 缺少全局异常处理器
- ❌ **错误信息不友好**: 异常信息直接返回给前端，用户体验差
- **改进建议**:
  - 实现`@ControllerAdvice`全局异常处理
  - 定义统一的错误码和错误信息
  - 返回友好的错误提示

### 4. 性能优化
- ❌ **缺少分页功能**: 当数据量大时，一次性加载所有数据会影响性能
- ❌ **没有缓存机制**: 频繁查询数据库，没有使用缓存
- **改进建议**:
  - 实现分页查询（使用Spring Data的Pageable）
  - 引入Redis缓存热点数据
  - 前端实现虚拟滚动或分页展示

### 5. 代码质量
- ❌ **缺少单元测试**: 没有编写单元测试和集成测试
- ❌ **缺少日志系统**: 没有使用日志框架记录操作日志
- ❌ **代码注释不足**: 部分复杂逻辑缺少注释说明
- **改进建议**:
  - 使用JUnit和Mockito编写单元测试
  - 集成Logback或Log4j2日志框架
  - 完善代码注释和API文档

### 6. 前端优化
- ❌ **路由管理不完善**: 虽然创建了router目录，但App.vue没有使用路由
- ❌ **状态管理缺失**: 没有使用Vuex或Pinia进行状态管理
- ❌ **组件复用性**: 部分组件可以进一步拆分和复用
- **改进建议**:
  - 使用Vue Router实现多页面路由
  - 引入Pinia进行状态管理
  - 提取公共组件和工具函数

### 7. 数据库设计
- ❌ **缺少索引**: 没有为常用查询字段（如email）创建索引
- ❌ **缺少软删除**: 删除操作是物理删除，无法恢复
- **改进建议**:
  - 为email字段添加唯一索引
  - 实现软删除机制（添加deleted字段）
  - 考虑添加创建时间、更新时间等审计字段

### 8. 部署与运维
- ❌ **缺少Docker配置**: 没有Dockerfile和docker-compose配置
- ❌ **缺少CI/CD**: 没有持续集成和部署流程
- ❌ **环境配置**: 没有区分开发、测试、生产环境配置
- **改进建议**:
  - 添加Docker支持，便于部署
  - 使用GitHub Actions或Jenkins实现CI/CD
  - 使用Spring Profile管理多环境配置

## 📝 开发规范

### 后端规范
- 使用RESTful API设计风格
- Controller层只负责参数接收和响应返回
- Service层处理业务逻辑
- 使用DTO进行数据传输，避免直接暴露Entity

### 前端规范
- 使用Vue 3 Composition API
- 组件采用单文件组件（SFC）格式
- API调用统一封装在api目录
- 样式使用scoped避免污染

## 📄 许可证

本项目仅供学习和参考使用。

## 👥 贡献

欢迎提交Issue和Pull Request来帮助改进项目。

---

**注意**: 本项目为学习项目，不建议直接用于生产环境。在生产环境使用前，请务必解决上述安全性问题。