3.6 KiB
3.6 KiB
EST-100 实验模拟与教学平台(前端)
基于 Next.js 14 与 React 18 的教学前端,聚合了“线缆测试与故障诊断”相关的实验模拟页面(Fluke 模拟器)与教学资源(课件/教案),并提供成绩查询与导出功能。
技术栈
- Next.js 14(
pages路由模式,关闭appDir) - React 18
- Bootstrap 5(通过
_document.js引入样式、_app.jsx注入脚本) - jQuery(随 Bootstrap 交互一并注入)
- CSS Modules(页面/组件级样式)
快速开始
- 安装依赖:
npm install - 开发启动:
npm run dev(默认端口3002) - 生产构建:
npm run build - 生产启动:
npm start(默认端口3002)
启动后请访问:
- 主实验页:
/FlukeMoniPage - 控制台:
/Control - 首页
/当前为占位页(显示“错误的加载”),后续可改为跳转或主页导航。
主要功能与页面
/FlukeMoniPage实验页入口- 列出“实验一~实验五”卡片。
- 点击“打开”触发模态框,内嵌 iFrame 加载对应静态模拟器页面:
/public/flukemoni/{Ex}/HOMEPAGE.html。 - “实验指导”链接在新窗口打开,目标地址基于当前主机名与端口
3001的文档站。
/Control控制台- 成绩查询:按组织(URL 参数
org)与用户名筛选,支持排序、仅最高分、CSV 导出。 - 课件/教案:从
public/doc/直接下载 PDF/PPTX/DOCX,以及部分.flw实验数据。
- 成绩查询:按组织(URL 参数
数据与外部服务
- 成绩查询 API(前端内置的默认约定):
GET http://<当前主机>:3000/survey-answers?org=<组织>&username=<用户名>- 期望返回:
{ success: boolean, data: Array<{ projectId, username, score, submitTime }> } - 项目 ID 映射内置于前端(如
XEdP7K→ “实验一随堂练” 等)。 - 前端在控制台页通过 URL 参数
org读取组织,如:/Control?org=计算机学院。
- 教学文档站(实验指导):
- 基于
window.location推断为http(s)://<当前主机>:3001/docs/fluke/...。 - 如部署拓扑不同,可在
src/pages/FlukeMoniPage/index.jsx中调整BASE_URL。
- 基于
目录结构
src/pages/_app.jsx:注入jquery与bootstrap.bundle,引入全局样式。_document.js:引入public/styles/bootstrap.min.css。index.jsx:占位首页。FlukeMoniPage/:主实验页面(卡片 + 模态框 + iFrame)。Control/:控制台(成绩查询与资源下载)。
src/components/ScoreQuery/:成绩查询组件(筛选、排序、导出)。Materials/:课件/教案下载组件(PDF/PPT/Word/数据)。
public/flukemoni/Ex1~Ex5/:实验静态页面(大量 HTML/CSS/JS,入口HOMEPAGE.html)。doc/:课件与教案文件(PDF/PPTX/DOCX)及部分实验数据(.flw)。scripts/、styles/:前端脚本与样式资源。
配置与约定
- 端口约定:
- 前端开发:
3002;生产:3002(Next 默认)。 - 成绩查询 API:
3002(同域不同路径);若后端独立部署,请调整ScoreQuery的getBaseUrl()。 - 文档站:
3002(跨端口新窗口打开)。
- 前端开发:
- 路由约定:使用 Next
pages路由,/FlukeMoniPage与/Control为主要入口。 - 路径别名:
jsconfig.json配置@/* → ./src/*。
后续改进建议
- 将首页改为导航页或自动跳转至
/FlukeMoniPage。 - 抽取
BASE_URL(文档站)与成绩查询 API 地址为环境变量。 - 统一使用 React 生态组件替代 jQuery 依赖(可选)。
- 清理未使用依赖(如
axios/express/cors在纯前端中未直接用到)。