一、项目效果展示
基于 CSS Grid 的响应式课程表，支持数据动态渲染与统计功能
二、项目背景
在职业教育课程体系设计中，课程表的可视化展示是教学计划落地的重要环节。传统 Excel 表格难以直观呈现课程分布与课时结构，而市面上的排课工具往往缺乏灵活性。因此，我们基于 Web 技术开发了一个轻量化课程表生成系统，实现课程数据的结构化展示与动态统计，满足院校专业建设中课程规划的可视化需求。
三、目标功能
- 数据驱动的表格渲染：通过 JSON 数据动态生成课程表，支持学分、学时的自动统计
- 响应式布局：基于 CSS Grid 实现多列自适应，解决传统表格横向滚动问题
- 多级表头设计：支持跨列合并，清晰展示课程类别、课时分配等层级信息
- 全栈数据管理：通过 Node.js+Express 搭建 API 接口，实现 MongoDB 数据库的增删改查
四、第一步：搭建静态 HTML 页面
技术选型
-
布局方案：CSS Grid（
grid-template-columns: repeat(18, minmax(120px, auto))） -
组件设计：
- 表头使用
grid-column-span实现跨列合并 - 课时分配栏嵌入子网格（
display: grid; grid-template-columns: 1fr 1fr;）
- 表头使用
-
关键 CSS：
静态页面结构
五、第二步：AI 辅助动态渲染逻辑
数据结构设计
通过 Trae 辅助设计 JSON 数据模型，包含课程基础信息与学期分布数组：
动态渲染实现
使用原生 JavaScript 遍历数据并生成 DOM 节点，关键代码：
六、第三步：全栈功能扩展
1. 搭建 Node.js API 服务
使用 Express 框架创建数据接口，支持跨域请求：
2. 集成 MongoDB 数据库
通过createDB.js脚本初始化数据库，实现数据持久化：
3. 前端数据请求
使用 Fetch API 获取远程数据，实现前后端分离：
七、值得记录的技术要点
1. CSS Grid 的跨列合并技巧
- 表头跨列：
grid-column: span 2; - 数据行合并：通过空单元格占位实现视觉合并（如 “课程类别” 列仅首行显示）
2. 大数据量渲染优化
- 使用
requestAnimationFrame拆分渲染任务
3. 全栈开发流程优化
- 通过
json-server快速 mock API（开发阶段替代 Node.js 服务） - 使用 ES6 模块管理代码依赖，避免全局变量污染
八、未来优化方向
- 可视化交互：添加课程卡片悬停提示，显示完整备注信息
- 数据导出：支持 Excel/PDF 导出，集成
xlsx与jsPDF库 - 移动端适配：引入媒体查询，实现表格折叠与手势滑动
总结
该项目通过 CSS Grid 实现了复杂表格的响应式布局，结合 Node.js 与 MongoDB 构建了完整的全栈链路。在开发过程中，AI 工具在数据模型设计、代码优化等环节提供了有效辅助，显著提升了开发效率。未来可进一步拓展为院校专属的排课管理系统，集成智能排课、进度跟踪等功能，为职业教育数字化转型提供技术支撑。
