# gyms-frontend

**Repository Path**: scott178/gyms-frontend

## Basic Information

- **Project Name**: gyms-frontend
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-08-01
- **Last Updated**: 2025-08-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 游戏预约系统

一个完整的全栈游戏预约平台，包含前端Vue应用和后端Node.js API服务，支持用户注册、登录、创建游戏预约、申请加入等功能。

## 功能特性

- 🔐 **用户认证**: 注册、登录、退出登录
- 🎮 **预约管理**: 创建游戏预约、查看预约列表
- 📝 **申请系统**: 申请加入预约、管理申请状态
- 🔍 **搜索筛选**: 按游戏类型、关键词筛选预约
- 📱 **响应式设计**: 支持桌面端和移动端
- ✨ **现代UI**: 玻璃拟态设计风格，流畅动画效果

## 技术栈

### 前端
- **框架**: Vue 3 (Composition API)
- **构建工具**: Vite
- **路由管理**: Vue Router 4
- **状态管理**: Pinia
- **样式框架**: Tailwind CSS
- **HTTP客户端**: Axios
- **图标库**: Font Awesome

### 后端
- **运行时**: Node.js
- **框架**: Express.js
- **数据库**: MySQL 8.0+
- **认证**: JWT (jsonwebtoken)
- **密码加密**: bcryptjs
- **安全**: Helmet, CORS, Rate Limiting
- **验证**: Express Validator

## 项目结构

```
game-appointment-system/
├── frontend/           # Vue前端应用
│   ├── src/
│   │   ├── views/      # 页面组件
│   │   ├── stores/     # Pinia状态管理
│   │   ├── services/   # API服务
│   │   ├── router/     # 路由配置
│   │   └── components/ # 公共组件
│   ├── package.json
│   └── vite.config.js
├── backend/            # Node.js后端API
│   ├── models/         # 数据模型
│   ├── routes/         # API路由
│   ├── middleware/     # 中间件
│   ├── config/         # 配置文件
│   ├── database/       # 数据库脚本
│   ├── scripts/        # 工具脚本
│   ├── package.json
│   └── server.js       # 服务器入口
└── README.md           # 项目说明
```

## 快速开始

### 前置要求

- Node.js 16+
- MySQL 8.0+
- npm 或 yarn

### 1. 克隆项目

```bash
git clone <repository-url>
cd game-appointment-system
```

### 2. 后端设置

```bash
# 进入后端目录
cd backend

# 安装依赖
npm install

# 配置环境变量
cp .env.example .env
# 编辑 .env 文件，设置数据库连接信息

# 初始化数据库
npm run init-db

# 启动后端服务器
npm run dev
```

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

### 3. 前端设置

```bash
# 进入前端目录（在项目根目录）
npm install

# 启动前端开发服务器
npm run dev
```

前端应用将在 `http://localhost:3000` 启动

### 4. 生产部署

```bash
# 构建前端
npm run build

# 启动后端生产服务器
cd backend
npm start
```

## 测试账号

系统预置了以下测试账号：

- **用户名**: `admin` **密码**: `123456` (管理员)
- **用户名**: `user1` **密码**: `123456` (普通用户)
- **用户名**: `user2` **密码**: `123456` (普通用户)

你也可以注册新账号进行测试。

## 数据库设计

### 核心表结构

- **users**: 用户信息表，存储用户基本信息和认证数据
- **appointments**: 预约表，存储游戏预约的详细信息
- **applications**: 申请表，存储用户申请加入预约的记录
- **appointment_participants**: 参与者表，管理预约的参与者关系
- **game_categories**: 游戏类型表，预设游戏分类
- **user_sessions**: 用户会话表，管理登录会话
- **system_logs**: 系统日志表，记录操作日志

详细的数据库设计请查看 `backend/database/schema.sql`

## 主要功能说明

### 用户认证
- 支持用户注册和登录
- 密码长度至少6位
- 自动保存登录状态到本地存储
- 路由守卫保护需要登录的页面

### 预约管理
- 创建游戏预约（标题、游戏、类型、描述、人数、时间）
- 查看所有预约列表
- 按游戏类型和关键词筛选预约
- 实时显示预约人数状态

### 申请系统
- 申请加入感兴趣的预约
- 填写申请原因
- 防止重复申请和满员申请
- 预约创建者可以管理申请状态

### 响应式设计
- 移动端友好的界面设计
- 自适应网格布局
- 触摸友好的交互元素

## 开发说明

## API接口

### 认证相关 `/api/auth`
- `POST /register` - 用户注册
- `POST /login` - 用户登录
- `GET /me` - 获取当前用户信息
- `PUT /me` - 更新用户信息
- `PUT /password` - 修改密码

### 预约相关 `/api/appointments`
- `GET /` - 获取预约列表
- `GET /:id` - 获取预约详情
- `POST /` - 创建预约
- `PUT /:id` - 更新预约
- `DELETE /:id` - 删除预约

### 申请相关 `/api/applications`
- `POST /` - 创建申请
- `GET /my` - 获取我的申请列表
- `PUT /:id/process` - 处理申请
- `PUT /:id/cancel` - 取消申请

详细的API文档请查看 `backend/README.md`

## 开发说明

### 前端开发
- 使用 Vue 3 Composition API
- Pinia 状态管理：`auth` store 和 `appointments` store
- Tailwind CSS 样式系统，支持响应式设计
- Axios HTTP客户端，统一错误处理

### 后端开发
- Express.js RESTful API
- MySQL数据库，连接池管理
- JWT认证，bcrypt密码加密
- 输入验证，SQL注入防护
- 请求限流，安全头设置

## 浏览器支持

- Chrome (推荐)
- Firefox
- Safari
- Edge

## 许可证

MIT License