# Fun-Sport-Web

**Repository Path**: hidden-blue-group/fun-sport-web

## Basic Information

- **Project Name**: Fun-Sport-Web
- **Description**: No description available
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-09
- **Last Updated**: 2025-10-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Fun-Sport Web 管理后台

> Fun-Sport 运动社交平台 Web管理端 - 对接Java后端

## 项目简介

本项目是Fun-Sport运动社交平台的Web管理后台，采用前后端分离架构：
- **前端**: Vue 3 + Element Plus + Vite
- **后端**: Java Spring Boot (fun-sport-java项目)

## 技术栈

### 核心技术
- **Vue 3.3** - 渐进式JavaScript框架
- **Element Plus 2.3** - Vue 3 UI组件库
- **Vue Router 4.2** - 官方路由管理器
- **Pinia 2.1** - Vue状态管理
- **Axios 1.5** - HTTP客户端
- **Vite 4.4** - 下一代前端构建工具

### 辅助技术
- **ECharts 5.4** - 数据可视化
- **Day.js 1.11** - 时间处理
- **Sass** - CSS预处理器

## 功能模块

### 1. 用户管理
- ✅ 用户列表查询
- ✅ 用户详情查看
- ✅ 用户状态管理
- ✅ 用户权限管理

### 2. 俱乐部管理
- ✅ 俱乐部列表
- ✅ 俱乐部审核
- ✅ 成员管理
- ✅ 俱乐部统计

### 3. 活动管理
- ✅ 活动列表
- ✅ 活动详情
- ✅ 活动审核
- ✅ 参与者管理
- ✅ 活动统计

### 4. 场地管理
- ✅ 场地列表
- ✅ 场地信息管理
- ✅ 预订管理
- ✅ 场地状态管理

### 5. 数据统计
- ✅ 平台总览
- ✅ 用户统计
- ✅ 活动统计
- ✅ 收入统计
- ✅ 图表可视化

## 项目结构

```
fun-sport-web/
├── public/               # 静态资源
├── src/
│   ├── api/             # API接口
│   │   ├── request.js   # axios封装
│   │   ├── admin.js     # 管理员API
│   │   ├── user.js      # 用户API
│   │   ├── club.js      # 俱乐部API
│   │   ├── event.js     # 活动API
│   │   └── venue.js     # 场地API
│   │
│   ├── assets/          # 资源文件
│   ├── components/      # 公共组件
│   │
│   ├── router/          # 路由配置
│   │   └── index.js     # 路由定义
│   │
│   ├── store/           # 状态管理
│   │   └── user.js      # 用户状态
│   │
│   ├── styles/          # 全局样式
│   │
│   ├── utils/           # 工具函数
│   │
│   ├── views/           # 页面组件
│   │   ├── Layout.vue           # 主布局
│   │   ├── Login.vue            # 登录页
│   │   ├── Dashboard.vue        # 仪表板
│   │   ├── user/               # 用户管理
│   │   │   ├── UserList.vue
│   │   │   └── UserDetail.vue
│   │   ├── club/               # 俱乐部管理
│   │   │   └── ClubList.vue
│   │   ├── event/              # 活动管理
│   │   │   ├── EventList.vue
│   │   │   └── EventDetail.vue
│   │   ├── venue/              # 场地管理
│   │   │   └── VenueList.vue
│   │   └── statistics/         # 数据统计
│   │       └── Overview.vue
│   │
│   ├── App.vue          # 根组件
│   └── main.js          # 入口文件
│
├── index.html           # HTML模板
├── package.json         # 项目配置
├── vite.config.js       # Vite配置
└── README.md           # 项目说明

```

## 后端对接

### API基础配置

**后端地址**: `http://localhost:8858/api`

配置在 `vite.config.js`:
```javascript
server: {
  port: 3000,
  proxy: {
    '/api': {
      target: 'http://localhost:8858',  // Java后端地址
      changeOrigin: true
    }
  }
}
```

### API路径规范

Web管理端API统一前缀: `/api/web`

例如：
- 登录: `POST /api/web/auth/login`
- 用户列表: `GET /api/web/user/list`
- 俱乐部列表: `GET /api/web/club/list`

### Token认证

使用JWT Token进行身份认证:
```javascript
headers: {
  'Authorization': 'Bearer <token>'
}
```

Token存储在 `localStorage` 中，由 `Pinia` 状态管理。

## 快速开始

### 环境要求

- Node.js >= 16.0.0
- npm >= 8.0.0 或 yarn >= 1.22.0

### 安装依赖

```bash
# 使用npm
npm install

# 或使用yarn
yarn install
```

### 启动开发服务器

```bash
# 使用npm
npm run dev

# 或使用yarn
yarn dev
```

访问: http://localhost:3000

### 构建生产版本

```bash
# 使用npm
npm run build

# 或使用yarn
yarn build
```

构建产物在 `dist/` 目录。

### 预览生产版本

```bash
# 使用npm
npm run preview

# 或使用yarn
yarn preview
```

## 开发指南

### 添加新页面

1. 在 `src/views/` 创建Vue组件
2. 在 `src/router/index.js` 添加路由
3. 在 `src/api/` 添加对应API
4. 在导航菜单中添加入口（如需要）

### 调用API示例

```javascript
import { userApi } from '@/api/user'

// 获取用户列表
const getUserList = async () => {
  try {
    const data = await userApi.getList({ page: 1, pageSize: 20 })
    console.log('用户列表:', data)
  } catch (error) {
    console.error('获取用户列表失败:', error)
  }
}
```

### 状态管理

```javascript
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

// 登录
await userStore.login(username, password)

// 获取用户信息
console.log(userStore.userInfo)

// 登出
userStore.logout()
```

## 部署

### Nginx配置示例

```nginx
server {
    listen 80;
    server_name your-domain.com;
    root /var/www/fun-sport-web/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # API代理到后端
    location /api {
        proxy_pass http://localhost:8858;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}
```

### Docker部署

```dockerfile
# Dockerfile
FROM node:16-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```

## 默认账号

**管理员账号**:
- 用户名: `admin`
- 密码: `admin123456`

⚠️ **生产环境请务必修改默认密码！**

## 浏览器支持

- Chrome >= 90
- Firefox >= 88
- Safari >= 14
- Edge >= 90

不支持IE浏览器。

## 常见问题

### 1. 代理配置不生效

确保 `vite.config.js` 中的代理配置正确，并重启开发服务器。

### 2. 登录后跳转404

检查路由配置，确保路由路径正确。

### 3. API请求失败

- 检查Java后端是否已启动
- 检查后端端口是否为8080
- 检查网络代理配置

### 4. Token过期

Token过期后会自动跳转登录页，需要重新登录。

## 相关项目

- **后端项目**: [fun-sport-java](https://github.com/your-org/fun-sport-java)
- **Python原始项目**: [fun-sport](https://github.com/your-org/fun-sport)

## 技术支持

如有问题，请联系开发团队。

## License

MIT License

Copyright (c) 2025 Fun-Sport Team

---

**Fun-Sport Web 管理后台** - 让运动管理更简单 🎉