综合网络知识实验与巩固工具
https://netlabx.vercel.app/
这是一个为七年级信息科技课程设计的综合性网络实验平台，整合了第二单元"直播网络我来建"的多个知识点，用于单元复习、知识巩固和综合实验。
- 第4课 数据分包灵活传 - 数据包的分片与传输
- 第5课 网络协议分层设计 - OSI/TCP/IP协议栈
- 第6课 数字身份辨设备 - IP地址、MAC地址
- 第7课 域名解析换编码 - DNS域名解析系统
- 第8课 路由路径靠算法 - 路由器、路由表、路径查找
- 第9课 数据传输有新意 - HTTP协议、Web服务
核心功能：
- ✅ 交互式网络拓扑构建（拖拽、连接、删除设备）
- ✅ 路由器路由表配置和连通测试（动画演示）
- ✅ DNS服务器和域名解析模拟
- ✅ Web服务器和HTTP请求模拟
- ✅ 浏览器模拟器（完整DNS→HTTP流程）
- ✅ 学生作业提交系统（教室局域网）
- ✅ 教师批量批改功能（密码保护）
- ✅ 画布演示模式（课堂投影）
- ✅ 路由故障转移和冗余路由自动切换
规划功能（v3.0+）：
- ⏳ 自动评分引擎
- ⏳ 数据包动画演示
- ⏳ 防火墙和NAT功能
完整版本历史请查看 CHANGELOG.md
推荐阅读顺序：
前提条件：安装Node.js（压缩包已包含所有依赖）
一键启动（推荐）：
双击运行根目录的 "一键启动.bat"
脚本会自动：
- ✅ 清理端口冲突（5173和3001）
- ✅ 同时启动前后端服务
- ✅ 显示学生访问地址
学生访问：
http://[教师机IP]:5173
例如：http://192.168.1.100:5173
详细部署说明和常见问题请查看 快速开始指南
- 添加设备：PC、路由器、DNS服务器、Web服务器
- Shift+点击连接：自动配置接口IP和网段
- 拖拽调整：自由布局，画布缩放和平移
- 一键布局：自动整理设备位置
- 可视化编辑：目标网络、下一跳、权重、接口
- 支持路由器名称：无需记忆IP地址
- "直连"快捷方式：自动识别直接连接的网络
- 冗余路由：多条路由自动故障转移
- 连通测试：查看数据包经过的路径（动画演示）
- 环路检测：自动识别路由环路
- 故障诊断：详细的错误提示和排查建议
- DNS域名解析：A记录配置，DNS查询动画
- Web服务器：HTML内容编辑，HTTP请求动画
- 浏览器模拟器：完整的DNS→HTTP访问流程
- 状态码可视化：成功=绿色，失败=红色
学生端：
- 点击"📝 提交作业"按钮
- 填写姓名、学号、班级
- 一键提交到教师机
教师端：
- 点击"📊 批改作业"按钮（密码保护）
- 选择班级和日期，加载作业
- 智能续批（自动跳转到第一个未批改作业）
- 9级成绩评定（A+/A/A-/B+/B/B-/C+/C/C-）
- CSV成绩表导出
批改密码查看/修改方法请见 快速开始指南 - Q2
- 一键最大化：点击拓扑区右上角"⤢ 最大化画布"
- 设备信息卡：自动显示PC的DNS、路由器的路由表摘要、Web服务器端口
- 锁定视图：防止误操作，适合全班观看
- 动画控制：单步模式、正常速度、快速模式
| 文档 | 用途 | 目标读者 | 阅读时间 |
|---|---|---|---|
| 快速开始指南 | 部署、使用、批改、FAQ | 所有教师 | 5分钟 |
| 教师教学指南 | 教学场景设计、从零搭建示例 | 备课教师 | 15分钟 |
| 学生操作手册 | 学生使用教程 | 学生 | 课前预习 |
| 考试系统说明 | 考试拓扑和批改标准 | 出题教师 | 10分钟 |
| 版本历史 | 完整版本更新记录 | 开发者 | - |
| 时间 | 活动 | 内容 |
|---|---|---|
| 0-5分钟 | 演示 | 教师演示平台使用，强调Shift+点击连接 |
| 5-25分钟 | 实践 | 学生搭建2-3个路由器的拓扑 |
| 25-35分钟 | 进阶 | 配置DNS和Web服务（选做） |
| 35-40分钟 | 总结 | 提交作业，展示优秀作品 |
| 时间 | 活动 | 内容 |
|---|---|---|
| 0-10分钟 | 讲解 | 讲解网络需求，画出拓扑图 |
| 10-30分钟 | 拓扑 | 添加设备、连接设备 |
| 30-50分钟 | 路由 | 配置路由表，测试连通性 |
| 50-65分钟 | 服务 | 配置DNS和Web服务 |
| 65-75分钟 | 测试 | 综合测试，修复错误 |
| 75-80分钟 | 总结 | 提交作业，课堂总结 |
详细教学脚本和从零搭建示例请查看 教师教学指南
- 前端框架：React 18 + TypeScript
- 状态管理：Zustand
- 样式框架：Tailwind CSS
- 构建工具：Vite
- 后端服务：Node.js + Express（作业提交）
- 运行环境：纯前端架构，无需数据库
网络综合实验平台/
├── README.md （本文件）
├── CHANGELOG.md （版本历史）
├── 快速开始指南.md （部署和使用指南）
├── 一键启动.bat （Windows一键启动脚本）
├── server.js （作业提交服务器）
├── src/ （前端源代码）
├── docs/ （用户文档）
│ ├── 学生操作手册.md
│ └── 教师教学指南.md
├── exams/ （考试系统）
│ ├── README.md
│ └── 文件使用说明.md
├── submissions/ （学生作业存储目录）
└── DEV_DOCS/ （开发文档）
遇到问题请查看：
- 快速开始指南 - 常见问题 - 部署、访问、批改相关
- 教师教学指南 - 教学场景、故障排查
- 学生操作手册 - 学生使用问题
- 学生无法访问？ → 检查防火墙，允许端口5173和3001
- 批改作业密码是什么？ → 默认
teacher123，查看server.js第21行 - 作业提交失败？ → 确保后端服务（
npm run server）正在运行 - 端口被占用？ → 运行
taskkill //F //IM node.exe停止所有Node进程 - 如何修改配置？ → 查看 快速开始指南 - Q2
🎓 七年级信息科技 · 第二单元综合实验 📚 直播网络我来建 · 知识巩固与实践平台 🔄 当前版本：v2.8.3 | 📅 更新时间：2025-12-03