# 比赛管理系统 一个基于 Vue 3 + NestJS 的现代化比赛管理系统,支持用户管理、角色权限、菜单管理、数据字典、系统配置和日志记录等核心功能。 ## 技术栈 ### 前端 - **框架**: Vue 3 + TypeScript - **构建工具**: Vite - **UI 组件库**: Ant Design Vue - **样式方案**: Tailwind CSS + SCSS + CSS Modules - **状态管理**: Pinia - **路由**: Vue Router 4 - **HTTP 客户端**: Axios - **表单验证**: VeeValidate + Zod ### 后端 - **框架**: NestJS + TypeScript - **数据库**: MySQL 8.0 - **ORM**: Prisma - **认证授权**: JWT + RBAC (基于角色的访问控制) ## 项目结构 ``` competition-management-system/ ├── frontend/ # 前端项目 │ ├── src/ │ │ ├── api/ # API 接口 │ │ ├── assets/ # 静态资源 │ │ ├── components/# 公共组件 │ │ ├── layouts/ # 布局组件 │ │ ├── router/ # 路由配置 │ │ ├── stores/ # Pinia 状态管理 │ │ ├── styles/ # 样式文件 │ │ ├── types/ # TypeScript 类型定义 │ │ ├── utils/ # 工具函数 │ │ └── views/ # 页面组件 │ └── package.json │ └── backend/ # 后端项目 ├── prisma/ # Prisma 配置 │ └── schema.prisma ├── src/ │ ├── auth/ # 认证模块 │ ├── users/ # 用户管理 │ ├── roles/ # 角色管理 │ ├── menus/ # 菜单管理 │ ├── dict/ # 数据字典 │ ├── config/ # 系统配置 │ ├── logs/ # 日志记录 │ └── prisma/ # Prisma 服务 └── package.json ``` ## 快速开始 ### 环境要求 - Node.js >= 18.0.0 - pnpm >= 8.0.0 - MySQL >= 8.0 ### 安装 pnpm 如果还没有安装 pnpm,可以通过以下方式安装: ```bash # 使用 npm 安装 npm install -g pnpm # 或使用 corepack(Node.js 16.13+) corepack enable corepack prepare pnpm@latest --activate ``` ### 快速安装(推荐) 在项目根目录执行: ```bash # 安装所有依赖(前端 + 后端) pnpm install # 或分别安装 pnpm --filter frontend install pnpm --filter backend install ``` ### 后端设置 1. 进入后端目录: ```bash cd backend ``` 2. 安装依赖(如果未在根目录安装): ```bash pnpm install ``` 3. 配置环境变量,创建 `.env` 文件: ```env DATABASE_URL="mysql://user:password@localhost:3306/lesingle-creation-test?schema=public" JWT_SECRET="your-secret-key-change-in-production" PORT=3001 ``` 4. 初始化数据库: ```bash # 生成 Prisma Client pnpm prisma:generate # 运行数据库迁移 pnpm prisma:migrate ``` 5. 启动开发服务器: ```bash # 方式1:在后端目录 pnpm start:dev # 方式2:在根目录 pnpm dev:backend ``` 后端服务将在 `http://localhost:3001` 启动。 ### 前端设置 1. 进入前端目录: ```bash cd frontend ``` 2. 安装依赖(如果未在根目录安装): ```bash pnpm install ``` 3. 启动开发服务器: ```bash # 方式1:在前端目录 pnpm dev # 方式2:在根目录 pnpm dev:frontend ``` 前端应用将在 `http://localhost:3000` 启动。 ### 同时启动前后端 在项目根目录执行: ```bash pnpm dev ``` 这将同时启动前端和后端开发服务器。 ## 核心功能 ### 1. 用户管理 - 用户列表查询(分页) - 用户创建、编辑、删除 - 用户角色分配 ### 2. 角色权限 (RBAC) - 角色管理(创建、编辑、删除) - 权限分配 - 基于角色的访问控制 ### 3. 菜单管理 - 菜单树形结构管理 - 菜单权限配置 - 动态路由生成 ### 4. 数据字典 - 字典类型管理 - 字典项管理 - 字典数据查询 ### 5. 系统配置 - 系统参数配置 - 配置项管理 ### 6. 日志记录 - 操作日志记录 - 日志查询和统计 ## API 文档 ### 认证接口 - `POST /api/auth/login` - 用户登录 - `GET /api/auth/user-info` - 获取当前用户信息 - `POST /api/auth/logout` - 用户登出 ### 用户管理 - `GET /api/users` - 获取用户列表 - `GET /api/users/:id` - 获取用户详情 - `POST /api/users` - 创建用户 - `PATCH /api/users/:id` - 更新用户 - `DELETE /api/users/:id` - 删除用户 ### 角色管理 - `GET /api/roles` - 获取角色列表 - `GET /api/roles/:id` - 获取角色详情 - `POST /api/roles` - 创建角色 - `PATCH /api/roles/:id` - 更新角色 - `DELETE /api/roles/:id` - 删除角色 ### 菜单管理 - `GET /api/menus` - 获取菜单列表(树形结构) - `GET /api/menus/:id` - 获取菜单详情 - `POST /api/menus` - 创建菜单 - `PATCH /api/menus/:id` - 更新菜单 - `DELETE /api/menus/:id` - 删除菜单 ### 数据字典 - `GET /api/dict` - 获取字典列表 - `GET /api/dict/code/:code` - 根据代码获取字典 - `GET /api/dict/:id` - 获取字典详情 - `POST /api/dict` - 创建字典 - `PATCH /api/dict/:id` - 更新字典 - `DELETE /api/dict/:id` - 删除字典 ### 系统配置 - `GET /api/config` - 获取配置列表 - `GET /api/config/key/:key` - 根据键获取配置 - `GET /api/config/:id` - 获取配置详情 - `POST /api/config` - 创建配置 - `PATCH /api/config/:id` - 更新配置 - `DELETE /api/config/:id` - 删除配置 ### 日志记录 - `GET /api/logs` - 获取日志列表 - `GET /api/logs/:id` - 获取日志详情 - `POST /api/logs` - 创建日志 ## 开发规范 ### 代码风格 - 使用 ESLint 和 Prettier 进行代码格式化 - 遵循 TypeScript 严格模式 - 使用语义化的提交信息 ### 提交规范 - `feat`: 新功能 - `fix`: 修复 bug - `docs`: 文档更新 - `style`: 代码格式调整 - `refactor`: 代码重构 - `test`: 测试相关 - `chore`: 构建/工具相关 ## 部署 ### 前端构建 ```bash # 方式1:在前端目录 cd frontend pnpm build # 方式2:在根目录 pnpm build:frontend ``` 构建产物在 `frontend/dist` 目录。 ### 后端构建 ```bash # 方式1:在后端目录 cd backend pnpm build pnpm start:prod # 方式2:在根目录 pnpm build:backend cd backend pnpm start:prod ``` ### 同时构建前后端 ```bash pnpm build ``` ## 许可证 MIT License ## 贡献 欢迎提交 Issue 和 Pull Request!