# js-editor-sysytem

**Repository Path**: crabapple12315/js-editor-sysytem

## Basic Information

- **Project Name**: js-editor-sysytem
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-18
- **Last Updated**: 2026-02-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🎓 JS编辑器教学演示系统

## 📖 项目简介

这是一个基于React + Node.js开发的在线JavaScript代码编辑和教学管理系统，专为编程教育场景设计。系统提供完整的代码编辑、作业管理、在线答疑等功能，支持教师发布作业、学生提交代码、实时批改等教学流程。

## ✨ 主要功能

### 👨‍🎓 学生功能
- **在线代码编辑器**：支持HTML/CSS/JavaScript实时编写和预览
- **作业管理系统**：查看作业要求、提交代码作业、申请重做
- **学习报告**：查看个人学习统计和知识点掌握情况
- **在线答疑**：与教师实时沟通，解决学习问题
- **资源浏览**：查看课件、视频等教学资源

### 👨‍🏫 教师功能
- **学生管理**：批量导入学生信息，管理班级名单
- **作业发布**：创建作业任务，设置截止时间和要求
- **在线批改**：实时查看学生代码，评分和点评
- **答疑管理**：回复学生问题，提供学习指导
- **教学监控**：查看学生学习进度和统计数据
- **资源管理**：上传和管理教学课件、代码示例

### 🛠️ 系统特性
- **实时预览**：代码编写即时预览效果
- **文件上传**：支持多种格式的文件提交
- **数据可视化**：学习报告和统计图表
- **响应式设计**：支持桌面和移动设备
- **多语言支持**：中英文界面切换

## 🚀 快速开始

### 系统要求
- **Node.js**: 16.0 或更高版本
- **npm**: 7.0 或更高版本
- **MySQL**: 8.0 或更高版本
- **浏览器**: Chrome 90+ / Firefox 88+ / Safari 14+

### 安装步骤

#### 1. 克隆项目
```bash
git clone <项目地址>
cd js-editor-system
```

#### 2. 安装依赖

**安装前端依赖：**
```bash
npm install
```

**安装后端依赖：**
```bash
cd backend
npm install
cd ..
```

#### 3. 数据库配置

确保MySQL服务正在运行，然后创建数据库：
```sql
CREATE DATABASE js_editor CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
```

修改 `backend/.env` 文件中的数据库配置：
```env
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=your_password
DB_NAME=js_editor
DB_PORT=3306
```

#### 4. 初始化数据库

```bash
cd backend
node init-anchor-tables.js
```

### 启动系统

#### 方式一：开发模式（推荐用于演示）

**第一步：启动后端服务**
```bash
cd backend
node index.js
```
后端将在 http://localhost:5000 启动

**第二步：启动前端服务**（新开终端窗口）
```bash
npm start
```
前端将在 http://localhost:3000 启动

#### 方式二：生产模式

**构建前端：**
```bash
npm run build
```

**启动后端：**
```bash
cd backend
node index.js
```

然后访问 http://localhost:3000 查看构建后的应用

## 🔐 测试账号

### 学生账号
- **用户名**: 2021001
- **密码**: 123456

### 教师账号
- **用户名**: teacher
- **密码**: 123456

## 📱 使用指南

### 学生操作流程

1. **登录系统**：使用学生账号登录
2. **查看作业**：在主页查看所有作业任务
3. **编写代码**：点击作业卡片进入代码编辑器
4. **实时预览**：在右侧面板查看代码运行效果
5. **提交作业**：编写完成后点击"提交作业"按钮

### 教师操作流程

1. **登录系统**：使用教师账号登录
2. **管理学生**：在"学生管理"页面添加或导入学生信息
3. **发布作业**：创建新的作业任务，设置要求和截止时间
4. **批改作业**：查看学生提交，评分并给出反馈
5. **答疑互动**：回复学生的问题，提供学习指导

## 🏗️ 项目结构

```
js-editor-system/
├── src/                    # React前端源码
│   ├── components/         # React组件
│   ├── api.js             # API接口封装
│   ├── App.js             # 主应用组件
│   └── index.js           # 应用入口
├── backend/               # Node.js后端
│   ├── index.js           # 后端服务入口
│   ├── routes/            # API路由
│   ├── db.js              # 数据库连接
│   └── uploads/           # 文件上传目录
├── public/                # 静态资源
├── build/                 # 构建输出目录
├── wendang/               # 项目文档
└── package.json          # 项目配置
```

## 🔧 技术栈

### 前端技术
- **React 19**：用户界面框架
- **D3.js**：数据可视化
- **PDF.js**：PDF文档查看
- **React Syntax Highlighter**：代码语法高亮

### 后端技术
- **Node.js**：JavaScript运行环境
- **Express.js**：Web应用框架
- **MySQL2**：数据库连接
- **Multer**：文件上传处理
- **JWT**：身份认证

### 开发工具
- **Create React App**：前端脚手架
- **PM2**：进程管理（生产环境）
- **Nodemon**：开发环境热重载

## 📊 数据库设计

系统包含以下主要数据表：
- `users`：用户表（学生/教师）
- `courses`：课程表
- `assignments`：作业表
- `submissions`：提交记录表
- `qa_answers`：问答记录表
- `learning_records`：学习记录表

## 🚀 部署说明

### 开发环境部署
按照"快速开始"中的步骤即可完成部署。

### 生产环境部署
1. 构建前端静态文件：`npm run build`
2. 配置Web服务器（如Nginx/IIS）提供静态文件服务
3. 使用PM2管理后端进程
4. 配置反向代理将API请求转发到后端服务

详细的部署指南请参考 `Windows服务器部署指南.md` 和 `deploy/服务器部署步骤.md`。

## 📚 相关文档

- `wendang/USER_GUIDE.md`：完整使用教程
- `wendang/SYSTEM_OVERVIEW.md`：系统功能概述
- `Windows服务器部署指南.md`：Windows服务器部署指南
- `deploy/服务器部署步骤.md`：服务器部署步骤

## 🤝 贡献指南

1. Fork 本项目
2. 创建特性分支：`git checkout -b feature/AmazingFeature`
3. 提交更改：`git commit -m 'Add some AmazingFeature'`
4. 推送分支：`git push origin feature/AmazingFeature`
5. 创建 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

## 📞 技术支持

如有问题或建议，请通过以下方式联系：
- 提交 Issue
- 发送邮件至技术支持邮箱

---

**演示地址**: http://localhost:3000  
**API文档**: http://localhost:5000/api/docs  
**系统状态**: ✅ 正常运行