# FullStack

**Repository Path**: LiuGuCheng/FullStack

## Basic Information

- **Project Name**: FullStack
- **Description**: node.js CRUD
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-07-23
- **Last Updated**: 2026-01-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 学生管理系统

## 项目介绍

学生管理系统是一个基于前后端分离架构的Web应用，用于管理学生信息，包括学生的增删改查、查询和筛选等功能。

## 技术栈

### 后端

- **Node.js** - JavaScript运行环境
- **Express** - Web应用框架
- **MySQL2** - MySQL数据库驱动
- **Express-validator** - 数据验证中间件
- **CORS** - 跨域资源共享中间件
- **Dotenv** - 环境变量管理

### 前端

- **Vue 3** - 渐进式JavaScript框架
- **Element Plus** - UI组件库
- **Pinia** - 状态管理库
- **Vue Router** - 路由管理
- **Axios** - HTTP客户端

## 项目结构

```
student-management-system/
├── backend/                 # 后端应用
│   ├── config/              # 配置文件
│   │   └── db.js            # 数据库连接配置
│   ├── controllers/         # 控制器
│   │   └── studentController.js  # 学生控制器
│   ├── models/              # 模型
│   │   └── studentModel.js  # 学生模型
│   ├── routes/              # 路由
│   │   └── studentRoutes.js # 学生路由
│   ├── .env                 # 环境变量配置
│   ├── package.json         # 后端依赖
│   └── server.js            # 后端入口文件
├── frontend/                # 前端应用
│   ├── src/                 # 前端源码
│   │   ├── api/             # API请求
│   │   │   └── studentApi.js  # 学生API
│   │   ├── components/      # 组件
│   │   │   └── StudentFormDialog.vue  # 学生表单对话框
│   │   ├── router/          # 路由配置
│   │   │   └── index.js     # 路由配置
│   │   ├── store/           # 状态管理
│   │   │   └── studentStore.js  # 学生状态管理
│   │   ├── views/           # 页面
│   │   │   └── StudentList.vue  # 学生列表页面
│   │   ├── App.vue          # 根组件
│   │   ├── main.js          # 前端入口文件
│   │   └── style.css        # 全局样式
│   ├── index.html           # HTML模板
│   ├── package.json         # 前端依赖
│   └── vite.config.js       # Vite配置
├── init.sql                 # 数据库初始化脚本
├── package.json             # 项目总依赖和脚本
└── README.md                # 项目说明文档
```

## 安装步骤

### 1. 安装依赖

#### 安装所有依赖（推荐）

```bash
npm run install:all
```

#### 分别安装前后端依赖

```bash
# 安装后端依赖
npm run backend:install

# 安装前端依赖
npm run frontend:install
```

### 2. 数据库配置

1. 确保MySQL数据库已安装并运行
2. 创建数据库：`student_management`
3. 执行初始化脚本：
   ```bash
   mysql -u root -p student_management < init.sql
   ```
4. 修改后端环境变量配置（`backend/.env`）：
   ```env
   DB_HOST=localhost
   DB_USER=root
   DB_PASSWORD=your_password
   DB_NAME=student_management
   DB_PORT=3306
   ```

## 运行项目

### 同时运行前后端

```bash
npm run dev:all
```

### 分别运行前后端

#### 运行后端

```bash
npm run backend:dev
```

后端服务将运行在：http://localhost:3001

#### 运行前端

```bash
npm run frontend:dev
```

前端服务将运行在：http://localhost:5173（默认Vite端口）

## API接口

### 学生API

| 方法   | 路径              | 描述                           |
| ------ | ----------------- | ------------------------------ |
| GET    | /api/students     | 获取学生列表（支持分页和筛选） |
| GET    | /api/students/:id | 获取单个学生信息               |
| POST   | /api/students     | 创建新学生                     |
| PUT    | /api/students/:id | 更新学生信息                   |
| DELETE | /api/students/:id | 删除学生                       |
| GET    | /api/health       | 健康检查                       |

## 功能模块

1. **学生列表** - 展示所有学生信息，支持分页、搜索和筛选
2. **添加学生** - 新增学生信息
3. **编辑学生** - 修改现有学生信息
4. **删除学生** - 删除学生信息
5. **条件筛选** - 根据姓名、班级、专业等条件筛选学生

## 开发说明

### 后端开发

- 后端代码使用CommonJS模块系统
- 所有API路由前缀为 `/api`
- 使用Express-validator进行请求数据验证
- 数据库操作使用Promise风格的MySQL2

### 前端开发

- 前端代码使用Vue 3组合式API
- 使用Element Plus组件库构建UI
- 使用Pinia进行状态管理
- API请求封装在 `src/api` 目录下

## 注意事项

1. 确保数据库服务已启动
2. 确保环境变量配置正确
3. 前端开发服务器默认使用5173端口，后端使用3001端口
4. 如果端口被占用，可以修改配置文件中的端口设置

## 许可证

ISC