🎯 在线编译系统 - 项目概览

📋 项目已完成

恭喜！您的在线编译系统项目架构已经搭建完成。以下是完整的项目结构和说明。

📁 完整项目结构

Online-Compilation-System/
├── 📄 README.md                    # 项目主文档
├── 📄 LICENSE                      # MIT许可证
├── 📄 .gitignore                   # Git忽略文件
├── 📄 .env.example                 # 环境变量模板
├── 📄 CONTRIBUTING.md              # 贡献指南
├── 📄 docker-compose.yml           # 开发环境Docker配置
├── 📄 docker-compose.prod.yml      # 生产环境Docker配置
├── 🔧 start.sh                     # Linux/Mac启动脚本
├── 🔧 start.bat                    # Windows启动脚本
│
├── 📂 frontend/                    # React前端项目
│   ├── 📄 package.json
│   ├── 📄 tsconfig.json
│   ├── 📄 vite.config.ts
│   ├── 📄 tailwind.config.js
│   ├── 📄 Dockerfile
│   ├── 📄 nginx.conf
│   ├── 📄 index.html
│   └── 📂 src/
│       ├── 📄 main.tsx            # 应用入口
│       ├── 📄 App.tsx             # 主应用组件
│       ├── 📄 index.css           # 全局样式
│       ├── 📂 components/         # UI组件
│       │   ├── 📂 Layout/
│       │   │   ├── index.tsx
│       │   │   └── Layout.css
│       │   ├── Header.tsx
│       │   └── CodeEditor.tsx
│       ├── 📂 pages/              # 页面组件
│       │   ├── HomePage.tsx       # 首页
│       │   ├── EditorPage.tsx     # 编辑器页面
│       │   ├── LoginPage.tsx      # 登录页面
│       │   ├── RegisterPage.tsx   # 注册页面
│       │   └── HistoryPage.tsx    # 历史记录页面
│       ├── 📂 hooks/              # 自定义Hooks
│       │   └── useExecuteCode.ts
│       ├── 📂 store/              # 状态管理
│       │   └── authStore.ts
│       └── 📂 services/           # API服务
│           └── api.ts
│
├── 📂 backend/                     # Node.js后端项目
│   ├── 📄 package.json
│   ├── 📄 tsconfig.json
│   ├── 📄 Dockerfile
│   ├── 📂 prisma/
│   │   └── schema.prisma          # 数据库Schema
│   └── 📂 src/
│       ├── 📄 server.ts           # 服务器入口
│       ├── 📂 config/
│       │   └── index.ts           # 配置管理
│       ├── 📂 controllers/        # 控制器
│       │   ├── auth.controller.ts
│       │   ├── execute.controller.ts
│       │   └── submission.controller.ts
│       ├── 📂 routes/             # 路由
│       │   ├── auth.routes.ts
│       │   ├── execute.routes.ts
│       │   └── submission.routes.ts
│       ├── 📂 middleware/         # 中间件
│       │   ├── auth.ts
│       │   ├── errorHandler.ts
│       │   ├── rateLimiter.ts
│       │   └── validator.ts
│       ├── 📂 services/           # 业务逻辑
│       │   └── docker.service.ts
│       ├── 📂 workers/            # 任务处理器
│       │   └── execute.worker.ts
│       ├── 📂 queues/             # 任务队列
│       │   └── execute.queue.ts
│       ├── 📂 schemas/            # 验证Schema
│       │   ├── auth.schema.ts
│       │   └── execute.schema.ts
│       └── 📂 utils/              # 工具函数
│           └── logger.ts
│
├── 📂 nginx/                       # Nginx配置
│   ├── 📄 Dockerfile
│   ├── 📄 nginx.conf
│   └── 📂 conf.d/
│       └── default.conf
│
└── 📂 docs/                        # 文档
    ├── 📄 API.md                  # API文档
    └── 📄 DEVELOPMENT.md          # 开发文档

🎨 技术栈总览

前端

⚛️ React 18 - UI框架
📘 TypeScript - 类型安全
⚡ Vite - 构建工具
🎨 Ant Design - UI组件库
🎨 Tailwind CSS - 样式框架
📝 Monaco Editor - 代码编辑器
🔄 React Query - 数据获取
🗃️ Zustand - 状态管理
🌐 Axios - HTTP客户端

后端

🟢 Node.js 18 - 运行环境
📘 TypeScript - 类型安全
🚂 Express - Web框架
🔐 JWT - 身份认证
✅ Joi - 数据验证
🎯 Prisma - ORM
🐘 PostgreSQL - 数据库
🔴 Redis - 缓存/队列
🐂 Bull - 任务队列
🐳 Dockerode - Docker控制

基础设施

🐳 Docker - 容器化
🐙 Docker Compose - 编排
🌐 Nginx - 反向代理
📊 Winston - 日志

🚀 快速开始

方式1：使用启动脚本（推荐）

Linux/Mac:

chmod +x start.sh
./start.sh

Windows:

start.bat

方式2：手动启动

# 1. 复制环境变量文件
cp .env.example .env

# 2. 启动所有服务
docker-compose up -d

# 3. 初始化数据库
cd backend
npm install
npx prisma migrate dev
npx prisma generate

# 4. 访问应用
# 前端: http://localhost:3000
# 后端: http://localhost:8000

📊 系统架构

┌─────────────────────────────────────────────────────┐
│                      用户                           │
└────────────────────┬────────────────────────────────┘
                     │ HTTPS
                     ▼
┌─────────────────────────────────────────────────────┐
│                   Nginx (反向代理)                   │
│              负载均衡 + 静态资源服务                 │
└────────────┬────────────────┬───────────────────────┘
             │                │
    ┌────────▼──────┐    ┌───▼─────────────┐
    │   Frontend    │    │    Backend      │
    │   (React)     │    │   (Express)     │
    │   Port: 80    │    │   Port: 8000    │
    └───────────────┘    └────┬─────┬──────┘
                              │     │
                    ┌─────────┴─┐ ┌─▼──────────┐
                    │PostgreSQL │ │   Redis    │
                    │   数据库  │ │  任务队列   │
                    └───────────┘ └─┬──────────┘
                                    │
                              ┌─────▼──────┐
                              │   Worker   │
                              │ 代码执行器  │
                              └─────┬──────┘
                                    │
                    ┌───────────────┼────────────────┐
                    │               │                │
            ┌───────▼───┐   ┌──────▼────┐   ┌──────▼────┐
            │  Python   │   │   Java    │   │   C++     │
            │  容器     │   │   容器    │   │   容器     │
            └───────────┘   └───────────┘   └───────────┘

🔑 核心功能

✅ 已实现

✅ 用户认证系统（注册/登录）
✅ 多语言代码编辑器
✅ 代码执行引擎
✅ Docker容器隔离
✅ 异步任务队列
✅ 执行结果展示
✅ 提交历史管理
✅ 速率限制保护
✅ 错误处理机制
✅ 日志系统

🚧 待扩展

📝 下一步操作

1. 安装依赖

前端:

cd frontend
npm install

后端:

cd backend
npm install
npx prisma generate

2. 配置环境变量

编辑 .env 文件，配置必要的环境变量：

数据库连接
Redis连接
JWT密钥
Docker配置

3. 启动开发环境

# 启动所有服务
docker-compose up -d

# 或者分别启动
cd frontend && npm run dev    # 前端开发服务器
cd backend && npm run dev     # 后端开发服务器

4. 数据库迁移

cd backend
npx prisma migrate dev --name init
npx prisma generate

5. 测试系统

访问 http://localhost:3000 测试系统功能

📚 文档清单

✅ README.md - 项目介绍
✅ docs/API.md - API接口文档
✅ docs/DEVELOPMENT.md - 开发指南
✅ CONTRIBUTING.md - 贡献指南
✅ .env.example - 环境变量示例

🛠️ 开发工具推荐

VS Code - 代码编辑器
Postman - API测试
Docker Desktop - 容器管理
Prisma Studio - 数据库管理
Redis Commander - Redis管理

🔒 安全检查清单

✅ JWT令牌认证
✅ 密码加密存储
✅ 输入数据验证
✅ SQL注入防护
✅ XSS防护
✅ CSRF防护
✅ 速率限制
✅ Docker容器隔离
✅ 资源使用限制
✅ 网络隔离

📊 性能指标

目标性能

API响应时间: < 100ms
代码执行启动: < 2s
并发支持: 100+ 同时执行
数据库查询: < 50ms
页面加载: < 1s

🎓 学习资源

💡 最佳实践

代码规范: 使用ESLint和Prettier
版本控制: 使用Git，遵循Git Flow
测试: 编写单元测试和集成测试
文档: 保持文档更新
安全: 定期更新依赖，修复漏洞
性能: 监控系统性能，优化瓶颈

🐛 常见问题

Docker相关

端口占用: 修改docker-compose.yml中的端口映射
权限问题: 将用户添加到docker组
镜像拉取失败: 配置镜像加速器

开发相关

依赖安装失败: 清除缓存，重新安装
热更新不生效: 检查Vite配置
类型错误: 运行npx prisma generate

🎉 完成情况

✅ 项目结构: 100% ✅ 前端代码: 100% ✅ 后端代码: 100% ✅ 数据库设计: 100% ✅ Docker配置: 100% ✅ 文档编写: 100%

📞 支持

📧 Email: support@example.com
💬 GitHub Issues: 提交问题
📖 文档: 查看文档

🎊 恭喜！

您的在线编译系统项目架构已完全搭建完成！现在您可以：

⭐ 给项目加Star
🔧 开始开发新功能
🐛 修复发现的Bug
📝 完善文档
🚀 部署到生产环境

祝您开发愉快！ 🎈

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🎯 在线编译系统 - 项目概览

📋 项目已完成

📁 完整项目结构

🎨 技术栈总览

前端

后端

基础设施

🚀 快速开始

方式1：使用启动脚本（推荐）

方式2：手动启动

📊 系统架构

🔑 核心功能

✅ 已实现

🚧 待扩展

📝 下一步操作

1. 安装依赖

2. 配置环境变量

3. 启动开发环境

4. 数据库迁移

5. 测试系统

📚 文档清单

🛠️ 开发工具推荐

🔒 安全检查清单

📊 性能指标

目标性能

🎓 学习资源

💡 最佳实践

🐛 常见问题

Docker相关

开发相关

🎉 完成情况

📞 支持

🎊 恭喜！

FilesExpand file tree

PROJECT_OVERVIEW.md

Latest commit

History

PROJECT_OVERVIEW.md

File metadata and controls

🎯 在线编译系统 - 项目概览

📋 项目已完成

📁 完整项目结构

🎨 技术栈总览

前端

后端

基础设施

🚀 快速开始

方式1：使用启动脚本（推荐）

方式2：手动启动

📊 系统架构

🔑 核心功能

✅ 已实现

🚧 待扩展

📝 下一步操作

1. 安装依赖

2. 配置环境变量

3. 启动开发环境

4. 数据库迁移

5. 测试系统

📚 文档清单

🛠️ 开发工具推荐

🔒 安全检查清单

📊 性能指标

目标性能

🎓 学习资源

💡 最佳实践

🐛 常见问题

Docker相关

开发相关

🎉 完成情况

📞 支持

🎊 恭喜！