# webCodingFrontend **Repository Path**: dirty_up/web-coding-frontend ## Basic Information - **Project Name**: webCodingFrontend - **Description**: Vue 3 + Vite 的在线编程IDE - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2025-09-24 - **Last Updated**: 2026-03-18 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # IDE Vue 1.0.0 - WebCoding 在线编程IDE ## 📖 项目概述 WebCoding 是一个基于 Vue 3 + Vite 的在线编程IDE，提供完整的代码编辑、运行、调试和项目管理功能。项目采用现代化的前端架构，支持多种编程语言，集成了AI辅助编程、实时协作、文件管理等功能。 ## 🚀 主要特性 ### 核心功能 - **多语言支持**: Python, JavaScript, Java, C, C++, C# - **实时代码运行**: 集成Docker容器，安全执行代码 - **Monaco编辑器**: 提供专业的代码编辑体验 - **文件管理**: 完整的项目文件树和文件操作 - **会话管理**: 支持多用户协作和会话记录 - **AI辅助**: 集成AI代码分析和评分功能 ### 技术特性 - **响应式设计**: 基于Vue 3 Composition API - **状态管理**: 使用Pinia进行集中式状态管理 - **模块化架构**: 清晰的组件分离和API设计 - **实时同步**: WebSocket支持实时数据同步 - **安全执行**: Docker容器隔离代码执行环境 ## 🏗️ 项目结构 ``` webcoding/ ├── src/ │ ├── api/ # API接口层 │ │ ├── client.js # HTTP客户端 │ │ ├── resources.js # API资源函数 │ │ └── socket.js # WebSocket连接 │ ├── components/ # Vue组件 │ │ ├── ChatPanel.vue # 聊天面板 │ │ ├── ConsolePanel.vue # 控制台面板 │ │ ├── EditorTabs.vue # 编辑器标签 │ │ ├── FileTree.vue # 文件树 │ │ ├── Login.vue # 登录组件 │ │ ├── MonacoEditor.vue # Monaco编辑器 │ │ └── ProjectSelector.vue # 项目选择器 │ ├── stores/ # Pinia状态管理 │ │ ├── app.js # 应用主状态 │ │ ├── files.js # 文件状态 │ │ ├── sessions.js # 会话状态 │ │ ├── exercises.js # 练习状态 │ │ └── organizations.js # 组织状态 │ ├── services/ # 服务层 │ │ └── dataSync.js # 数据同步服务 │ └── App.vue # 主应用组件 ├── public/ # 静态资源 ├── package.json # 项目配置 └── vite.config.js # Vite配置 ``` ## 🔧 技术栈 ### 前端技术 - **Vue 3**: 渐进式JavaScript框架 - **Vite**: 快速构建工具 - **Pinia**: 状态管理库 - **Monaco Editor**: 代码编辑器 - **WebSocket**: 实时通信 ### 后端技术 - **Flask**: Python Web框架 - **SQLAlchemy**: ORM数据库操作 - **Docker**: 容器化代码执行 - **MySQL**: 关系型数据库 - **JWT**: 身份认证 ## 📋 功能模块 ### 1. 用户认证系统 - 用户登录/注册 - JWT令牌认证 - 会话管理和过期控制 - 自动登录状态恢复 ### 2. 项目管理 - 项目创建和选择 - 文件树管理 - 文件CRUD操作 - 项目状态持久化 ### 3. 代码编辑 - Monaco编辑器集成 - 多文件标签管理 - 语法高亮和自动补全 - 撤销/重做功能 - 复制/粘贴/全选操作 ### 4. 代码运行 - 多语言代码执行 - Docker容器隔离 - 实时输出显示 - 错误处理和调试 ### 5. 会话管理 - 多用户协作 - 消息记录和同步 - 实时通信 - 会话历史管理 ### 6. 练习系统 - 编程练习题库 - 难度分级 - 进度跟踪 - AI生成练习 ### 7. 组织管理 - 小组/组织创建 - 成员管理 - 权限控制 - 协作功能 ## 🛠️ 安装和运行 ### 环境要求 - Node.js 16+ - Python 3.8+ - MySQL 8.0+ - Docker ### 前端安装 ```bash # 安装依赖 npm install # 开发模式运行 npm run dev # 构建生产版本 npm run build ``` ### 后端安装 ```bash # 安装Python依赖 pip install -r requirements.txt # 设置环境变量 export FLASK_ENV=development export DEEPSEEK_API_KEY=your_api_key export DATABASE_URL=mysql+pymysql://user:password@localhost:3306/ide # 运行应用 python app.py ``` ## 🔌 API接口 ### 认证模块 (`/api/auth`) - `POST /api/auth/login` - 用户登录 ### 项目管理 (`/api/projects`) - `GET /api/projects/user/` - 获取用户项目 - `POST /api/projects/user/` - 创建项目 - `GET /api/projects//files` - 获取项目文件 - `POST /api/projects//files` - 创建文件 - `PUT /api/projects/files/` - 更新文件 - `DELETE /api/projects/files/` - 删除文件 ### 会话管理 (`/api/sessions`) - `GET /api/sessions/user//project/` - 获取会话 - `POST /api/sessions/user//project/` - 创建会话 - `PUT /api/sessions/user//project/` - 更新会话 - `DELETE /api/sessions/` - 删除会话 ### 练习管理 (`/api/exercises`) - `GET /api/exercises` - 获取练习列表 - `POST /api/exercises` - 创建练习 - `PUT /api/exercises/` - 更新练习 - `DELETE /api/exercises/` - 删除练习 - `POST /api/exercises/ai-generate` - AI生成练习 ### AI功能 (`/api/ai`) - `POST /api/ai/analysis` - 代码分析 - `POST /api/ai/score` - 代码评分 ### 编译功能 (`/api/compile`) - `POST /api/compile` - 编译运行代码 - `GET /api/compile/health` - 健康检查 ### 组织管理 (`/api/organizations`) - `GET /api/organizations` - 获取组织列表 - `POST /api/organizations` - 创建/加入组织 - `DELETE /api/organizations` - 删除组织 ## 🎯 核心功能实现 ### 数据管理优化 - **集中式状态管理**: 使用Pinia管理所有应用状态 - **数据同步**: 实时数据变更监听和同步 - **持久化存储**: localStorage自动保存用户状态 - **错误处理**: 完善的错误处理和容错机制 ### 编辑功能 - **撤销/重做**: Ctrl+Z/Ctrl+Y支持 - **复制/粘贴**: Ctrl+C/Ctrl+V支持 - **全选**: Ctrl+A支持 - **多文件编辑**: 独立的编辑历史 ### 代码运行 - **多语言支持**: Python, JavaScript, Java, C, C++, C# - **安全执行**: Docker容器隔离 - **实时输出**: 控制台实时显示结果 - **错误处理**: 详细的错误信息反馈 ### 文件管理 - **文件树**: 完整的项目文件结构 - **文件操作**: 创建、编辑、删除、重命名 - **自动保存**: 文件内容自动保存 - **状态同步**: 文件状态实时同步 ## 🔒 安全特性 1. **输入验证**: 所有API输入都经过严格验证 2. **密码安全**: 使用bcrypt进行密码哈希 3. **文件安全**: 文件名清理和扩展名验证 4. **SQL注入防护**: 使用ORM防止SQL注入 5. **XSS防护**: 输入数据清理和转义 6. **容器隔离**: Docker容器安全执行代码 ## ⚡ 性能优化 1. **并行加载**: 使用Promise.allSettled并行加载数据 2. **防抖保存**: 文件内容防抖自动保存 3. **按需加载**: 组件按需加载和渲染 4. **缓存机制**: 合理的数据缓存策略 5. **资源限制**: Docker容器资源限制 ## 🧪 测试功能 ### 代码运行测试 项目提供了多种编程语言的测试示例： **Python示例**: ```python print("Hello, World!") print("Python 运行测试成功！") ``` **JavaScript示例**: ```javascript console.log("Hello, World!"); console.log("JavaScript 运行测试成功！"); ``` **Java示例**: ```java public class Main { public static void main(String[] args) { System.out.println("Hello, World!"); System.out.println("Java 运行测试成功！"); } } ``` ### 编辑功能测试 - 撤销/重做功能测试 - 复制/粘贴功能测试 - 全选功能测试 - 多文件编辑测试 ## 📝 使用说明 ### 基本使用流程 1. **用户登录**: 使用邮箱和密码登录系统 2. **选择项目**: 选择或创建编程项目 3. **编辑代码**: 在Monaco编辑器中编写代码 4. **运行代码**: 点击运行按钮执行代码 5. **查看结果**: 在控制台面板查看运行结果 ### 快捷键支持 - `Ctrl+Z`: 撤销 - `Ctrl+Y`: 重做 - `Ctrl+C`: 复制 - `Ctrl+V`: 粘贴 - `Ctrl+A`: 全选 - `Ctrl+S`: 保存文件 - `Ctrl+Shift+S`: 保存所有文件 ### 高级功能 - **AI辅助**: 使用AI进行代码分析和评分 - **协作编程**: 多用户实时协作 - **练习系统**: 完成编程练习和挑战 - **组织管理**: 创建和管理编程小组 ## 🚀 部署说明 ### 开发环境 ```bash # 前端开发服务器 npm run dev # 后端开发服务器 python app.py ``` ### 生产环境 ```bash # 构建前端 npm run build # 部署到服务器 # 配置Nginx反向代理 # 配置SSL证书 # 设置环境变量 ``` ## 🔧 配置说明 ### 环境变量 - `FLASK_ENV`: 运行环境 (development/production/testing) - `DEEPSEEK_API_KEY`: DeepSeek API密钥 - `DATABASE_URL`: 数据库连接URL - `SECRET_KEY`: Flask密钥 - `JWT_SECRET_KEY`: JWT密钥 ### Docker配置 - `DOCKER_MEMORY_LIMIT`: 容器内存限制 - `DOCKER_CPU_QUOTA`: CPU配额 - `DOCKER_TIMEOUT`: 执行超时时间 ## 📊 监控和日志 1. **结构化日志**: 使用Python logging模块 2. **健康检查**: 提供健康检查端点 3. **错误追踪**: 详细的错误信息和堆栈跟踪 4. **性能监控**: 执行时间统计 ## 🤝 贡献指南 1. Fork项目仓库 2. 创建功能分支 3. 提交代码更改 4. 创建Pull Request 5. 代码审查和合并 ## 📄 许可证 本项目采用MIT许可证，详情请查看LICENSE文件。 ## 📞 联系方式 如有问题或建议，请通过以下方式联系： - 项目Issues: [GitHub Issues](https://github.com/your-repo/issues) - 邮箱: your-email@example.com --- **WebCoding IDE** - 让编程更简单，让学习更高效！