比赛管理系统

一个基于 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，可以通过以下方式安装：

# 使用 npm 安装
npm install -g pnpm

# 或使用 corepack（Node.js 16.13+）
corepack enable
corepack prepare pnpm@latest --activate

快速安装（推荐）

在项目根目录执行：

# 安装所有依赖（前端 + 后端）
pnpm install

# 或分别安装
pnpm --filter frontend install
pnpm --filter backend install

后端设置

1. 进入后端目录：

cd backend

2. 安装依赖（如果未在根目录安装）：

pnpm install

3. 配置环境变量，创建 .env 文件：

DATABASE_URL="mysql://user:password@localhost:3306/competition_management?schema=public"
JWT_SECRET="your-secret-key-change-in-production"
PORT=3001

4. 初始化数据库：

# 生成 Prisma Client
pnpm prisma:generate

# 运行数据库迁移
pnpm prisma:migrate

5. 启动开发服务器：

# 方式1：在后端目录
pnpm start:dev

# 方式2：在根目录
pnpm dev:backend

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

前端设置

1. 进入前端目录：

cd frontend

2. 安装依赖（如果未在根目录安装）：

pnpm install

3. 启动开发服务器：

# 方式1：在前端目录
pnpm dev

# 方式2：在根目录
pnpm dev:frontend

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

同时启动前后端

在项目根目录执行：

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: 构建/工具相关

部署

前端构建

# 方式1：在前端目录
cd frontend
pnpm build

# 方式2：在根目录
pnpm build:frontend

构建产物在 frontend/dist 目录。

后端构建

# 方式1：在后端目录
cd backend
pnpm build
pnpm start:prod

# 方式2：在根目录
pnpm build:backend
cd backend
pnpm start:prod

同时构建前后端

pnpm build

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！